语义化标签
<!-- 块元素,占用一行 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>p标签表示一个段落,同样属于块元素</p>
<!-- hgroup标签 用来将相关的标题分组 -->
<hgroup>
<h1>主标题</h1>
<h2>次标题</h2>
</hgroup>
<!-- 行内元素、内联元素 -->
<!-- em标签 表示语义语气语调加重 -->
<p>今天天气<em>真</em>不错!</p>
<!-- strong标签 表示强调、重要 -->
<p>你今天必须<strong>完成作业</strong>!</p>
<!-- blockquote 表示一个长引用,自带缩进 块元素 -->
鲁迅说:
<blockquote>吸烟有害健康,我怎么就不知道呢!</blockquote>
<!-- q 表示一个短引用 行内元素 -->
<p>孔子曰:<q>来而不往非礼也</q></p>
<!-- br 用于换行 -->
<br>
布局标签(结构化语义标签)
<!-- header 头部 -->
<header>
<!-- nav 导航 -->
<nav></nav>
</header>
<!-- main 网页的主体内容 -->
<main></main>
<!-- footer 底部 -->
<footer></footer>
<!-- aside 和主体相关的其他内容 -->
<aside></aside>
<!-- article 表示一个独立的文章 -->
<article></article>
<!-- section 表示一个独立的区块,上面标签都不能表示时使用 -->
<section></section>
<!-- div 没有语义 用来表示一个区块,目前主要的布局元素 -->
<div></div>
<!-- span 行内元素 没用语义 目前主要的行内结构元素 -->
<span></span>
列表标签
<!-- 无序列表 主要用来表现导航菜单 -->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!-- 定义列表 dt定义内容 dd阐述内容 -->
<dl>
<dt>结构</dt>
<dd>结构用来规定网页中哪里是标题,哪里是段落</dd>
</dl>
<!-- 列表嵌套 -->
<ul>
<li>aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-2-1</li>
<li>aa-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
超链接
<!-- _blank 在新页面中打开链接 -->
<a href="http://baidu.com" target="_blank" rel="noopener noreferrer">百度</a>
<!--
./ 当前目录 默认值,可省略
../ 上一级目录
-->
<a href="./h1.html">当前目录</a>
<a href="../h5/h2.html">上一级目录</a>
<!-- 设置标签id 实现当前页面指定位置跳转 -->
<a id="bot" href="#">回到顶部</a>
<a href="#bot">当前页面跳转到指定位置</a>
<!-- javascript:; 作为占位符 不起任何作用 -->
<a href="javascript:;">占位符</a>