Page Title
<b>1.文本元素</b> <br>
b元素（加粗）： 这是<b>HTML</b>教程 <br>
strong元素（加粗）： 这是<strong>HTML</strong>教程 <br>
wbr元素(安全换行)： this is <wbr>asdfasdgasdgfasdfasdf is apple <br>
i元素(倾斜)： 这是<i>HTML</i>教程<br>
em元素(倾斜): 这是<em>HTML</em>教程<br>
var元素(倾斜): 这是<var>HTML</var>教程<br>
s元素(删除线):这是<s>HTML</s>教程<br>
del元素(删除线): 这是<del>HTML</del>教程<br>
u元素(下划线): 这是<u>HTML</u>教程<br>
ins元素(下划线): 这是<ins>HTML</ins>教程<br>
small元素(放小字体): 这是<small>HTML</small>教程<br>
sub元素(下标): 这是HTML<sub>5</sub>教程<br>
sup元素(上标): 这是HTML<sup>5</sup>教程<br>
code元素(代码块): 这是<code>HTML</code>教程<br>
kdb元素(用户输入): 这是<kdb>HTML</kdb>教程<br>
abbr元素(缩写): 这是<abbr>HTML</abbr>教程<br>
dfn元素(表示术语): 这是<dfn>HTML</dfn>教程<br>
q元素(双引号): 这是<q>HTML</q>教程<br>
cite元素(引用标题): 这是<cite>HTML</cite>教程<br>
bdo元素(文字方向): 这是<bdo dir="rtl">HTML</bdo>教程<br>
mark元素(突出显示): 这是<mark>HTML</mark>教程<br>
time元素(时间): 这是<time>2019-01-01</time>教程<br>
span元素(跟CSS搭配): 这是<span>HTML</span>教程<br>
<b>2.超链接和路径</b> <br>
<a href="http://www.baidu.com">BaiDu</a> <br>
<!--新开一个窗口进入百度-->
<a href="http://www.baidu.com" target="_blank">BaiDu</a> <br>
<!--相对路径-->
<a href="html_01.html">转入第二页</a> <br>
<a href="../html_01_second.html">转入父目录</a> <br>
<b>3.锚点链接(页面内定位)</b> <br>
<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a> <br>
<b>4.分组元素</b> <br>
<!--段落-->
<p>这是一个段落</p>
<p>这是另外一个段落</p>
<!--通用分组与段落类似-->
<div>这是一个通用分组</div>
<div>这是另外一个通用分组</div>
<!--引用大段落来自其他内容-->
<blockquote>这是一个来自其他内容的引用</blockquote>
<blockquote>这是另外一个来自其他内容的引用</blockquote>
<!--展示格式化内容(编辑器怎么排版，我就怎么排版)-->
<pre>
########
#########
#######
</pre>
<!--添加水平线-->
<hr>
无序列表:<br>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul> <br>
有序列表：<br>
<ol start="2">
<li>张三</li>
<li value="8">李四</li>
<li>王五</li>
</ol> <br>
生成说明列表：<br>
<dl>
<dt>这是第一份文件</dt>
<dd>这是第一份文件的详细信息1</dd>
<dd>这是第一份文件的详细信息2</dd>
<dt>这是第二份文件</dt>
<dd>这是第二份文件的详细信息1</dd>
<dd>这是第二份文件的详细信息2</dd>
</dl> <br>
图片链接: <br>
<figure>
<figcaption>这是一张图片</figcaption>
<img src = "img/dog.jpg">
</figure>
<b>5.表格元素</b> <br>
构建基本的表格：
<table border="1" style="width: 300px;">
<!--表的标题-->
<caption>这是标题</caption>
<!--设置某一列为红色-->
<colgroup>
<!--第一列不设置-->
<col>
<!--第二列为红色-->
<col style = "background: red;" span = "1">
</colgroup>
<!--表头thead-->
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>婚姻</td>
<td rowspan="4">基本情况</td>
</tr>
</thead>
<!--表格数据部分-->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<!--表脚foot-->
<tfoot>
<tr>
<td colspan="3">统计：共两人</td>
</tr>
</tfoot>
</table>
<b>6.文档元素</b> <br>
标题: <br>
<header>
这里存放页面的表头部分：LOGO,标题，导航等.
<hgroup>
<h1>这是大标题</h1>
<h4>这是一个副标题</h4>
</hgroup>
<nav>
这里是一个导航
</nav>
</header>
主题部分: <br>
<section>
这是文档的主题部分
</section>
<article>
这是一个文档
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
<aside>
</aside>
页面尾部: <br>
<footer>
这里是页面尾部，版权啊，等等
<address>
这里是联系信息
</address>
</footer>
<br>
<b>7.嵌入元素</b> <br>
插入图片：
<!--alt:加载错误的时候显示的文字，width/height设置长度高度, usemap设置点击图片跳转到另外一个网址-->
<img src="img/dog.jpg" alt="狗图" width="200" height="300"> <br>
在页面中插入另外一个frame： <br>
<a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a>
<br>
<iframe src="http://www.bilibili.com" frameborder="1" width="800", height="600" name="in"></iframe> <br>
嵌入插件内容： <br>
<!--为了扩展浏览器的功能，-->
<embed src="https://www.bilibili.com/video/av10257787/?p=2" width="480" height="400"> <br>
进度条： <br>
<progress value = "30" max = "100"></progress> <br>
范围值： <br>
<meter value = "30" min = "10" max = "100" low = "40" high="80" optimum="60"></meter> <br>
<b>8.音频和视频</b> <br>
<!--autoplay自动播放，loop反复播放，muted静音, poster是视频开头的图片，preload加载网络video使用，none什么都不加载，metadata下第一帧，auto尽快下载-->
<video src="pink.mp4" width="640" height="480" controls poster="img/dog.jpg"></video> <br> <br>
音频和视频几乎一样（除了没有宽高）: <br>
<audio src="xusong.mp3" controls></audio> <br>
<b>9.表单元素</b> <br>
1. form元素（用以用户输入数据）: <br>
<!--action：表单提交的页面， method：用get和post提交，enctype：采用编码格式，name：表单名称，target：提交目标，
autocomplete浏览器记住用户数据，novalidate验证性,form让表单为的元素和指定的表单挂钩提交--->
<form name="form01" autocomplete="on" action="http://www.haosou.com" id="register">
<!--fieldset对表单进行分组, name+form+disabled-->
<fieldset>
<!--legend为分组添加标签-->
<legend>注册分组</legend>
<!--label可用于CSS-->
<label>
<!--input属性:autofocus:光标选中，disabled不可输入，autocomplete记住用户，type，name用提交数据的，value的默认值--->
用户名： <input name="User" autofocus="on" value="666"> <br>
</label>
<label>
<!--外部表单控件可以连接form-->
电子邮件： <input name="email" form = "register">
</label>
<!--button属性: type：submit提交/reset重置/button按钮， formaction, formenctype, formmethod, formtarget, formvalidate-->
<button>提交</button>
</fieldset>
</form> <br>
2. Input的type属性：<br>
<form>
<!--text的属性: maxlength,size, name, value, readonly, disabled, list提供建议值,required必须输入才能提交, palceholder输入字符的提示 -->
文本：<input type="text" list="abc" required> <br>
<!--password的属性：与text基本一致-->
密码：<input type="password" placeholder="输入密码吧"> <br>
搜索: <input type="search"> <br>
<!--max,min,step,-->
数字: <input type="number"> <br>
范围: <input type="range"> <br>
日期: <input type="date"> <input type="month"> <input type="time"> <input type="week"> <input type="datetime"> <input type="datetime-local"> <br>
颜色: <input type="color"> <br>
复选框: 音乐<input type="checkbox" name="music" value="1"> 体育<input type="checkbox" name="sport" value="2"> <br>
单选框: <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 <br>
提交: <input type = "submit"> <br>
重置: <input type="reset"> <br>
按钮: <input type="button"><br>
图片按钮: <input type = "img" src="img/dog.jpg"> <br>
email: <input type="email"> <br>
telephone: <input type="tel"><br>
URL: <input type="url"><br>
隐藏:<input type="hidden" value="1"><br>
上传文件:<input type="file" accept="image/gif"><br>
<button>提交</button>
</form>
<datalist id="abc">
<option value="1">苹果</option>
<option value="2">橘子</option>
</datalist> <br>
3. 下拉列表框：<br>
<form action="http://www.haosou.com">
<!--auto,disabled,form size（下拉高度）,multiple（多选）,autofocus, required-->
<select name="fruit">
<!--选项分组-->
<optgroup label="水果">
<option value="1">苹果</option>
<option value="2" selected>橙子</option>
<option value="3">香蕉</option>
</optgroup>
<optgroup label="粗粮">
<option value="4">大米</option>
<option value="5">稻谷</option>
<option value="6">玉米</option>
</optgroup>
</select>
<button>提交</button>
</form> <br>
4.多行文本框：<br>
<form action="http://www.haosou.com">
<!--name,form,readonly,disabled,maxlength,autpfocus,placeholder,rows,cols,wrap,requried-->
<textarea name="content" cols="30" rows="10">
请留下你的建议
</textarea>
<button>提交</button>
</form> <br>
<b>10.全局属性和其他</b> <br>
1. 实体：将有特殊意义的字符通过实体代码显示出来 <br>
显示括号： <div> <music> <br>
空格： 我 你<br>
和号： &HTML<br>
引号： "HTML<br>
撇号：'HTML<br>
版权：©<br>
2.元数据meta: <br>
2.1. 指定名/值元数据对 <br>
<meta name="author" content="bnbbs"><br>
<meta name="description" content="这是一个HTML页面"><br>
<meta name="keywords" content="html5响应"><br>
<meta name="generator" content="text3"><br>
2.2.声明编码格式<br>
<meta charset="utf-8"><br>
3.全局属性: <br>
3.1. id属性: <br>
<p id="abc"><br>
<p id="def"><br>
id属性给元素分配一个唯一的标识符，通常用于CSS和javascript调用选中元素，只能是独有的<br>
3.2. class属性: <br>
<p class="abc"><br>
<p class="abc"><br>
<p class="abc"><br>
class也是用于定位，是用于元素的归类，通过CSS同时设置多个元素<br>
3.3.accesskey元素: <br>
<input type="text" name="user" accesskey="n><br>
快捷键操作，window下为Alt+指定的键<br>
3.4.contenteditable属性:<br>
<p contenteditable="true"><br>
用以修改text<br>
3.5. dir属性： <br>
<p dir="rtl"><br>
设置文本方向，左到右为ltr，右到左为rtl<br>
3.6. hidden属性: <br>
<p hidden><br>
隐藏元素<br>
3.7. lang属性：<br>
<p lang="en"><br>
可以局部设置语言<br>
3.8. title属性：<br>
<p title="HTML5教程"><br>
对元素的内容进行额外提示<br>
3.9.tabindex元素 <br>
<input type="text" name="user" tabindex="1"><br>
表单中按下Tab键，实现获取焦点的顺序，-1为不会被选中<br>
3.10. style属性<br>
<p style="color: red;"><br>
设置行内的CSS样式<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name = "1"></a>这是第一章内容
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name = "2"></a>这是第二章内容
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name = "3"></a>这是第三章内容
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
