提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
1.HTML概述
1.1 什么是HTML
- HTML 的全称叫超文本标记语言（Hyper Text Markup Language），是一种标识性的语言。它包括一系 列标签．和HTML命令。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
1.2 HTML相关开发工具
前端的开发工具有很多，现在列举几个比较常见的
- HbuilderX 国内开发的一款软件，使用频率非常高，后期可以使用它开发 uni-app
- VSCode 全称叫 Visual Studio Code ,是微软出品的一个开发工具，简单好用，跨平台。这也是 目前程序员使用得非常多的一个软件
- Sublime Text 国外开发的一款软件，现在是第3个版本，要钱！
- Dream Weaver 简称 DW ，这款软件是 Adobe 公司的，一般UI设计师用得比较多
- WebStorm 软件，功能强大，操作也简单，要钱！
在我们目前学习阶段，我们前期使用 HBuilderX 进行开发，后期会转向 VSCode
1.3 标签的概述
HTML代码是通过标签语言构成的，其中有一下几个特点：
标签大多数都是成双成出现的，还有部分是单个出现的 那是因为网页当中的标签是分为两种类型：
单标签
<!--单标签只有开始标签没有结束标签，单开始标签中用/结束，也可以省略‘/’不写--> <开始标签/> <开始标签>双标签
<!--双标签有开始标签和结束标签--> <开始标签>内容</开始标签>
标签可以添加属性。属性是写在开始标签中的
<开始标签 属性1 = "属性值1" ...>内容</开始标签> <开始标签 属性1 = "属性值1" ... /> <开始标签 属性1 = "属性值1" ... >标签是可以进行嵌套的
<标签1> <标签2> ... </标签2> <标签3> ... </标签3> </标签1>标签的嵌套也是成双成对的出现的，不能交叉的嵌套.
2.HTML网页基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 这是注释 -->
<title>第一个网页</title>
</head>
<body>
</body>
</html>
解释：
- 它是一个命令，这个地方用于声明当前的文档是一个HTML5的文档
- DOC :全称叫 document
- TYPE :类型的意思
- 这一对标签是网页的根标签，可以把网页当成是一个人
- 这一对标可以认为是网页的头部标签
- 这一对标签可以认为是网页的身体部分
- 网页的标题，也就相当于人的名子
- 它是一个附加的信息，其实有很多属性， charset 这个属性是用于设 置当前网站的字符形式，而 utf-8 则代表的是中文。如果没有这行代码 ，网页的中文就会出现乱码
- 在网页里，这是HTML语言的注释，它不会显示在页面，是一个代码说明性的东西
3.HTML基础标签
3.1 HTML元素
概述 : 是指从开始标签到结束标签中的内容
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
语法格式
<标签>
元素内容
</标签>
3.2 HTML属性
概述 : HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性是以键值对形式出现的
- 标签中可以拥有一个或多个属性
- 属性仅存在开始标签
语法格式
<开始标签 属性1 = "属性值1" ...>内容</开始标签>
<开始标签 属性1 = "属性值1" ... />
<开始标签 属性1 = "属性值1" ... >
3.3 标题标签
概述 : HTML提供了 <h1>~<h6>的6个等级的标题
属性： align属性 水平排列方式left\center\right
语法格式
<h1 align="center">一号标题</h1>
<h2 align="right">二号标题</h2>
<h3 align="left">三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
注意事项：标签中的数字越大，标题的文字越小
3.4 字体标签
概述 : 定义字体样式的标签
属性(可选) :
- color : 文字的颜色
- size : 文字的大小取值在1-8
- face : 规定文本的字体
语法格式
<font [color="颜色取值"] [size = "文字的取值"] [face = "字体"]>文字内容</font>
代码演示
<font size="1">字体大小</font>
<font size="2" color="green">字体大小+颜色</font>
<font size="3" color="red" face="黑体">字体大小+颜色+字体格式</font>
3.5 段落标签
概述 : 定义一个段落的标签。
属性(可选) : align 属性 : 默认是左对齐 取值有center\left\right
语法格式
<p [align = "对齐方式"]>内容元素</p>
代码演示
<p align="center">静夜思</p>
<p align="center">床前明月光,疑是地上霜。</p>
<p align="center">举头望明月,低头思故乡。</p>
3.6 特殊文字样式的标签
语法格式
<!--文字加粗-->
<b>文字内容</b>
<strong>文字内容</strong>
<!--文字斜体-->
<i>文字内容</i>
<em>文字内容</em>
<cite>文字内容</cite>
<!--文字加下划线-->
<u>文字内容</u>
<ins>文字内容</ins>
<!--文字删除线-->
<del>文字内容</del>
<strike>文字内容</strike>
<!--上标与下标-->
<sup>上标</sup>
<sub>下标</sub>
代码演示
城南以南不再南，<b>城北以北不再美</b>
<hr>
城中从此不在挤，<strong>心里从此再无你</strong>
<hr>
城东以东不再空，<i>城西以西不再喜</i>
<hr>
床前明月光， <em>疑是地上霜</em>
<hr>
举着望明月，<cite>低头思故乡</cite>
<hr>
东边日出西边雨，<u>道是无情却有情</u>
<hr>
春蚕到死丝方尽，<ins>蜡炬成灰泪始干</ins>
<hr>
<strike>原价：￥998元</strike> ，现价：98元
<hr>
<del>原价：￥998元</del>，现价：98元
<hr>
我爱<sub>北京</sub>天安门，天安门上<sup>太阳升</sup>
<hr >
x<sup>2</sup>+y<sup>2</sup> =z<sup>2</sup>
<hr>
log<sub>2</sub>10=x
3.7 特殊文本内容
版权标志 ©
商标标志 ®
度数标志 °
小于符号 <
大于符号 >
空格符号
3.8 换行标签
概述 : 将文本内容进行换行处理
语法格式 : <br/>
代码演示
床前明月光,<br/>疑是地上霜。<br/>举头望明月，<br/>低头思故乡。<br/>
3.9 img标签
概述 : 用来在网页中插入一张图片
属性 :
- src : 图片的路径，该路径可以是网络路径也可以是本地路径（必选）
- width : 图片的宽度
- hight : 图片的高度
- alt : 图片描述，对于用来替换加载失败的图片
语法格式
<img src = "路径" [width = "值"] [hight = "值"] [alt = "图片描述"]></img>
<img src = "路径" [width = "值"] [hight = "值"] [alt = "图片描述"]/>
代码演示
<img src="img/1.png" alt="图片不见了" width="100" height="80"/>
3.10 超链接标签
概述 : 用来访问其它页面，跳转某个位置
属性
- href : 跳转的地址/路径（必选）
- target : 跳转的方式
_blank 、_parent 、_self 、_top
语法格式
<a href = "跳转路径" [target = "跳转方式"] >描述</a>
代码演示
<a href="www.baidu.com" target="_blank">百度一下</a>
3.11 map标签
概述 : 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像
代码演示
<img src="img/1.png" border="10" usemap="#map1" width="500" height="350">
<map id="map1" name="map1">
<!--
shape形状，rect全称rectangle矩形，coords坐标
-->
<area shape="rect" coords="0,0,200,150" href="http://www.baidu.com">
<!--
circle的坐标是圆心与半径
-->
<area shape="circle" coords="300,300,50" href="http://www.iqiyi.com"
target="_blank">
<area shape="poly" coords="250,0,500,350,0,350"
href="http://www.youku.com" target="_blank">
</map>
描述
- img 标签通过 usemap 属性与 map 标签进行结合，使用的是 map 的标签的 id 和 name 属性
- map 标签下面有 area 标签，它指区域
- shape 属性设置区域的形状，它的形状主要有下面三种 rect 全称叫 rectangle 矩形 circle 圆形 poly 全称叫 polygon 多边形
- coords 属性根据形状设置坐标值
- href 属性与 target 属性则和 a 标签保持一致
3.12 iframe标签
概述 : iframe全称叫 insert frame ，它可以向一个网页里面嵌入另一个网页
属性 :
- align 属性：
left\right\top\middle\bottom - width : 宽度
- hight : 高度
- src : 网页的路径(必选)
- scrolling : 是否显示滚动条
yes\no\auto
语法格式
<iframe src = "路径" [align = "值"] [width = "值"] [hight = "值"] [scrolling = "是否开启"]></iframe>
代码演示
<iframe src="demo02.html" height="300px" width="300px" align="center" scrolling="atuo"></iframe>
3.13 进度条标签
概述 : 用来创建一个进度条
属性 :
- max : 规定一共需要完成多上任务量
- values : 已经完成的任务量
语法格式
<progress value="已经完成的任务量" max="规定完成的任务量"></progress>
代码演示
<progress value="22" max="100"></progress>
3.14 跑马灯/滚动内容
概述 : 滚动元素内容
属性 :
- marquee 标签是跑马灯效果的标签
- bgcolor 设置背景颜色
- width/height 设置宽度与高度
- direction 设置方法，它的属性值有 left/right/up/down
- behavior 设置行为，有 scroll/slide/alternate 三种
- scrollamount 设置每次滚动的大小
- scrolldelay 设置每次滚动的延时
代码演示
<marquee bgcolor="背景颜色" direction="文字滚动的方向" width="值" height="值"
behavior="滚动方式" scrollamount="滚动大小" scrolldelay="延迟时间">
内容元素;
</marquee>
代码演示
<marquee bgcolor="red" direction="left" width="1200" height="300"
behavior="scroll" scrollamount="3" scrolldelay="1">
<font size="7" color="white">众志成城，抗击疫情</font>
</marquee><progress value="22" max="100"></progress>
<marquee bgcolor="green" direction="left" width="1200" height="300"
behavior="scroll" scrollamount="3" scrolldelay="1">
<img src="img/1.png" width="300px" height="200px" >
</marquee><progress value="22" max="100"></progress>
4.列表元素
4.1 无序列表
概述 : 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于 <li>。
属性 : type 属性 符号类型 disc/square/circle
代码格式
<ul [type = "符号类型"]>
<li>内容1</li>
...
<li>内容n</li>
</ul>
代码演示
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
4.2 有序列表
概述 : 标签定义有序列表。
属性 :
| reversed | reversed | 规定列表顺序为降序。(9,8,7…) |
|---|---|---|
| start | number | 规定有序列表的起始值。 |
| type | 1AaIi | 规定在列 |
语法格式
<ol [type = "符号类型"] [start = "number"] [reversed]>
<li>内容1</li>
...
<li>内容n</li>
</ol>
代码演示
<ol type="1" reversed start="2">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
4.3 自定义列表
概述 : 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
代码演示
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
4.4 详细内容（可扩展标签）
<details>
<summary>这是新标签</summary>
<p>这是一个段落</p>
<font>这是一个字体标签</font>
<h2>这是一个标题标签</h2>
</details>
<hr>
<details>
<summary>男生</summary>
<ul>
<li>胡哥</li>
<li>春哥</li>
<li>发哥</li>
</ul>
</details>
5.表格元素
概述 : 格由<table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
table表格相关属性
| align | leftcenterright | 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。 |
|---|---|---|
| bgcolor | rgb(x,x,x)#xxxxxxcolorname | 不赞成使用。请使用样式代替。规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding | pixels*%* | 规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels*%* | 规定单元格之间的空白。 |
| frame | voidabovebelowhsideslhsrhsvsidesboxborder | 规定外侧边框的哪个部分是可见的。 |
| rules | nonegroupsrowscolsall | 规定内侧边框的哪个部分是可见的。 |
| summary | text | 规定表格的摘要。 |
| width | *%*pixels | 规定表格的宽度。 |
tr相关属性
| align | rightleftcenterjustifychar | 定义表格行的内容对齐方式。 |
|---|---|---|
| bgcolor | rgb(x,x,x)#xxxxxxcolorname | 不赞成使用。请使用样式取而代之。规定表格行的背景颜色。 |
| char | character | 规定根据哪个字符来进行文本对齐。 |
| charoff | number | 规定第一个对齐字符的偏移量。 |
| valign | topmiddlebottombaseline | 规定表格行中内容的垂直对齐方式。 |
td相关属性
| 属性 | 值 | 描述 |
|---|---|---|
| abbr | text | 规定单元格中内容的缩写版本。 |
| align | leftrightcenterjustifychar | 规定单元格内容的水平对齐方式。 |
| axis | category_name | 对单元进行分类。 |
| bgcolor | rgb(x,x,x)#xxxxxxcolorname | 不赞成使用。请使用样式取而代之。规定单元格的背景颜色。 |
| char | character | 规定根据哪个字符来进行内容的对齐。 |
| charoff | number | 规定对齐字符的偏移量。 |
| colspan | number | 规定单元格可横跨的列数。 |
| headers | header_cells’_id | 规定与单元格相关的表头。 |
| height | pixels*%* | 不赞成使用。请使用样式取而代之。规定表格单元格的高度。 |
| nowrap | nowrap | 不赞成使用。请使用样式取而代之。规定单元格中的内容是否折行。 |
| rowspan | number | 规定单元格可横跨的行数。 |
| scope | colcolgrouprowrowgroup | 定义将表头数据与单元数据相关联的方法。 |
| valign | topmiddlebottombaseline | 规定单元格内容的垂直排列方式。 |
| width | pixels*%* | 不赞成使用。请使用样式取而代之。规定表格单元格的宽度。 |
定义格式
<table [属性列表]>
<tr [属性列表]>
<th [属性列表]>列名1</th>
...
<th [属性列表]>列名n</th>
</tr>
...
<tr [属性列表]>
<td [属性列表]>内容1</td>
...
<td [属性列表]>内容n</td>
</tr>
</table>
代码演示
<table border="1" width="400px" height="10px">
<tr>
<th rowspan="2" align="center">学号</th>
<th colspan="3" align="center">个人信息</th>
<th colspan="2" align="center">入学信息</th>
</tr>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>班级</td>
<td>入学年月</td>
</tr>
<tr>
<td>001</td>
<td>张勇</td>
<td>男</td>
<td>18</td>
<td>20020101</td>
<td>2000年9月</td>
</tr>
<tr>
<td>002</td>
<td>王芳</td>
<td>女</td>
<td>17</td>
<td>20020101</td>
<td>2000年9月</td>
</tr>
</table>
6.表单元素
6.1 表单form
概述 : 表单用于搜集不同类型的用户输入。
相关属性 :
| action | URL | 规定当提交表单时向何处发送表单数据。 |
|---|---|---|
| enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
| method | getpost | 规定用于发送 form-data 的 HTTP 方法。 |
| name | form_name | 规定表单的名称。 |
| rel | external help license next nofollow noopener noreferrer opener prev search | 规定链接资源和当前文档之间的关系。 |
6.2 表单元素input
| 属性 | 值 | 描述 |
|---|---|---|
| accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
| align | leftrighttopmiddlebottom | 不赞成使用。规定图像输入的对齐方式。 |
| alt | text | 定义图像输入的替代文本。 |
| checked | checked | 规定此 input 元素首次加载时应当被选中。 |
| name | field_name | 定义 input 元素的名称。 |
| placeholder | text | 规定帮助用户填写输入字段的提示。 |
| src | URL | 定义以提交按钮形式显示的图像的 URL。 |
| type | button、checkbox、file、hidden、image、password、radio、reset、submit、text | 规定 input 元素的类型。 |
| value | value | 规定 input 元素的值。 |
| width | pixels% | 定义 input 字段的宽度。（适用于 type=“image”） |
6.3 下拉列表
概述 : HTML定义下拉列表的是select标签
属性 :
- select 标签与 option 标签结合在一起使用
- optgroup 标签可以将多个选项进行分组， label 属性用于设置分组的名称
- selected 属性用于默认选中某个选项
- multiple 属性用于设置多选
- size 属性用于设置展示的 option 的个数
语法格式
<select [属性列表]>
<optgroup [属性列表]>
<option [属性列表]>内容1</option>
...
<option [属性列表]>内容n</option>
</optgroup>
...
<optgroup [属性列表]>
<option [属性列表]>内容1</option>
...
<option [属性列表]>内容n</option>
</optgroup>
</select>
代码示例
<select multiple size="9">
<optgroup label="南方">
<option>湖北省</option>
<option>广东省</option>
<option>福建省</option>
<option selected>广西省</option>
</optgroup>
<optgroup label="北方">
<option>河北省</option>
<option>黑龙江省</option>
<option>内蒙古省</option>
<option>吉林省</option>
</optgroup>
</select>
6.4 综合案例
编写出如下表单
代码演示
<form action="" method="get">
<table border="1" cellspacing="0" width="300px" hight="500px">
<tr>
<th colspan="2" align="center">注册用户</th>
</tr>
<tr>
<td align="center">用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td align="center">密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td align="center">性别</td>
<td>
<input type="radio" name="gander" required>男
<input type="radio" name="gander">女
</td>
</tr>
<tr>
<td align="center">城市</td>
<td>
<select>
<optgroup label="城市">
<option>武汉</option>
<option>上海</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align="center">爱好</td>
<td>
<input type="checkbox" name="hobbys">篮球
<input type="checkbox" name="hobbys">乒乓球
<input type="checkbox" name="hobbys">足球
</td>
</tr>
<tr>
<td align="center">图片</td>
<td>
<input type="file" name="headpic">
</td>
</tr>
<tr>
<td align="center">简介</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>