HTML 基础

在这篇文档中，我们将探讨HTML语义化的概念，包括它的定义、优点和如何在实践中实现。探讨HTML5 新特性，针对常见的考点进行探讨和分析。

1.什么是 HTML？ HTML 的全称是什么？

文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

什么是 HTML 语义化？

用最恰当的标签来标记内容。

该如何理解呢？比如需要加入一个标题，这个标题的字体比正文的要大写，还要加粗。能够实现这种效果的方法有很多，比如用CSS样式进行渲染。这样的效果看起来像是一个标题，但是他对浏览器来说，只是一个被渲染过的文本，无法知道他是一个标题。若要让浏览器知道他是一个标题，应该用hx标签来进行标记。从这个例子可以总结出： 语义化的HTML文档，不关心内容的显示效果。 说的通俗一点： 标题脱了CSS这层外衣，它还是一个标题。

HTML语义化的原因

即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构；
语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
通常语义化HTML会使代码变的更少，使页面加载更快。

如何实现 HTML 语义化？

以下是一些实践中实现 HTML 语义化的方法：

(1). 使用语义化标记

复制代码
使用正确的标记来表示正确的内容可以帮助提高页面的语义性。

(2). 避免使用无语义的标记

css
复制代码
避免使用无语义的标记，如 div 和 span ，除非它们是必需的。

(3). 使用标题标记

css
复制代码
使用标题标记（h1-h6）来表示页面的标题结构。

(4). 使用列表标记

css
复制代码
使用列表标记（ul、ol）来表示列表的结构。

(5). 使用表格标记

css
复制代码
使用表格标记（table、th、tr、td）来表示表格的结构。

(6). 使用段落标记

css
复制代码
使用段落标记（p）来表示段落的结构。

(7). 使用语义化的图片标记

css
复制代码

常用语义标签的演示

先看到这串代码，这是一个非常典型的 HTML <body> 样板示例，通常包含了 <header>、<main> 和 <footer>。

html
复制代码
<body>

    <header>
    
    </header>
    
    <main>
    
    </main>
    
    <footer>
    
    </footer>

</body>

header 的部分

所以在您的 <header> 中，通常会在左侧有个 Logo 图片 <img>；而在右侧有个导航栏 <nav> ，里头会有个列表 <ul> 包着几个条目 <li> 又包着链接 <a>。

html
复制代码
<header>
    <img sec="" alt="" />
    
    <nav>
        <ul>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
        </ul>
    </nav>
</header>

main 的部分

然后，在您的 <main> 中，通常会又分为很多小块，以往大家是用 <div>，但现在推荐您改用 <section>，这部分稍后在分析实际案例时会再提及并解释。

而里头可能会有一个标题 <h1> 或 <h2> 去方便用户识别每个区块，当然你还会在里面穿插一些文字叙述 <p>。您有时候可能还会看到其他如侧边栏 <aside> 之类的，作为辅助性质的页面导览或广告资讯，或是页面向下滑还有一篇文章之类的 <article>，这部分就由您在进行设计时自行决定布局，我这边仅用代码呈现一个范例。

html
复制代码
<main>
    <section>
        <h2>Benefits</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>
    
    <section>
        <h2>How it works?</h2>
        <p>Sed pharetra facilisis eleifend.</p>
    </section>
</main>

footer 的部分

<footer> 的部分结构通常和 <header> 很像，您可以上下比对看看，基本上里头也是包着个列表 <ul> 又包着几个条目 <li> 又包着链接 <a>。

但要注意一下，我们基本上不会在 <footer> 放 <nav>，那样看起来挺反人类的。除非像是有种设计是取消的 <header> 只保留了 <footer>，但它实际上是把导览列的功能移下来，而剔除了原有页尾关于作者资讯的那些功能。或是把那部分做成了导览列的一个功能块，点击后会额外跳转到一个单独的页面或弹窗呈现信息。这部分一样就看设计师的点子了。

html
复制代码
<footer>
    <ul>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>
</footer>

HTML 语义化的案例分析 | 青训营