(建议使用 text/html 格式的 HTML,但无论是哪种情

作者: 前端  发布:2019-09-17

是时候再提web标准

2016/07/06 · 基础技术 · WEB

原文出处: 灵感(@灵感_idea )   

HTML(HyperText Markup Language:超文本标记语言)
  • 用于创建网页的标准标记语言。
  • HTML是一种基础技术,常和css、js一起搭建网页、网页应用程序以及移动应用程序的用户界面。
  • 网页浏览器可以读取HTML文件并渲染成可视化的网页。
    参考https://zh.wikipedia.org/wiki/HTML
    HTML版本
    1997.1 HTML3.2
    1997.12 HTML4.0
    1999.12 HTML4.01
    2014.10 HTML5

HTML、XML、XHTML 有什么区别

  • HTML 超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
  • XML 可扩展标识语言(The Extensible Markup Language)的简写,主要用于存储数据和结构。
  • XHTML 可扩展标识语言 (The Extensible HyperText Markup Language)的缩写,基于XML,作用与HTML类似,目的就是实现HTML向XML的过渡。

前端编码规范(2)HTML 规范,前端编码

**背景**

**web标准是个老生常谈的话题。引入国内的时间,粗略算下来,有十年左右了。但是由于国内前端优秀人才的缺失和相关教育跟进的缓慢,造成了很多人都没有对它引起足够的重视并运用到自己的实际项目当中,同时又花了较多精力在眼花缭乱的新技术方案和工具中,这就造成了技术断层,影响不是一个两个人,而是一大部分,如果再缺少相关的正确引导,就会保留很多不正确的编码习惯,对于个人成长和所做的项目都是不利的。**

为什么是时候再提呢?可以先来看看下面一张具有一定代表性的图,截自我的企鹅群(152128548)

9159.com 1

1、标签仍在被滥用
2、重视觉,轻语义和结构
3、热衷于跟进热门新技术,不重视基础
4、当我在跟大家说重视基础的时候,要么有人说原生js,要么有人说css原理和技巧,没人说html

由于以上的几点,加上各种场合和会议似乎很少提及这些方面的东西,新手在被老手“牵”着走,老手的精力又不在这些比较基础的东西上。这篇文呢,就是跟大家一起回到起点,去看看怎样做才算是符合了web标准的编码。

一个典型的HTML5页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>HTML5</h1>
</header>
<main></main>
<footer></footer>
</body>
</html>

怎样理解 HTML 语义化

  • 语义化HTML是一种编写HTML的方式。
  • 选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
    好处
    1. 页面呈现出很好地内容结构、代码结构
    2. 用户体验好。
    3. 利于SEO优化
    4. 方便其他设备解析来渲染网页。
    5. 便于团队开发和维护,语义化更具可读性

文档类型

推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>

(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。

HTML 中最好不要将无内容元素 [1]的标签闭合,例如:使用 <br> 而非 <br />.


问题来源

一个典型的HTML4页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
9159.com,<div id="header">
<h1>HTML4</h1>
</div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
4到5加入了一些新标签 并删除了一些废弃标签
4的兼容性好但一般按照5去写 简单 适应性更好

怎样理解内容与样式分离的原则

  1. 在WEB开发中, 一个网页分为三部分:Html——结构(内容),css——表现(样式),javascrip——行为。内容与样式分离,就是让内容的归 HTML, 样式归 CSS。同时,HTML 内不允许出现属性样式,尽量不要出现行内样式。
  2. 编码正确做法是HTML和CSS要分开使用,不要混着用。重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行 css 样式设置(即内容与样式分离) ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。
  3. 分离原则的优点
    • 浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页
      面体积容量变得更小。
    • 网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相
      应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样
      式。
    • 典型的应用就是网页换肤,使用相同的 html 结构,不同的 CSS 样式。
    • 更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑
      的,网页中语义化的标签代码就会更加适合搜索引擎。
      CSS样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构
      不变形的前提下,放心在不同浏览器渲染显示样式。

HTML 验证

一般情况下,建议使用能通过标准规范验证的 HTML 代码,除非在性能优化和控制文件大小上不得不做出让步。

使用诸如 W3C HTML validator 这样的工具来进行检测。

规范化的 HTML 是显现技术要求与局限的显著质量基线,它促进了 HTML 被更好地运用。

不推荐

 

  1. <title>Test</title>
  2. <article>This is only a test.

推荐

 

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>Test</title>
  4. <article>This is only a test.</article>

1、门槛低、简单

一周就可以掌握html,常用标签不多,用不到的不用管

比如:h1~6、p、span、div、img、a、input等,我们来随意的看一张截图

9159.com 2

上面是某宝PC端的登录页,可能是由于种种原因(不详),只用了少量的标签,所以,并不说它是不好的或者是错的,但它是其他很多人的写照。如果我说html标签有100多个,你会是什么反应?

1、不知道,没想到有这么多
2、知道,但认为很多都用不上

你会是哪种?

如何在合适的时候,合适的地方,使用正确的标签,这是web标准的基本要求。后面细说。

CSS很简单,常用属性也就那么多

宽、高、边框、背景、定位、浮动、边距,如果你掌握了这么多,那么就能够应对很多页面布局的情况了。如果你因此就认为css很简单,那么就等着它来“惩罚”你吧。

不好的方面:各种兼容问题,各种奇葩布局要求,各种不可预知的bug

好的方面:诸多奇妙的技巧和css3新属性,能够帮助我们做出充满美感又神奇的效果

如果你依然觉得CSS太简单,那么请看一下这里https://drafts.csswg.org/indexes/,要坚强~

HTML、XML、XHTML

HTML:超文本标记语言,是语法较松散的、不严格的Web语言;
XML:(EXtensible Markup Language)可扩展标记语言,主要用于存储数据喝结构、设计宗旨是传输数据,而非显示数据、标签没有被预定义。需要自行定义标签;
参考http://w3school.com.cn/xml/xml_intro.asp
XHTML:可扩展超文本标记语言,是XML和HTML的结合物基于XML,作用和HTML类似,但语法更严格;
参考http://w3school.com.cn/xhtml/xhtml_why.asp

有哪些常见的meta标签

  • 语言采用中文
    <meta http-equiv="Content-Language" content="zh-CN" />

  • 编码格式:告诉给浏览器用什么方式来都这页代码
    <meta charset="utf-8">

  • 如果支持Google Chrome Frame:GCF,则使用GCF渲染;如果系统安装ie8或以上版本,则使用最高版本ie渲染; 否则,这个设定可以忽略。 目的使内容在移动端上比较合理展示
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  • 控制网页为全屏幕大小
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  • 目的是方便SEO优化内容关键字搜索
    <meta name="keywords" content="">

  • 目的是方便SEO优化内容详细描述搜索
    <meta name="description" content="">

省略可选标签

HTML5 规范中规定了 HTML 标签是可以省略的。但从可读性来说,在开发的源文件中最好不要这样做,因为省略标签可能会导致一些问题。

省略一些可选的标签确实使得页面大小减少,这很有用,尤其是对于一些大型网站来说。为了达到这一目的,我们可以在开发后期对页面进行压缩处理,在这个环节中这些可选的标签完全就可以省略掉了。


2、只需要做“对”,不需要做好

很多时候,即使写错了浏览器会包容它,当我们的代码是不规范的,甚至有时候是错的,但是浏览器仍然将它“正常”显示出来,这个时候,我们意识不到自己的错误。认为看起来没问题就没问题,这是很危险的。

标签不用在意,交给CSS去处理就好,理论上,我们可以通过一定的CSS规则,任意的改变一个元素的表现,这就造成了对html标签的不重视,因为我们总能让它们看起来没有任何问题。

HTML中表现(HTML)、样式(Css)、行为(Js)分离
  1. 写HTML时不管样式,重点在html的结构和标签语义化上,让HTML能体现页面结构或内容后再去写样式(css)
  2. 写JS时,尽量不用js去直接操作样式,通过给元素添加删除class来控制样式变化。
  3. HTML内不允许出现属性样式,尽量不出现行内样式

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

  • 文档声明的作用
    文档声明目的是防止出现乱码情况。
  • 严格模式和混杂模式指什么
    严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码
    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码
    区分 :浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。
  • <!DOCTYPE html>
    <DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类
    型。让浏览器解析器知道应该用哪个规范来解析文档

脚本加载

出于性能考虑,脚本异步加载很关键。一段脚本放置在 <head> 内,比如 <script src="main.js"></script>,其加载会一直阻塞 DOM 解析,直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本,对用户体验来说那真是一个巨大的影响。

异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+,可将 HTML5 的 async 属性加至脚本中,它可防止阻塞 DOM 的解析,甚至你可以将脚本引用写在 <head> 里也没有影响。

如需兼容老旧的浏览器,实践表明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或 labjs。注入脚本的一个问题是:一直要等到 CSS 对象文档已就绪,它们才开始加载(短暂地在 CSS 加载完毕之后),这就对需要及时触发的 JS 造成了一定的延迟,这多多少少也影响了用户体验吧。

终上所述,兼容老旧浏览器(IE9-)时,应该遵循以下最佳实践。

脚本引用写在 body 结束标签之前,并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本,但它只阻塞了 body 结束标签之前的 DOM 解析,这就大大降低了其阻塞影响。而在现代浏览器中,脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载,此时加载属于异步加载,不会阻塞 CSSOM(但其执行仍发生在 CSSOM 之后)。

所有浏览器中,推荐

 

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.   </head>
  5.   <body>
  6.     <!-- body goes here -->
    1.     <script src="main.js" async></script>
  7.   </body>
  8. </html>

只在现代浏览器中,推荐

 

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.     <script src="main.js" async></script>
  5.   </head>
  6.   <body>
  7.     <!-- body goes here -->
  8.   </body>
  9. </html>

3、热衷于“向前看”

学习新技术,丰富自己的技能树——html5、canvas、svg、react、ES6等。

解决“难题”——觉得一般的工作没什么挑战了,所以不屑于去深挖自己已经会了东西。

做出炫酷的效果——纯CSS图标、动画,3D动画,canvas动画等。

跟风式学习——大家都在谈,业界都在捧,看起来很好的东西,就开始躁动不安,跃跃欲试,其实有句话叫做:“基础不牢,地动山摇”,兴致冲冲的去学习新的东西的时候,往往会发现,没有足够的基础,是很难前行的。

上面说的这些是错的么?当然都对,特别是在技术发展更新迭代速度快的互联网领域,想会得更多让自己更强,同时会的更多在实际应用中可选择的方案也更多,兴趣驱动去学习,这是好事,我自己也是这样的,但我们需要注意的是,学习不是一条直线,不能沿着一条线一直往前冲,除了长度,还有深度,需要我们不断的从各个方面去打磨和填充才能日臻完善。

HTML语义化

语义化HTML是一种编写HTML的方式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,选择合适的标签、使用合理的代码结构,便于开发者阅读的同时也可以让浏览器的爬虫和机器很好的解析。

浏览器乱码的原因是什么?如何解决?

html源代码内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。

  • 解决:
    <meta charset="utf-8">

语义化

根据元素(有时被错误地称作“标签”)其被创造出来时的初始意义来使用它。打个比方,用 heading 元素来定义头部标题,p 元素来定义文字段落,用 a 元素来定义链接锚点,等等。

有根据有目的地使用 HTML 元素,对于可访问性、代码重用、代码效率来说意义重大。


文档结构和意义为先

我们都知道,实现一种效果可以有多种方式,那么哪种才是最优的?来看例子

HTML常见标签、属性

标题标签:h1~h6 h1最大依次递减h6最小
段落标签:p 大段文字用p标签包裹
链接标签:a 链到一个地址 ,如:

  • <a href="#">饥人谷.com</a>
  • <a href="#about">饥人谷.com</a>配合页面中定位使用(锚链接)如:<p id="about">饥人谷.com</p>
  • <a href="/getCourse">饥人谷.com</a>
  • <a href="" target="_blank" title="饥人谷">饥人谷.com</a>
    target属性:
    1._blank 在新窗口中打开被链接的文档
    2._self 默认,在相同的框架中打开被链接的文档
    3._parent 在父框架集中打开被链接文档
    4._top 在整个窗口中打开被链接文档
    5.framename 在指定的框架中打开被链接文档
    title属性:
    鼠标悬停在超链接上的时候,显示该超链接的文字注释。如果希望注释多行显示,可以使用
    作为换行符。

图片标签:img
<img src="#" alt="头像">
alt属性:
当图片不能正常显示,对图片的描述

div标签:div
如:
<div id="header">...</div>
<div id="content">...</div>
<div class="footer">...</div>
div用于给页面划分区块,让结构更清晰
id和class的区别:class是一类,id具有唯一性

列表标签ul、ol、dl
ul li标签
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>联系</li>
<li>地址</li>
</ul>
</li>
</ul>
ul:insorti list 无序列表
用于表示并列的内容
ul的直接子元素是li
可以嵌套
ol li标签
<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>
ol:order list 有序列表
用于表示有步骤或编号的并列内容
ol的直接子元素是li
可以嵌套
dl dt dd标签
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器,很贵,易碎</dd>
</dl>
展示一系列“标题:内容…”的场景

按钮标签:button
<button>点我</button>

文字:span strong em
span:正常显示
em:加强
strong:强调性更强
<p>优惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 岁了</p>

iframe标签
用于嵌入一个页面(注意跨域操作问题)
<iframe src="" name="myPage"></iframe>
<p><a href="" target="myPage">W3Cschool.cc</a></p>

表格标签 table
用于展示表格,不能用做布局
thead tbody tfoot可省略,浏览器会自动添加border-collapse:collapse;用于合并边框
<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>

<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>

常见的浏览器有哪些,什么内核

浏览器
chrome浏览器、火狐浏览器(Mozilla Firefox)、IE浏览器、360极速浏览器、搜狗浏览器、猎豹极轻浏览器等。
内核

  1. Trident(IE内核);
  2. Gecko(Firefox内核);
  3. Presto(Opera前内核) (已废弃);
  4. Webkit(Safari内核,Chrome内核原型,开源)。

多媒体回溯

对页面上的媒体而言,像图片、视频、canvas 动画等,要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本(alt),视频和音频文件我们可以为其加上说明文字或字幕。

提供可替代内容对可用性来说十分重要。试想,一位盲人用户如何能知晓一张图片是什么,要是没有 @alt 的话。

(图片的 alt 属性是可不填写内容的,纯装饰性的图片就可用这么做:alt="9159.com 3")。

 

  1. <img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">

列表

什么特点呢?最明显的就是有很多项,项和项之间相互独立,竖着排列,像这样

我是列表
我是列表
我是列表

它可以被怎样写呢?

1、

XHTML

我是列表<br> 我是列表<br> 我是列表<br>

1
2
3
我是列表<br>
我是列表<br>
我是列表<br>

2、

XHTML

<li>我是列表</li> <li>我是列表</li> <li>我是列表</li>

1
2
3
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>

3、

XHTML

<ul> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> </ul>

1
2
3
4
5
<ul>
    <li>我是列表</li>
    <li>我是列表</li>
    <li>我是列表</li>
</ul>

上面三种是比较直接想到的对的写法,当然也可以用ol,算同一种方法。它们所能实现的效果是类似的,往往我们会从表现的角度考虑说第一种不够灵活,无法控制样式,第二种方法浏览器也不会不搭理你,它会把li解析成块级元素,让它们单独排列,但它失去了告诉浏览器“我是个列表”的标志,也就是外层容器(ul/ol),最好的写法肯定是第三种,它不仅看上去是对的,还告诉浏览器这是个列表,还有列表所应有的特点,比如“缩进”和“着重号”,当然,最大的益处仍然是它是有意义的,也是为什么这里没有提div和p等元素的原因。

文档声明

<!DOCTYPE> 作用是声明文档的解析类型,声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
声明不是HTML标签,它是指示Web浏览器关于页面使用哪个HTML版本进行编写的指令。
HTML4.01和HTML5有所不同 一般用H5声明
<!doctype html>就是HTML5的声明

列出常见的标签,并简单介绍这些标签用在什么场景

  • h1~h6 标题
    <h1>代表页面最大的标题</h1>
    <h2>二级标题</h2>
    <h3>更弱的标题</h3>
    <h4>...</h4>
    <h5>...</h5>
    <h6>最小标题</h6>
  • p段落
    <p>表示大段文字</p>
  • a链接,链到一个地址
    <a href="http://www.google.com"" target="_blank" title="ABC">google.com</a>
    <a href="#">空</a>
    <a href="#about">定位ID标签about位置</a>
    <a href="/getCourse">链接路径地址</a>
  • img展示一张图片
![](https://www.jianshu.com/p/a.png)
  • div语义为“一大块”,用于给页面划分区块,让结构更清晰
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
  • ul li
  • ul: unsort list 无序列表
  • 用于表示并列的内容
  • ul的直接子元素是li
  • 可以嵌套
    <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li>
    <a href="#">更多</a>
    <ul>
    <li>联系</li>
    <li>地址</li>
    </ul>
    </li>
    </ul>
  • OL LI
  • ol: order list 有序序列表
  • 用于表示带步骤或者编号的并列内容
  • ol的直接子元素只能是li 可以嵌套
    <h2>把大象关到冰箱的步骤</h2>
    <ol>
    <li>把大象变小</li>
    <li>打开冰箱</li>
    <li>把大象塞进去</li>
    </ol>
  • DL DT DD用于展示一系列 “标题:内容... ”的场景
    <dl>
    <dt>商品名称:</dt>
    <dd>青花瓷</dd>
    <dt>特征:</dt>
    <dd>白色</dd>
    <dd>圆口</dd>
    <dt>商品介绍</dt>
    <dd>这是一个年代久远的瓷器,很贵,易碎</dd>
    </dl>
  • button按钮
    <button>点我</button>
  • strong em
  • em 需要强调一下
  • strong 很重要、强调性更强
    <p>优惠 <strong>100</strong> 元</p>
    <p>小谷 <em>2</em> 岁了</p>
  • iframe用于嵌入一个页面 注意跨域操作问题
    <iframe src="" name="myPage"></iframe>
    <p><a href="http://www.baidu.com"" target="myPage">baidu.com</a></p>
  • table
    用于展示表格,不要用来做布局 thead tbody tfoot可省略,浏览器会自动添加 border-
    collapse: collapse;用于合并边框
    <table>
    <tr>
    <th>姓名</th>
    <th>年纪</th>
    </tr>
    <tr>
    <td>小明</td>
    <td>18</td>
    </tr>
    <tr>
    <td>小花</td>
    <td>20</td>
    </tr>
    </table>

关注点分离

理解 web 中如何和为何区分不同的关注点,这很重要。这里的关注点主要指的是:信息(HTML 结构)、外观(CSS)和行为(JavaScript)。为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。

就是说,尽量在文档和模板中只包含结构性的 HTML;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。

在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着:

  • 不使用超过一到两张样式表(i.e. main.css, vendor.css)
  • 不使用超过一到两个脚本(学会用合并脚本)
  • 不使用行内样式(<style>.no-good {}</style>
  • 不在元素上使用 style 属性(<hr>
  • <link rel="stylesheet" href="main.css" type="text/css">
  • <script src="main.js" type="text/javascript"></script>
  • 推荐

     

    1. <link rel="stylesheet" href="main.css">
    2. <script src="main.js"></script>

    可用性

    如果 HTML5 语义化标签使用得当,许多可用性问题已经引刃而解。ARIA 规则在一些语义化的元素上可为其添上默认的可用性角色属性,使用得当的话已使网站的可用性大部分成立。假如你使用 navasidemainfooter 等元素,ARIA 规则会在其上应用一些关联的默认值。
    更多细节可参考 ARIA specification

    另外一些角色属性则能够用来呈现更多可用性情景(i.e. role="tab")。


    Tab Index 在可用性上的运用

    检查文档中的 tab 切换顺序并传值给元素上的 tabindex,这可以依据元素的重要性来重新排列其 tab 切换顺序。你可以设置 tabindex="-1" 在任何元素上来禁用其 tab 切换。

    当你在一个默认不可聚焦的元素上增加了功能,你应该总是为其加上 tabindex 属性使其变为可聚焦状态,而且这也会激活其 CSS 的伪类 :focus。选择合适的 tabindex 值,或是直接使用 tabindex="0" 将元素们组织成同一 tab 顺序水平,并强制干预其自然阅读顺序。


    ID 和锚点

    通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID. 这样做,页面 URL 的 hash 中带上对应的 ID 名称,即形成描点,方便跳转至对应元素所处位置。

    打个比方,当你在浏览器中输入 URL http://your-site.com/about#best-practices,浏览器将定位至以下 H3 上。

     

    1. <h3 id="best-practices">Best practices</h3>

    格式化规则

    在每一个块状元素,列表元素和表格元素后,加上一新空白行,并对其子孙元素进行缩进。内联元素写在一行内,块状元素还有列表和表格要另起一行。

    (如果由于换行的空格引发了不可预计的问题,那将所有元素并入一行也是可以接受的,格式警告总好过错误警告)。

     

    1. <blockquote>
    2.   <p><em>Space</em>, the final frontier.</p>
    3. </blockquote>
      1. <ul>
    4.   <li>Moe</li>
    5.   <li>Larry</li>
    6.   <li>Curly</li>
    7. </ul>
      1. <table>
    8.   <thead>
    9.     <tr>
    10.       <th scope="col">Income</th>
    11.       <th scope="col">Taxes</th>
    12.     </tr>
    13.   </thead>
    14.   <tbody>
    15.     <tr>
    16.       <td>$ 5.00</td>
    17.       <td>$ 4.50</td>
    18.     </tr>
    19.   </tbody>
    20. </table>

    HTML 引号

    使用双引号(“”) 而不是单引号(”) 。

    不推荐

     

    1. <div class='news-article'></div>

    推荐

     

    1. <div class="news-article"></div>

    [1]: 此处的空白元素指的是以下元素:areabasebrcolcommandembedhrimginputkeygenlinkmetaparamsourcetrackwbr

    规范,前端编码 文档类型 推荐使用 HTML5 的文档类型申明: !DOCTYPE html (建议使用 text/html 格式的 HTML。避免使用 X...

标题

作为标题,特点也简单,比页面上其他的文本更大、更粗。
我们可以这样写:

1、

XHTML

<span class="head">我是标题</span>

1
<span class="head">我是标题</span>

2、

XHTML

<p><b>我是标题</b></p>

1
<p><b>我是标题</b></p>

3、

XHTML

<h1>我是标题</h1>

1
<h1>我是标题</h1>

不看代码的情况下,三者可以一模一样,但看了代码的话,大家应该都会第三种写法是最好的,第三种写法的好处有哪些?

1、本身是块级元素
2、是独特的,不像p或者span等元素会用到页面当中的很多地方
3、更加重要的是,在不加任何css规则的情况下,标题元素仍然明显是个标题,页面的无样式视图将显示其预期的文档结构,正确的标题元素传递了“意义”而不只是表现指令
4、屏幕阅读器、手机和其他浏览器也将知道如何处理标题元素
5、搜索引擎友好,除了title和meta,标题是最可能存在关键字的地方,利用好它,会更加方便用户找到你的页面

但是它有没有问题困扰着我们呢,答案是有,h1和h2这些标题的默认样式被认为过于粗大,这会让有些人倾向于使用更高级别的标题元素,其实这个大家都知道,不是大问题,可以用css来控制,前提是:先结构,后表现。至于选择使用h几,也不是没有讲究的,它们既然是分了级别,那自然是有一定意义所在,一般来说,h1是个重要的标识,页面当中有一个就好,然后,不要出现类似h2包裹h1的情况。

浏览器解析模式

严格模式:又称标准模式,是指浏览器按照W3C标准解析代码。
混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的模式解析代码
如果页面声明<!DOCTYPE html>那么浏览器就按照W3C的标准解析渲染页面,就是严格模式。如果没有,浏览器会按照自己的模式解析渲染页面,也就是混杂模式
<html lang=“zh”>里lang=“zh”表示告诉浏览器当前页面使用的语言,zh为中文意思

注意点

  1. 标签属性全小写;
  2. 标签要闭合、自闭合标签可以省略 /;
  3. 标题里不能有段落,段落里不能有标题;

参考:
http://www.jianshu.com/p/55a7e598957f

表格

现在如果提到表格(table),很多人会觉得好笑,使用web标准构建网站的一个最荒诞的说法就是你应该永远不使用表格。

是的,使用table来布局确实是有劣势,但并不代表我们不能用表格来做适合它做的事,比如:数据化表格。

最简单的表格可以有下面这个结构:

XHTML

<table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table>

1
2
3
4
5
<table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
</table>

有时候,我们会在表格的上方加一点说明性文字,通常我们会习惯性的使用h*或者p标签来包裹这一段内容,如果你是用div,那么…

其实我们有更好的选择——<caption>,这个是表格自己的专有标题哦,有它为什么我们还要用别的呢?

除此之外,如果我们想给表格的第一行算作表头,可以怎么做呢?可以这样:

XHTML

<tr><th></th><th></th><th></th></tr>

1
<tr><th></th><th></th><th></th></tr>

把这行代码放在第一行,th标签会给它不同于td的样式来区分出和其他行的不同,此外它可以是行的,也可以是列的,怎么区分呢?还有这个——scope属性scope=row/col,把此属性添加到th标签中即可设置它的归属。

但这样就够了吗,如果对于简单的表格来说已经挺好,那么好像它还没有比较清晰的逻辑结构,那么,不卖关子了。较完整的表格,应该是下面这样:

XHTML

<table summary="这是一个表格的内容简介" cellspacing="0"> <caption>表格标题</caption> <thead> <tr> <th scope="col" id="name">姓名</th> <th scope="col" id="address">地址</th> <th scope="col" id="databirthday">出生日期</th> </tr> </thead> <tbody> <tr> <td>ewee<td> <td>hubei<td> <td>19870102<td> </tr> <tr> <td>rewe<td> <td>wuhan<td> <td>419880103<td> </tr> <tr> <td>ertww<td> <td>yichang<td> <td>19870205<td> </tr> <tbody> <tfoot><tr><td>one</td><td>two</td><td>three</td></tr></tfoot> </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table summary="这是一个表格的内容简介" cellspacing="0">
    <caption>表格标题</caption>
        <thead>
            <tr> <th scope="col" id="name">姓名</th> <th scope="col" id="address">地址</th> <th scope="col" id="databirthday">出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr> <td>ewee<td> <td>hubei<td> <td>19870102<td>
            </tr>
            <tr> <td>rewe<td> <td>wuhan<td> <td>419880103<td>
            </tr>
            <tr> <td>ertww<td> <td>yichang<td> <td>19870205<td>
            </tr>
    <tbody>
    <tfoot><tr><td>one</td><td>two</td><td>three</td></tr></tfoot>
</table>

是不是顿觉十分的清晰,慢着,summary=”这是一个表格的内容简介”这句是什么鬼?好吧,看内容便知,它是关于表格的一个简介,这个简介用户是看不到的,屏幕阅读器可以利用该属性。

常用meta标签

meta标签是HTML里head区的一个辅助性标签
<meta charset="utf-8”>里charset="utf-8”
表示页面用utf-8编码表编码解析,如果不声明浏览器可能会错用其它编码表造成网页乱码
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">表示浏览器渲染内核的方式
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">表示适配移动页面
<meta name="keywords" content="前端 饥人谷">
<meta name="description" content="最有爱的前端学习社区">
name=“”,content=“”是告诉搜索引擎当前页面的内容,对页面的描述
<meta name="referrer" content="never">
所有从当前页面中发起的请求将不会携带 referer

<strong><em><b><i>和其他短语元素

短语元素,在于控制的颗粒更小,无关布局,和表现也没有太大关系(虽然它会有加粗或者倾斜的效果),用来对于页面中的某些特殊内容做出特别的标识,比如“强调”、“引用”等。

那么它们的区别在哪儿?

<strong>代替<b>,<em>代替<i>

传达意义和结构,而不是给出表现指令。

<em>表示强调,<strong>表示更加强调,在语音合成器用户代理场景下,它们还表现为音量、音调及语速的区别。如果一个元素需要既强调又斜体,那么我们可以选择正确的标签,然后通过样式来控制其他方面。

如此之外还有其他短语元素,比如:

<cite> 包含对其他来源的引言或引用
<code> 指定一个计算机代码片段
<var> 表示一个变量或者程序参数实例

常见的浏览器和内核

IE浏览器的trident
火狐浏览器的gecko
谷歌、opera浏览器的blink
safari浏览器的webkit

最小化标示

通常情况下,较少的代码意味着更快的下载,还意味着更少的服务器空间和带宽消耗。有个问题就是,即使你写出了符合web标准的页面仍然不能说明你写出了足够简洁或者合理的代码。正所谓规则是死的,容易做到,碰到实际场景,不同的做法会导致结果不同。在我们成长过程中,会遇到不同的老师,要么是一篇文章,要么是一本书,要么是具体的某个人,追溯到最后仍然是人,不同的人,观点和习惯可能不同。比如,你可能会养成一个习惯就是希望给所有单独添加样式的元素分配一个类,这样做到了较强的可控性,但是,这样引发什么潜在的问题呢?

1、过多的类
2、类的命名难

除了上面两点,还有一个可能碰到的就是类名重复,然后样式冲突。

可能上面的问题你都遇到过,或许也想了办法去命名,去避免冲突,但有没有想过前因后果的关系?我们常常会“遇到问题”——“解决问题”,其实我们是在“制造问题”——“解决问题”。从现实情况看,也没有多少人在尝试的去打破它。

我认为,为什么要命名那么多的类,因为我们可以通过给予不同的类名去区别开来元素样式,即使有个类名叫info,我们可以起个a-info、b-info,那么它们俩就是不同的了,我们还可以.a.info、.b.info,同样能够对其进行区分,再向上追溯,我们为什么要使用类名来区分它们?最大的可能就是,我们在同一个父容器里,使用了较多同类型的子元素或者后代元素,这又是为什么呢?是不是回到了我们最初对于html标签的看法上——常用的标签不多?事实上,我们经常不加思索的使用div、p、span,一个用作大的包含块,一个用作包裹整段文字,span用来包裹行内文字,顶多再加上img、a、i等。我说的是不是很简单(然而这样还是会有人用错)。那么实际上有这么简单吗?正是因为“重视觉,轻语义”,至于我们能想起来使用的正确的,有意义的标签很少,觉得没有必要锱铢必较,那么网页中那么多的内容,难免会出现我们所说的那几个元素的重复,重复了怎么办?样式不同啊,加类,类多了怎么办?想办法区分类,于是,就是你所熟悉的那些行业问题了。

或许你会说,在大的、复杂项目里面,这些都是不可避免的,好,我同意你的说法,那如果我们能在结构和意义上做得更好,是不是能把这种情况大大改善?

其实我们的CSS选择器足够而且正在变得更加强大,我们完全没必要把希望都寄托在加类这个看起来很省劲的方法上

譬如:后代选择器、子选择器、各种伪类选择器、兄弟选择器、属性选择器等。

小结:任何做法都不要非白即黑,不偷懒,不含糊,把方法合理巧妙的结合起来才是正道!

多种场景的样式

在日常项目中,我们很少会碰到特殊的需要,一般只要这样一行代码就够了

XHTML

<link href="" rel="stylesheet" type="text/css">

1
<link href="" rel="stylesheet" type="text/css">

那么如果有特殊需要,该怎么做?可以看下下面这个表格

值 描述
screen 计算机屏幕(默认)。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。
projection 放映机。
handheld 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

找到它并不难,难的是,很多人可能不知从何处着手,没有这个意识或者概念的话,也就不会去查。了解了这些,就能根据不同场景给我们的页面分配不同的样式规则。

html5来了

必须承认一点,当我最初看到html5的时候,内心是激动的,在它出现之前,是没有足够用来表示页面结构的语义化标签供我们使用的,一般我们是用“类”或者“id”来定义它们。不过同时问题又来了,应该怎样正确的使用它们?正如以前我们面对旧版本的html时忽略了很多语义化的标签一样,如果我们不能对这些新增加的标签有正确的认识,那么我们同样会陷入泥淖,虽然看起来会比之前好些。
较常用的有以下这些,你已经用起来了吗?

<article>
定义外部的内容(结构元素)

<aside>
定义页面内容之外的内容。 aside的内容与article的内容相关。(结构元素)

<figure>
定义一组媒介内容的分组,以及它们的标题。(结构元素)

<section>
标签定义文档中的节(section,区段)。比如章节,页眉,页脚或文档中的其他部分(结构元素)

<time>
定义一个日期/时间 (内联元素)

<audio>
定义声音内容。(内嵌元素)

<video>
定义视频。(内嵌元素)

<canvas>
定义图形,绘制路径,矩形,圆形,字符以及添加图像的方法

<dialog>
定义对话(会话)dialog元素表示几个人之间的对话。HTML5dt元素可以表示讲话者,HTML5dd元素可以表示讲话内容。(结构元素)

<embed>
定义外部交互内容或插件

<footer>
定义 section 或 page 的页脚

<figcaption>
定义 figure 元素的标题

<hgroup>
用于对网页或区段(section)的标题进行组合,对网页或区段的标题进行组合

<header>
定义 section 或 page 的页眉(介绍信息)

<mark>
定义带有记号的文本,请在需要突出显示文本时使用 标签

<nav>
定义导航链接

<source>
定义媒体资源

更多标签可以参照这张图

或者到这里查看更多

需要注意的几点

结构和表现分离了吗?

从我们开始接触分离观,可能就有一种认识,html里面不要有内联或者内嵌的样式,就是分离了,其实不然。
这带来了一个后果,不重视标签和类依赖。所以,貌似我们已经完全做到了分离,但分离之后,结构并没有做好它的本职工作,然后可能引起我们不得不要用类加以区分,反而因为要照顾到样式,在结构和表现之间建立很多纷繁复杂的联系,这也是带来维护问题的根源之一。不要所有事情都交给CSS解决,让CSS只做它该做的,也不要让自己在标签上使用的失误成为见缝插针的理由。

div无罪,table无毒

十几年前,当css出现并且普及,人们就开始了对以往页面的重构,很多使用table布局的页面被重新编写,用什么呢?“div+css”,相信大家都见过此类的教程或者书籍,笔者最初看到它的时候,就认为div是一门技术,因为它们是并列的关系,现在大家都知道,明显不是,但它所带来的影响是巨大的,div开始在页面中频繁出现甚至到泛滥的地步,然后,一批比较早觉醒的人以及html5概念的出现,让人们重新开始重视语义化,对div的态度开始了转变,仿佛用了它就是错误。其实不管是滥用还是不用,都是一种极端的做法,我们应该理性看待技术,它们的产生都是有原因的,也都是有自己的应用场景的,除非它们被更好、更合理的东西所替代(比如html5中所废弃的标签)。否则就应该占有一席之地,不该被区别看待。

table也是同样,实践证明它不宜用来大范围的复杂布局,但是还是有它的应用场景的,上面表格的部分已做了描述,这里就不多说了。

class还是id?

关于这点,可以参考一下知乎上这个问题的答案。

稍微总结下关注点:

1、id唯一性,class重复。根据目标元素的重复性和独特性来定
2、id权重较高
3、外围用id,内部结构善用class
4、前端使用id操作DOM,重构使用class操作DOM,UI和交互相互独立互不影响

另外还提出一点对于class的误用,下面是W3C的描述:

class:There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

意思是:class应该是描述内容的本质(语义)的而不是内容长什么样。

如果按照这种说法,那么有很多做法都是不妥的,相信大家看过很多“.f12、.fl 、.mr10”之类。

克服代码洁癖,html标签并不是越少越好!

代码终究还是要交给浏览器或者是屏幕阅读器去读,而不是人,所以,如果我们只是做到了让人看着是清爽的,舒服的,就跑偏了,当然,这里不是为某些不必要的标签和嵌套找正当理由,而是站在结构和语义的角度,去运用应有的,有意义的标签,标识网页中需要点缀的内容,告诉浏览器它们是什么。而不仅是站在视觉角度考虑需不需要。

全面了解,权衡利弊,方可取舍

作为前端,实现一种结构或者一种功能,往往有很多方案可以用,比如上面所列的html结构,还有我们常用到的布局方案,CSS效果实现,js的方法,逻辑实现,我们常提到的框架或者库的选择等

合理性——语义化、结构、逻辑、交互等
成本——学习、合作、迭代、维护等
兼容——多版本浏览器,多终端等
性能——传输、解析、查询等

举个栗子,如果你想做动画,怎么做?

flash、css3、js、svg、canvas、Gif等

只有当我们对每一种实现方法或方案都熟悉了,知道了它的优缺点和应用场景,才能取舍自如,否则就是捆绑住了自己的手脚。

学习资源的选择、标准的衡量

学习资源很重要,是否全面?是否正确?这决定了你对一项技术或者一个知识点的最初印象,一旦跑偏不知要多久才纠正得回来,更何况这种代价很多时候是没必要的。

这是我在知乎上看到的两个问题可以作为参考
“若想学 HTML,应从哪里入手?”
前端开发基础扎实的标准是什么?

大家可以看看哪些是和自己的情况相吻合,它们就真的是很权威很可靠的选择吗?比如:http://w3school.com.cn/, 很多初学者的最爱,而且冲着这域名,也会认为它是跟w3c组织相关的权威的官方网站,实则它和w3c组织半点关系都没有,当然也并不是说它有多差,很多人因之受益,但是这是一种性质上的认知错误,实际上它里面的有些内容也是错误的。

再者说标准,不同人眼里的标准也是不同的,能写出页面是标准吗?能正确运用所有标签是标准吗?能熟练运用各种布局是标准吗?都不是,我们一直在进行一个“点——线——面——体”的过程,不论是单项技术,还是经验,综合能力,我们都在不断的积累和填充,单个点和单个方向做得比较好,不代表你就处在一个高的水平面上,或许在另一个地方你还缺了一大块,所以,不断摸索、探索,不断努力就好。

被遗忘的角落——无障碍设计

开发人员使用HTML、CSS和JavaScript创建富互联网应用程序时,往往把残疾人士抛在脑后,因为我们自己大多数是身体健全的人,所以,往往忽略了另一部分困难人士对产品的使用和需要。其实我们可以扭转这种局面。WAI-ARIA能够提供足够的语义,以确保富互联网应用是可以理解的,并且现在已经得到相对较好的支持。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要是为了提升网页的可用性,网页对残疾人士的无障碍化,是对 HTML 语义化的补充。它具备比现有的 HTML 元素和属性更完善的表达能力,并让你页面中元素的关系和含义更明确。

如何使用WAI-ARIA?

应用于HTML的ARIA有两部分组成:role(角色)和带aria-前缀的属性,其作用:

role(角色)标识了一个元素的作用
aria-属性描述了与之有关的事物(特征)及其是什么样的(状态)

ARIA在HTML中使用有其自己的规范,并不是说在HTML中使用了ARIA,Web页面就无障碍化了,就提高了可访问性了。言外之意,ARIA没有用好,反而会把你带到另一个坑中,使用你的页面可访问性更差。

更多关于ARIA的使用,是一个大话题,不是一两句能够说得清楚,有兴趣多了解的,可以参考一下这篇文

web标准之外

当量变引起质变

1、维护性

举个栗子,如果我们去办事,两三个人时可以随便站,10个人可能就要排队了,如果有更多的人就需要有人维持秩序,再上升一个量级,可能还要分批放人,不然场面会失控。

页面是同样道理,一两个页面,几十上百行代码,那就不用太在意怎么写,不同方法带来的差异是可以忽略不计的。几十个页面呢?上千行代码呢?

2、性能

性能至少关乎两个方面,代码的执行效率和文件大小。一个决定了代码的解析和执行速度,一个决定了传输速度。这里不细说。

3、兼容

从当初的浏览器大战,后来比较坑的IE低版本,到现在的各种分辨率移动设备和各种安卓、ios版本浏览器的兼容,微信内核浏览器的兼容,等等。我们过去在做这样的事,将来也会。

上面说了,做出了符合标准的web页面,不代表我们就万事大吉,还有其他很多的实际问题会在量变到一定程度的情况下给我们制造麻烦,形成质变。那我们将如何应对这些质变?本文不做详述,只作为一个引子,后续会再写一篇文章来和大家探讨“web应变之道”。

下次见!~

 

1 赞 2 收藏 评论

9159.com 4

本文由9159.com发布于前端,转载请注明出处:(建议使用 text/html 格式的 HTML,但无论是哪种情

关键词: