多种场景的样式

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

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

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

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标签并不是越少越好!

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

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

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去写 简单 适应性更好

3、热衷于“向前看”

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

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

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

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

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

文档声明

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

更多标签可以参照这张图
http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png

或者到这里查看更多http://www.htmldog.com/guides/html/

浏览器解析模式

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

标题

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

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

HTML语义化

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

web标准之外

当量变引起质变

1、维护性

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

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

2、性能

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

3、兼容

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

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

下次见!~

 

1 赞 2 收藏
评论

图片 1

一个典型的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>

**背景**

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

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

图片 2

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

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

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

表格

现在如果提到表格(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=”这是一个表格的内容简介”这句是什么鬼?好吧,看内容便知,它是关于表格的一个简介,这个简介用户是看不到的,屏幕阅读器可以利用该属性。

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=”http://jirengu.com” 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=”http://jirengu.com” name=”myPage”></iframe>
<p><a href=”http://www.w3cschool.cc
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中表现(HTML)、样式(Css)、行为(Js)分离
  1. 写HTML时不管样式,重点在html的结构和标签语义化上,让HTML能体现页面结构或内容后再去写样式(css)
  2. 写JS时,尽量不用js去直接操作样式,通过给元素添加删除class来控制样式变化。
  3. HTML内不允许出现属性样式,尽量不出现行内样式

结构和表现分离了吗?

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

常见的浏览器和内核

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

需要注意的几点