新萄京娱乐场.2959.com 2

新萄京娱乐场.2959.com:是时候再提web标准

多种场景的样式

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

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页面

<!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>

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

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

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

文档声明

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

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>
定义媒体资源

更多标签可以参照这张图

或者到这里查看更多

常见的浏览器和内核

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

1、门槛低、简单

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

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

新萄京娱乐场.2959.com 1

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

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

你会是哪种?

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

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

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

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

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

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

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>

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

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

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

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

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

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

浏览器解析模式

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

列表

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

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

它可以被怎样写呢?

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

常用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

文档结构和意义为先

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

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

问题来源

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

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

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

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标准之外

当量变引起质变

1、维护性

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

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

2、性能

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

3、兼容

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

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

下次见!~

 

1 赞 2 收藏
评论

新萄京娱乐场.2959.com 2

HTML语义化

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

div无罪,table无毒

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

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

一个典型的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去写 简单 适应性更好

需要注意的几点

发表评论

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