H5元素是在HTML4基础上新增了很多元素,所以先来学习HTML4元素。
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML4 标签</title>
<h1>HTML5 的目标</h1> <p>HTML5 的目标是为了能够创建更简单的web程序,书写出更简洁的HTML代码</p>
<br/> 例如,为了使web应用程序的开发变得更容易,提供了很多API;为了使HTML变得更简洁,开发出了新的属性、新的元素等。总体来说,
为了下一代web平台提供了许许多多新的功能。 <br/>
<br/>
<h2>HTML4元素</h2><span>HTML4共包含91个元素,具体可以分为1.结构元素 2.内容元素 3.修饰元素三大类</span>
<h3>结构元素</h3><mark>结构元素用于构建网页文档的结构,多指块状元素</mark>
<ul>
<li><div>div标签,在文档中定义一块区域,即包含框、容器</div></li>
<li><ol>ol标签,根据一定的顺序进行列表</ol></li>
<li><ul>ul标签,没有顺序的列表</ul></li>
<li><li>li标签,每条列表项</li></li>
<li>dl标签,以定义的方式进行列表
<dl>
<dt>dt标签,定义列表中的词条1</dt>
<dd>dd标签,对定义词条进行解释1</dd>
<dt>dt标签,定义列表中的词条2</dt>
<dd>dd标签,对定义词条进行解释2</dd>
</dl>
</li>
<li><del>del标签,删除的元素</del></li>
<li><ins>ins标签,定义插入的文本</ins></li>
<li><h6>h6标签,从标题1-6,定义不同级别的标题</h6></li>
<li><p>p标签,定义段落结构</p></li>
<li>hr标签,定义水平线<hr></li>
</ul>
<h3>内容元素</h3><mark>内容元素定义了元素在文档中表示内容的语义,一般指文本格式化元素,它们多是行内元素</mark>
<ul>
<li><span>span标签,在文本行中定义一个区域,即行内包含框</span></li>
<li><a href="#">a标签,定义超链接</a></li>
<li><abbr>abbr标签,定义缩写词</abbr></li>
<li><address>address标签,定义地址</address></li>
<li><dialog open>这是打开的对话窗口</dialog></li>
<li><dfn>定义术语,dfn标签(斜体显示)</dfn></li>
<li><kbd>kbd标签,定义键盘键</kbd></li>
<li><samp>samp标签,定义样本</samp></li>
<li><var>var标签,定义变量</var></li>
<li><tt>tt标签,定义打印机字体</tt></li>
<li><code>code标签,定义计算机源代码</code></li>
<li><pre>pre标签,定义预定义格式文本,保留源代码格式</pre></li>
<li><blockquote>blockquote标签,定义大块内容引用</blockquote></li>
<li><cite>cite标签,定义引文</cite></li>
<li><q>q标签,定义引用短语</q></li>
<li><strong>strong标签,定义重要文本</strong></li>
<li><em>em标签,定义文本为重要</em></li>
</ul>
<h3>修饰元素</h3>
<mark>修饰元素定义了文本的显示效果</mark>
<ul>
<li><b>b标签,视觉提醒,显示为粗体</b></li>
<li><i>i标签,语气强调,显示为斜体</i></li>
<li><big>big标签,定义较大文本</big></li>
<li><small>small标签,表示细则一类的旁注,文本缩小显示</small></li>
<li><sup>sup标签,定义上标</sup> 360 <sup>2</sup> </li>
<li><sub>sub标签,定一下标</sub> 360 <sub>2</sub></li>
<li><bdi>bdi标签,定义文本显示方向</bdi></li>
<li><bdo dir="rtl">bdo标签,定义文本显示方向,使用dir属性来定义</bdo></li>
<li><br>br标签,定义换行</li>
<li><u>u标签,非文本注解,显示下划线</u></li>
<li>
<dl>
<dt>还有一些已经被废弃的标签,这里只做列举不做演示</dt>
<dd>center、font、s、strike</dd>
</dl>
</li>
</ul>
浏览器中效果:
_D__HTML%20deep_H4%20%E5%85%83%E7%B4%A0.html.png