是时候再提web标准

2019-04-24 08:53 来源:未知

1、门槛低、简单

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

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

图片 1

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

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

你会是哪种?

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

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

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

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

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

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

HTML、XML、XHTML 有什么区别

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

div无罪,table无毒

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

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

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

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

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

表格

现在如果提到表格(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 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="">

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

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

那么它们的区别在哪儿?

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

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

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

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

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

怎样理解 HTML 语义化

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

class还是id?

关于这点,可以参考一下知乎上这个问题的答案。https://www.zhihu.com/question/19550864/answer/23440690

稍微总结下关注点:

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”之类。

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

  • 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="http://www.google.com" 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>

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

开发人员使用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的使用,是一个大话题,不是一两句能够说得清楚,有兴趣多了解的,可以参考一下这篇文http://www.w3cplus.com/wai-aria/wai-aria.html

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

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

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

需要注意的几点

注意点

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

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

多种场景的样式

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

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 适用于所有设备。

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

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

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

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

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

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

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

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

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

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

  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样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构
      不变形的前提下,放心在不同浏览器渲染显示样式。

标题

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

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的情况。

列表

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

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

它可以被怎样写呢?

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等元素的原因。

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

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

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

TAG标签:
版权声明:本文由美洲杯赌球发布于计算机教程,转载请注明出处:是时候再提web标准