<!--Doctype表示文档类型--><!DOCTYPE html><html lang = "en"><!--存放不可见元数据：<link>,<meta>,<noscript>,<script>,<style>,<title>--><head> ???<!--meta:提供关于文档的信息--> ???<meta charset="utf-8" /> ???<!--浏览器左上角标签--> ???<title>Page Title</title></head><!--存放可见事情--><body> ???<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> ???????????<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>这是第三章内容</body></html>HTML教程
原文地址：https://www.cnblogs.com/haochen273/p/10269327.html