01 HTML介绍

1. HTML介绍

1.1 HTML是什么

HTML （Hyper Text Markup Language）表示超文本标记语言
HTML 文件是一个包含标记的文本文件，标记会告诉浏览器如何显示这个页面
HTML 文件的后缀名必须是htm或者html
HTML 文件可以用一个简单的文本编辑器创建

1.2 HTML标签解释

HTML文档中，第一个标签是<html>，这个标签会告诉浏览器这是HTML文档的开始。HTML文档的最

后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。在<head>和</head>标签之间

文本的是头信息。在浏览器窗口中，头信息是不被显示的。在<title>和</title>标签之间的文本是文

档标题，它被显示在浏览器窗口的标题栏。在<body>和</body>标签之间的文本是正文，会被显示在浏

览器中。

2. HTML标签

2.1 什么是HTML标签

HTML标签就是用不同的标签实现不同的功能

2.2 HTML标签的书写格式

一般标签都是成对出现的，比如：<body></body>，但是也有单独出现的，如：<br>
第一个标签表示开始，第二个表示结束
开始标签和结束标签之间的文本是内容
标签大小写无所谓

2.3 HTML标签的属性

标签可以拥有很多属性，属性能够为页面上的HTML元素提供附加属性

举例：

正常的主体标签是：
<body></body>

但是我现在想让页面的背景变成红色，那么可以这么样写：
<body bgcolor="red"></body>

再举个例子，我想创建一个表格，但是这个表格不希望他有边框，可以这样写: 
<table border="0"></table>

3. HTML基本标签

3.1 HTML基本标签组成

HTML中最重要的标签是定义标题元素，段落和换行的标签。

举个栗子：

<html>
  <body>
    我的第一个HTML网页
  </body>
</html>

3.2 标题元素

标题元素是由标签<h1>到h6定义
<h1>定义了最小的标题元素
<h2>定义了最大的标题元素

举个栗子：

<html>
  <body>
    <p>这是第1段话</p>
    <p>这是第2段话</p>
    <p>这是第3段话</p>
    <p>这是第4段话</p>    
  </body>
</html>

3.3 段落

段落是用<p>标签定义的，HTML自动在一个段落前后各添加一个空行

举个栗子：

<html>
  <body>
    <p>这是第1段话</p>
    <p>这是第2段话</p>
    <p>这是第3段话</p>
    <p>这是第4段话</p>    
  </body>
</html>

3.4 换行

<br>会在网页上显示一个换行，无论在那都会强制换行

<html>
  <body>
	 第一行
    <br>
     换行啦啦啦
    <br>
  </body>
</html>

3.5 居中的标题

在标签中可以设置属性align="center"就会把标签的内容居中

<html>
	<body>
		<h1 align="center">这是居中的标题</h1>
		<p>这是一段文字,没什么意义,反正我也不知道自己在打什么哈哈哈</p>
	</body>
</html>

3.6 插入水平线

<hr>会在网页上显示一条水平线

<html>
	<body>
	下面是一条水平线		
    <hr>
  </body>
</html>

3.7 背景颜色

通过在标签中设置属性bgcolor="red"实现

<html>
	<body bgcolor="red">
    <h2>这是红色的背景！</h2>
	</body>
</html>

4. HTML格式

4.1 什么是HTML格式

HTML定义了很多的格式化输出 , 比如加粗斜体等

4.2 常用格式化

标签	功能
`<b></b>`	加粗
`<strong></strong>`	加粗
`<big></big>`	放大文本
`<small></small>`	缩小文本
`<i></i>`	倾斜
`<em></em>`	倾斜
`<sup></sup>`	上标
`<sub></sub>`	下标
`<s></s>`	删除线
`<del></del>`	删除线
`<u></u>`	下划线
`<ins></ins>`	下划线

4.3 格式化代码

<pre>标签会把文本内容是什么样就展示什么样

<html>
	<body>
		<b>预处理格式用来显示代码非常好</b>
		<pre>
            def func():
            	pass
		</pre>
	</body>
</html>

4.4 文本倒着输出

<bdo dir="rtl">必须设置dir属性为rtl

<html>
	<body>
		<bdo dir="rtl">
		这段文字是倒着的
		</bdo>
	</body>
</html>

5.HTML实体

5.1 什么是HTML实体

有些符号你是无法通过输入法打出来后在页面上正常显示的，这个时候就需要HTML实体来显示我们的

内容了

实体	解释
&nbsp	空格
&lt	小于
&gt	大于
&amp	and符合
&quot	引号

6. HTML链接

6.1 什么是HTML链接

就是通过点击链接跳转到其他页面或其他的网站 , 通常用<a>标签实现跳转 , 在<a>标签的herf属性

写上需要跳转的具体地址即可。

a标签的属性

href 要链接的地址
- 为空时表示一个空连接，代表自身
- #top代表回到顶部，我们可以定义一个空标签，来进行定位
```
<h6 id="top"></h6>
<a href="#top">回到顶部</a>
```
target 在哪里打开页面
- _self 当前页面（默认值）
- _blank 新的空白页
title 鼠标悬浮在标签上时现实的文字

6.2 跳转到其他本地文件

<!-- 前提是在当前目录下有下一页.html这个文件-->
<html>
  <body>
    <a href="下一页.html">点击跳转</a>到其他页面<br>
  </body>
</html>

6.3 跳转到其他网站

<html>
  <body>
    <a href="https://www.baidu.com">点击跳转</a>到其他网站<br>
  </body>
</html>

6.4 跳转到指定位置

<html>
  <body>
    <a href="#c3">点击跳转到第三章</a>
     <h1>第一章</h1>
     <h1>第二章</h1>
     <h1 id="c3">第三章</h1> <!--a标签也可以写name属性为c3-->
     <h1>第四章</h1>
     <h1>第五章</h1>
     <h1>第六章</h1>
  </body>
</html>

7. HTML框架

7.1 什么是HTML框架

使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。
这样的HTML文档被称为框架页面，它们是相互独立的。

7.2 标签解释

frameset标签

1.<frameset>标签定义了如何将窗口拆分成框架。
2.每个frameset标签定义了一组行和列。
3.行/列的值指明了每个行/列在屏幕上所占的大小

frame标签

<frame>标签定义了每个框架中放入什么文件。

7.3 垂直分栏

<html>
<frameset cols="25%,75%">
	<frame src="index1.html">
	<frame src="index2.html">
</frameset>
</html>

0.通过cols的值进行分栏
1.第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。
2.页面“index1.html”被放在第一个分栏中，“index2.html”被放在第二个分栏中。

7.4 水平分

<html>
<frameset rows="25%,50%,25%">
	<frame src="index1.html">
	<frame src="index2.html">
    <frame src="index3.html">
</frameset>
</html>

0.通过rows的值进行分栏
1.第一个被设置成窗口高度的25％，第二个被设置成窗口高度的50％,第三个被设置成窗口高度的25％。
2.页面“index1.html”被放在第一个分栏中，“index2.html”被放在第二个分栏中,“index3.html”被放在第三个分栏中。

7.5 不可改动的分栏

<html>
<frameset rows="50%,50%">
    <!--noresize="noresize"设置分栏不可改动-->
	<frame noresize="noresize" src="frame_a.htm">
	<frameset cols="25%,75%">
		<frame noresize="noresize" src="frame_b.htm">
		<frame noresize="noresize" src="frame_c.htm">
	</frameset>
</frameset>
</html>

7.6 使用导航框架跳转到指定章节

index.html

<html>
<frameset cols="200,*">
	<frame src="frame_linksection.html">
	<frame src="frame_a.html" name="showframe">
</frameset>
</html>

frame_linksection.html

<a href ="frame_a.html" target ="showframe">Frame a</a><br>
<a href ="frame_b.html" target ="showframe">Frame b</a><br>
<a href ="frame_c.html" target ="showframe">Frame c</a><br>

frame_a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>aaaaa</h1>
</body>
</html>

frame_b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>bbbbbbbbbbb</h1>
</body>
</html>

frame_c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>cccccccccccc</h1>
</body>
</html>

8. HTML表格

8.1 什么是HTML表格

表格就是你认为的那个表格

table标签

tr标签，表示一行
- th标签，表示表头，会加粗
- td标签，表示表格数据

8.2 有边框的表格

<html>
  <body>
	<table border="1">
		<tr>
			<td>第1行第1列</td>
			<td>第1行第2列</td>
		</tr>
		<tr>
			<td>第2行第1列</td>
			<td>第2行第2列</td>
		</tr>
	</table>
	</body>
</html>

table属性：

border 设置表格边框
cellspacing 设置表格单元格间隔

9. HTML列表

9.1 什么是列表

HTML支持有序、无序和自定义列表。

9.2 无序列表

<html>
<body>
<h4>无序列表</h4>
<ul>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ul>
</body>
</html>

无序列表属性type,改变列表项前端样式

circle 空心圆点
square 方块

9.3 有序列表

<html>
<body>
<h4>有序列表</h4>
<ol>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ol>
</body>
</html>

有序列表属性type,改变序号种类

默认为1，表示阿拉伯数字

10. HTML表单

10.1 什么是HTML表单

HTML表单用来选择不同种类的用户输入。用input标签显示输入框

input标签，输入框

input的属性：
- value属性，提交的数据的键值对中的值
- name属性，提交的数据的键值对中的键
- type属性，修改输入框的种类
  - text 文本输入框
  - password 密码输入框
  - submit 提交按钮，会提交表单。默认按钮上的文字为提交，可通过input的value属性修改
  - radio 单选框，几个单选框起相同的name，表示为一组，互斥。添加checked属性表示默认选中
  - checkbox 多选框，添加checked属性表示默认选中
  - datetime-local 日期框
  - file 上传文件选择框
label标签，和input输入框进行关联。label的for属性的值和input的id值相同，两个标签会产生关联，点击label标签，输入框也会聚焦

10.2 文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="">
    <p>
        <label for="username">用户名:</label>
        <input type="text" id="username">
    </p>
    <p>
        <label for="phonenum">手机号:</label>
        <input type="password" id="phonenum">
    </p>
</form>
</body>
</html>

10.3 密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="">
    <p>
        <label for="username">用户名:</label>
        <input type="text" id="username" name='username'>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name='password'>
    </p>
</form>
</body>
</html>
<!-- 表单提交的数据是username="用户输入的账号"和password="用户输入的密码"-->

10.4 单选按钮

<form>
	<input type="radio" name="sex" value="male">男
	<br>
	<input type="radio" name="sex" value="female">女
</form>

10.5 复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
	<input type="checkbox" name="bike" checked="">自行车 默认选中
	<br>
	<input type="checkbox" name="car">小汽车
	<input type="checkbox" name="big">大汽车
</form>
</body>
</html>

10.6 下拉框

select标签，下拉列表，内部包裹option标签表示下拉选项。默认选中selected。可以通过设置multiple属性多选

下拉列表。

<html>
<body>
<form action="" method="" enctype="application/x-www-form-urlencoded">
    <select name="gender" id="">
        <option value="male">男</option>
        <option value="female">女</option>
    </select>
</form>
</body>
</html>

10.7 文本框

<html>
<body>
    <p>下面是一个文本输入框</p>
    <textarea rows="10" cols="30">请输入你的内容</textarea>
</body>
</html>

10.8 按钮

按钮的文本内容就是input标签的value值

<html>
<body>
<form>
    <input type="button" value="点我一下">
</form>
</body>
</html>