web标准解决方案_1

标准的网页设计(12-15~1-15,能够对此有个知识树即可,无需都知道)

本书约定:HTML指HTML和XHTML

除非特别声明,CSS指CSS2.1规范

现代浏览器指:safari,ff,chrom,opera,ie7891011

结构良好并且有意义的HTML文档在基于标准的CSS开发中非常重要

有意义的标签即语义标签有利于搜搜引擎的重视以及屏幕阅读器的使用。有意义的标记可以非常简单的将元素调整成我所需要的样式。

写有意义的文档

常用有意义的元素(顺便看看w3school)

Hx:标题

H1使用方法:腾讯网 腾讯视频 (网站标题)

H2~6:网页标题

Title: 网页内容描述,即本网页主要讲什么。

ul、ol、dl

strong、em

blockquote、q:本质一样及语义相同;样式不同

专题:提升 web 品质(<DOCTYPE>、<title> 以及 <h1>)

Doctype定义了HTML的版本,给浏览器提供了重要信息以便迅速的渲染页面,也使验证软件对其语法进行校验

Title:描述网页内容。及时不可见,他也很重要(搜索引擎列表、窗口标题栏、用户书签)<title> 标签是 <head> 标签中唯一要求包含的东西。好的标题要简短、不仅根据文档集上下文定义还要说明自己具体内容

现在百度、腾讯等都是用<!doctype html>

H1 VS Title

H1是大标题,告诉搜索引擎这里很重要,要求贴近文章

Title针对用户和网页

ID和类

不要给每篇新闻添加不同id

<div id=”story-id-1”>…</div>

<div id=”story-id-2”>…</div>

改成

<div class=”new”>…</div>

<div class=”new”>…</div>

好处是:

文档结构好

给ID和类命名时,不要与表现有关

好处是:

代码更有意义

同一份文档可以很方便的创建多个央视版本

不会发生名为red的元素是yellow,避免代码和设计不一致

有意义的类名最大的优点是可以在整个网站中重用

ID和类名注意大小写,andy-budd比andyBudd更清晰,统一采用小写,多个单词用连字符连接

ID还是类

一个页面每个id是唯一的,该特性决定元素更精细的控制

一个页面同一个类可以应用多次

从世界观来讲,精细的控制更难。Id多了,名字种类会越来越多且复杂,文档会变得复杂。如果改成类,文档会变得简单,可以根据元素在文档中的位置对其应用样式。

该元素在这个页面确实只会出现一次,那就用id

#id1, #id2, #id3, #id4…{}

要改成

.class_name{}

 

由于类很强大,很多程序员有“多类症”

<h2 class=”news-head”>…</h2>

<p class=”news-text”>…</p>

<p class=”news-text”>…</p>

改成

<div class=”news”>

<h2>…</h2>

<p>…</p>

<p>…</p>

一旦发现类名中出现重复单词,例如news-head和news-footer或者section-header和section-foot,就应该让代码更加“组件化”,会大大提高灵活性。以这种方式删除不必要的代码,使页面简洁。如果发现自己添加了很多类,那么很可能意味着文档结构有问题。

</div>

微格式

Html没有表示人、地址、日期的元素。

有相关组织就提出一个约定,照着约定该元素就成了表示人、地址、日期等元素了。进而可以直接导入日历,或通过蓝牙把信息发到手机上。当前有9个正式的微格式,包括:

表示日期、日历和事件的hCalendar

表示人和组织的hCard

用于人之间的关系的XFN

许多大型网站已经支持微格式了

2002年启动CSS2.1

XHTML和HTML主要差异是它遵守XML编码约定。使用哪个作为标准仍有争议

 

有效性验证:http://validator.w3.org/

对于firefox,在大量验证器插件中,笔者喜欢web developers extension插件,另一个出色工具是firefox validator extension

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。