HTML

是时候再提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

**背景**

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

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

图片 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>

问题来源

一个典型的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>
<div id=”header”>
<h1>HTML4</h1>
</div>
<div id=”main”></div>
<div id=”footer”></div>
</body>
</html>
4到5加入了一些新标签 并删除了一些废弃标签
4的兼容性好但一般按照5去写 简单 适应性更好

1、门槛低、简单

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

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

图片 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

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

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

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

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

3、热衷于“向前看”

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

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

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

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

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

HTML语义化

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

文档结构和意义为先

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

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>

列表

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

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

它可以被怎样写呢?

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的声明

标题

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

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为中文意思

表格

现在如果提到表格(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选择器足够而且正在变得更加强大,我们完全没必要把希望都寄托在加类这个看起来很省劲的方法上

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注