<title>title</title>
HTML文档头部
<meta charset="utf-8>定义文档的字符编码
<meta name="keywords" content="音乐...">
<meta name="description" content="网易...">
描述了一些文档基本信息，content供搜索引擎使用
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
供移动端浏览器使用
关于meta标签更多内容可参考Haorooms
<link>标签还可以引入CSS样式
<link rel="stylesheet" href="style.css">
HTML文档主体
书写规范：标签和属性名小写，属性值双引号引起来，嵌套利用统一缩进
对所有标签有用的属性:
- id:规定了元素在页面中唯一地标识
<div id="nav"></div> - class:在功能中拥有同一功能或样式的元素可以用class标识
<span class="time"></span> - style: 规定元素的样式（并不推荐在其中写样式）
<div style="display:none;"></div> - title: 鼠标悬浮显示提示
<a title="collection"></a>
文档章节
<header>：表示文档章节的头部，里面可以包含标题、logo等
<footer>：主要用于页面或独立文档底部
<nav>：用于存放导航性质的内容
<aside>：表示和主要内容不想关的内容，如广告等
HTML 标题（Heading）是通过< h1> - < h6>标签来定义的。
可以
超链接通过标签 < a> 来定义。
- 创建指向另一个文档的连接
<a href="http://www.runoob.com" target=_blank>这是一个链接</a>
在 href 属性中指定链接的地址，target=_blank表示在新页面中打开链接，target=_self表示在当前窗口中显示（默认值）
- 创建一个文档内部的锚点
< p id="paragraph1">123</p>```
回到顶部功能也可以利用超链接实现<br>- 链接到email地址
```< a href="mailto:xxx@163.com">联系我们</a>```<br>- 在手机上实现点击电话号码跳出拨号界面
< a href="tel:xxx">xxx</a>
**文字强调**:em, strong
< em>39< /em>呈现样式为<em>39</em>
< strong>39< /strong>呈现样式为<strong>39</strong>
指定文字特定样式：<span>39</span>
**文字换行**：br
**引用**：cite，q
<div>
鲁迅<cite>故乡</cite>中写到<q>xxxxx</q>
</div>
**代码**：code
**格式化**：粗体< b>，斜体< i>
#####组合内容
- 分区：div
- 段落：p
- 列表：ul, ol, dl(自定义列表)，列表间可以相互嵌套
<ul> unorder list
<li>1</li>
<li>2</li>
</ul>
自定义列表
< dt>定义了列表的项
< dd>列表项的内容
一个dt中可以有多个dd
- 保留文本原格式：pre
- 大段引用：blockquote
#####嵌入资源
- img:嵌入图片
<img src="xx" alt="xx">
alt给出图片的描述
- 嵌入页面：iframe
<iframe src="http://www.163.com"></iframe>
嵌入页面上的操作并不影响当前页面
- 嵌入插件：object，embed
<object type="application/x-shockwave-flash"> 嵌入插件类型
<param name="movie" value="http://pdfReader.swf"> 插件参数
<param name="flashvars" value="http://book.pdf">
</object>
<embed type="application/x-shockwave-flash"
src="http://pdfReader.swf" width="640 height="480">
- 插入视频：video
可以在<video>标签添加autoplay使页面打开时视频自动播放
loop属性使视屏循环播放
属性 | 值 | 描述
--- | --- | ---
autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。
height | pixels | 设置视频播放器的高度。
loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src | url | 要播放的视频的 URL。
width | pixels | 设置视频播放器的宽度。
- 插入音频：audio
- 图：canvas，svg
- 热点区域：map，area
map可以定义例如图片中的热点区域，使用户点击可跳转到另一个页面
#####表格
<table border="1"> 表明格子线宽为1
<caption>table1</caption> 表格标题
<thead>
<tr>
<th>val1</th> 表的一个字段，可以在首行或首列
<th>val2</th>
</tr>
</thead>
<tbody>
<tr> 表的一行
<td>1</td> 一个字段的值
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">12345</td> 表示占两列，rowspan表示占两行
</tr>
</tfoot>
</table>
#####表单标签
<form action="/login" method="post" class="m-form">
action为提交的表单的后台地址，method为表单提交方式
<fieldset> <!--表单分区-->
<legend>照片选择</legend> <!--分区标题-->
<label for="file">选择照片</label>
<input type="file" id="file"> <!--文件选择类型表单-->
</fieldset>
<fieldset>
<legend>综合设置</legend>
<div>选择尺寸：</div>
<div>
<input class="cb" type="checkbox" name="size" id="cb_0" value="5" checked>
<!--多选框-->
<!--name为表单名称-->
<!--value为提交的值-->
<!--checked表示默认选中-->
<!--如果想禁止用户操作，使用disabled属性-->
<!--同一类多选框的name值相同-->
<label for="cb_0" checked>5寸</label>
<input class="cb" type="checkbox" name="size" id="cb_1" value="6">
<label for="cb_1">6寸</label>
</div>
<div>选择相纸：</div>
<div>
<input class="rd" type="radio" name="material" id="rd_0" value="fushi">
<!--单选框-->
<label for="rd_0">富士</label>
<input class="rd" type="radio" name="material" id="rd_1" value="keda">
<label for="rd_1">柯达</label>
</div>
<div>
<label for="delivery">配送方式：</label>
<select id="delivery">
<option value="0">快递</option>
<option value="1">EMS</option>
<option value="2" selected>平邮</option>
</select>
<!--下拉选择框，默认显示第一项，可以使用selected属性更改默认选择项-->
<!--使用optgroup可以对选择项进行分组-->
</div>
<div>
<label for="description">商品描述：</label>
<input class="txt" type="text" id="description" placeholder="描述">
<!--单行文本框，可以不写，默认为文本框-->
</div>
<div>
<label for="feedback">意见反馈：</label>
<textarea name="feedback" rows="4" id="feedback">
</textarea>
</div>
</fieldset>
<div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
**HTML5中新的input type类型**
- email
- url
- number
- tel
- search
- range
- color
- date picker
#####HTML <input> 标签的 type 属性#####
值 | 描述
--- | ---
button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox | 定义复选框。
file | 定义输入字段和 "浏览"按钮，供文件上传。
hidden | 定义隐藏的输入字段。
image | 定义图像形式的提交按钮。
password | 定义密码字段。该字段中的字符被掩码。
radio | 定义单选按钮。
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。
text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
#####HTML实体字符
假设想在页面上显示如下内容：这是个<span>标签
但是<span>并不会显示，这时候就需要用到实体字符，类似于转移字符
网友评论