目录：看左边
前言
提示：持续更新中
自己学习写的内容，参考书本《HTML5+CSS3+Bootstrap》
提示：以下是本篇文章正文内容
一、HTML标签
1.1 HTML概述
HTML是（Hypertext Markup Language）超文本标记语言的缩写，是用于描述网页文档的一种标记语言。
标记语言是一套标记标签 (markup tag)
1.2 文档结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="#" />
<script language="JavaScript" src="#"></script>
<style>/**/</style>
<script></script>
</head>
<body>
正文
</body>
</html>1.3基本标签
1.块级元素
1.标题标签<hn></hn>
<h1><h2><h3><h4><h5><h6>n可以取1~6的整数</h6></h5></h4></h3></h2></h1>2.<blockquote></blockquote>长引用
3.<pre></pre>预格式化文本
4.<hr/>水平线
5.<address></address>地址
6.列表
<!--无序列表-->
<ul>
<li>serif</li>
<li>sans-serif</li>
<li>Helvetica</li>
<li>Verdana</li>
</ul>
<!--有须列表-->
<ol>
<li>serif</li>
<li>sans-serif</li>
<li>Helvetica</li>
<li>Verdana</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>中文字体</dt>
<dd>宋体</dd>
<dd>微软雅黑</dd>
<dt>英文字体</dt>
<dd>Sans-serif</dd>
<dd>Serif</dd>
</dl>2.内联元素
1.<br/>换行
2.<b></b>粗体 <i></i>斜体 <small></small>更小的文本
<b>This text is bold</b>
<i>This text is italic</i>
<small>This text is small</small>
3.<code>定义计算机程序代码文档</code>、<kbd>定义键盘文本</kbd>、<samp>定义样本文本</samp>、<var>定义变量或程序参数</var>、<dfn>标记特殊</dfn>、<cite>定义引用；引用另一个文档，比如书或杂志的标题</cite>
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<samp>Sample text</samp>
<var>Computer variable</var>
<dfn>Definition text</dfn>
<cite>The Complete Manual of Typography </cite>
4.<em>斜体 <strong>粗体 <abbr>简写 <ins>文档的插入 <del> 对文档的删除<q> 短引用<sub>定义下标文本 <sup>定义上标文本
<strong>This text is strong</strong>
<em>This text is emphasized</em>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
<p>
This text contains<sup>superscript</sup>
This text contains<sub>subscript</sub>
</p>
<p>常用于数学等式、科学符号和化学公式中</p>
<p>
Matthew Carter says，<q>Our alphabet hasn't changed in eons.</q>
</p>
<p>短引用，浏览器在该元素周围自动添加引号，IE中不显示。</p>
3.<div>和<span>
div和span元素没有自身固有的表现层性质，可以用样式表来格式化内容
1.div元素用来表示块级元素，当与 CSS 一同使用时，<div> 元素可用于对大的内容块设置样式属性，元素的另一个常见的用途是文档布局。
2.span元素用于表示内联元素，用作文本的容器，用来组合文档中的行内元素，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性，<span>只能包含文本和其他内联元素，不能将块级元素放入其中。
<div id="nav">
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a class="hide" href="#">精彩案例</a></li>
<li><a class="hide" href="#">网站导航</a></li>
<li><a class="hide" href="#">联系我们</a></li>
<li>Joan:<span class="phone">999.8282</span></li>
<li>Lisa:<span class="phone">888.4889</span></li>
</ul>
</div> 
可以用id和class属性为元素命名
3.id属性
用于标识文档中的唯一元素，id的值在文档中只能使用一次，可将id用于识别网页的不同部分
id和class的属性值：
应该以字母A-Z或a-z或下划线开头
字母、数字、连字符、下划线、冒号和句点都是可用的，其他特殊字符不可用
大小写敏感
id和class不只用于div和span，可用于几乎所有的HTML
<div id="header">
(masthead and navigation here)
</div>
4.特殊字符
所有的字符引用都以“&”开头，以“；”结尾
| 字符 | 描述 | 命名 | 数值 |
| 字符空格 | |  ； | |
| & | 表示and的符号 | & | & |
| ' | 撇号 | ' | ' |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| © | 版权 | © | E |
| ® | 注册商标 | ® | ® |
1.4 多媒体
1. 图像标记<img>
<img src="images/xiaoyuan01.jpg" alt="青青流色新" width="500" height="300" align="left">| 属性名 | 说明 |
| src | 图像地址 |
| alt | 添加图像的替代文字 |
| width/height | 设置图像宽度/高度 |
| border | 设置图像边框 |
| align | 设置图像对齐方式 |
2. 多媒体格式
视频格式和音频格式
下面代码是插入音频和插入动画
<embed src="audio/jiangnan.mp3" width="300" height="50" autostart="true" loop="true">
<embed src="video/shendiaoxialu.swf" width="300" height="200">3. 多媒体文件标记<embed>
<embed src="url" width="" height="" autostart="" loop=""></embed>
1.5 链接
1. 超级链接标记<a>
<a href=" url" target=" target-windows" >链接标题</a>
href属性定义了链接标题所指向的目标文件的URL地址。
target属性指定用于打开链接的目标窗口，默认方式是原窗口。
| 属性值target | 说明 |
| parent | 当前窗口的上级窗口，一般在框架中使用 |
| blank | 在新窗口中打开 |
| self | 在同一窗口中打开，和默认值一致 |
| top | 在浏览器的整个窗口中打开，忽略任何框架 |
1.链接到网页
2.链接到图片
3.链接到文件
2. 超链接类型
内部链接：将超链接标记<a>中href属性的URL值设置为相对路径，就可以在html文件中定义内部超链接
外部链接：需要链接网站外部文件时，将超链接标记<a>中href属性的URL值设置为绝对路径即可
书签链接：跳转到文章的内部链接
3. 超链接路径
绝对路径：文件的完整路径，包括文件传输的协议，如http、ftp等，一般用于网站的外部链接，例如http://www.sohu.com
相对路径：相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接
链接到相同目录中的文件
只需提供文件名(或以./开始，再加文件名)
指向只有文件名的链接，表示链接文件与当前文档在一个目录中
服务器将在当前目录中查找相应文件
链接到低层目录
要将路径名包含在URL中
例：href="recipes/index.html" (或：href="./recipes/index.html")
链接到高层目录
路径名以../开始，告诉浏览器"回到上一层目录"，然后再找具体文件的路径
例：href="../index.html"
根路径：根路径的设置以“/”开头，后面紧跟文件路径
4. 内部书签
<a> 可定义锚：
通过使用 href 属性，创建热点指向另外一个文档的链接
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
第一步：命名目的地
第二步：链接到目的地
<p align="center"><a href="#ptq">趵突泉</a>
<h3><a name="ptq">趵突泉</a></h3>5. target属性
1.6表格<table></table>
1.属性
| 标签 | 说明 |
| <table> | 表格标记 |
| <tr> | 行标记 |
| <td> | 单元格标记 |
| <th> | 表头标记 |
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>1001</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>1002</td>
<td>96</td>
</tr>
</table>
HTML5支持的表格属性
|
•
border
|
•
设置表格边框宽度
|
|
•
colspan
|
•
设置单元格跨列
|
|
•
rowspan
|
•
设置单元格跨行
|
早期HTML支持的表格的属性
| 属性名 | 说明 |
| width | 设置表格宽度 |
| height | 设置表格高度 |
| bordercolor | 设置表格边框颜色 |
| bgcolor | 设置表格的背景颜色 |
| background | 设置表格背景图像 |
| align/ valign | 设置表格对齐方式 |
| cellspacing | 设置单元格间距 |
| cellpadding | 设置单元格边距 |
2.表格嵌套和布局
在网页制作过程中，对页面元素进行布局时，常常会用到嵌套的表格，即在表格的一个单元格中嵌套使用一个或者多个表格。
1.7内嵌框架
内嵌框架，也叫浮动框架，是在浏览器窗口中嵌入子窗口，即将一个文档嵌入在另一个网页中显示。使用成对的<iframe></iframe>标记即可在网页中插入内嵌框架，语法格式如下。
<iframe src="url"></iframe>
内嵌框架属性
| 属 性 | 描 述 |
| src | 设置源文件的地址 |
| width | 设置内嵌框架窗口宽度 |
| height | 设置内嵌框架窗口高度 |
| bordercolor | 设置边框颜色 |
| align | 设置框架对齐方式，可选值为left、right、top、middle、bottom |
| name | 设置框架名称，是链接标记的target所需参数 |
| scrolling | 设置是否要滚动条,默认为auto根据需要自动出现。Yes-有，No-无 |
| frameborder | 设置框架边框，1-显示边框，0-不显示（不提倡用 yes 或 no） |
| framespacing | 设置框架边框宽度 |
| marginheight | 设置内容与窗口上下边缘的边距，默认为1 |
| marginwidth | 设置内容与窗口左右边缘的距离，默认为1 |
1.8表单<form>
<form name="" action="url" method="post/get" enctype="encoding"></form>
1.表单（Form）
是HTML的一个重要部分，是网页提供的一种交互式操作手段，主要用于采集和提交用户输入的信息。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
2.<input> 输入标签
<form><input name="控件名称" type="控件类型"></form>
| 属性值 | 说明 | 属性值 | 说明 |
| text | 文本框 | button | 标准按钮 |
| password | 密码框 | submit | 提交按钮 |
| file | 文件域 | reset | 重置按钮 |
| checkbox | 复选框 | image | 图像域 |
| radio | 单选按钮 |
<form name="fr">
text：<input name="uname" type="text" maxlength="8" size="8" value="username" /> <br />
密 码：<input name="pwd" type="password" maxlength="8" size="8" />
<br />
<p>复选框<br />
<input name="check1" type="checkbox" value="sport" />户外运动
<input name="check2" type="checkbox" value="voice"/>音乐
<input name="check3" type="checkbox" value="movie"/>电影
<input name="check4" type="checkbox" value="shopping"/>购物</p>
<p>单选按钮<br />
<input name="radio" type="radio" value="a1" />2000~4000
<input name="radio" type="radio" value="a2" />4000~8000<br>
<input name="radio" type="radio" value="a3" />8000~10000
<input name="radio" type="radio" value="a4" />10000~20000</p>
<input type="submit" value="提交"/>
<input type="reset" value="重置按钮"/>
<input type="button" value="普通按钮"/>
<input type="image" value="图像形式的提交按钮" src="images/tu11.jpg"/>
</form>
3 列表框标记<select>
可创建单选或者多选选项列表
<form>
<select name="列表框名称" size="" multiple="true/false" >
<option value="选项值" />选项显示内容
<option value="选项值" />选项显示内容
…
</select>
</form>
<select>标记用于定义列表框，<option>标记用于向列表框中添加列表项目,<select>标记中的size属性用于定义列表框的行数
multiple="true/false" 是否可选择多个选项
disabled="true/false" 是否禁用该下拉列表。
size="数字" 下拉列表中可见选项的数目。
<select name="" multiple="true" size="1" >
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="peach">桃子</option>
<option value="pear">梨</option>
</select>
4.文本域输入标记<textarea>
<form><textarea name="mytext" rows="5" cols="100" ></textarea></form>
一个文本框，里面可以输入信息。
<form>
我是一个文本域：<br>
<textarea name="message" rows="10" cols="30">
可以在这里输入信息
</textarea>
</form>
5 HTML5新增的表单元素和属性
1.HTML5新增input类型
数值输入域——number
<input name=" " type="number" min=" " max=" " step=" " value=" " />
step=" "：定义步长，点击一次按钮上下跳动多少个数
<form>
<p>请输入数字：<input type="number" name="no1" value="3"/></p>
<p>请输入大于等于1的数字：<input type="number" name="no2" min="1"/></p>
<p>请输入1-10之间的数字：<input type="number" name="no3" min="1" max="10" step="3"/></p>
</form>
滑动条——range
<input name="" type="range" min="" max="" step="" value="">
step=""：定义步长，滑动一次为多少
<form>
<p>请输入大于等于1的数字：
<input type="range" name="r1" min="1" value="1"/></p>
<p>请输入1-10之间的数字：
<input type="range" name="r2" min="1" max="10" step="3" value="3"/></p>
</form>
日期选择器——date pickers
<input name="" type="date" />
<form>
日期选择器的使用:<br/>
选取日、月、年：<input name="userdate" type="date" /><br/>
选取月、年：<input name="userdate" type="month" /><br/>
选取周和年：<input name="userdate" type="week" /><br/>
选取时间：<input name="userdate" type="time" /><br/>
UTC时间：选取时间、日、月、年（UTC—世界标准时间）
<input name="userdate" type="datetime" /><br/>
本地时间：<input name="userdate" type="datetime-local" /><br/>
</form> 
url类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字，则不允许提交。
<input name="u1" type="url" value=http://www.icourses.cn />
email类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是url地址格式的文字，则不允许提交。
<input name="emaill" type="email" value=fning@163.com />
2. HTML5表单新增属性
form属性：不用写那些属性，可以用一个id包起来
可以将表单元素写在页面上的任何位置，然后给该元素指定一个form属性，属性值为该表单的id（id是表单的惟一属性标识），通过这种方式声明该元素属于哪个具体的表单。
<form id="myform">
index上的：
formmethod和formaction属性
formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面。 同时，也可以使用formmethod属性对每个表单元素分别指定不同的提交方法。
<form id="testform" action="my.php">
用户名：<input name="uname" type="text" value="username" /> <hr/>
S1处理：<input type="submit" name="s1" value="提交到S1" formaction="s1.html" formmethod="post" /><p>
S2处理：<input type="submit" name="s2" value="提交到s2" formaction="s2.html" formmethod="get" /><p>
S3处理：<button type="submit" formaction="s3.html" formmethod="post" >提交到s3</button><p>
S4处理：<input type="image" src="images/PLAY1.gif" formaction="s3.html" formmethod="post" /><p>
<input type="submit" value="提交页面"/>
</form>
placeholder属性
placeholder是指当文本框处于未输入状态时文本框中显示的输入提示
<input type="text" placeholder＝"提示信息" />
autofocus属性
给文本框、选择框或按钮等控制加上该属性，当页面打开时，该控件将自动获得焦点
list属性
为单行文本框<input type ="text" >增加了一个list属性。该属性的值是某个datalist元素的id。datalist也是HTML5新增的元素，该元素类似于选择框<select>，不同的是当用户想要设定的值不在选择列表之内时，允许其自行输入。
<form action="test.php" method="get">
<input type="text" placeholder="提示信息"/><br>
<input type="text" autofocus><br>
WebPage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
autocomplete属性
autocomplete属性用于设置输入时是否自动完成，指定其值为"on" "off"与" "三类值
<input type="text" name="school" autocomplete ="on" />
required属性
在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中提示用户这个元素中必须输入内容。
<input type="text" name="f" required/><br>
pattern属性
按要求输入数据，类似于验证码
<input type="text" pattern="[0-9][A-Z]{3}" name="part" placeholder="输入内容：一个数字与三个大写字母。" />
1.9 HTML5简介
1 HTML5新特征
本地存储特性
设备兼容特性
连接特性
网页多媒体特性
三维与图形及特效特性
css特性
2 HTML5语法
标签不区分大小写
允许属性值不使用引号 但是还是建议：使用引号
允许部分属性值的属性省略
<input type="checkbox“ checked />
<input type="text“ readonly />
| 属性 | 描述 |
| checked | 省略属性值后，等价于checked="checked"。 |
| readonly | 省略属性值后，等价于readonly="readonly" |
| defer | 省略属性值后，等价于defer="defer" |
| ismap | 省略属性值后，等价于ismap="ismap" |
| nohref | 省略属性值后，等价于nohref="nohref " |
| noshade | 省略属性值后，等价于noshade="noshade" |
| nowrap | 省略属性值后，等价于nowrap="nowrap" |
| selected | 省略属性值后，等价于selected="selected" |
| Disabled | 省略属性值后，等价于disabled="disabled" |
| Multiple | 省略属性值后，等价于multiple="multiple" |
| Noresize | 省略属性值后，等价于noresize="noresize" |
3 浏览器支持
常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等均支持HTML5。
1.10 HTML5新增标记
1 <!DOCTYPE>和<meta>标记
<! DOCTYPE html>
<!DOCTYPE> 声明没有结束标签
<meta charset=“UTF-8”> 解决乱码问题
<meta> 标签位于文档的头部，不包含任何内容。
2 视频标记<video>
<video src="url" controls="" width="" height="">替代文字</video>
| 属性 | 值 | 说明 |
| src | url | 要播放的视频的URL |
| autoplay | autoplay | 视频在就绪后马上播放 |
| controls | controls | 添加播放、暂停和音量等控件 |
| width | 像素 | 设置视频播放器的宽度 |
| height | 像素 | 设置视频播放器的高度 |
| loop | loop | 设置视频是否循环播放 |
| preload | preload | 视频在页面加载时进行加载，并预备播放 |
3.音频标记<audio>
<audio src="url" controls="controls">替代内容</audio>
| 属性 | 值 | 说明 |
| src | url | 要播放的音频的URL |
| autoplay | autoplay | 音频在就绪后马上播放 |
| controls | controls | 向用户显示控件，例如播放、暂停、进度条等 |
| loop | loop | 设置音频是否循环播放 |
| preload | preload | 音频在页面加载时进行加载，并预备播放 |
4 结构元素
和div类似，即使删除这些结构元素，也不影响页面内容的显示效果
<article>元素:在页面中用来表示结构完整且独立的内容部分，里面可包含独立的<header><footer>等结构
<footer>元素：可以作为其直接父级内容区块是一个根区块的尾部内容
<article>
<header>
<h1>HTML5介绍</h1>
</header>
<p>header介绍</p>
<p>footer介绍</p>
<a href="#">阅读全文……</a>
<footer>
<a href="#">版权所有……</a>
</footer>
</article> 
<section>元素：表现普通的文档内容区块或者应用区块，一个区块通常由内容及标题组成。
<article>
<section>
<h1>评论</h1>
<article>
<header>
<p>Posted by:张三</p>
<p>发布时间：2017-08-08 10:01:01</p>
</header>
HTML5 is good thing.
</article>
<article>
<header>
<p>Posted by: 李四</p>
<p>发布时间：2017-08-09 11:01:01</p>
</header>
<p>正在学习HTML5，非常棒！</p>
</article>
</section>
<article>
aside元素:当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
nav元素：nav元素用于定义导航链接
<aside id="leftside">
<nav>
<ul>
<li><a href="#"> 导航一</a></li>
<li><a href="#"> 导航二</a></li>
<li><a href="#"> 导航三</a></li>
<li><a href="#"> 导航四</a></li>
</ul>
</nav>
</aside>
<address>元素：一般被用来提供联系人信息、网站链接、电子邮箱、地址、电话号码等，一般放在一个网页的开头或者结尾，可以包含在<footer>元素内。
<address>
<span>作者：111</span>
<span>地址：sss</span>
</address>5 页面交互元素
1、details和summary元素
可以显示和隐藏额外文字，summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题
summary：单击可以切换<details>标签之间内容的显示或隐藏。
<details>：默认是隐藏的，单机后才可以显示内容，也可以使用一个布尔属性open,加在元素上，可以做到显示内容。
</head>
<body>
<details>
<summary>经典金曲</summary>
<p>my heart will go on</p>
<p>take my breath away</p>
</details>
<details open>
<p>my heart will go on</p>
<p>take my breath away</p></details>
2、progress元素
<progress value="" max=""></progress>
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
下载进度：
<progress value="22" max="100">
</progress>
<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持这个标签。 <progress> </p>
3、meter元素
meter元素用于表示指定范围内的数值
<!DOCTYPE html>
<html>
<body>
<p>评分情况：</p>
大众评分<meter value="3" min="0" max="10" low="5" high="8" title="3" optimum="10">3</meter><br>
媒体评分<meter value="7" min="0" max="10" low="5" high="8" title="7" optimum="10">7</meter><br>
网站评分<meter value="9" min="0" max="10" low="5" high="8" title="9" optimum="10">9</meter><br>
<p><b>注释：</b>Internet Explorer 不支持 meter 标签。</p>
</body>
</html>
1811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
