HTML5

作者: Latte_Bear | 来源:发表于2017-10-13 12:34 被阅读0次

img标签

功能：告诉浏览器需要显示一张图片;
参数：width、height、src、title、alt；
1. width：设置图片的宽度；
2. height：设置图片的高度；
3. src：图片源（也就是图片的路径，便于浏览器查找）；
4. title：鼠标悬停到该图片要显示的标题；
5. alt：英文alternate的缩写，告诉浏览器如果src里的图片不存的时候用什么图片来替换，也就是占位符。
代码格式：

![](图片文件路径)

注意点：
1. img标签不会独占一行；
2. 同时设置width和height有可能会造成图片拉伸变形，单独设置莫一项属性会让图片等比例缩放；
3. 如果没有设置width和height属性，系统会按图片的原始尺寸显示。
路径问题：通过src属性赋值有两种方式
1. 相对路径：从 .html 文件所在路径下查找我们称之为相对路径；
 - 同级：图片和 .html 文件存储在同一个文件中，格式为：<img src="QRCode.png>。
 - 下级：存储图片的文件夹在 .html文件所在文件夹的子目录，格式为：![](文件夹名称/QRCode.png)。
 - 上级：存储图片的文件夹是 .html 的上级目录，格式为：<img src="../QRCode.png>。
 - 在mac系统下格式为：<img src="./QRCode.png>。
绝对路径：每次都从指定的路径进行查找称之为绝对路径，格式为<img src="C:\Users\guoyong\Desktop\QRCode.png"，企业开发中不会使用绝对路径。

br标签

功能：换行
注意点：
1.  标签可以连续使用，使用了多少该标签就会换多少行；
2.  标签的语意是不另起一段换行（也就是说该标签是在段落内的换行），所以在企业开发中很少使用 标签。

a标签

功能：用于页面与页面之间的跳转（添加超链接）；
属性：href，title，target：
1. href：必有属性，标志着要跳转到的目的地，可以为网络URL，也可以为本地文件路径或者本页锚点；
2. title：合同img的title属性一样，鼠标悬停的时候显示的标题；
3. target：取值范围 _self 和 _blank，专门用于控制如何跳转，_self 为当前选项卡跳转，_blank 为新建选项卡跳转。
格式：

 <a href="指定需要跳转的目标URL">展现给用户查看的内容</a>

注意点：
1. 可以为图片添加超链接，格式为：

 <a href="指定需要跳转的目标URL">
        ![](0.jpg)
 </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">
注意点：
1. 必须写在 head 的开始标签和结束标签之间；
2. 如果在 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 的缩写。

注意点：
1. ul 标签是用来给一组数据添加列表语意的，而不是为了添加小圆点的；
2. ul 标签和 li 标签是一个整体，所以一般情况下 ul 标签和 li 标签不会单独出现；
3. 由于 ul 和 li 标签是一个组合，所以 ul 标签中不推荐包含其他标签，也就是说在 ul 标签中只会看到 li 标签；
4. li 标签中的内容可能会很复杂，所以可以在 li 标签中添加其他的标签来丰富界面。
应用场景
1. 新闻列表；
2. 商品列表；
3. 导航条
  、、、、

有序列表（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 的含义就是定义标题对应的描述

应用场景
1. 网站尾部的相关信息
2. 做图文混排
注意点：
1. 和 ul/ol 一样，dl 和 dt/dd 是一个整体，一般情况下不会单独出现；
2. 和 ul/ol 一样，dl 和 dt/dd 是一个整体，所以建议 dl 中只放 dt 和 dd 标签；
3. 一个 dt 可以没有对应的 dd 标签，也可以有多个 dd 标签，无论没有或者多个 dd 标签都不推荐使用，推荐使用一个 dt 对应一个 dd；
4. 当需要丰富页面的时候，可以在 dt 或者 dd 里继续添加其他标签。

表格标签

功能：为一堆数据添加表格语意。表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为最为清晰的展现形式。
格式：table 标签代表整个表格，tr 表示表格中的一行，td 代表单元格。

      <table>
            <tr>
                <td><td>
            </tr>
      </table>

属性：
1. width / height：可以给 table 和 td 标签使用。
  - 表格的尺寸默认是根据内容的尺寸自动调整的，也可以手动给 table 设置 width / height 属性的方式手动来调整表格的宽度和高度；
  - 给 td 标签设置 width / height 属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽高；
2. align / valign：
  - align：水平对齐可以为 table / tr / td 标签使用。
    1. 给 table 标签设置 align 属性，可以控制表格在水平方向的对齐方式；
    2. 给 tr 标签设置 align 属性，可以控制当前行中所有单元格内容的水平方向的对齐方式；
    3. 给 td 标签设置 align 属性，可以控制当前单元格中内容在水平方向的对齐方式。
  - valign：垂直对齐只能为 tr 和 td 标签使用。
    1. 给 tr 标签设置 valign 属性，可以控制当前行中所有单元格内容的垂直对齐方式；
    2. 给 td 标签设置 valign 属性，可以控制当前单元格内容的垂直对齐方式。
3. cellspeacing / cellpadding
  - cellspeacing：外边距属性，只能给 table 标签设置该属性，表示单元格与单元格之间的距离，默认情况下单元格与单元格之间的距离为2px；
  - cellpadding：内边距属性，也是只能给 table 标签设置该属性，表示单元格中内容与单元格边框之间的间隙，默认值为 1。
表格的结构：由于表格中存储的数据比较复杂，为了方便管理和阅读以及提升语意，所以一般会对表格中存储的数据进行分类，可以分为以下四类。
1. 表格的标题
2. 表格的表头信息：表头信息不受表格整体高度的影响，修改需要用css
3. 表格的主体信息
4. 表格的页尾信息：表尾信息不受表格整体高度的影响，修改需要用css
5. 表格的完整格式：

           <table>
                <caption>
                    <h2>这是里表格的标题</h2>
                </caption>
                <thead>
                    <tr>
                        <th>这里是每一列的标题</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>这里是表格中的数据</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>这里是表格末尾信息</td>
                    </tr>
                </tfoot>
           </table>

注意点：
1. table 标签有一个边框(border)属性，这个属性决定了边框的宽度，默认情况下宽度为0，所以默认情况下看不到表格；
2. table 标签和 ul / ol / dl 标签一样，它是一个组合标签，所以 table、tr、td 要么一起出现，要么就一起不出现，不会单独出现；
3. 如果 tr 标签和 td 标签同时设置了 align 属性，那么单元格中的内容会根据 td 中属性的值进行调整；
4. 如果 tr 标签和 td 标签同事设置了 valign 属性，那么单元格中的内容会根据 td 中属性的值进行调整。

caption 标签

功能：表格标题标签，在表格标签中提供的专门设置表格标题的标签，只要将标题写在 caption 标签中，那么此标题就会默认相对表格宽度居中；
格式：

      <table>
            <caption>
                <h2>此处显示为表格的标题</h2>
            </caption>
      </table>

注意点：
1. caption 标签一定要写在 table 标签里面，否则无效；
2. 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>

注意点：
- 由于把某一个单元格当做了多个单元格来看待，所以会多出来一部分单元格，需要删掉多出来的单元格；
- 单元格永远默认向后或者向下合并，无法更改；

表单标签(重点)

什么是表单？
1. 专门用来收集用户信息的 html 页面。
什么是表单元素
1. 在 html 中，标记/标签/元素都是指 html 的标签。例如<a>a标签 / a标记 / a元素。表单元素就是是 html 中比较特殊的一些标签，在浏览器中所有的表单元素都有特殊的外观和默认的功能。
表单的格式：

      <form>
         具体的表单标签
      </form>

常见的表单元素
1. input 标签：input 标签有一个 type 属性，该属性有很多类型的取值，取值的不同就决定了 input 标签的功能和外观。
属性：
1. 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 新增属性，大部分浏览器不支持。
2. value：设置默认值
3. label：设置文字和输入框进行绑定
  - 绑定格式：

<!--第一种方式：官方推荐-->
<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标签效果
注意点：
1. 下拉列表不能输入内容，但可以直接在列表中选择内容；
2. 可以通过给 option 标签内添加一个 selected 属性设置下拉列表的默认值；
3. 可以通过给 option 标签包裹一层 optgroup 标签来给下拉列表中的数据分类。

textarea标签

功能：定义一个多行输入框
格式：

<textarea cols="5" rows="5">
      这里可以随意输入文字用来设置输入框的默认值
</textarea>

网页效果：

textarea标签网页效果

注意点：
1. 默认情况下输入框可以无限换行；
2. 默认情况下输入框有默认的宽度和高度；
3. 可以通过 cols 和 rows 来指定输入框的宽度和高度。虽然指定了列数和行数，但还是可以无限输入文字；
4. 默认情况下，输入框可以手动拉伸的。

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>
属性：
1. direction ：设置滚动方向，取值为 up / down / left / right;
2. scrollamount ：设置文字滚动速度，值越大滚动速度越快；
3. loop ：设置文字滚动次数，默认值为 -1 无限滚动；
4. behavior ：设置滚动类型，取值范围 slide / alternate
注意点：
1. marquee 标签不是 W3C 推荐的标签，在 W3C 官方文档中也无法查询到该标签，但各大浏览器对它的支持非常好。

HTML5 新增标签

video 标签

作用：用于播放视频。
格式：

      <!--第一种格式, 常规写法-->
      <video src=""></video>

      <!--第二种格式，为了解决各个浏览器的适配问题-->
      <video>
            <source src="" type="">
            <source src="" type="">
      </video>

属性：
1. src ：用于告诉 video 标签需要播放的视频所在的路径；
2. autoplay ：用于告诉 video 标签是否需要自动播放视频；
3. controls ：用于告诉 video 标签是否需要显示控制条；
4. poster ：用于告诉 video 标签视频未播放之前显示的占位图片；
5. loop ：用于告诉 video 标签视频播放完毕之后是否循环播放。一般用于广告；
6. preload ：用于告诉 video 标签视频在未播放之前是否进行预加载。用于网络视频。如果存在 autoplay 属性，那么该属性设置了也不会生效；
7. muted ：用于告诉 video 标签播放视频的时候静音；
8. width ：用于指定 video 标签的宽度；
9. 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>

注意点：
1. audio 标签的使用和 video 标签基本一样，video 中使用的属性 audio 大部分能够使用并且功能都一样。
2. 只有三个属性不能用 height/width/poster

详情概要标签

作用：利用 summary 标签描述概要信息，利用 details 标签描述详情信息。默认情况下为折叠展示，需要交互显示详情。
格式：

      <details>
            <summary>全栈工程师</summary>
            全站工程师是指掌握多种技能,并能利用多种技能独立完成产品的人。[1]也要全端工程师(同时具备前端和后台能力),英文Full Stack developer
      </details>

网页效果：

概要

详情

HTML中废弃的标签

废弃原因：当前 HTML 中的标签只有添加语意一种作用，而早期的 HTML 标签中有一部分标签是没有语意的，这部分标签是用来修改样式的，所以会被淘汰，当前 HTML 页面所有跟样式有关的部分都用 CSS 来编写。
被废弃的标签
1.   ：强制换行
2. <hr> ：添加一条分割线
3.  ：
4.  ：（bold）加粗文本，没有任何语意。
5.  ：（underlined）给文本添加下划线，没有任何语意。
6.  ：（italic）将文本倾斜，没有任何语意。
7. <s> ：（strikethrough）给文本添加删除线，没有任何语意。
废弃标签的替代标签
1. :替代，加粗文本，定义重要性强调的文字；
2. <ins> :(inseted)替代，给文本添加下划线，定义插入的文字；
3.  :(emphasized)替代，将文本倾斜，定义强调的文字；
4. <del> :(deleted)替代<s>，给文本添加删除线，定义被删除的文字。
注意点
1. 在企业开发中，不到万不得已一定不要用废弃掉的标签。
2. 如果一定要使用，一般情况下都是作为 CSS 的钩子来使用。

字符实体

在 HTML 中对空格/回车/Tab不敏感，会把多个空格/回车/Tab当做一个空格来处理，所以在需要用到这些按键的时候需要用到字符实体来替代。
作用：在 HTML 中有的字符是被 HTML 保留的，有的 HTML 字符在 HTML 中有特殊含义的，是不能在浏览器中显示出来的。要想显示出这些字符必须通过字符实体。