后边二个编码,是时候再提web规范

By admin in 4858美高梅 on 2019年10月22日

是时候再提web标准

2016/07/06 · 基本功手艺 ·
WEB

初稿出处: 灵感(@灵感_idea
)   

HTML(HyperText 马克up 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、XML、XHTML 有啥分别

  • HTML 超文本标记语言(HyperText 马克up
    Language,简单称谓:HTML)是一日千里种用于创制网页的标准标志语言。
  • XML 可扩充标记语言(The Extensible 马克up
    Language)的简写,首要用于存款和储蓄数据和组织。
  • XHTML 可扩充标志语言 (The Extensible HyperText 马克up
    Language)的缩写,基于XML,效能与HTML类似,指标正是达成HTML向XML的过渡。

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

**背景**

**web标准是个不适当时候宜的话题。引进国内的年华,粗略算下来,有十年左右了。然而由于国内前端优才的缺点和失误和血脉相通教育跟进的暂缓,变成了好四人都未有对它引起足够的讲究并行使到本人的其实项目此中,同一时间又花了非常多精力在扬扬洒洒的新技艺方案和工具中,那就形成了手艺断层,影响不是三个四人,而是第一次全国代表大会片段,假若再缺少相关的准确教导,就能够保留相当多不科学的编码习于旧贯,对于个人成长和所做的类型都以不利的。**

为啥是时候再提呢?能够先来看看上边一张有着自然代表性的图,截自己的企鹅群(152128548)

4858美高梅 1

1、标签仍在被滥用
2、器重觉,轻语义和布局
3、热衷于跟进火热新技能,不推崇基础
4、当本身在跟我们说尊重基础的时候,要么有些人会说原生js,要么有的人讲css原理和能力,没人说html

由于以上的几点,加上各样场面和议会如同少之又少谈到那一个方面包车型大巴事物,新手在被行家“牵”着走,老鸟的活力又不在这里些相比基础的事物上。那篇文呢,正是跟大家风流倜傥块儿回来起点,去探视怎么做才算是相符了web标准的编码。

一个第一名的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>

如何精通 HTML 语义化

  • 语义化HTML是一日千里种编写HTML的秘技。
  • 慎选适当的价签、使用合理的代码结构,便于开拓者阅读,同期让浏览器的爬虫和机器很好地深入分析。
    好处

    1. 页面呈现出很好地内容结构、代码结构
    2. 客户体验好。
    3. 利于SEO优化
    4. 方便其余设备解析来渲染网页。
    5. 便于协会支付和敬爱,语义化更具可读性

文书档案类型

推荐介绍应用 HTML5 的文书档案类型注脚: <!DOCTYPE html>

(建议使用 text/html 格式的 HTML。防止使用 XHTML。XHTML
以至它的属性,譬如 application/xhtml+xml 在浏览器中的应用支撑与优化空间都十二分个别)。

HTML
中最棒永不将无内容成分 [1]的价签闭合,譬如:使用 <br> 而非 <br />.


主题素材根源

贰个出色的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去写 轻便 适应性越来越好

如何精通内容与体制分离的法规

  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样式的分开,它可以遵照差别的浏览器,达到呈现效果的联结。保证网页架构
      不改变形的前提下,放心在差别浏览器渲染展现样式。

HTML 验证

诚如景象下,建议接收能通过规范规范验证的 HTML
代码,除非在质量优化和操纵文件大小上只能做出妥胁。

采纳诸如 W3C HTML validator 这样的工具来进行检测。

标准化的 HTML 是表现本事供赋予局限的生硬质量基线,它推动了 HTML
被越来越好地应用。

不推荐

 

  1. <title>Test</title>
  2. <article>This is only a test.

推荐

 

  1. <!DOCTYPE html>
  2. <meta charset=”utf-8″>
  3. <title>Test</title>
  4. <article>This is only a test.</article>

1、门槛低、简单

七日就能够垄断html,常用标签少之又少,用不到的不要管

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

4858美高梅 2

上边是某宝PC端的登入页,恐怕是出于各个原因(不详),只用了小量的竹签,所以,并不说它是糟糕的还是是错的,但它是另外众两人的形容。假诺本身说html标签有100四个,你会是怎么影响?

1、不清楚,没悟出有那样多
2、知道,但认为相当多都用不上

您会是哪一种?

怎么着在适龄的时候,合适的地点,使用精确的竹签,那是web规范的基本供给。后边细说。

CSS非常的粗略,常用属性也就那么多

宽、高、边框、背景、定位、浮动、边距,假设你调节了那样多,那么就可见应对非常多页面布局的景况了。假如您由此就感到css很简短,那么就等着它来“惩罚”你吧。

倒霉的方面:各个宽容难题,各个奇葩布局要求,种种不可预见的bug

好的下边:多数奇异的手艺和css3新个性,能够协理大家做出充满美感又美妙的效应

假设你照样以为CSS太轻易,那么请看一下这里https://drafts.csswg.org/indexes/,要坚强~

HTML、XML、XHTML

HTML:超文本标识语言,是语法较松懈的、不严峻的Web语言;
XML:(EXtensible 马克up
Language)可扩充标识语言,主要用以存储数据喝结构、设计主题是传输数据,而非呈现数据、标签未有被预订义。须要活动定义标签;
参考http://w3school.com.cn/xml/xml\_intro.asp
XHTML:可扩张超文本标志语言,是XML和HTML的结合物基于XML,功用和HTML类似,但语法更严苛;
参考http://w3school.com.cn/xhtml/xhtml\_why.asp

有啥常见的meta标签

  • 语言应用中文
    <meta http-equiv=”Content-Language” content=”zh-CN” />

  • 编码格式:报告给浏览器用什么样方法来都那页代码
    <meta charset=”utf-8″>

  • 假使补助谷歌 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=””>

简单可选标签

HTML5 标准中规定了 HTML
标签是足以总结的。但从可读性来讲,在付出的源文件中最棒永不这么做,因为省略标签大概会产生一些标题。

简言之一些可选的价签确实使得页面大小减少,那很有用,越发是对于部分特大型网址来说。为了达到这一指标,我们得以在支付早先时期对页面举行压缩管理,在这里个环节中这几个可选的标签完全就可以省略掉了。


2、只须要做“对”,不要求抓牢

有的是时候,固然写错了浏览器会包容它,当我们的代码是非驴非马的,以至有的时候是错的,可是浏览器依然将它“正常”展现出来,这一年,大家挖掘不到温馨的一无是处。以为看起来没难点就没难题,那是很凶险的。

标签不用理会,交给CSS去管理就好,理论上,大家可以通过自然的CSS法规,放肆的转移一个要素的显现,那就形成了对html标签的不讲究,因为我们总能让它们看起来没有任何难点。

HTML中表现(HTML)、样式(Css)、行为(Js)分离
  1. 写HTML时不管样式,入眼在html的组织和标签语义化上,让HTML能反映页面结构或内容后再去写样式(css)
  2. 写JS时,尽量不用js去一向操作样式,通过给成分加多删减class来决定样式变化。
  3. HTML内不允许现身属性样式,尽量不出新行内样式

文书档案声明的效率?严酷情势和交集形式指什么?<!doctype html> 的作用?

  • 文书档案证明的功力
    文书档案声止泻的是幸免现身乱码情形。
  • 适度从紧格局和交集形式指什么
    残酷格局:又称标准情势,是指浏览器依照 W3C 规范分析代码
    掺杂方式:又称奇怪方式或同盟格局,是指浏览器用本身的章程深入分析代码
    区分 :浏览器深入分析时到底使用严酷形式照旧叶影参差形式,与网页中的
    DTD 直接相关。
  • <!DOCTYPE html>
    <DOCTYPE>注解叫做文件类型定义(DTD),注明的效能为了告知浏览器该公文的类
    型。让浏览器分析器知道应该用哪个典型来剖析文书档案

本子加载

是因为质量思量,脚本异步加载很入眼。风流倜傥段脚本放置在 <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. 后边二个编码,是时候再提web规范。  </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>

3、热衷于“向前看”

读书新才干,丰富友好的本事树——html5、canvas、svg、react、ES6等。

化解“难题”——感觉常常的做事没什么挑衅了,所以不屑于去深挖自个儿曾经会了东西。

做出粲焕的成效——纯CSSLogo、动画,3D动画,canvas动画等。

跟风式学习——咱们都在谈,业界都在捧,看起来很好的东西,就起来不耐心不安,严阵以待,其实有句话叫做:“基础不牢,山崩地陷”,兴致冲冲的去上学新的事物的时候,往往会意识,未有丰硕的根底,是很难前进的。

地点说的那些是错的么?当然都对,极其是在本事升高创新迭代速度快的互连网领域,想会得越来越多让谐和更加强,同不经常候会的越来越多在其实使用中可采取的方案也越来越多,兴趣驱动去学习,那是好事,笔者本人也是如此的,但大家须要潜心的是,学习不是一条直线,无法顺着一条线平昔往前冲,除了长度,还恐怕有深度,需求我们不断的从各样方面去打磨和填充工夫好转。

HTML语义化

语义化HTML是豆蔻年华种编写HTML的主意,语义化的机要目标便是让大家直观的认知标签(markup)和性质(attribute)的用途和效果与利益,选拔切合的竹签、使用合理的代码结构,便于开辟者阅读的同一时候也得以让浏览器的爬虫和机械和工具很好的深入分析。

浏览器乱码的来由是何等?怎么样消除?

html源代码内普通话字内容与html编码不一致产生。但无论哪一类状态导致乱码在网页开头时候都急需安装网页编码。

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

语义化

基于成分(有的时候被错误地喻为“标签”)其被成立出来时的起来意义来利用它。打个举个例子,用
heading 成分来定义尾部标题,p 成分来定义文字段落,用 a
成分来定义链接锚点,等等。

有依赖有指标地使用 HTML
成分,对于可访谈性、代码重用、代码作用来讲意义主要。


文书档案结商谈意义为先

大家都通晓,实现大器晚成种效应能够有八种艺术,那么哪类才是最优的?来看例子

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=”” 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=”” name=”myPage”></iframe>
<p><a href=””
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>

广大的浏览器有何,什么内核

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

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

多媒体回溯

对页面上的传播媒介来讲,像图片、摄像、canvas
动画等,要确定保障其有可代表的衔接接口。图片文件大家可接受有含义的预备文本(alt),录像和音频文件我们可觉得其增进表达文字或字幕。

提供可代替内容对可用性来讲非常首要。试想,一个人盲人客商如何能知晓一张图纸是什么样,倘诺没有@alt 的话。

(图片的 alt
属性是可不填写内容的,纯装饰性的图形就可用这么做:alt="4858美高梅 3")。

 

  1. <img src=”luke-skywalker.jpg” alt=”Luke skywalker riding an alien horse”>

列表

什么样特色啊?最引人瞩指标正是有那三个项,项和项之间相互独立,竖着排列,像那样

本身是列表
自己是列表
本身是列表

它能够被什么写吗?

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等成分的由来。

文书档案表明

<!DOCTYPE> 成效是声称文书档案的深入分析类型,表明必得是 HTML
文书档案的率先行,位于 <html> 标签在此之前。
扬言不是HTML标签,它是提示Web浏览器关于页面使用哪个HTML版本举办编写制定的下令。
HTML4.01和HTML5楚河汉界 平日用H5表明
<!doctype html>就是HTML5的声明

列出大范围的价签,并简短介绍这几个标签用在怎么着意况

  • 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=””
    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>

关注点分离

精通 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 语义化标签使用合适,大多可用性难点如日中天度引刃而解。ALacrosseIA
    准绳在有的语义化的成分上可为其添上暗许的可用性剧中人物属性,使用特别的话已使网址的可用性大部分成立。就算你利用 navasidemainfooter 等成分,ALANDIA
    法规会在其上采用有的事关的暗中认可值。
    更加多细节可参照他事他说加以考察 A卡宴IA specification

    除此以外一些剧中人物属性则能够用来显现愈来愈多可用本性景(i.e. role="tab")。


    Tab Index 在可用性上的施用

    自己争辨文书档案中的 tab 切换顺序并传值给元素上的
    tabindex,这能够依据成分的最首要来重新排列其 tab
    切换顺序。你能够设置 tabindex="-1" 在其余因素上来禁止使用其 tab 切换。

    当您在一个暗中认可不可集中的因素上扩大了作用,你应当总是为其丰富 tabindex 属性使其成为可聚集状态,而且那也会激活其
    CSS
    的伪类 :focus。选择适用的 tabindex 值,或是直接运用 tabindex="0" 将成分们组织成同扶摇直上tab 顺序水平,并强制干预其本来阅读顺序。


    ID 和锚点

    万般贰个相比较好的做法是将页面内享有的头顶标题成分都增加 ID.
    那样做,页面 U冠道L 的 hash 中带上对应的 ID
    名称,即产生描点,方便跳转至对应成分所处位置。

    打个假使,当你在浏览器中输入
    ULANDL 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…

标题

用作标题,特点也轻便,比页面上其余的文书越来越大、更粗。
咱俩得以这么写:

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的处境。

浏览器深入分析形式

从严形式:又称标准情势,是指浏览器依据W3C标准解析代码。
混合方式:又称奇怪情势或同盟方式,是指浏览器用本身的情势深入分析代码
假定页面表明<!DOCTYPE
html>那么浏览器就根据W3C的标准深入分析渲染页面,便是严苛情势。若无,浏览器会依照本人的格局深入分析渲染页面,也等于犬牙相制形式
<html
lang=“zh”>里lang=“zh”表示报告浏览器当前页面使用的言语,zh为中文意思

注意点

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

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

表格

现行反革命纵然提到表格(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>一九八八0102<td> </tr>
<tr> <td>rewe<td> <td>wuhan<td>
<td>419890103<td> </tr> <tr>
<td>ertww<td> <td>yichang<td>
<td>一九八八0205<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=”那是贰个报表的内容简要介绍”那句是怎么着鬼?可以吗,看内容便知,它是有关表格的三个简单介绍,那个简单介绍客商是看不到的,显示器阅读器能够利用该属性。

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

<strong><em><b><i>和任何短语成分

短语成分,在于调控的微粒更加小,非亲非故布局,和显现也从没太大关系(尽管它会有加粗可能倾斜的功能),用来对于页面中的有个别特殊内容做出特意的标志,例如“重申”、“援用”等。

那正是说它们的界别在何地?

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

传达意义和布局,并不是交由表现指令。

<em>代表重申,<strong>意味着进一步重申,在语音合成器客商代理场景下,它们还表现为音量、音调及语速的分别。假若一个元素须求既强调又斜体,那么大家可以挑选精确的标签,然后经过体制来决定别的地方。

与上述同类之外还会有其余短语成分,举例:

<cite> 包蕴对另外来源的引言或引用
<code> 内定八个Computer代码片段
<var> 表示一个变量恐怕程序参数实例

大范围的浏览器和水源

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

最小化标示

日常说来意况下,少之又少的代码意味着更加快的下载,还意味着越来越少的服务器空间和带宽消耗。有个难点即便,尽管你写出了切合web标准的页面照旧不能印证你写出了足足简洁大概合理的代码。正所谓准则是死的,轻巧形成,遇到实际处境,差异的做法会招致结果区别。在我们中年人进程中,会境遇差别的园丁,要么是一日千里篇小说,要么是一本书,要么是绘影绘声的某人,追溯到最后仍为人,分化的人,观点和习于旧贯只怕两样。比方,你或许会养成四个习贯正是可望给持有单独增加样式的成分分配三个类,那样成功了较强的可控性,不过,这样吸引什么秘密的标题呢?

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

而外上面两点,还大概有二个大概遇见的正是类名重复,然后样式冲突。

唯恐上边的主题材料你都遭受过,或然也想了法子去命名,去幸免冲突,但有未有想过来踪去迹的涉及?大家通常会“境遇难点”——“消除难题”,其实大家是在“创制难点”——“化解难题”。从现真实情况况看,也平昔非常少少人在尝试的去打破它。

小编觉着,为啥要命名那么多的类,因为大家能够经过付与差异的类名去分别开来成分样式,纵然有个类名为info,大家得以起个a-info、b-info,那么它们俩正是分化的了,大家还能.a.info、.b.info,同样可以对其打开区分,再前进追溯,大家为啥要利用类名来差距它们?最大的只怕便是,大家在同一个父容器里,使用了比较多同品种的子成分也许后人元素,那又是怎么呢?是还是不是回来了我们最早对于html标签的眼光上——常用的标签没多少?事实上,大家日常不加思虑的接受div、p、span,一个当做大的含有块,叁个作为包裹整段文字,span用来包裹行内文字,顶多再增进img、a、i等。小编说的是否很简短(不过这么依然会有人用错)。那么实际上有这么轻便吗?就是因为“注重觉,轻语义”,至于大家能想起来使用的不错的,有意义的竹签少之甚少,感到没有须求斤斤计较,那么网页中那么多的剧情,难免会出现大家所说的那些元素的重新,重复了如何做?样式不一致啊,加类,类多了怎么做?想办法区分类,于是,便是您所精晓的这多少个行当难点了。

也许你会说,在大的、复杂项目里面,这个都以不可转败为胜的,好,笔者同意你的说教,那即使我们能在构造和意义上做得越来越好,是否能把这种情状大大改正?

实则我们的CSS选取器丰硕何况正在变得极度刚劲,大家全然没须要把希望都寄予在加类那几个看起来很省劲的章程上

举个例子:后代选取器、子选用器、各个伪类采纳器、兄弟选取器、属性选用器等。

总括:任何做法都休想非白即黑,不偷懒,不马虎,把办法成立玄妙的结合起来才是正道!

二种境况的体裁

在普通项目中,大家比相当少会境遇特殊的急需,平常只要这么朝气蓬勃行代码就够了

XHTML

<link href=”” rel=”stylesheet” type=”text/css”>

1
<link href="" rel="stylesheet" type="text/css">

那正是说只要有非常供给,该如何做?能够看下下边那几个表格

值 描述
screen Computer显示器(暗中同意)。
tty 电传机以至近似的选取等宽字符网格的媒婆。
tv TV类型设备(低分辨率、有限的滚屏才能)。
projection 放映机。
handheld 手持设备(小显示器、有限带宽)。
print 打印预览格局/打字与印刷页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于具备设施。

找到它并轻便,难的是,非常多个人恐怕不知从哪个地方入手,没有这几个开掘依然概念以来,也就不会去查。驾驭了这个,就能够依据不一样情况给我们的页面分配分化的体制准绳。

html5来了

总得承认一点,当笔者最先见到html5的时候,内心是触动的,在它出现以前,是未曾丰裕用来代表页面结构的语义化标签供大家运用的,日常大家是用“类”恐怕“id”来定义它们。可是同期难点又来了,应该什么精确的运用它们?正如早前我们面前蒙受旧版本的html时马虎了很多语义化的竹签同样,假设我们无法对这一个新扩展的价签有科学的认知,那么大家同样会陷入泥淖,即便看起来会比以前好些。
较常用的有以下那一个,你早已用起来了吗?

<article>
4858美高梅 ,概念外部的源委(结构成分)

<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>
概念媒体财富

更加多标签能够参照他事他说加以考察那张图

要么到此处查看越多

急需当心的几点

结谈判呈现分离了吗?

从我们初始接触分离观,也许就有意气风发种认知,html里面不用有内联恐怕内嵌的体制,便是分手了,其实不然。
那带来了三个结局,不注重标签和类正视。所以,貌似大家早已完全到位了分手,但分离之后,结构并不曾办好它的本职职业,然后恐怕孳生我们不得不要用类加以区分,反而因为要观照到样式,在布局和表现之间确立比非常多纷纭复杂的沟通,那也是带动珍视难题的源于之意气风发。不要存有事务都付出CSS化解,让CSS只做它该做的,也决不让和煦在标签上利用的失误形成见缝插针的理由。

div无罪,table无毒

十多年前,当css出现同一时间普遍,大家就起来了对昔日页面包车型大巴重构,比较多运用table布局的页面被再度编排,用哪些吧?“div+css”,相信我们都见过此类的教程只怕书籍,我最初看见它的时候,就以为div是一门能力,因为它们是同等对待的关联,今后我们都清楚,显明不是,但它所带来的震慑是了不起的,div最早在页面中每每出现依旧到泛滥的境界,然后,一堆相比较早觉醒的人以至html5概念的面世,让民众重新开首青眼语义化,对div的情态初步了转换,就疑似用了它就是不对。其实不管是滥用依旧不要,都以生气勃勃种极端的做法,咱们相应理性对待本领,它们的发生都是有来头的,也都以有温馨的接收场景的,除非它们被更加好、更合理的事物所代表(比方html第55中学所放任的标签)。不然就应有攻克立足之地,不应当被区分看待。

table也是一模二样,试行评释它不宜用来大面积的纷纭布局,可是仍然有它的应用场景的,下边表格的有的已做了描述,这里就相当的少说了。

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”之类。

克制代码洁癖,html标签实际不是越少越好!

代码毕竟照旧要提交浏览器依旧是荧屏阅读器去读,并非人,所以,假使大家只是完毕了让人望着是开心的,舒服的,就跑偏了,当然,这里不是为一些不要求的价签和嵌套找正当理由,而是站在构造和语义的角度,去选拔应当的,有意义的竹签,标记网页中供给点缀的内容,告诉浏览器它们是哪些。而不止是站在视觉角度思量需无需。

圆满领会,权衡利弊,方可取舍

作为前端,实现一种结构依然活龙活现种意义,往往有为数不菲方案能够用,譬如上边所列的html结构,还应该有大家常用到的布局方案,CSS效果落成,js的章程,逻辑达成,大家常涉及的框架只怕库的选项等

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

举个栗子,假若您想做动画,如何做?

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

除非当大家对每朝气蓬勃种实现方式或方案都熟稔了,知道了它的得失和动用场景,手艺选拔自如,不然正是松绑住了投机的动作。

读书财富的选料、标准的权衡

读书财富非常重大,是不是健全?是或不是精确?那决定了您对意气风发项手艺或许三个知识点的早期印象,风流倜傥旦跑偏不知要多短时间才纠正得回去,更并且这种代价相当多时候是没须求的。

那是本身在网易上看到的多个难题得以看作参照
“若想学 HTML,应从哪儿动手?”
前端开荒基础扎实的正式是何等?

世家能够看看哪些是和投机的事态相相符,它们就着实是很权威很保证的抉择吧?比如:http://w3school.com.cn/,
相当多初读书人的最爱,并且趁机那域名,也会以为它是跟w3c组织有关的华贵的官网,实则它和w3c协会半点关系都还未,当然也并非说它有多差,很两人因之收益,但是那是生机勃勃种天性上的体味错误,实际上它里面包车型客车多少内容也是漏洞非常多的。

再说标准,分歧人眼里的正规也是莫衷一是的,能写出页面是正经吧?能准确利用全部标签是标准呢?能自如应用种种布局是规范吧?都不是,我们向来在实行一个“点——线——面——体”的进程,无论是单项本领,依旧经验,综合力量,大家都在每每的堆放和填充,单个点和单个方向做得相比较好,不意味你就处在贰个高的程度面上,可能在另四个地点你还缺了一大块,所以,不断探索、探寻,不断努力就好。

被遗忘的角落——无障碍设计

开辟职员使用HTML、CSS和JavaScript创造富网络应用程序时,往往把残废人员抛在脑后,因为大家和谐半数以上是肌一路顺风全的人,所以,往往忽略了另生龙活虎局地困苦人员对产品的使用和需求。其实我们得以挽回这种规模。WAI-AKoleosIA能够提供丰盛的语义,以保障富网络使用是能够精晓的,何况以往风流倜傥度得到相对较好的帮忙。

WAI-ALacrosseIA是一个为残废之人员等提供无障碍访谈动态、可相互Web内容的才具专门的学业。重若是为了升高网页的可用性,网页对残疾职员的无障碍化,是对
HTML 语义化的补充。它具备比现成的 HTML
成分和总体性更周详的表达技能,并让您页面兰月素的涉嫌和含义更显著。

如何行使WAI-A奥迪Q7IA?

动用于HTML的AMuranoIA有两有的组成:role(角色)和带aria-前缀的习性,其功效:

role(剧中人物)标志了二个因素的功力
aria-属性描述了与之有关的东西(特征)及其是何等的(状态)

A大切诺基IA在HTML中运用有其协和的正经,并非说在HTML中动用了A宝马X3IA,Web页面就无障碍化了,就增加了可访问性了。言外之音,ALacrosseIA未有用好,反而会把您带到另二个坑中,使用你的页面可访问性更差。

更加多关于ACRUISERIA的采纳,是一个大话题,不是郁郁苍苍两句能够说得领悟,有意思味多领悟的,能够参谋一下这篇文

web标准之外

当量变引起质变

1、维护性

举个栗子,如果大家去做事,两几个人时能够随便站,10民用大概就要排队了,假若有越来越多的人就需求有人维持秩序,再回升贰个量级,大概还要分批放人,不然地方会失控。

页面是同等道理,风流罗曼蒂克三个页面,几十众多行代码,那就毫无太介怀怎么写,差别措施带来的间隔是能够忽视不计的。几十一个页面吗?上千行代码呢?

2、性能

性子起码关乎多少个地点,代码的推行作用和文件大小。二个调节了代码的分析和施行进程,三个垄断(monopoly)了传输速度。这里不细说。

3、兼容

从那时的浏览器大战,后来比较坑的IE低版本,到明日的各类分辨率移动器材和各类安卓、ios版本浏览器的十分,微信内核浏览器的非常,等等。我们以往在做这么的事,未来也会。

地点说了,做出了切合规范的web页面,不意味大家就顺手,还应该有别的不菲的实际难题会在量变到自然水平的情景下给大家制作麻烦,形成质变。那大家将如何回应那几个质变?本文不做详述,只当作一个引子,后续会再写大器晚成篇文章来和豪门商量“web应变之道”。

下次见!~

 

1 赞 2 收藏
评论

4858美高梅 4

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有