彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > web标准之道

web标准之道

发布时间:2019-10-20 18:43编辑:学会党委浏览(75)

    是时候再提web标准

    2016/07/06 · 基础技术 · WEB

    原文出处: 灵感(@灵感_idea )   

    **web标准之道

    **背景**

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

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

    图片 1

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

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

    图片 2
    **

    问题来源

    【作  者】阿一;棕熊;李战;丁学
    【出 版 社】 人民邮电出版社     【书 号】 9787115208972 
    【上架时间】 2009-8-4 
    【出版日期】 2009 年8月 【开 本】 16开

    1、门槛低、简单

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

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

    图片 3

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

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

    你会是哪种?

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

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

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

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

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

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

    网上预订及购买:

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

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

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

    【内容简介】
    博客园是以.NET为主旋律的社区,然而在其“冰山一隅”,Web设计却又独领风骚,代表人物有鸟食轩、Cat Chen、阿一、丁学、爆牙齿、李战等,他们在Web标准、CSS、JavaScript上各有所长,在博客园留下了对Web设计领域的诸多美文佳作。.

    3、热衷于“向前看”

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

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

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

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

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

    很奇怪棕熊的手指有老赵两个粗,却居然能做出那么“灵”的JS效果而不费吹灰之力;很惊讶阿一连普通话都说不利索,却陆续推出了“震惊于世”的播客系列《阿一Web标准学堂》;很佩服李战的八卦水准,居然能从JavaScript扯到和尚坐禅;而Cat Chen更是标新立异,大力鼓吹“欲练CSS必先宫IE”;最后,狂赞一下自己,因为原本想夸一夸上述这些世外高人,可是脑海里浮现的却是月圆之夜皇城之巅西门吹雪天外飞仙的yy画面。

    文档结构和意义为先

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

    是啊,难道大侠就不能秃头吗?更何况是只有几颗爆牙呢!..

    列表

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

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

    它可以被怎样写呢?

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

    在众多美文之中,爆牙齿的《重构之美》系列作为扛鼎之作,全部选入本书之中。他的文中洋溢着对技术的自信以及对完美的追求,末了,如果你能仔细地品味,还能感受到一丝凄美和淡淡的无奈。所谓曲高和寡——啥意思呢,就是说,毛驴嗓门大。

    标题

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

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

    作为《博客园精华集》的第一个分册,本书并没有太多令人费解的概念,而是50余篇Web设计方面的经验之谈。我们并没有强迫大家必须接受这些观点,毕竟,Web标准之道——这个道字,是一种很玄妙的东西,没有固定的模式可以遵循。本书话题轻松明快,适合各年龄阶段、各层次阶段的朋友在各种场合阅读。本来这本书就是供大家在茶余饭后消遣之用,如果能达到这个目的,那么也就不枉编者和读者辛苦一场了。

    表格

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

    【目录信息】

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

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

    那么它们的区别在哪儿?

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

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

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

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

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

    第一部分 HTML/CSS .
    谈谈网页设计中的字体应用 (1) Font Set 1
    目前的网页还是以文字信息为主,而字体作为文字表现形式的最重要参数之一,自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视……
    谈谈网页设计中的字体应用 (2) serif 和 sans-serif 4
    有多少人可以正确的使用它们呢?有多少人真正了解这两个通用字体族呢?让本文给您一个最清楚深入的剖析吧
    谈谈网页设计中的字体应用 (3) 实战应用篇·上 9
    谈谈网页设计中的字体应用 (4) 实战应用篇·下 13
    纸上谈兵终是虚,让我们在战场上学习更多的技能
    让CSS区分各种各样的(input) 18
    (input)实在太多了,但它们却不可能使用相同的样式,当我们不想添加成片的class时,试试这里的方法吧,四个解决方案,总有一个您需要的一个常被问道的问题:如何让层盖住(select) 25
    IE6依然是目前的主流浏览器,IE6的(select)也一直“高高在上”,经常遇到的问题却成为一直以来的话题,本文将为您展现终极解决方案
    兼容 IE, Firefox 的图片自动缩放的CSS 29
    厌烦了写大量的JavaScript来控制一个个的图片?那么来用CSS吧!(当您不能确定expression将会带来什么的时候,请谨慎使用)
    第二部分 WEB标准
    web标准页面设计――要注意的很多 30
    本文是作者在做完一个大型项目之后的总结,提到了很多方面,相信这些知识点对所有走在WEB标准化道路上的人都有很大的帮助
    欲练 CSS ,必先宫 IE 36
    Win国天下,欲练CSS之人不在少数,大多不得要领,又或是走火入魔,全为IE所累。故曰:欲练CSS,必先功IE
    << 查看详细目录 ...

    最小化标示

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

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

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

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

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

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

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

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

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

    本文由彩世界平台发布于学会党委,转载请注明出处:web标准之道

    关键词:

上一篇:登录工程:现代Web应用中的身份验证技术

下一篇:没有了