前端开发(HTML,CSS,VUE,JS)从入门到精通！第一天(HTML5)

一、HTML5 简介

1．HTML

全称是 Hyber Text Markup Language，超文本标记语言，它是互联网上应用最广泛的标记语言，简单说，HTML 页面就等于“普通文本+HTML标记（HTML标签）“。

2．HTML 总共经历了如下的发展史：

HTML（第一版）--> HTML2.0 --> HTML3.2 --> HTML4.0 --> HTML4.01 --> XHTML1.0 --> HTML5

3．HTML4.01 与 XHTML

XHTML 全称是 eXtensible Hyber Text Markup Language，扩展的超文本标记语言，XHTML 和 HTML4.01 具有很好的兼容性，而且 XHTML 是更严格，更纯净的 HTML 代码。

4．HTML 和 XHTML 文档的类型定义（DTD文件）

W3C 组织使用 DTD（Document Type Definition，文档类型定义）来定义 HTML 和 XHTML 的语义约束，包含HTML 文档可以出现哪些元素和元素支持哪些属性等等，比如：HTML4.01 的 DTD 文档：

这里就有一个 DTD 约束文件，其中包含HTML 文档可以出现哪些元素和元素支持哪些属性等等，按住“Ctrl”点击dtd文件查看源码：

5．从 XHTML 到 HTML5

虽然 W3C 组织努力为 HTML 指定规范，但是大部分编写 HTML 页面的人员没有受过专业训练，他们制作的 HTML 网页大部分没有遵守 HTML 规范，于是出现了一个尴尬的局面：一方面 W3C 组织极力呼吁大家遵守 HTML规范，另一方面，HTML 的制作者根本不理会这个呼吁，于是 WHATWG 组织开始制定了一种“妥协式”的规范：HTML5。

6．HTML5 的优势：

（1）解决跨浏览器问题：目前大多数浏览器都支持 HTML5。

（2）部分代替了原来的 JavaScript。

（3）更明确的语义支持

（4）增强了 Web 应用的功能

7. HTML5 页面的基本结构(树形结构)

<!--<!DOCTYPE html>：HTML5 的 DTD 约束文件定义并不符合 XML 文件的 DTD 规范，这正好是 HTML5 的设计哲学，HTML5 并不是规范设计，而是一种"妥协式"规范。
-->
<!DOCTYPE html>
<!--HTML 页面中的标签(元素)的形式：<标签名 属性名=属性值>内容</标签名>，标签中又可能包含其他标签<html>标签是 HTML 页面的根标签，任何一个 HTML 页面都是以根标签开头，其中 lang="en" 是 <html>标签的属性，说明文档使用的是en(英语)，而cn表示中文
-->
<html lang="en"> <!--跟标签的开始-->
<head> <!--头标签的开始，该头标签又包含了一些子标签--><!--meta 标签，是一个自结束标签，即没有结束标签，它的属性 charset="UTF-8"指明页面的字符编码为 UTF-8--><meta charset="UTF-8"><!--title标签，表示页面的标题--><title>首页</title>
</head> <!--头标签的结束-->
<body> <!--body标签，表示页面的主体，它跟 <head> 是同级的，是兄弟关系，HTML5 页面的主体就是写在 body 中的，即其他的标签就是写在body里面的-->
<!--body 标签里面包含了一个子标签 h1，是一个标题标签-->
<h1>第一个 HTML5 页面</h1>
</body> <!--body 标签的结束-->
</html> <!--跟标签的结束-->

8．HTML5 语法的变化

（1）标签不再区分大小写

<p>段落</p>和<P>段落</P> 一致

（2）元素可以省略结束标签：自结束

<img src="user.png"></img>和<img src="user.png"/>或<img src="user.png"> 一致

（3）允许省略属性值的属性

（4）允许属性值不使用引号

二、HTML5 的常用元素（标签）和属性

1．HTML5 中保留的常用元素：基本元素

（1）<!-- -->：定义 HTML5 的注释（2）<html>：H5 的根标签，可省略（3）<head>：H5文档的页面头部分，可省略（4）<title>：H5 文档的标题（5）<body>：H5 文档的主体，其他的 H5 标签就是写在这个标签内的，它除了可以包含 id，class，style 属性之外，还可以指定 onclick,onmousedown,...事件属性，这些属性可以在 JavaScript 代码中处理。
注意：我们后续讲的标签，如果没有特别说明，表示该标签都有 id，class，style 属性，并且可以指定 onclick，onmousedown...等事件属性。（6）<style>：用于定义 CSS 样式表，不具有 id，class，style 以及事件属性（7）<h1>~<h6>：用于指定标题一到标题六，会独占一行，称为块级标签。（8）<p>：用于定义一个段落文本，也会独占一行，块级标签。（9）<br>：换行（10）<hr>：水平分割线（11）<div>：用于定义文档中的节，其中可以包含任意的其他标签，会独占一行，是块级标签。（12）<span>：与 <div> 类似，区别是 <span> 默认情况下不会换行，称为行级标签。

示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo3</title></head><body><!--h${我的标题$}*6--><!--h1~h6为标题标签，是块级标签，会独占一行--><h1>我的标题1</h1><h2>我的标题2</h2><h3>我的标题3</h3><h4>我的标题4</h4><h5>我的标题5</h5><h6>我的标题6</h6><hr> <!--水平分割线--><!--p{我是段落文本$，我是块级标签，我会独占一行}*3--><p>我是段落文本1，我是块级标签，我会独占一行</p><p>我是段落文本2，我是块级标签，我会独占一行</p><p>我是段落文本3，我是块级标签，我会独占一行</p><!--lorem10：随机生成 10 个单词组成的段落，lorem：随机生成一段文本--><p>Lorem ipsum dolor sit amet, consectetur.</p><!--HTML 代码中的换行符没有用，要让HTML内容换行，必须加上<br>--><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Aspernatur consectetur consequuntur cumque, dolorem dolorum explicabo facere hic incidunt,maiores officiis placeat quisquam quos repudiandae rerum sed sit voluptatem, voluptates voluptatum?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Aspernatur consectetur consequuntur cumque, dolorem dolorum explicabo facere hic incidunt, <br>maiores officiis placeat quisquam quos repudiandae rerum sed sit voluptatem, voluptates voluptatum?</p><!--HTML代码中写多个空格自会表示一个空格，要在HTML中表示多个空格，要使用 &nbsp;--><p>您好 中国</p><p>您好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国</p><!--div的作用是跟我们后面讲的 CSS 结合起来对页面进行区域的划分，它里面可以包含各种子标签--><!--div{我是div标签$，我是块级标签，我会独占一行}*2--><div>我是div标签1，我是块级标签，我会独占一行</div><div>我是div标签2，我是块级标签，我会独占一行</div><div><h3>我是div中的子标签h3</h3><p>我是div中的子标签p</p></div><!--span{我是span标签$，我是行级标签，我不会独占一行}*3--><span>我是span标签1，我是行级标签，我不会独占一行</span><span>我是span标签2，我是行级标签，我不会独占一行</span><span>我是span标签3，我是行级标签，我不会独占一行</span></body></html>

2．H5 保留的基本元素：文本格式化元素

（1）<b>：粗体（2）<i>：斜体（3）<em>：强调文本，和斜体差不多（4）<strong>：粗体文本，和 <b> 差不多（5）<small>：小号文本（6）<sup>：定义上标（7）<sub>：定义下标（8）<bdo>：定义文本显示的方向，有一个属性 dir，取值 ltr：左到右，rtl：右到左

示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo4</title></head><body><b>加粗文本</b><i>斜体文本</i><em>强调文本</em><strong>粗体文本</strong><small>小号文本</small><h3>以上标签都是行级元素，不会独占一行</h3><p>4<sup>2</sup> + 5<sup>3</sup> = ?</p><p>H<sub>2</sub> + O<sub>2</sub> = ?</p><bdo dir="ltr">从左到右的文本</bdo> <!--行级标签--><bdo dir="rtl">从右到左的文本</bdo></body></html>

3．H5保留的常用标签：超链接和锚点

（1）超链接：<a> 标签

① href：指向超链接要链接的资源地址，可以是绝对路径也可以是相对路径

② target：使用哪个框架集合来装载资源，取值可以是 _self（在当前窗口打开），_blank（在新窗口打开），_top（在顶层窗口打开，需要结合框架标签），_parent（在父窗口打开，需要结合框架标签）

示例：

（2）超链接的第二种用法：定义锚点，作用是在文档中生成一个定位点，然后通过超链接直接去到这个定位点。

4．H5保留元素：列表相关元素

（1）<ul>：unordered list，无序列表，其中只能包含li（list item）子标签

（2）<ol>：ordered list，有序列表，其中只能包含子标签li，ol的属性：

① type：指定使用哪种类型编号，1 表示数字，A 和a 表示字母，I 和i 表示罗马数字等等

② start：指定列表的起始数字，默认是第一个，比如1,2,3等

（3）li：包含在 <ul> 或 <ol> 中的每一个列表项，可以有多个

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo7</title>
</head>
<body>
<!--ul/ol以及li都是块级标签-->
<!--ul>li{列表项$}*3-->
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>
<!--ol>li{列表项$}*3-->
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>
<!--ol[type=A]>li{列表项$}*3-->
<ol type="A"><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>
<!--ol[type=i]>li{列表项$}*3-->
<ol type="i"><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>
<!--ol[type=i][start=2]>li{列表项$}*3-->
<ol type="i" start="2"><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>
<ul><li>主菜单1<ul><li>子菜单1</li><li>子菜单2</li><li>子菜单3</li></ul></li><li>主菜单2<ul><li>子菜单1</li><li>子菜单2</li><li>子菜单3</li></ul></li><li>主菜单3<ul><li>子菜单1</li><li>子菜单2</li><li>子菜单3</li></ul></li>
</ul>
</body>
</html>

（4）<dl>：用于定义列表

（5）<dt>：用于定义列表的标题

（6）<dd>：用于定义普通列表项，其中 dt 和 dd 是成对出现的，每一对都只有一个 dt 但是可以有多个 dd，该元素和 <div> 一致可以包含其他子标签，注意，dt 和dd 都是包含在 dl 元素中作为子元素，并且它们是兄弟关系（同级的）。

示例：

5．H5保留的元素：图像相关元素

（1）<img>：定义一幅图片

① src：指定图片位置，可以是相对路径也可以是绝对路径

② alt：指定一段文本，当图片无法显示时给出提示

示例：

（2）除此之外，与图片相关的还有如下两个标签：

<map>：用于定义图片映射，可以包含一个或多个 <area> 子标签，每个 <area> 用于定义区域，区域上可以指定链接到某个 url 地址。

<area>：用于定义图片映射的内部区域，包括以下属性：

shape：指定区域的类型，默认是 “rect” 矩形，还可以是 circle（圆形）和 ploy（多边形）

coords：指定多个坐标值，用于确认区域的位置

href：用于指定该区域链接的地址

示例：

当鼠标移动到指定区域时（热点区域），鼠标从箭头形状变为手指形状，证明这个区域时超链接，点击之后跳转到163网站。

6．H5保留元素：表格元素

（1）<table>：定义表格

① cellpadding：单元格内容和单元格边框之间的间距

② cellspacing：单元格之间的间距

③ border：表格边框的大小

（2）<caption>：表格的标题

（3）<tr>：table row，行

（4）<td>：定义单元格，列

① colspan：指定单元格跨多少列

② rowspan：指定单元格跨多少行

③ height：单元格高度

④ width：单元格宽度

示例：

（5）<th>：定义表格页眉单元格

（6）<tbody>：定义表格主体，一个 <table> 可以有一个或多个 <tbody>

（7）<thead>：表格头

（8）<tfoot>：表格脚

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo12</title>
</head>
<body>
<!--创建表格，边框大小为1，单元格内边距为0，单元格外边距为0-->
<table border="1" cellpadding="0" cellspacing="0"><caption>图书馆存书</caption><thead> <!--表格头--><tr><th>图书</th> <!--表格页眉单元格，即单元格的标题--><th>作者</th></tr></thead><tbody> <!--表格的主体，一个表格可以有一个或多个tbody--><tr><td>Java</td><td>张三</td></tr><tr><td>JavaEE</td><td>李四</td></tr></tbody><tbody> <!--表格的主体，一个表格可以有一个或多个tbody--><tr><td>Java</td><td>张三</td></tr><tr><td>JavaEE</td><td>李四</td></tr></tbody><tfoot> <!--表格脚--><tr><td colspan="2">现总计：4本图书</td></tr></tfoot>
</table>
</body>
</html>

7．框架

（1）H5 已经不推荐使用框架集，因此 H5 删除了<frameset>、<frame>、<noframes> 标签，而使用了一个<iframe> 来表示内联框架，该框架的属性有：

① src：指定一个 url 地址，表名该 iframe 将装载哪个页面

② width：iframe 的宽度

③ height：iframe 的高度

示例：

8．H5新增的属性

（1）contenteditable：如果该属性设置为 true，那么元素就可以编辑，就类似于文本框，可以把 div，table 等等变成可编辑的

（2）hidden：如果为 true，那么会隐藏元素

示例：

9．H5 新增的常用元素：语义相关的元素

（1）<mark>：用于标注某个文本，就类似于用荧光笔标注重点内容一样。

（2）<time>：用来显示被标注的内容是日期，时间或日期时间，有一个属性：

① datetime：用于提供时间，属性值应该符合 yyyy-MM-ddTHH:mm 格式的日期时间，当然，也可以只指定日期或指定时间

示例：

9. H5的头部和元信息

（1）H5 文档中的 <head> 标签可以包含如下子元素：

① <script>：用于包含 JavaScript 脚本

② <style>：用于包含 CSS 样式

③ <link>：用于链接外部 CSS 样式文件

④ <title>：用于指定文档标题

⑤ <base>：用于定义一个基准链接，那么该文档后面的元素的 URL 地址都会以该基准链接作为基础，常用的属性有：

1）href：指向所有链接的基准链接

示例：

⑥ <meta>：用于定义页面的元数据信息，属性有：

1）http-equiv：指定元信息的名称，该属性指定的名称具有特殊的意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确的处理网页内容

2）name：指定元信息的名称，名称随意

3）content：指定元信息的值

a．其中 http-equiv 属性支持的值有：

a）Expires：网页过期时间

b）Pragma：禁止浏览器从本地缓存中调阅网页内容

c）Refresh：指定多长时间后刷新指定页面

d）Set-Cookie：设置 Cookie（Cookie是服务器发送给客户端的一小段文本内容）

e）content-type：指定页面内容的类型和所用的字符集

示例：

10．H5 表单相关元素

（1）<form>：用于定义一个表单，包含的属性：

① action：当用户提交表单时，会跳转到 action 指定的后台页面来处理

② method：请求的类型，有 GET（默认请求类型）和 POST 类型，其中使用 GET 请求提交表单时，请求参数（表单参数）会附加在请求的 URL 地址后面传给后台，而且只能附加文本内容，可以传输的请求参数大小不大于 2K，而POST 请求在传输数据到后台时不采用附加请求参数到 URL 地址后面，传输的数据量要大很多，一般没有限制。

示例1：get 请求方式

示例2：post 请求方式

③ enctype：指定表单内容进行编码所用的字符集，取值有以下几种：

1）application/x-www-form-urlencoded：这是默认的编码方式，使用这种编码方式会将表单控件（例如input）中的值处理成 url 编码的方式

2）multipart/form-data：这种编码方式会以二进制流的方式来处理表单数据，例如上传文件的表单就应该将enctype 设置为该值。

示例：上传文件的表单

④ name：指定表单的名称

⑤ target：与超链接的 target 相同，可以是 _blank，_parent，_self 和 _top

（2）H5 中的表单元素：input 元素

① 单行文本：type=”text”

② 密码输入框：type=”password”

③ 隐藏域：type=”hidden”，不会显示，主要用于传输数据到后台

④ 单选框：type=”radio”

⑤ 复选框：type=”checkbox”

⑥ 图像域：type=”image”

⑦ 文件上传：type=”file”

⑧ 提交按钮：type=”submit”

⑨ 重置按钮：type=”reset”

注意：以上的 input 元素都有一个 name 属性，表示该表单元素的名称，提交表单时，这个 name 属性的名称和具体对应输入的值(就是表单元素的 value 属性)会以请求参数（键值对）的形式发送给后台处理。

示例：表单元素的使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo19</title>
</head>
<body>
<!--
对于包含文件上传(type="file")的表单，那么请求方式method 必须是 post，而且 enctype 必须是 multipart/form-data，
表示以二进制流的方式来处理表单数据
-->
<form action="handle.jsp" method="post" enctype="multipart/form-data">姓名：<input type="text" name="username"> <br>密码：<input type="password" name="password"> <br><!--每个表单元素都有一个 value 属性，表示该表单元素提交的值，当然在表单元素中输入的值就是指这个 value-->性别：<input type="radio" name="sex" value="boy" checked="checked">男<input type="radio" name="sex" value="girl">女<br>爱好：<br><input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="swimming">游泳<input type="checkbox" name="hobby" value="music">音乐<input type="checkbox" name="hobby" value="dancing">跳舞<br><!--type="file"表示文件上传-->头像：<input type="file" name="img"> <br><input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

input元素常用的属性：

1）checked：设置单选按钮或复选按钮是否被选中，该属性只有一个 checked 属性值

2）disabled：禁用 input 元素

3）maxlength：设置文本框允许输入的最大字符数

4）readonly：设置为只读

5）size：指定文档的宽度，type=”hidden” 元素不能设置

6）src：指定图像域所显示的图片的 URL 地址

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo20</title>
</head>
<body>
<!--
对于包含文件上传(type="file")的表单，那么请求方式method 必须是 post，而且 enctype 必须是 multipart/form-data，
表示以二进制流的方式来处理表单数据
-->
<form action="handle.jsp" method="post" enctype="multipart/form-data">单行文本：<input type="text" name="username"> <br>只读的文本：<input type="text" name="name" value="张三" readonly> <br><!--每个表单元素都有一个 value 属性，表示该表单元素提交的值，当然在表单元素中输入的值就是指这个 value-->性别：<input type="radio" name="sex" value="boy" checked>男<input type="radio" name="sex" value="girl">女<br>爱好：<br><input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="swimming">游泳<input type="checkbox" name="hobby" value="music">音乐<input type="checkbox" name="hobby" value="dancing">跳舞<br>图像域：<input type="image" src="images/1.jpg" width="200" height="200"><br><!--type="file"表示文件上传-->头像：<input type="file" name="img"> <br><input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

（3）<label>标签：用于在表单元素中定义标签，有两种使用方式：

① 隐式使用 for 属性

② 显示关联，将普通文本，表单控件放在一个 <label> 中

示例：

（4）<button> 标签：用于定义按钮，常见的属性：

① disabled：禁用按钮，取值只能是 disabled

② name：按钮的唯一名称

③ type：按钮的类型，比如 submit，reset，button 中的一种

④ value：指定按钮的初始值，可以通过脚本来修改

示例：

（5）列表和下拉菜单，<select> 标签，主要包含的属性：

① disabled：禁用下拉菜单

② multiple：是否允许多选，取值只能是 multiple

③ size：指定列表框中同时显示多少个列表项

<select> 标签只能包含如下两个子元素：

1）<option>：列表框选项，常用的属性：

a.disabled：禁用选项

b.selected：选项是否被选中，取值只能是 selected

c.value：该选项对应的请求参数值

2）<optgroup>：用于定义列表组，属性：

a.label：选项组的标签

b.disabled：禁用选项组中的所有选项

注意：input，button，select 标签都是行级标签

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo23</title>
</head>
<body>
<form action="handle.jsp"><!--其中 <select> 的name属性值就是提交表单后请求参数的name属性，而选中的 option 选项的 value 值就是提交表单后请求参数的 value--><select name="skill" id="skill"><option value="java">java语言</option><option value="c++" selected>c++语言</option><option value="c">c语言</option></select><!--multiple 允许多选，size：同时显示3个选项--><select name="books" id="books" multiple size="3"><option value="java">java基础</option><option value="android">Android 开发</option><option value="javaee">JavaEE 企业级应用</option><option value="html">HTML 基础</option></select><!--选项组：--><select name="group" id="group"><optgroup label="Java体系丛书"><option value="java">Java基础</option><option value="android">Android 开发</option><option value="javaee">JavaEE 企业级应用</option></optgroup><optgroup label="HTML 体系丛书"><option value="html">HTML 基础</option><option value="js">JavaScript 语言</option><option value="jquery">jQuery 开发</option></optgroup></select><input type="submit" value="提交">
</form>
</body>
</html>