首页vns威尼斯城官网登入 › 但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码,即使HTML对标签大小写不敏感

但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码,即使HTML对标签大小写不敏感

最小化标示

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

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

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

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

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

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

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

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

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

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

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

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

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

语义化

根据元素(有时被错误地称作“标签”)其被创造出来时的初始意义来使用它。打个比方,用
heading 元素来定义头部标题,p 元素来定义文字段落,用 a
元素来定义链接锚点,等等。

有根据有目的地使用 HTML
元素,对于可访问性、代码重用、代码效率来说意义重大。


空格:

由和号开始 ("&"),然后是字符"nbsp",并以分号结尾(";")。

问题来源

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

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

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

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

省略可选标签

HTML5 规范中规定了 HTML
标签是可以省略的。但从可读性来说,在开发的源文件中最好不要这样做,因为省略标签可能会导致一些问题。

省略一些可选的标签确实使得页面大小减少,这很有用,尤其是对于一些大型网站来说。为了达到这一目的,我们可以在开发后期对页面进行压缩处理,在这个环节中这些可选的标签完全就可以省略掉了。


bgcolor:拥有关于背景颜色的附加信息,

class还是id?

关于这点,可以参考一下知乎上这个问题的答案。

稍微总结下关注点:

1、id唯一性,class重复。根据目标元素的重复性和独特性来定
2、id权重较高
3、外围用id,内部结构善用class
4、前端使用id操作DOM,重构使用class操作DOM,UI和交互相互独立互不影响

另外还提出一点对于class的误用,下面是W3C的描述:

class:There are no additional restrictions on the tokens authors can
use in the class attribute, but authors are encouraged to use values
that describe the nature of the content, rather than values that
describe the desired presentation of the content.

意思是:class应该是描述内容的本质(语义)的而不是内容长什么样。

如果按照这种说法,那么有很多做法都是不妥的,相信大家看过很多“.f12、.fl
、.mr10”之类。

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

注意点

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

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

脚本加载

出于性能考虑,脚本异步加载很关键。一段脚本放置在 <head> 内,比如 <script src="main.js"></script>,其加载会一直阻塞
DOM
解析,直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本,对用户体验来说那真是一个巨大的影响。

异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+,可将 HTML5 的 async
属性加至脚本中,它可防止阻塞 DOM
的解析,甚至你可以将脚本引用写在 <head> 里也没有影响。

如需兼容老旧的浏览器,实践表明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或 labjs。注入脚本的一个问题是:一直要等到
CSS 对象文档已就绪,它们才开始加载(短暂地在 CSS
加载完毕之后),这就对需要及时触发的 JS
造成了一定的延迟,这多多少少也影响了用户体验吧。

终上所述,兼容老旧浏览器(IE9-)时,应该遵循以下最佳实践。

脚本引用写在 body 结束标签之前,并带上 async
属性。这虽然在老旧浏览器中不会异步加载脚本,但它只阻塞了 body
结束标签之前的 DOM
解析,这就大大降低了其阻塞影响。而在现代浏览器中,脚本将在 DOM
解析器发现 body 尾部的 script
标签才进行加载,此时加载属于异步加载,不会阻塞 CSSOM(但其执行仍发生在
CSSOM 之后)。

所有浏览器中,推荐

 

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.   </head>
  5.   <body>
  6.     <!-- body goes here -->
    1.     <script src="main.js" async></script>
  7.   </body>
  8. </html>

只在现代浏览器中,推荐

 

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.     <script src="main.js" async></script>
  5.   </head>
  6.   <body>
  7.     <!-- body goes here -->
  8.   </body>
  9. </html>

background-color:为元素定义了背景颜色,如

表格

现在如果提到表格(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(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

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

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

关注点分离

理解 web
中如何和为何区分不同的关注点,这很重要。这里的关注点主要指的是:信息(HTML
结构)、外观(CSS)和行为(JavaScript)。为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。

就是说,尽量在文档和模板中只包含结构性的
HTML;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。

在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着:

  • 不使用超过一到两张样式表(i.e. main.css, vendor.css)
  • 不使用超过一到两个脚本(学会用合并脚本)
  • 不使用行内样式(<style>.no-good {}</style>
  • 不在元素上使用 style 属性(<hr>
  • <link rel="stylesheet" href="main.css" type="text/css">
  • <script src="main.js" type="text/javascript"></script>
  • 推荐

     

    1. <link rel="stylesheet" href="main.css">
    2. <script src="main.js"></script>

    可用性

    如果 HTML5 语义化标签使用得当,许多可用性问题已经引刃而解。ARIA
    规则在一些语义化的元素上可为其添上默认的可用性角色属性,使用得当的话已使网站的可用性大部分成立。假如你使用 navasidemainfooter 等元素,ARIA
    规则会在其上应用一些关联的默认值。
    更多细节可参考 ARIA specification

    另外一些角色属性则能够用来呈现更多可用性情景(i.e. role="tab")。


    Tab Index 在可用性上的运用

    检查文档中的 tab 切换顺序并传值给元素上的
    tabindex,这可以依据元素的重要性来重新排列其 tab
    切换顺序。你可以设置 tabindex="-1" 在任何元素上来禁用其 tab 切换。

    当你在一个默认不可聚焦的元素上增加了功能,你应该总是为其加上 tabindex 属性使其变为可聚焦状态,而且这也会激活其
    CSS
    的伪类 :focus。选择合适的 tabindex 值,或是直接使用 tabindex="0" 将元素们组织成同一
    tab 顺序水平,并强制干预其自然阅读顺序。


    ID 和锚点

    通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID.
    这样做,页面 URL 的 hash 中带上对应的 ID
    名称,即形成描点,方便跳转至对应元素所处位置。

    打个比方,当你在浏览器中输入
    URL http://your-site.com/about#best-practices,浏览器将定位至以下
    H3 上。

     

    1. <h3 id="best-practices">Best practices</h3>

    格式化规则

    在每一个块状元素,列表元素和表格元素后,加上一新空白行,并对其子孙元素进行缩进。内联元素写在一行内,块状元素还有列表和表格要另起一行。

    (如果由于换行的空格引发了不可预计的问题,那将所有元素并入一行也是可以接受的,格式警告总好过错误警告)。

     

    1. <blockquote>
    2.   <p><em>Space</em>, the final frontier.</p>
    3. </blockquote>
      1. <ul>
    4.   <li>Moe</li>
    5.   <li>Larry</li>
    6.   <li>Curly</li>
    7. </ul>
      1. <table>
    8.   <thead>
    9.     <tr>
    10.       <th scope="col">Income</th>
    11.       <th scope="col">Taxes</th>
    12.     </tr>
    13.   </thead>
    14.   <tbody>
    15.     <tr>
    16.       <td>$ 5.00</td>
    17.       <td>$ 4.50</td>
    18.     </tr>
    19.   </tbody>
    20. </table>

    HTML 引号

    使用双引号(“”) 而不是单引号(”) 。

    不推荐

     

    1. <div class='news-article'></div>

    推荐

     

    1. <div class="news-article"></div>

    [1]:
    此处的空白元素指的是以下元素:areabasebrcolcommandembedhrimginputkeygenlinkmetaparamsourcetrackwbr

    规范,前端编码 文档类型
    推荐使用 HTML5 的文档类型申明: !DOCTYPE html (建议使用 text/html
    格式的 HTML。避免使用 X...

<h1 style="font-family:verdana">A heading</h1>

结构和表现分离了吗?

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

浏览器解析模式

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

HTML、XML、XHTML 有什么区别

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

文档类型

推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>

(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML
以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。

HTML
中最好不要将无内容元素 [1]的标签闭合,例如:使用 <br> 而非 <br />.


font-family,color以及font-size:定义字体、颜色和尺寸,如

克服代码洁癖,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

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

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

前端编码规范(2)HTML 规范,前端编码

链接样式

  1. 外部链接样式,也是写在head里   

<link rel="stylesheet" type="text/css"
href="css地址">先建一个css样式,保存在同一个目录下

2.内部链接样式表,写在html页面里面的head里

<style
type=text/css>可以用点.或者#来设置body里面被用class或者id选择器设置的一些标记。</style>

 3.  行间链接样式表,写在里body标签里,如:

<div style="float:left"><img src="#"/></div>

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=3793

上一篇:

下一篇:

相关文章