文档结构和意义为先

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

注意点

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

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

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

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

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

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

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

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

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

  • 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,应从哪里入手?”https://www.zhihu.com/question/19753196
前端开发基础扎实的标准是什么? https://www.zhihu.com/question/38922374

大家可以看看哪些是和自己的情况相吻合,它们就真的是很权威很可靠的选择吗?比如:http://w3school.com.cn/,
很多初学者的最爱,而且冲着这域名,也会认为它是跟w3c组织相关的权威的官方网站,实则它和w3c组织半点关系都没有,当然也并不是说它有多差,很多人因之受益,但是这是一种性质上的认知错误,实际上它里面的有些内容也是错误的。

再者说标准,不同人眼里的标准也是不同的,能写出页面是标准吗?能正确运用所有标签是标准吗?能熟练运用各种布局是标准吗?都不是,我们一直在进行一个“点——线——面——体”的过程,不论是单项技术,还是经验,综合能力,我们都在不断的积累和填充,单个点和单个方向做得比较好,不代表你就处在一个高的水平面上,或许在另一个地方你还缺了一大块,所以,不断摸索、探索,不断努力就好。

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

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

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

web标准之外

当量变引起质变

1、维护性

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

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

2、性能

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

3、兼容

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

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

下次见!~

 

1 赞 2 收藏
评论

bet36365注册送奖金 1

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

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

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

标题

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

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、XML、XHTML 有什么区别

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

多种场景的样式

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

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 语义化

  • 语义化HTML是一种编写HTML的方式。
  • 选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
    好处

    1. 页面呈现出很好地内容结构、代码结构
    2. 用户体验好。
    3. 利于SEO优化
    4. 方便其他设备解析来渲染网页。
    5. 便于团队开发和维护,语义化更具可读性

最小化标示

通常情况下,较少的代码意味着更快的下载,还意味着更少的服务器空间和带宽消耗。有个问题就是,即使你写出了符合web标准的页面仍然不能说明你写出了足够简洁或者合理的代码。正所谓规则是死的,容易做到,碰到实际场景,不同的做法会导致结果不同。在我们成长过程中,会遇到不同的老师,要么是一篇文章,要么是一本书,要么是具体的某个人,追溯到最后仍然是人,不同的人,观点和习惯可能不同。比如,你可能会养成一个习惯就是希望给所有单独添加样式的元素分配一个类,这样做到了较强的可控性,但是,这样引发什么潜在的问题呢?

1、过多的类
2、类的命名难

除了上面两点,还有一个可能碰到的就是类名重复,然后样式冲突。

可能上面的问题你都遇到过,或许也想了办法去命名,去避免冲突,但有没有想过前因后果的关系?我们常常会“遇到问题”——“解决问题”,其实我们是在“制造问题”——“解决问题”。从现实情况看,也没有多少人在尝试的去打破它。

我认为,为什么要命名那么多的类,因为我们可以通过给予不同的类名去区别开来元素样式,即使有个类名叫info,我们可以起个a-info、b-info,那么它们俩就是不同的了,我们还可以.a.info、.b.info,同样能够对其进行区分,再向上追溯,我们为什么要使用类名来区分它们?最大的可能就是,我们在同一个父容器里,使用了较多同类型的子元素或者后代元素,这又是为什么呢?是不是回到了我们最初对于html标签的看法上——常用的标签不多?事实上,我们经常不加思索的使用div、p、span,一个用作大的包含块,一个用作包裹整段文字,span用来包裹行内文字,顶多再加上img、a、i等。我说的是不是很简单(然而这样还是会有人用错)。那么实际上有这么简单吗?正是因为“重视觉,轻语义”,至于我们能想起来使用的正确的,有意义的标签很少,觉得没有必要锱铢必较,那么网页中那么多的内容,难免会出现我们所说的那几个元素的重复,重复了怎么办?样式不同啊,加类,类多了怎么办?想办法区分类,于是,就是你所熟悉的那些行业问题了。

或许你会说,在大的、复杂项目里面,这些都是不可避免的,好,我同意你的说法,那如果我们能在结构和意义上做得更好,是不是能把这种情况大大改善?

其实我们的CSS选择器足够而且正在变得更加强大,我们完全没必要把希望都寄托在加类这个看起来很省劲的方法上

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

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

有哪些常见的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=””>

克服代码洁癖,html标签并不是越少越好!

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

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

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

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

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

那么它们的区别在哪儿?

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

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

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

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

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

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

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

问题来源

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/

表格

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

发表评论

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

网站地图xml地图