《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML

本章内容:
标签的语义
为什么要使用语义化标签
如何确定你的标签是否语义良好
常见模块你真的很了解吗

标签的语义

HTML标签的设计都是有语义考虑的,部分标签的中文翻译图示及本章内容参看:3.1 标签的语义。其中div和span是没有语义的,它们只是分别用作块儿级元素和行内元素的区域分割符。

为什么要使用语义化标签

搜索引擎看不到视觉效果,看到的只是代码,只能通过标签来判断内容的语义。

专注于结构:通过标签可以知道“这是个标题”、“这是个段落”,等等。

CSS布局的一个误区:只要不是table布局,只要是通过CSS布局就是对的,就是符合Web标准的。

在HTML、CSS、JavaScript这三大元素中,HTML才是最重要的,结构才是重点,样式是用来修饰结构的。正确的做法是,先确定HTML ,确定语义的标签,再来选用合适的CSS

如何确定你的标签是否语义良好

浏览器会根据标签的语义给定一个默认的样式。判断网页标签语义是否良好的一个简单方法是:去掉样式,看网页结构是否组织清晰有序,是否仍然有良好的可读性。

值得重点提及的h标签,其含义为“标题”,搜索引擎对这个比较敏感,尤其是h1,h2。h标签应该是完整有序没有断层的。即h1、h2、h3、h4这样依次列排下来,不能出现漏掉h2的情况。

调试插件:Firefox--Web Developer。参考站点:W3C官方站点。

常见模块你真的很了解吗

标题和内容

《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML
<div>
    <h2>标题</h2>
    <a href="#">更多</a>
</div>
<p>
    内容
</p>
《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML

 

表单

《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML
<form action="" method="">
    <fieldset>
        <legend>登录表单</legend>
        <p>
            <label for="name">账户:</label><input type="text" id="name" name="name" />
        </p>
        <p>
            <label for="pwd">账户:</label><input type="text" id="password" name="password" />
        </p>
        <input type="submit" value="登录" />
    </fieldset>
</form>
《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML

一般来说,表单域要用fieldset标签包起来并用legend标签说明表单的用途。每个input标签对应的说明文本都需要用label标签,并通过为input设置id属性,在label标签中设置for=someld,来让说明文本和相应的input关联起来。在用户点击这个说明文本的时候,相关联的input自动获得焦点,方便用户输入信息或变成相应的选中状态等。

表格

table。虽然在CSS布局中table不推荐用来布局,但它仍有一席之地--在二维数据展示方面它是最好的选择。

表格标题要用caption,表头要用thead包围,主体部分用tbody包围,尾部要用tfoot包围,表头一般和单元格要区分开,表头用th,一般单元格用td。

语义化标签应注意的一些其它问题

为了保证网页去样式后的可读性,并且又符合Web标准,我们应注意以下几点:

  • 尽量少的使用无语义标签div和span;
  • 在语义不明显,既可以用p也可以使用div的情况下,尽量用p,p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利;
  • 不要使用纯样式标签,如b、font和u等,改用CSS设置。语义上需要强调的文本可以包在strong或em标签里,strong和em有“强调”的语意,strong默认加粗,em默认斜体。

《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML,布布扣,bubuko.com

《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML

上一篇:简单jQuery实现选项框中列表项的选择


下一篇:写一个程序,从文件(c:\test.txt)中查出字符串”mobnet”出现的次数