一、HTML5基础
1.什么是HTML？
HTML是用来描述网页的一种语言，它是一种超文本标记语言。
2.HTML的优势
①世界知名游览器厂商对HTML5的支持
②市场的需求
③跨平台
3.W3C标准
①定义：W3C标准不是某一个标准，而是一系列的标准集合。
②使用W3C标准的原因：因为需要一个组织来制定和维护统一的国际化Web开发标准，确保多个游览器都兼容，HTML内容结构都是语义化的。
4.HTML5的基本结构：
最基本的语法：<标记>内容<标记>
标记也称为标签或者元素，标签都是成对出现的，以“<>”开始，以“</>”结束。
HTML5的基本结构分为两部分，整个HTML包括头部（head）、主体（body）两部分，头部包括网页标题（title）。
基本语法：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
</body>
</html>
5.网页的基本信息:
①DOCTYPE声明
<！DOCTYPE html>
最上面有一行关于DOCTYPE的声明，约束HTML文档结构，检验是否符合相关Web标准。必须位于HTML文档的第一行。
② <title> 标签
使用此标签用来描述网页的标题。
<title>我的第一个网页</title>
③<meta>标签
使用该标签描述网页的摘要信息，该标签描述的内容并不显示，目的是方便游览器解析或利于搜索引擎搜索。
<meta charset ="UTF-8">
属性：charset表示字符集编码，常用的编码有以下几种：
gb2312：简体中文，一般用于包含中文和英文的页面。
ISO-885901：一般用于纯英文页面。
big5：一般用于带有繁体字的页面。
UTF-8：国际性通用的字符编码，同样用于包含中文和英文的页面。
6.网页的基本标签：
①标题标签
表示一段文字的标题或主题。HTML共提供了六级标题<h1>~<h6>，所有标题字体加粗，<h1>字号最大，<h6>字号最小。
<html>
<head>
<title>不同等级的标题标签对比</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
②段落标签和换行标签
<p>...</p>
表示一个段落。
<br/>表示强制换行显示，该标签比较特殊，没有结束标签。
<html>
<head>
<title>段落标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起!</p><br />
<p>有勇气就会有奇迹。</p>
</body>
</html>
运行结果为：
③水平线标签<hr/>
表示一条水平线，该标签和换行标签一样没有结束标签，像这种没有结束标签的还有<strong/>标签让字体变粗，<em/>标签让文字倾斜。
④注释和特殊符号
语法：
在HTML中的注释和在Java中的注释意思一样，在运行的时候不显示，只是方便人们的查看。
HTML中常用的特殊符号如下表：
| 特殊符号 | 字符实体 |
|---|---|
| 空格 | |
| 大于号 | > |
| 小于号 | < |
| 引号 | " |
| 版权符号 | © |
7.图像标签
①常用的图像格式：JPG格式、GIF格式、BMP格式、PNG格式
②基本语法：
<img src =“图片地址” alt=“图像的替代文字” title=“鼠标悬停提示文字” width=“图片宽度” height=“图片高度”/>
alt属性表示在图像无法显示的时候(如图片路径错误或者网速太慢)替代显示的文本。title属性表示当鼠标放在图片上时，会显示提示信息，这种情况用来解释图片，因为可能有些图片的意思人们不太懂。
<html>
<head>
<title>图像标签的应用</title>
</head>
<body>
<p>
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>
</p>
<p>
楼兰蜜语 新疆野生<br/>
无漂白薄皮核桃 500gx2包<br/>
￥48.8
</p>
</body>
</html>
8.超链接
①超链接的基本用法：
超链接的理解：当用鼠标点击链接文本或图像的时候，会另外弹出一个窗口，这个窗口的路径就是href属性的链接地址。
语法：
<a href ="链接地址" target="目标窗口位置" >链接文本或图像</a>
特点：文本颜色为蓝色，并且文本下面有下划线。
注意：使用超链接时要用到<a></a>标签，并且超链接可以是文本超链接，也可以是图像超链接。
href：表示链接地址的路径，当href="#"时，表示空链接。
target：指定链接在哪个窗口打开，常用的取值为_self（自身窗口）、_blank（新建窗口）。
②链接地址：分为绝对路径和相对路径
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。
相对路径：相对于当前页面的路径，一般指向本站点内的文件。
另外，要用到的特殊符号" …/ “表示当前目录的上级目录，那么”…/…/"表示当前目录的上上级目录。
③超链接的应用
链接分为三类：
a.页面间链接:
A页跳转到B页，最常用用于网站导航。
b.锚链接:
A页甲位置到A页乙位置，注意是在同一个页面上进行跳转，比如淘宝上有个达到最顶部，点击会跳到最顶端这就是锚链接的作用。
锚链接的使用步骤：
Ⅰ.在页面的乙位置设置标记
语法：
<a name ="marker" >目标位置乙</a>
Ⅱ.设置甲位置链接路径href属性值为"#标记名"
语法：
<a href = "#marker">当前位置甲</a>
c.功能性链接:
在页面中调用其他程序功能，比如QQ聊天、电子邮箱。这时打开的不是某个网页，而是启动本机自带的某个应用程序。
电子邮件链接的用法：“mailto:电子邮件地址”
<html>
<head>
<title>邮件链接</title>
</head>
<body>
<p><img src="image/logo.jpg"width="305"height="104"alt="logo"/>
[<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>]</p>
</body>
</html>
运行结果：点击[联系我们]会出现一个写邮件的程序。
9.行内元素和块元素
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，比如a元素、strong元素。
块元素：无论多少内容，块元素独占一行，比如p元素、h1~h6元素。
二、列表、表格、媒体元素
1.列表
分为：
无序列表
语法：
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
注意：遵循W3C标准，<ul>标签里面只能嵌套<li>标签，不能嵌套其他的标签
但是<li>标签里面可以嵌套任意标签！！！
<h3>热搜</h3>
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜约会</li>
<li>一线城市楼市退烧</li>
</ul>
从这个实例中我们可以看出：①无序列表，顾名思义，没有顺序，无级别之分，每个<li>标签独占一行（块元素）；
②默认<li>标签项前面都有一个实心小圆点；
③应用：导航、侧边栏新闻、有规律的图文组合模块。
其他的无序列表：
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
上者都是无序列表，只是类型的不同 ，在ul元素后加上类型（type）然后选择不同的类型；
circle表示圆圈，运行时每个<li>标签项前面都有一个空心的圆圈；
square表示正方形，在运行时每个<li>标签项前面都有一个实心的小正方形。
有序列表
语法：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
特征：①有顺序，每个<li>标签独占一行（块元素）；
②默认<li>标签项前面有顺序标记；
③应用：一般用于排序类型的列表，如试卷、问卷选项等。
<ol>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜约会</li>
<li>一线城市楼市退烧</li>
</ol>
其它有序列表：
<body>
<h3>热搜</h3>
<ol type="A">
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜约会</li>
<li>一线城市楼市退烧</li>
</ol>
<ol type="a">
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜约会</li>
<li>一线城市楼市退烧</li>
</ol>
<ol type="i">
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜约会</li>
<li>一线城市楼市退烧</li>
</ol>
<ol type="I">
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜约会</li>
<li>一线城市楼市退烧</li>
</ol>
</body>
和无序列表一样，其他的列表只是类型不同！！！
定义列表
语法：
<dl>
<dt>标题一</dt>
<dd>第一项</dd>
<dd>第二项</dd>
<dt>标题一</dt>
<dd>第一项</dd>
</dl>
定义列表时标题及列表项的结合，与无序、有序列表的语法不太一样，<dl>标签作为列表的开始，<dt>标签作为每个列表项的起始，每个列表项用<dd>标签来完成。
特性：①没有顺序，每个<dt>标签，<dd>标签都独占一行；
②默认没有标记；
③一般用于（一个标题下有一个或多个列表项）*n的情况。
2.表格
①基本结构：
Ⅰ.单元格
单元格是表格的最小单位
Ⅱ.行
Ⅲ.列
②语法：
<table>
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
....
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
....
</tr>
</table>
<tr>标签表示行，一个表格有多少行就有几对<tr>标签；<th>标签表示标题是列，<td>标签也是列。
③表格的跨列和跨列
1.表格的跨列（指单元格的横向合并）
语法：
<table>
<tr>
<td colspan="所跨的列数">单元格的内容</td>
</tr>
</table>
2.表格的跨行（指单元格在垂直方向上的合并）
语法：
<table>
<tr>
<td rowspan="所跨的行数">单元格的内容</td>
</tr>
</table>
3.跨行和跨列的综合应用
不管怎么跨行和跨列，并不改变表格的特点，同行的总高度一致，同列的总宽度也一致，因此在写做表格的题目时，先不要急着敲代码，先看表格是几行几列，再看哪些单元格跨行或者跨列了，思路一定要清晰，然后在开始做题。
<table border="1">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
看以上的代码，我们可以知道第一行跨了三列，第二行跨了两行，第四行跨了两行。注意border表示边框的长度，没有border就不会有边框。
3.媒体元素
①视频元素
语法：
<video src="视频路径" controls ="controls"></video>
controls属性用于提供播放、暂停和音量控件，如果没有此属性那么视频就不能直接播放；其次还可以i使用width和height设置视频的宽度和高度。
注意：使用视频元素不是所有的浏览器都能够支持，因此需要在video元素中间插入一段文字用于提示，这样就可以告诉用户您的浏览器不支持。
<video src="视频路径" controls ="controls">您的浏览器不支持</video>
并且有些浏览器有不能识别出的格式，这个时候应该使用source元素，使用source元素来链接到不同的视频文件，浏览器会自动选择一个可以识别的格式。
<body>
<video controls>
<source src="img/video.mp4"></source>
<source src="img/video.webm"></source>
你的浏览器不支持video标签
</video>
</body>
直接在video元素里面嵌套一个source元素。
主流浏览器支持的视频格式如下表所示：
| IE | Firefox | Opera | Chrome | Safan | |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
| MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
其他元素： autoplay=“autoplay” <!–自动播放–>
loop=“loop” <!–循环播放，不能限定次数 -->
4.音频元素
语法：
<audio src="音频路径" controls ="controls"></audio>
音频和视频的语法及用法一样。那么同样使用音频元素的时候不是所有的浏览器都支持的，要想实现多个路径，也是使用source元素。
主流浏览器支持的音频格式如下表所示：
| IE | Firefox | Opera | Chrome | Safan | |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 3.0+ | 不支持 |
| MP3 | 9.0+ | 不支持 | 不支持 | 3.0+ | 3.0+ |
| MAV | 不支持 | 4.0+ | 10.6+ | 不支持 | 3.0+ |
5.HTML5的结构元素
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容 |
| footer | 标记脚部区域的内容 |
| section | 主体部分 |
| article | 独立的文章内容 |
| aside | 常用于侧边栏 |
| nav | 导航类辅助内容 |
这些元素的作用？
用于页面布局，把一个页面的结构划分出来，分别在每块对应的部分添加相应的内容。
<html>
<head>
<title>网易邮箱页面布局</title>
<style>
header,section,footer{
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>
<head>标签里面嵌套了一个<style>标签，这个标签是样式的意思，此标签里面的代码只是让大家能更好地看到每块元素的位置，后面在CSS中具体讲解。
6.<iframe>框架
①作用：使页面中的部分内容用框架实现。
②语法：
<iframe src ="引用页面地址" name="框架标记名" ...></iframe>
<!--此文件的文件名叫boke.html-->
<body>
在页面中打开一个新的网页窗口
</body>
<!--此文件的文件名叫test.html-->
<body>
<iframe src="boke.html" width="500px" height="236px" name="firstPage"/>
</body>
我们可以看出src引用的页面地址是另外一个文件，而运行结果边框里面的内容就是第一个HTML文件里面的内容，所以我们清楚知道了iframe的作用。路径一定要相匹配否则运行结果就是报错，提示未找到该文件。
③iframe属性的使用
分为两步骤：
◀在被打开的框架上加上name属性
<iframe name ="mainFrame" src="路径1"></iframe>
◀在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href ="路径1" target="mainFrame">下边显示第一页</a>
<a href ="路径2" target="mainFrame">下边显示第二页</a>
在同一个页面上，点击下边显示第一页，运行时下面就会有边框，边框里面的内容就是引用页面的路径里面的内容，注意框架标记名和目标窗口名保持一致。
三、表单
1.表单概述：表单就是一个将用户信息组织起来的容器。
2.表单标签及表单属性
①<form>标签：用来实现表单的创建 。
属性：action：用来提交地址，若属性值为空则默认表单提交到本页。
method：告诉浏览器如何将数据发送到服务器。
②<input>标签：用以设定各种输入资料的方法。
常用属性：
type：此属性指定表单元素的类型，可用的类型：text（文本框）、password （密码框）、checkbox（复选框）、radio（单选按钮）、button（普通按钮）、reset（重置按钮）、submit（提交按钮）、week（周）、date（日期）、email（邮箱）、number （数字）、url（网址）、hidden（隐藏）、image（图片）、range（滑块）、search（搜索）。
name：此属性指定表单元素的名称。
value ：可选属性，指定表单元素的初始值。
maxlength：指定表单元素的最大字符数，默认值为无限大。
size：此属性指定表单边框的长度。
checked：默认值。
注意：input元素中的email类型，url类型、number类型有自动验证输入是否合法的功能！
定义了三个不同类型的输入，第一个是一个文本框，无初始值；第二个也是一个文本框，但是初始值为“张”；第三个为密码框，当输入密码时显示的内容为实心的小圆点，旁边有一个小眼睛是显示内容，和我们平常登录QQ一样，输入密码也是这种效果。
我们可以看出method的值为“post”，其实它还有另外一种表示，method取值“get”，两者有什么区别呢？
◀post方法提交方式不会改变地址栏状态，表单数据不会被显示。
◀使用get方法提交方式，地址栏状态会发生改变，表单数据会在URL信息中显示。
下面我们来看不同的类型可我们带来什么样不同的效果呢？
<body>
<form method="post" action="">
性别：
<input name ="gen" type="radio"value="男"/>男
<input name ="gen" type="radio"value="女"/>女
</form>
</body>
type取值radio，表示单选按钮，当name的取值相同时可以实现互斥，就是当选中男了就不能同时选中女。如果在男后面再加上一个默认属性，运行结果是会选中男的！！
其实方法都一样，当取值checkbox时候可以选中多个按钮，这个类似于考试中的多选题；当取值number时候，输入字符提交信息时就会提示必须请输入数字；当取值为email时候必须有“@”符号否则也会提示；当取值为url时候必须输入网址，而网址有网址的格式，所以当输入其他内容时也会给提示语句。
③列表框
列表框又称下拉框，它是通过<select>标签和<option>标签实现的。
语法：
<select name ="指定列表名称" size="行数">
<option value="可选项的值" selected="selected" >...</option>
<option value="可选项的值">...</option>
<option value="可选项的值">...</option>
</select>
size 属性确定列表中可同时看到的行数；selected属性表示该选项在默认情况下是被选中的，在一个列表框中默认被选中只能是一个，和单选按钮一样。
<body>
<form method="post" action="">
出生日期:
<input type="text" name="byear" value="yyyy" size="4" maxlength="4" />年
<select name="bmon">
<option value="">(选择月份)</option>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select>月
<input type="text" name="bday" value="dd" size="2" maxlength="2" />日
</form>
</body>
定义了两个文本框并且都给了初始值，也定义了边框长度和输入最大字符数。还有一个列表框。
④按钮
分为：普通按钮（button）只是一个简单的按钮
提交按钮（submit）
会将信息提交到action属性所指定的URL，并传递表单信息。
重置按钮（reset）
点击该按钮，无论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到初始状态，填写或输入的数据将全部被清空。
⑤多行文本域
语法：
<textarea name="textarea" cols="显示的行数" rows="显示的列数">
文本内容
</textarea>
<body>
<form method="post" action="">
<h4>填写个人评价</h4>
<p>
<textarea name="textarea" cols="40" rows="6">自信、活泼、善于思考...</textarea>
</p>
</form>
</body>
注意：<textarea>标签中不能使用value属性来赋初始值！！！要想实现有初始值将内容直接写在标签的中间即可，运行后并且还可以进行输入。
⑥滑块：
<body>
<form action="#" method="post">
<p>
请输入数字：
<input type="range" name="rangel" min="0" max="10" step="2" />
</p>
<input type="submit" />
</form>
</body>
我们可以看到，运行结果会出现一个滑块，用于输入包含一定范围内的数字值的文本框。
缺点：不能看到滑到什么地方是什么数字，只能自己估摸着。
3.表单的高级应用
①设置表单的隐藏域
将type属性设置为hidden隐藏类型即可创建一个隐藏域，隐藏就是看不到。即使设置了初始值也看不到内容。
②表单的只读和禁用
只读：不能修改数据。
禁用：按钮背景颜色为灰色，无法使用该按钮。
共同点：文本框都不能输入
不通点：
1、展示：禁用文本框变成灰色
2、disable的表单元素不能被提交到另外一个页面
③表单元素的标注
标注：点击文本实现选中，无需点击按钮。
语法：
<label for =“表单元素的id”>标注的文本</label>
在<label>标签中，使用了for属性来指定当鼠标单击标注文本时，焦点对应的表单元素。
<body>
<form>
请选择性别：
<label for="male">男</label>
<input type="radio" name="gender" id="male"/>
<label for="female">女</label>
<input type="radio" name="gender" id="female"/>
</form>
</body>
用户在选择性别的时候，不需要点击按钮，点击男或女也能实现选中。
4.表达的初级验证
①placeholder（提示语）
用于input类型的文本框提供的一种提示语句，在文本框里面显示浅灰色，当要输入其他内容的时候该提示语会自动消失，无需手动删除再次输入。
②required（非空）
用于规定文本框填写的内容不能为空，当没有输入内容的时候提交会提交失败，并且会提示请填写此字段。
③pattern（正则表达式验证）
用于验证input类型文本框用户输入的内容是否与自定义的正则表达式相匹配。
<form action="#" method="post">
<p>
电话号码：
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
*以13、15、18开头的11位数字
<br />
<input type="submit" value="提交" />
</p>
</form>
\d:0-9任意一个数字
{数字}：限定长度
\w:任意一个a-z,A-Z,0-9
[字符]：表示当前位可以从[]中取任意一个
2487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
