我要评论<!--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>
如对本文有疑问， 点击进行留言回复！！
网友评论