img标签
功能：告诉浏览器需要显示一张图片;
-
参数：width、height、src、title、alt；
- width：设置图片的宽度；
- height：设置图片的高度；
- src：图片源（也就是图片的路径，便于浏览器查找）；
- title：鼠标悬停到该图片要显示的标题；
- alt：英文alternate的缩写，告诉浏览器如果src里的图片不存的时候用什么图片来替换，也就是占位符。
代码格式：
-
注意点：
- img标签不会独占一行；
- 同时设置width和height有可能会造成图片拉伸变形，单独设置莫一项属性会让图片等比例缩放；
- 如果没有设置width和height属性，系统会按图片的原始尺寸显示。
-
路径问题：通过src属性赋值有两种方式
- 相对路径：从 .html 文件所在路径下查找我们称之为相对路径；
- 同级：图片和 .html 文件存储在同一个文件中，格式为：
<img src="QRCode.png>。 - 下级：存储图片的文件夹在 .html文件所在文件夹的子目录，格式为：
。 - 上级：存储图片的文件夹是 .html 的上级目录，格式为：
<img src="../QRCode.png>。 - 在mac系统下格式为：
<img src="./QRCode.png>。
- 同级：图片和 .html 文件存储在同一个文件中，格式为：
- 相对路径：从 .html 文件所在路径下查找我们称之为相对路径；
绝对路径：每次都从指定的路径进行查找称之为绝对路径，格式为
<img src="C:\Users\guoyong\Desktop\QRCode.png"，企业开发中不会使用绝对路径。
br标签
- 功能：换行
- 注意点：
-
<br>标签可以连续使用，使用了多少该标签就会换多少行； -
<br>标签的语意是不另起一段换行（也就是说该标签是在段落内的换行），所以在企业开发中很少使用<br>标签。
-
a标签
功能：用于页面与页面之间的跳转（添加超链接）；
-
属性：href，title，target：
- href：必有属性，标志着要跳转到的目的地，可以为网络URL，也可以为本地文件路径或者本页锚点；
- title：合同img的title属性一样，鼠标悬停的时候显示的标题；
- target：取值范围 _self 和 _blank，专门用于控制如何跳转，_self 为当前选项卡跳转，_blank 为新建选项卡跳转。
格式：
<a href="指定需要跳转的目标URL">展现给用户查看的内容</a>
- 注意点：
1. 可以为图片添加超链接，格式为：
<a href="指定需要跳转的目标URL">
</a>
- 一个a标签必须有 href 属性，否则浏览器无法获取需要跳转到什么地方；
- 如果通过a标签的 href 属性指定一个URL地址，必须在前面加上
http://或者https://,否则无法跳转；- a标签的 href 属性不但可以指定网络跳转，也可以指定本地路径跳转。
- 锚点，代码示范：
<!--跳转到本页锚点-->
<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>
<!--跳转到链接页锚点-->
<a href="锚点的测试界面.html#bottom">跳转到锚点测试界面</a>
base标签
- 功能：专门用来指定页面中超链接的跳转方式，代码示范
<base target="_blank"> - 注意点：
- 必须写在 head 的开始标签和结束标签之间；
- 如果在 base 标签和 a 标签中同时设置属性 target 那么浏览器会默认按照 a 标签的属性值执行。
假链接
- 概念：点击之后不执行跳转的链接，称之为假链接；
- 应用场景：无法确定跳转链接的时候用假链接代替（例如开发前期其他页面没有写出来的时候）；
- 假链接的格式：
<a href="#">点我呀1</a>
<a href="javascript:">点我呀2</a>
- 两者的区别在于使用 # 的假链接点击后会使页面滚回到最顶端，使用 javascript：的假链接什么都不做。
无序列表（unordered list）（使用最多）
- 功能：为一组数据添加列表语意，并且这组数据没有先后之分，例如：中国城市列表，班级同学名称列表等等。
- 格式：
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>重庆</li>
<li>天津</li>
</ul>
ul为unordered list的缩写，ul 里的 li 标签为 list item 的缩写。
-
注意点：
- ul 标签是用来给一组数据添加列表语意的，而不是为了添加小圆点的；
- ul 标签和 li 标签是一个整体，所以一般情况下 ul 标签和 li 标签不会单独出现；
- 由于 ul 和 li 标签是一个组合，所以 ul 标签中不推荐包含其他标签，也就是说在 ul 标签中只会看到 li 标签；
- li 标签中的内容可能会很复杂，所以可以在 li 标签中添加其他的标签来丰富界面。
-
应用场景
- 新闻列表；
- 商品列表；
- 导航条
、、、、
有序列表（ordered list）（使用最少）
- 功能：为一组数据添加列表语意，并且这组数据有先后之分，例如：
- 格式：其他用法与 ul 都差不多，也就是应用场景和注意点都和ul差不多
<ol>
<li>李代沫 - 到不了</li>
<li>李代沫 - 骨子里的我</li>
<li>Siz Khalifa/Charlie Puth - See You Again</li>
<li>关喆 - 领悟</li>
<li>薛之谦 - 方圆几里</li>
<li>A-Lin - 给我一个理由忘记</li>
<li>周杰伦 - 黄金甲</li>
<li>薛之谦 - 意外</li>
<li>薛之谦 - 你还要我怎样</li>
<li>梁静茹 - 爱久见人心</li>
</ol>
- 网页效果：
有序列表
定义列表（definition list）（次于无序列表）
- 功能：为一组数据添加列表语意，先通过 dt 标签定义列表中的所有标题，然后再通过 dd 标签给每个标题添加描述信息；
- 格式：
<dl>
<dt>北京</dt>
<dd>中国的首都</dd>
<dt>上海</dt>
<dd>富人的集中地</dd>
</dl>
dt 是英文 Definition Title 的缩写，所以 dt 的含义就是用来定义列表中的标题
dd 是应为 Definition Description 的缩写，所以 dd 的含义就是定义标题对应的描述
-
应用场景
- 网站尾部的相关信息
- 做图文混排
-
注意点：
- 和 ul/ol 一样，dl 和 dt/dd 是一个整体，一般情况下不会单独出现；
- 和 ul/ol 一样，dl 和 dt/dd 是一个整体，所以建议 dl 中只放 dt 和 dd 标签；
- 一个 dt 可以没有对应的 dd 标签，也可以有多个 dd 标签，无论没有或者多个 dd 标签都不推荐使用，推荐使用一个 dt 对应一个 dd；
- 当需要丰富页面的时候，可以在 dt 或者 dd 里继续添加其他标签。
表格标签
- 功能：为一堆数据添加表格语意。表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为最为清晰的展现形式。
- 格式：table 标签代表整个表格，tr 表示表格中的一行，td 代表单元格。
<table>
<tr>
<td><td>
</tr>
</table>
-
属性：
-
width / height：可以给 table 和 td 标签使用。
- 表格的尺寸默认是根据内容的尺寸自动调整的，也可以手动给 table 设置 width / height 属性的方式手动来调整表格的宽度和高度；
- 给 td 标签设置 width / height 属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽高；
-
align / valign：
-
align：水平对齐 可以为 table / tr / td 标签使用。
- 给 table 标签设置 align 属性，可以控制表格在水平方向的对齐方式；
- 给 tr 标签设置 align 属性，可以控制当前行中所有单元格内容的水平方向的对齐方式；
- 给 td 标签设置 align 属性，可以控制当前单元格中内容在水平方向的对齐方式。
-
valign：垂直对齐 只能为 tr 和 td 标签使用。
- 给 tr 标签设置 valign 属性，可以控制当前行中所有单元格内容的垂直对齐方式；
- 给 td 标签设置 valign 属性，可以控制当前单元格内容的垂直对齐方式。
-
-
cellspeacing / cellpadding
- cellspeacing：外边距属性，只能给 table 标签设置该属性，表示单元格与单元格之间的距离，默认情况下单元格与单元格之间的距离为2px；
- cellpadding：内边距属性，也是只能给 table 标签设置该属性，表示单元格中内容与单元格边框之间的间隙，默认值为 1。
-
-
表格的结构：由于表格中存储的数据比较复杂，为了方便管理和阅读以及提升语意，所以一般会对表格中存储的数据进行分类，可以分为以下四类。
- 表格的标题
- 表格的表头信息：表头信息不受表格整体高度的影响，修改需要用css
- 表格的主体信息
- 表格的页尾信息：表尾信息不受表格整体高度的影响，修改需要用css
- 表格的完整格式：
<table>
<caption>
<h2>这是里表格的标题</h2>
</caption>
<thead>
<tr>
<th>这里是每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>这里是表格中的数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>这里是表格末尾信息</td>
</tr>
</tfoot>
</table>
- 注意点：
table 标签有一个边框(border)属性，这个属性决定了边框的宽度，默认情况下宽度为0，所以默认情况下看不到表格；
table 标签和 ul / ol / dl 标签一样，它是一个组合标签，所以 table、tr、td 要么一起出现，要么就一起不出现，不会单独出现；
如果 tr 标签和 td 标签 同时设置了 align 属性，那么单元格中的内容会根据 td 中属性的值进行调整；
如果 tr 标签和 td 标签 同事设置了 valign 属性，那么单元格中的内容会根据 td 中属性的值进行调整。
caption 标签
- 功能：表格标题标签，在表格标签中提供的专门设置表格标题的标签，只要将标题写在 caption 标签中，那么此标题就会默认相对表格宽度居中；
- 格式：
<table>
<caption>
<h2>此处显示为表格的标题</h2>
</caption>
</table>
- 注意点：
- caption 标签一定要写在 table 标签里面，否则无效；
- caption 标签一定要紧跟在 table 标签的后面。
th 标签
- 功能：表格标签中专门提供的用来存储每一列标题的标签。只要将当前列的标题写在该标签中，字体会默认居中加粗。
- 格式：
<tr bgcolor="#a9a9a9">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近7日</th>
<th>相关链接</th>
</tr>
- 单元格合并
- 水平方向单元格合并
- 在 td 标签里添加属性 “colspan = 合并单元格数量”
- 格式：
<table border="0.5" bgcolor="black" width="300" height="200" cellspacing="1">
<tr bgcolor="white">
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td ></td>
<td></td>
</tr>
</table>
- 垂直方向单元格合并
- 给 td 标签里添加属性 "rowspan = 合并单元格数量"
- 格式：
<table border="0.5" bgcolor="black" width="300" height="200" cellspacing="1">
<tr bgcolor="white">
<td rowspan="2"></td>
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
- 注意点：
- 由于把某一个单元格当做了多个单元格来看待，所以会多出来一部分单元格，需要删掉多出来的单元格；
- 单元格永远默认向后或者向下合并，无法更改；
表单标签(重点)
- 什么是表单？
- 专门用来收集用户信息的 html 页面。
- 什么是表单元素
- 在 html 中，标记/标签/元素都是指 html 的标签。例如
<a>a标签 / a标记 / a元素。表单元素就是是 html 中比较特殊的一些标签，在浏览器中所有的表单元素都有特殊的外观和默认的功能。
- 在 html 中，标记/标签/元素都是指 html 的标签。例如
- 表单的格式：
<form>
具体的表单标签
</form>
- 常见的表单元素
- input 标签：input 标签有一个 type 属性，该属性有很多类型的取值，取值的不同就决定了 input 标签的功能和外观。
- 属性：
- type
- text ：定义明文输入框
- password ：定义暗文输入框e
- radio ：定义单选框，可通过设置 checked 属性设置默认选中。
- checkbox ：定义多选框，可通过设置 checked 属性设置默认选中。
- button ：定义普通按钮，可以设置通过 value 属性设置按钮的标题。
- image ：定义图片按钮，可以添加 src 属性加载图片，用法痛 img 标签一样。
- reset ：定义重置按钮，用于清空表单中已经填写好的数据。有默认的标题，可通过设置 value 属性进行更改。
- submit ：定义提交按钮，将表单中已经填写好的数据提交到远程服务器。
- hidden ：定义隐藏域，配合提交按钮将一些数据隐式的提交到服务器
- email ：定义自动校验文本框内容是否符合邮箱格式。H5 新增属性，大部分浏览器不支持。
- url ：定义自动校验文本框内容是否符合 url 格式。H5 新增属性，大部分浏览器不支持。
- number ：定义只能输入阿拉伯数字的文本框。H5 新增属性，大部分浏览器不支持。
- date ：定义时间选择器文本框。H5 新增属性，大部分浏览器不支持。
- color ：定义颜色选择器。H5 新增属性，大部分浏览器不支持。
- value：设置默认值
- label：设置文字和输入框进行绑定
- 绑定格式：
- type
<!--第一种方式：官方推荐-->
<label for="account">账号：</label><input type="text" id="account">
<!--第二种方式-->
<label>
账号：<input type="text">
</label>
- 注意点
- 单选框默认情况下单选框不会互斥，设置单选框互斥的方法为每一个单选框都添加一个相同的属性 name ，该属性值必须保持一致。
- 设置单选框默认状态下选中，给 input 标签添加 checked 属性。
- 在 HTML 中如果属性的取值和属性的名称一致，可以省略取值只写一个，但在 XHTML 必须写上取值，所以在企业开发中最好不要省略取值。
- 要想把表单中的数据提交到远程服务器，必须具备两个条件：
- 需要给 form 表填添加一个 action 属性，通过这个 action 的值指定需要提交到的服务器地址；
- 需要给每一个需提交的表单项添加一个 name 属性
datalist标签（了解）
- 功能：为输入框绑定待选项
- 格式：
<label for="carType">请输入您的车型:</label><input type="text" id="carType" list="cars">
<datalist id="cars">
<option>宝马</option>
<option>宝莱</option>
<option>奔驰</option>
<option>宾利</option>
<option>奥迪</option>
<option>路虎</option>
</datalist>
-
网页效果：
datalist标签
select标签
- 功能：用于定义下拉列表；
- 格式：
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>海淀区</option>
<option>丰台区</option>
<option>通州区</option>
<option>昌平区</option>
<option>顺义区</option>
</optgroup>
<optgroup label="广州">
<option>海珠区</option>
<option>越秀区</option>
<option>天河区</option>
<option>黄浦区</option>
</optgroup>
</select>
-
网页效果:
select标签效果 -
注意点：
- 下拉列表不能输入内容，但可以直接在列表中选择内容；
- 可以通过给 option 标签内添加一个 selected 属性设置下拉列表的默认值；
- 可以通过给 option 标签包裹一层 optgroup 标签来给下拉列表中的数据分类。
textarea标签
- 功能：定义一个多行输入框
- 格式：
<textarea cols="5" rows="5">
这里可以随意输入文字用来设置输入框的默认值
</textarea>
- 网页效果：
textarea标签网页效果
- 注意点：
- 默认情况下输入框可以无限换行；
- 默认情况下输入框有默认的宽度和高度；
- 可以通过 cols 和 rows 来指定输入框的宽度和高度。虽然指定了列数和行数，但还是可以无限输入文字；
- 默认情况下，输入框可以手动拉伸的。
fieldset标签（了解）
- 作用：可以给表单添加一个边框。
legend标签（了解）
- 作用：可以给 fieldset 边框指定一个标题
- 以下为表单标签总结做的练习：
<form action="http://www.baidu.com">
<fieldset>
<legend>注册界面</legend>
<p>
<label for="account">账号:</label>
<input type="text" id="account" name="account">
</p>
<p>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd">
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="yao" checked="checked">保密
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="sport" value="baskedBall">篮球
<input type="checkbox" name="sport" value="footBall">足球
<input type="checkbox" name="sport" value="sing">唱歌
<input type="checkbox" name="sport" value="dancing" checked="checked">跳舞
</p>
<p>
<label for="profile">个人简介:</label>
<textarea name="profile" id="profile" cols="20" rows="5"></textarea>
</p>
<p>
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
</p>
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
</p>
<p>
<label for="phone">手机:</label>
<input type="number" id="phone" name="phone">
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="清空">
</p>
</fieldset>
</form>
- 网页效果:
form表单练习网页效果
marquee标签
- 作用：制作跑马灯效果
- 格式：
<marquee>这里填写需要添加效果的文字</marquee> - 属性：
- direction ：设置滚动方向，取值为 up / down / left / right;
- scrollamount ：设置文字滚动速度，值越大滚动速度越快；
- loop ：设置文字滚动次数，默认值为 -1 无限滚动；
- behavior ：设置滚动类型，取值范围 slide / alternate
- 注意点：
- marquee 标签不是 W3C 推荐的标签，在 W3C 官方文档中也无法查询到该标签，但各大浏览器对它的支持非常好。
HTML5 新增标签
video 标签
- 作用：用于播放视频。
- 格式：
<!--第一种格式, 常规写法-->
<video src=""></video>
<!--第二种格式，为了解决各个浏览器的适配问题-->
<video>
<source src="" type="">
<source src="" type="">
</video>
- 属性：
- src ：用于告诉 video 标签需要播放的视频所在的路径；
- autoplay ：用于告诉 video 标签是否需要自动播放视频；
- controls ：用于告诉 video 标签是否需要显示控制条；
- poster ：用于告诉 video 标签视频未播放之前显示的占位图片；
- loop ：用于告诉 video 标签视频播放完毕之后是否循环播放。一般用于广告；
- preload ：用于告诉 video 标签视频在未播放之前是否进行预加载。用于网络视频。如果存在 autoplay 属性，那么该属性设置了也不会生效；
- muted ：用于告诉 video 标签播放视频的时候静音；
- width ：用于指定 video 标签的宽度；
- height ：用于指定 video 标签的高度。
audio 标签
- 作用：用于播放音频。
- 格式：
<!--第一种格式,常规写法-->
<audio src="images/yinyue.mp3" autoplay="autoplay" controls="controls"></audio>
<!--第二种格式,为了解决各个浏览器的适配问题-->
<audio controls="controls" autoplay="autoplay">
<source src="images/yinyue.mp3" type="audio/mp3">
</audio>
- 注意点：
- audio 标签的使用和 video 标签基本一样，video 中使用的属性 audio 大部分能够使用并且功能都一样。
- 只有三个属性不能用 height/width/poster
详情概要标签
- 作用：利用 summary 标签描述概要信息，利用 details 标签描述详情信息。默认情况下为折叠展示，需要交互显示详情。
- 格式：
<details>
<summary>全栈工程师</summary>
全站工程师是指掌握多种技能,并能利用多种技能独立完成产品的人。[1]也要全端工程师(同时具备前端和后台能力),英文Full Stack developer
</details>
- 网页效果：
概要
详情
HTML中废弃的标签
废弃原因：当前 HTML 中的标签只有添加语意一种作用，而早期的 HTML 标签中有一部分标签是没有语意的，这部分标签是用来修改样式的，所以会被淘汰，当前 HTML 页面所有跟样式有关的部分都用 CSS 来编写。
-
被废弃的标签
-
<br>：强制换行 -
<hr>：添加一条分割线 -
<font>： -
<b>：（bold）加粗文本，没有任何语意。 -
<u>：（underlined）给文本添加下划线，没有任何语意。 -
<i>：（italic）将文本倾斜，没有任何语意。 -
<s>：（strikethrough）给文本添加删除线，没有任何语意。
-
-
废弃标签的替代标签
-
<strong>:替代<b>，加粗文本，定义重要性强调的文字； -
<ins>:(inseted)替代<u>，给文本添加下划线，定义插入的文字； -
<em>:(emphasized)替代<i>，将文本倾斜，定义强调的文字； -
<del>:(deleted)替代<s>，给文本添加删除线，定义被删除的文字。
-
-
注意点
- 在企业开发中，不到万不得已一定不要用废弃掉的标签。
- 如果一定要使用，一般情况下都是作为 CSS 的钩子来使用。
字符实体
- 在 HTML 中对 空格/回车/Tab不敏感，会把多个空格/回车/Tab当做一个空格来处理，所以在需要用到这些按键的时候需要用到字符实体来替代。
- 作用：在 HTML 中有的字符是被 HTML 保留的，有的 HTML 字符在 HTML 中有特殊含义的，是不能在浏览器中显示出来的。要想显示出这些字符必须通过字符实体。
- 以下为常用的字符实体：
-
：空格，一个就是一个空格，有多少个就有多少个空格； -
<(less than)：小于号“<”； -
>(greater than)：大于号">"； -
©：版权符号。
-
