这样去写你的 HTML 让你的代码更好的兼容性

2019-01-14 10:32:53王振洲

<p>我是一个段落。<br />
诗歌都会用换行的。
</p>

11. 分割线: <hr>

<hr> 具有非常好的语义作用。但他的视觉效果很难控制。之前就写过这样的文章关于<hr />在各浏览器中的问题。一般也都很少用。如果专门为读屏软件使用者提供单独页面的话,或许 <hr> 会大有用处。

<h3>标题一</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>标题二</h3>
<p>This is the entry of... </p>


12. 无语义标签:<div>/<span>

其实 <div>/<span> 这两个标签是有语义的,都是 defines a section in a document。是的,和 HTML5 中的 <section> 其实是一样的。只是,因为搜索引擎的的原因,搜索引擎认为它们是无语义标签,因此他们成了 “无语义” 标签。推荐用法是尽量使用其他来做为页面框架的容器,比如布局、添加额外的视觉效果,而不是段落等的替代品。

<div id="container">
    <div id="content">
    </div>
    <div id="sidebar">
        <ul>
            <li><span>God</span>, oh my zsh</span></li>
        </ul>
    </div>
</div>

13. 段落/标题: <p>,<h1>/<h2>/<h3>…

这几个标签几乎可以说是一个页面标签等级结构中最重要的标签。我们可以用一本书的结构来说明这几个标签,而我们构建一个页面的时候,也应该有这样的一种思想在脑中:

书的名称:H1 书的每个章节标题: H2 章节内的文章标题: H3 章节的段落: P 小标题/副标题: H4/H5/H6

是的,当然还有引用 <blockquoute>,技术类书中提供的代码 <pre class="code">,一些需要注意点的列表 <ul>,一些方便比较的表格 <table> 等。

<h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
    <h3>Summary:</h3>
    <p>lorem ipsum is ...<em>emphasize</em></p>
</div>


14. 强调: <em>/<strong>

<em> emphasize 的缩写。而 <strong> 是 strong emphasize。可能很多刚入门前端的同学会对 <em>、<strong>、<cite> 、<i>、<b> 这几个标签的使用拿捏不准。<i> 和 <b> 基本上是被废置的,相当于现在的 <em> 和 <strong>,一般情况下他们对于内容重要性的排序是这样的:strong > em ≈ cite。 

<strong>注意:</strong>别使用老掉牙的标签,比如<cite>FONT、CENTER</cite>等,特别是 <em>FONT</em>。


15. 表单项: <input>/<textarea>/<select>