1. 块级元素
在页面中以块的形式展现。一个块级元素涌如今它前面的内容之后的新行上。任何跟在块级元素后面的内容也会涌如今新的行上。
块级元素常日是页面上的构造元素。例如：
一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
2. 内联（行级）元素
常日涌如今块级元素中并环抱文档内容的一小部分，而不是一全体段落或者一组内容。内联元素不会导致文本换行。
它常日与文本一起利用，例如：
超链接（<a>）强调（<em>/<strong>）等。二、语义化标签用特定的标签，去表达特定的含义。标签的默认效果不主要（后期可以通过 CSS 随便掌握效果），语义最主要！
其紧张浸染如下：
<!-- 定义标题 h1~h6 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 定义段落 --><p>这是一段笔墨</p><h1>~<h6> 不能相互嵌套。<p> 中不要写块级元素。四、文本标签
<em>强调重点的文本</em><strong>具有某种主要性的文本</strong><mark>具有某种关联性的文本，如搜索结果中的关键字（H5新增）</mark>
更多的文本标签：
<!-- 删除与添加的内容 --><del>删除</del><ins>添加</ins><!-- 下标与上标元素 --><sub>下标</sub><sup>上标</sup><!-- 缩写，要合营 title 属性 --><abbr title="超文本标记措辞">HTML</abbr><!-- 覆盖默认的文本方向，要合营 dir 属性 --><bdo dir="rtl">从右到左显示文本</bdo><!-- 短引用与长引用 --><q>短引用</q><blockquote>长引用，块级元素</blockquote><!-- <i>、<b>、<u> 之前表示斜体、粗体、下划线 --><!-- HTML5 对其进行了重新的定义 --><!-- 但 <i> 元素现在更多用于呈现字体图标 --><i>表示西方文本中的技能术语、音译、思想或船名等。</i><b>用于吸引读者把稳元素内容，如择要中的关键字、评论中的产品名称等。</b><u>运用了某种形式的非文本注释，如专有名词，拼写缺点等。</u><dfn>被定义的术语</dfn><cite>著作名，如书本、歌曲、电影等。</cite><address>地址信息，块级元素</address><small>旁注和小字印刷，如版权和法律文本。</small><!-- 打算机代码干系的标签 --><code>代码片段<var>变量</var></code><pre> 用于保留空缺字符，块级元素，常用于代码块: void main() { printf(); }</pre><kbd>键盘输入的文本</kbd><samp>从正常的高下文中，将某些内容提取出来，例如:标识设备输出</samp><pre>、<blockquote>、<address> 是块级元素，其他都是内联元素。<small>、<b>、<u>、<q>、<blockquote> 这些语义感不强的标签，我们很少利用。大多数的标签并不常用，不用过于纠结，酌情利用即可（不用也没啥大问题）。
注音或注释（HTML5新增）：
<ruby> 汉 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp></ruby><rt> 元素包含字符的发音。<rp> 元素用于不支持 <ruby> 元素的情形，<rp> 的内容供应了该当展示的东西，常日是圆括号，以便表示 ruby 表明的存在。五、<div> 与 <span>
<div> 是块级元素，而 <span> 是一个内联元素。他们都是一个通用的容器，没有任何语义，但常常利用。
<div> <p>Hello <span>LIWY</span>!</p></div>六、<hr/> 与 <br/>
<hr> 元素表示段落级元素之间的主题转换（分隔），块级元素。<br> 元素在文本中天生一个换行（回车）符号，内联元素。
<p> Hello:<br /> LIWY</p><hr /><p>本日景象不错</p>七、HTML5 新增的排版标签
<header>文档或文档部分区域的页眉</header><nav>导航链接的区域</nav><article>独立的内容：博客文章、论坛帖子、新闻故事</article><section>页面或文章中的某段笔墨</section><aside>侧边栏，文档的其他区域，与其他内容干系性不高</aside><footer>文档或文档部分区域的页脚</footer>这些标签都是有语义的块级元素（可以理解为带语义的 <div>）。<artical> 比 <section> 更强调独立性，一块内容如果比较独立、比较完全，该当利用 <artical>。<artical> 里面可以有多个 <section>，<section> 强调的是分段或分块，如果你想将一块内容分成几段的时候，可利用 <section>。八、综合示例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LIWY 的站点</title> <!-- 引用外部样式表 --> <link rel="stylesheet" href="style.css" /></head><body> <header> <h1>本站所有网页的统一主标题</h1> </header> <nav> <!-- 本站统一的导航栏 --> <ul> <li><a href="#">主页</a></li> <!-- 多个导航栏 ... ... --> </ul> <form> <!-- 搜索栏 --> <input type="search" name="q" placeholder="要搜索的内容" /> <input type="submit" value="搜索" /> </form> </nav> <div class="main"> <!-- 网页主体内容 --> <article> <!-- 文章主题 ... ... --> </article> <aside> <!-- 侧边栏在主内容右侧 --> <h2>干系链接</h2> <ul> <li> <a href="#">一个超链接</a> </li> <!-- ... ... --> </ul> </aside> </div> <footer> <!-- 本站所有网页的统一页脚 --> <p>Copyright © 2024-2050 liwy.com</p> </footer></body></html>
