澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站前端编码标准,优化本事

您不可不知的 HTML 优化技巧

2016/09/12 · 基本功技术 · 2 评论 · HTML

正文作者: 伯乐在线 - 葡萄城控件 。未经小编许可,禁止转载!
应接加入伯乐在线 专栏作者。

怎么着进步Web页面包车型客车性质,多数开垦人士从五个地点来出手如JavaScript、图像优化、服务器配置,文件收缩或是调治CSS。

很精通HTML 已经实现了1个瓶颈,尽管它是付出Web 分界面必备的中坚语言。HTML页面包车型地铁载重也是更加的重。大很多页面平均必要40K的半空中,像有些巨型网站会含有数以千计的HTML 成分,页面Size会越来越大。

怎样有效的下滑HTML 代码的复杂度和页面成分的数额,本文首要解决了那个主题素材,从多少个地点介绍了哪些编写简练,清晰的HTML 代码,能够使得页面加载更为神速,且能在各类装置中运维优良。

对 HTML 拓展分类设置类),使大家能够为因素的类定义 CSS 样式

同样的类设置同一的体裁,或者为不一致的类设置分化的体制

* 分类块级元素

它可以作为其他 HTML 元素的容器,安装<div>成分的类,使大家能够为同壹的<div>成分设置同1的类

<div  class="cities">

<h1>China</h1>

<p>中夏族民共和国有那贰个省份</p>

</div>

样式

<head>

<style>

.cities{

color:red;

padding:20px;

}

</style></head>

* 分类行成分

行内成分,能够作为文件的器皿。设置<span>成分的类,可感觉同壹的<span>成分设置一样的样式。

<p>呵呵,<span class="red">Important</span>那边是形似的文本音讯</p>

样式

<style>

span.red{

color:green;

margin:50px;

}

</style>

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

在炮制网页的进度中,大家平时写类似上面包车型客车代码:
[html]

HTML 规范


在统一准备和开垦进程中供给依照以下标准:

  • 布局分离:使用HTML 扩充结构,而不是体制内容;
  • 保持清洁:为职业流加多代码验证工具;使用工具或样式向导维护代码结商谈格式
  • 上学新语言:获取成分结交涉语义标识。
  • 保障可访问: 使用A安德拉IA 属性和Fallback 属性等
  • 测试: 使网站在两种装置中可见好好运营,可利用emulators和属性工具。

澳门新浦京娱乐场网站 1

布局

<div>成分常用作布局工具,因为能够轻巧地通过 CSS 对其进行固定。

* 使用 HTML5 的网址布局

    header:定义文档或节的页眉;

    nav: 定义导航链接的内容;

    section: 定义文书档案中的节;

    article: 定义独立的自包蕴小说;

    aside: 定义内容之外的内容(比如侧栏);

    footer: 概念文书档案或节的页脚;

    details: 定义额外的底细;

    summery: 定义 details 成分的标题;

* 使用表格的Html布局

<table>的职能是显示表格化的数额

使用<table>成分能获得布局功效,因为能够因而 CSS 设置表格成分的样式

文书档案类型

引入应用 HTML伍 的文书档案类型申明: <!DOCTYPE html>

(建议选用 text/html 格式的 HTML。制止采用 XHTML。XHTML 以及它的品质,例如 application/xhtml xml 在浏览器中的应用支撑与优化空间都不行少于)。

HTML 中最佳永不将无内容成分 [1]的竹签闭合,举例:使用 <br> 而非 <br />.


复制代码 代码如下:

文书档案类型

引入应用 HTML五 的文书档案类型注脚: <!DOCTYPE html>.

(指出利用 text/html 格式的 HTML。制止接纳 XHTML。XHTML 以及它的天性,举个例子 application/xhtml xml 在浏览器中的应用支撑与优化空间都相当星星)。

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


HTML、CSS 和JavaScript叁者的涉及

HTML 是用于调节页面结议和内容的标识语言。HTML 无法用来修饰样式内容,也不可能在头标签中输入文本内容,使代码变得冗长和错综相连,相反使用CSS 来修饰布局成分和外观相比较适宜。HTML成分默许的外观是由浏览器暗中同意的体裁表定义的,如在Chrome中h1标签成分会渲染成32px的Times 粗体。

3条通用设计规则:

  1. 利用HTML 来协会页面结构,CSS修饰页面显示,JavaScript完结页面效果。CSS Zen加登 很好地突显了行为分别。
  2. 一旦能用CSS或JavaScript完毕就少用HTML代码。
  3. 将CSS和JavaScript文件与HTML 分开存放。那可有助于缓存和调治。

Html响应式web设计(多看多写)

怎么样是响应式 Web 设计?

· RWD 指的是响应式 Web 设计Responsive Web Design

· RWD 能够以可变尺寸传递网页

· RWD 对于平板和平运动动设备是至关重要的

    创立您本身的响应式设计:**创造响应式设计的1个方法,是温馨来创设它*

**    使用 Bootstrap:另3个创造响应式设计的点子,是运用现有的 CSS 框架;Bootstrap 是最盛行的支出响应式 web 的 HTML, CSS, 和 JS 框架。


***Bootstrap 支持您支付在别的尺寸都外观精湛的站点:显示屏、台式机Computer、平板Computer或手机:


<head>

<link rel="stylesheet" **href=";

<head>

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>

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

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>

文书档案结构方面也足以做优化,如下:

  • 动用HTML5 文书档案类型,以下是空文件:

<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
<title>Recipes: pesto</title>
</head>
 
<body>
 
  <h1>Pesto</h1>
 
  <p>Pesto is good!</p>
 
</body>
</html>
  • 在文书档案起先位置引用CSS文件,如下:

<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>

1
2
3
4
5
6
7
<head>
  <title>My pesto recipe</title>
 
  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">
 
</head>

运用那二种方法,浏览器会在深入分析HTML代码此前将CSS消息希图好。由此有助于进步页面加载品质。

在页面尾巴部分body截止标签以前输入JavaScript代码,这样有助于进步页面加载的速度,因为浏览器在剖判JavaScript代码在此以前将页面加载成功,使用JavaScript会对页面成分产生积极的震慑。

<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>

1
2
3
4
5
6
7
8
<body>
 
  ...
 
  <script src="/js/global.js">
  <script src="js/local.js">
 
</body>

使用Defer和async属性,脚本成分具备async 属性不能够保险会按梯次实施。

可在JavaScript代码中增添Handlers。千万别加到HTML内联代码中,比方上面包车型大巴代码则轻便导致错误且不易于爱惜:

index.html:

<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  
  ...
 
  <script src="js/local.js">
 
</head>
 
<body onload="init()">
 
  ...
 
  <button onclick="handleFoo()">Foo</button>
 
  ...
 
</body>

上面包车型客车写法比较好:

index.html:

<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
 
  ...
 
</head>
 
<body>
 
  ...
 
  <button id="foo">Foo</button>
 
  ...
 
  <script src="js/local.js">
 
</body>

js/local.js:

init(); var fooButton = document.querySelector('#foo'); fooButton.onclick = handleFoo();

1
2
3
4
init();
var fooButton =
    document.querySelector('#foo');
fooButton.onclick = handleFoo();

Html框架(使用框架,1个浏览器页面能够停放多个Html页面)

通过动用贰个框架,你能够在同八个浏览器窗口中显得不断同2个页面每份Html文档成为三个框架,并且每3个都单身于任何的框架。

接纳框架的弊病:

    *  开拓人士必须同期追踪越来越多的HTML文书档案

    *  很难打字与印刷整张页面

架构标签<frameset>

  *  架构标签(<frameset>)定义怎样将窗口分割为框架

  * 每个 frameset 定义了一多元列;

  * rows/columns规定了每行或每列占据荧屏的面积

编者注:frameset 标签也被一些小说和书本译为框架集。

框架标签(Frame):

Frame 标签定义了放置在各种框架中的 HTML 文书档案

在上面包车型客车这一个事例中,大家安装了3个两列框架集第一列被设置为侵占浏览器窗口的 25%第二列被设置为侵占浏览器窗口的 肆分三HTML 文档 "frame_a.htm" 被放置第壹个列中,而 HTML 文档 "frame_b.htm" 被放到第二个列中

<frameset cols="25%,75%" >

<frame src="frame_a.htm">

<frame src="frame_b.htm">

</frameset>

备注:假诺3个框架有可知边框用户能够拖动边框改变它的大小。为了制止这种景色发生,可以在 <frame>标签中加入:noresize="noresize"

为不帮助框架的浏览器加<noframes>标签

主要提醒不能<body></body>与<frameset></frameset>标签与此同期使用,不过,假如你添加含1段文本<noframes>标签,就必须将这段文字嵌套于<body></body>标签内

eg:

<frameset  cols="25%,75%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<noframes>

<body>此地浏览器不帮忙框架</body>

</noframes>

<frameset>

简言之可选标签

HTML5 标准中分明了 HTML 标签是足以大致的。但从可读性来讲,在开拓的源文件中最佳永不这么做,因为省略标签或许会导致部分标题。

简单一些可选的标签确实使得页面大小减弱,那很有用,非常是对于某些重型网址以来。为了完毕这一指标,大家能够在支付前期对页面举办削减管理,在那几个环节中这么些可选的竹签完全就可以省略掉了。


遵从惯例,全部的<script>成分都应当放在页面包车型地铁<head>成分中。请留心:无论引用多少个外表js文件,浏览器都会依据<script>元素在页面中出现的先后顺序对它们依次实行分析。换句话说,在首先个<script>元素包罗的代码分析达成后,第一个<script>包括的代码才会被深入分析,然后才是第捌个、第四个...
这种做法的指标正是把具有外部文件(包涵CSS文件和JavaScript文件)的引用都放在同等的地点。不过,在文书档案的<head>成分中含有全部JavaScript文件,意味着必须等到全部JavaScript代码都被下载、深入分析和奉行到位将来,技能开端显现页面包车型大巴内容(浏览器在蒙受<body>标签时才开头表现内容)。对于那一个急需多数JavaScript代码的页面来讲,那确实会导致浏览器在展现页面时出现鲜明的延迟,而延期时期的浏览器窗口将是一片空白。为了幸免这么些主题素材,今世Web应用程序一般都会把全部JavaScript引用位于<body>元素中,放在页面包车型大巴原委前面,如下所示:
[html]

轻巧可选标签

HTML5 标准中规定了 HTML 标签是能够简轻便单的。但从可读性来讲,在支付的源文件中最佳永不这样做,因为省略标签也许会招致有些难题。

简短一些可选的价签确实使得页面大小收缩,那很有用,越发是对此一些大型网址的话。为了到达这一目标,我们得以在付出早先时期对页面举办压缩管理,在那些环节中这个可选的标签完全就足以省略掉了。


验证

优化网页的一种办法正是浏览器可管理违法的HTML 代码。合法的HTML代码很轻松调节和测试,且占内部存款和储蓄器少,开支财富少,易于深入分析和渲染运转起来更加快。违规的HTML代码让贯彻响应式设计变得要命劳顿。

当使用模板时,合法的HTML代码显得特别主要,平时会生出模板单独运转杰出,当与任何模块集成时就报多姿多彩的不当,由此一定要确定保障HTML代码的品质,可应用以下方式:

  • 在工作流中增加验证功用:使用表明插件如HTMLHint或SublineLinter协理你检验代码错误。
  • 动用HTML5文书档案类型
  • 保障HTML的档次结构易于维护,要防止成分嵌套处于左开状态。
  • 担保加多各因素的截止标签。
  • 去除不须求的代码 ;不需求为自关闭的要素增多甘休标签;Boolean 属性没有要求赋值,借使存在则为True;

<video src="foo.webm" autoplay="" controls=""/>

1
<video src="foo.webm" autoplay="" controls=""/>

内联框架(即内框架)

iframe运用在网页内显示网页

* 添加iframe语法

<iframe src="URL"></iframe>

URL指向隔开分离页面包车型大巴任务

Iframe - 设置高度和宽窄heightwidth 属性用于规定 iframe 的万丈和宽窄

属性值暗中同意单位像素;但也能够用百分比来设定(比如80%)。

eg:

<iframe src="demo.iframe.htm"  height="200"  width="200"> </iframe>

* Iframe -剔除边框

frameborder属性规定是否显示iframe周围的边框,设置属性frame border数值为0则可以移除边框

<iframe src="demo.iframe.htm"  frameborder="0"></iframe>

* 使用iframe作为链接的标准

iframe可用作链接的对象(target)

链接的target属性必须引用iframe的name属性

<iframe  src="iframe.htm"  name="iframe_a"></iframe>

<p><a  href=""  target="iframe_a"></a></p>

本子加载

鉴于质量驰念,脚本异步加载很关键。壹段脚本放置在 <head> 内,比如 <script src="main.js"></script>,其加载会平昔不通 DOM 解析,直至它完全地加载和实行完结。那会导致页面显示的延迟。极其是一些重量级的脚本,对用户体验的话那真是2个巨大的熏陶。

异步加载脚本可消除这种性质影响。假诺只需同盟 IE十 ,可将 HTML5 的 async 属性加至脚本中,它可防范阻塞 DOM 的深入分析,以至你能够将脚本引用写在 <head> 里也绝非影响。

如需协作老旧的浏览器,施行表明可选取用来动态注入脚本的剧本加载器。你能够思虑 yepnope 或 labjs。注入脚本的3个难题是:一直要等到 CSS 对象文书档案已就绪,它们才起来加载(短暂地在 CSS 加载完毕之后),那就对急需立时触发的 JS 变成了必然的延迟,那多略带少也影响了用户体验呢。

终上所述,包容老旧浏览器(IE九-)时,应该遵循以下最棒实行。

剧本引用写在 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>

复制代码 代码如下:

剧本加载

由于质量思量,脚本异步加载很重大。1段脚本放置在 <head> 内,比如 <script src="main.js"></script>,其加载会一向不通 DOM 分析,直至它完全地加载和进行完成。那会形成页面展现的推移。极度是有的重量级的剧本,对用户体验来讲那真是二个硬汉的熏陶。

异步加载脚本可缓和这种性质影响。要是只需协作 IE十 ,可将 HTML伍 的 async 属性加至脚本中,它可防范阻塞 DOM 的辨析,以致你可以将脚本引用写在 <head> 里也向来不影响。

如需同盟老旧的浏览器,实施证明可使用用来动态注入脚本的台本加载器。你能够设想 yepnope 或 labjs。注入脚本的七个标题是:直接要等到 CSS 对象文书档案已就绪,它们才起来加载(短暂地在 CSS 加载实现之后),那就对亟待即刻触发的 JS 形成了料定的推迟,那多某些少也潜移默化了用户体验呢。

终上所述,包容老旧浏览器(IE九-)时,应该遵守以下最棒施行。

本子引用写在 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 -->
  7.  
  8. <script src="main.js" async></script>
  9. </body>
  10. </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>

代码格式

格式一致性使得HTML代码易于阅读,精晓,优化,调节和测试。

Html背景

* 背景(Backgrounds)

<body>拥有三个布局背景的价签。背景能够是颜色依旧图像;

背景颜色(Bgcolor)

背景颜色属性背景设置某种颜色属性值能够是十6进制数宝马X3GB 值或颜料名

<body bgcolor="#000000"></body>

<body bgcolor="rgb(0,0,0)"></body>

<body bgcolor="black"></body>

eg:

增多图片为背景:

<body  background="/i/eg_bg_06.gif"></body>

使用水彩设置背景和文字颜色

<body  bgcolor="#ffffff"  text="yellow"></body>

备注:<body>标签中的背景颜色(bgcolor)、背景(background)和文书(text)属性在新式的 HTML 规范(HTML肆 和 XHTML)中已被甩掉。W3C 在她们的推荐介绍规范中已去除那些属性。应当利用层叠样式表CSS)来概念 HTML 成分的布局和显示属性

背景(Background)

背景属性背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在全总浏览器窗口进行复制

<body  background="clouds.gif"></body>

<body background=""></body>

U凯雷德L能够是相对地址,如首先行代码,也能够应用相对化地址,如第一行代码,

唤醒:假若您筹算选拔背景图片,你需求紧记一下几点:

* 背景图像是或不是追加了页面包车型大巴加载时间。小贴士:图像文件不应抢先 10k。

* 背景图像是还是不是与页面中的别的图象搭配优良。

* 背景图像是不是与页面中的文字颜色搭配能够。

* 图像在页面中平铺后,看上去还是行吗?

* 对文字的注意力被背景图像反宾为主了啊?

语义化

基于成分(临时被指鹿为马地喻为“标签”)其被成立出来时的开首意义来利用它。打个譬喻,用 heading 成分来定义底部标题,p 元从来定义文字段落,用 a 成分来定义链接锚点,等等。

有依照有目标地使用 HTML 成分,对于可访问性、代码重用、代码功效来讲意义重大。


<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

语义化

依据成分(不经常被漏洞繁多地叫做“标签”)其被创造出来时的始发意义来选拔它。打个若是,用 heading 成分来定义尾部标题,p 成分来定义文字段落,用 a 成分来定义链接锚点,等等。

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

以下示例列出了部分的语义化 HTML 首要情状:

不推荐

  1. <b>My page title</b>
  2. <div class="top-navigation">
  3. <div class="nav-item"><a href="#home">Home</a></div>
  4. <div class="nav-item"><a href="#news">News</a></div>
  5. <div class="nav-item"><a href="#about">About</a></div>
  6. </div>
  7.  
  8. <div class="news-page">
  9. <div class="page-section news">
  10. <div class="title">All news articles</div>
  11. <div class="news-article">
  12. <h2>Bad article</h2>
  13. <div class="intro">Introduction sub-title</div>
  14. <div class="content">This is a very bad example for HTML semantics</div>
  15. <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>
  16. <div class="article-foot-notes">
  17. This article was created by David <div class="time">2014-01-01 00:00</div>
  18. </div>
  19. </div>
  20.  
  21. <div class="section-footer">
  22. Related sections: Events, Public holidays
  23. </div>
  24. </div>
  25. </div>
  26.  
  27. <div class="page-footer">
  28. Copyright 2014
  29. </div>

推荐

  1. <!-- The page header should go into a header element -->
  2. <header>
  3. <!-- As this title belongs to the page structure it's a heading and h1 should be used -->
  4. <h1>My page title</h1>
  5. </header>
  6.  
  7. <!-- All navigation should go into a nav element -->
  8. <nav class="top-navigation">
  9. <!-- A listing of elements should always go to UL (OL for ordered listings) -->
  10. <ul>
  11. <li class="nav-item"><a href="#home">Home</a></li>
  12. <li class="nav-item"><a href="#news">News</a></li>
  13. <li class="nav-item"><a href="#about">About</a></li>
  14. </ul>
  15. </nav>
  16.  
  17. <!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
  18. <main class="news-page" role="main">
  19. <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
  20. <section class="page-section news">
  21. <!-- A section header should go into a section element -->
  22. <header>
  23. <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
  24. <h2 class="title">All news articles</h2>
  25. </header>
  26.  
  27. <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
  28. re-usable module / section that can occur multiple times on a page) a article element should be used -->
  29. <article class="news-article">
  30. <!-- An article can contain a header that contains the summary / introduction information of the article -->
  31. <header>
  32. <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
  33. <div class="article-title">Good article</div>
  34. <!-- Small can optionally be used to reduce importance -->
  35. <small class="intro">Introduction sub-title</small>
  36. </header>
  37.  
  38. <!-- For the main content in a section or article there is no semantic element -->
  39. <div class="content">
  40. <p>This is a good example for HTML semantics</p>
  41. </div>
  42. <!-- For content that is represented as side note or less important information in a given context use aside -->
  43. <aside class="article-side-notes">
  44. <p>I think I'm more on the side and should not receive the main credits</p>
  45. </aside>
  46. <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
  47. <footer class="article-foot-notes">
  48. <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
  49. while the actual text in the time element can also be more human readable / relative -->
  50. <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
  51. </footer>
  52. </article>
  53.  
  54. <!-- In a section, footnotes or similar information can also go into a footer element -->
  55. <footer class="section-footer">
  56. <p>Related sections: Events, Public holidays</p>
  57. </footer>
  58. </section>
  59. </main>
  60.  
  61. <!-- Your page footer should go into a global footer element -->
  62. <footer class="page-footer">
  63. Copyright 2014
  64. </footer>

语义标识

语义指意义相关的东西,HTML 可从页面内容中看出语义:成分和性能的命名一定水平上表达了剧情的角色和效应。HTML5引进了新的语义成分,如<header>,<footer>及<nav>。

分选适当的因一贯编排代码可保障代码的易读性:

  • 行使<h1>(<h2>,<h叁>…)表示标题,<ul>或<ol>达成列表
  • 在意运用<article> 标签以前应增添<h一>标签;
  • 分选稳当的HTML5语义成分如<header>,<footer>,<nav>,<aside>;
  • 利用<p>描述Body 文本,HTML五 语义成分能够变成内容,反之不树立。
  • 动用<em>和<strong>标签代替<i>和<b>标签。
  • 利用<label>成分,输入类型,占位符及别的质量来强制验证。
  • 将文件和因素糅合,并视作另1成分的子成分,会导致布局错误,

例如:

<div>Name: <input type="text" id="name"></div>

1
<div>Name: <input type="text" id="name"></div>

Html脚本(即javascript)

JavaScript 使 HTML 页面具有更加强的动态交互性

插入壹段脚本

<body>

<script  type="text/javascript">

document.write(" <h1> Hello world!</h1>")

</script>

</body>

哪些运用不协助脚本剥夺脚本浏览器

<body>

<script>

document.write("hello world")

</script>

<noscript> Sorry, your browser does not support JavaScript! </noscript>      //在浏览器不帮忙客户端脚本时候显得此段文字

</body>

* HTML script 元素

<script>标签用于定义客户端脚本,譬喻javascript

script元素既可以含蓄脚本语句,也可经过src属性指向外部脚本文件

必备的 type 属性规定脚本的 MIME 类型JavaScript 最常用来图片操作、表单验证以及剧情动态更新

下面的脚本会向浏览器输出“Hello World!”:

<script>

document.write(" hello world!")

</script>

 *<noscript>标签

<noscript>标签提供不能够运用脚本时的替代内容,比如在浏览器禁止使用脚本时,或浏览器不援助客户端脚本时.

* noscript 成分可含蓄普通 HTML 页面包车型大巴 body 成分中能够找到的有着因素。

* 唯有在浏览器不支持脚本只怕剥夺脚本时,才会来得 noscript 成分中的内容

多媒体回溯

对页面上的媒体来讲,像图片、录制、canvas 动画等,要保险其有可代表的连接接口。图片文件大家可应用有含义的备选文本(alt),录制和音频文件我们可感觉其增进表明文字或字幕。

提供可代表内容对可用性来说11分生死攸关。试想,一人盲人用户怎样能驾驭一张图片是何等,如果没有@alt 的话。

(图片的 alt 属性是能够填写内容的,纯装饰性的图纸就可用这么做:alt="澳门新浦京娱乐场网站 2")。

 

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

如此那般,在深入分析包含的JavaScript代码在此之前,页面的剧情将完全呈现在浏览器中。而用户也会因为浏览器窗口体现空白页面包车型大巴时日减弱而认为到张开页面包车型大巴快慢加快了。

多媒体回溯

对页面上的传播媒介来讲,像图片、录像、canvas 动画等,要确定保证其有可代替的连片接口。图片文件我们可使用有意义的预备文本(alt),摄像和音频文件大家得感到其丰富表明文字或字幕。

提供可代替内容对可用性来说特别生死攸关。试想,一个人盲人用户如何能知晓一张图纸是什么,要是没有@alt 的话。

(图片的 alt 属性是可不填写内容的,纯装饰性的图形就可用这么做:alt="澳门新浦京娱乐场网站 3")。

不推荐

  1. <img src="luke-skywalker.jpg">

推荐

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

尽可能用 alt 标签去描述图片,设想你必要对此这几个只可以通过语音依然看不见图片的用户表明图片到底是哪些。

不推荐

  1. <img src="huge-spaceship-approaching-earth.jpg" alt="Header image">

推荐

  1. <img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth">

换种写法会越来越好

<div> <label for="name">Name:</label><input type="text" id="name"> </div>

1
2
3
<div>
   <label for="name">Name:</label><input type="text" id="name">
</div>

怎么着应付老式的浏览器

注意:如果浏览器压根无法辨认<script>标签,那么<script>标签所蕴涵的从头到尾的经过将以文件形式呈现在页面上制止这种境况发生,你应该将脚本隐藏在讲授标签个中。那些老的浏览器没辙辨认<script>标签的浏览器)将不经意这一个注释,所以不会将标签的内容显示到页面上。而那些新的浏览器读懂那些本子并实行它们,纵使代码被嵌套在批注标签内

javascript:

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

关切点分离

明白 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>

    可用性

    要是 HTML伍 语义化标签使用方便,繁多可用性难题早就引刃而解。APRADOIA 规则在局地语义化的因素上可为其添上私下认可的可用性剧中人物属性,使用合适的话已使网址的可用性超越一半确立。如果你使用 navasidemainfooter 等因素,ASportageIA 规则会在其上应用有的关联的暗中认可值。
    越多细节可参照 AWranglerIA 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 名称,即产生描点,方便跳转至对应成分所处地方。

    打个假使,当你在浏览器中输入 U途乐L http://your-site.com/about#best-practices,浏览器将定位至以下 H三 上。

     

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

    格式化规则

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

    (借使出于换行的空格引发了不可预测的标题,那将兼具因素并入壹行也是足以接受的,格式警告总好过错误警告)。

     

    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

    标准,前端编码 文档类型 推荐使用 HTML伍 的文书档案类型注明: !DOCTYPE html (建议利用 text/html 格式的 HTML。幸免采纳 X...

抑或也足以应用<script>标签的defer属性申明脚本在进行时不会潜移默化页面包车型客车布局,即脚本会被推移到一切页面都深入分析完毕后再运维,代码如下:
[html]

关注点分离

知道 web 中如何和怎么区分分裂的关心点,那很重大。这里的关怀点主要指的是:消息(HTML 结构)、外观(CSS)和行事(JavaScript)。为了使它们造成可保障的到底清洁的代码,大家要硬着头皮的将它们分别开来。

从严地保管结构、表现、行为叁者分离,并尽或然使三者之间一直不太多的相互和维系。

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

在此之外,为使得它们中间的联系尽也许的小,在文书档案和模板中也尽量少地引进样式温州昆曲本文件。

清晰的支行意味着:

  • 不应用当先一到两张样式表(i.e. main.css, vendor.css)
  • 不行使超过一到多个剧本(学会用联合脚本)
  • 不应用行内样式(<style>.no-good {}</style>
  • 不在成分上使用 style 属性(<hr style="border-top: 5px solid black">
  • 不采用行内脚本(<script>alert('no good')</script>
  • 不应用表象成分(i.e. <b>, <u>, <center>, <font>, <b>
  • 不采取表象 class 名(i.e. red, left, center)

不推荐

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="base.css">
  5. <link rel="stylesheet" href="grid.css">
  6. <link rel="stylesheet" href="type.css">
  7. <link rel="stylesheet" href="modules/teaser.css">
  8. </head>
  9. <body>
  10. <h1 style="font-size: 3rem"></h1>
  11. <b>I'm a subtitle and I'm bold!</b>
  12. <center>Dare you center me!</center>
  13. <script>
  14. alert('Just dont...');
  15. </script>
  16. <div class="red">I'm important!</div>
  17. </body>
  18. </html>

推荐

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Concatinate your style sheets into a single one -->
  5. <link rel="stylesheet" href="main.css">
  6. </head>
  7. <body>
  8. <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet -->
  9. <h1 class="title"></h1>
  10. <!-- Don't use presentational elements and assign sensible classes -->
  11. <div class="sub-title">I'm a subtitle and I'm bold!</div>
  12. <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet -->
  13. <span class="comment">Dare you center me!</span>
  14. <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet
  15. 澳门新浦京娱乐场网站,what you want to do with it -->
  16. <div class="important">I'm important!</div>
  17.  
  18. <!-- Put all your scripts into files and concatinate them into a single one -->
  19. <script async src="main.js"></script>
  20. </body>
  21. </html>

布局

要压实HTML代码的天性,要根据HTML 代码以贯彻效益和为对象,而不是样式。

  • 行使<p>成分修饰文本,而不是布局;默许<p>是全自动提供边缘,而且别的样式也是浏览器默许提供的。
  • 防止接纳<br>分行,能够运用block成分或CSS展现属性来顶替。
  • 制止使用<hr>来加多水平线,可利用CSS的border-bottom 来取代。
  • 不到关键时刻不要使用div标签。
  • 尽量少用Tables来布局。
  • 能够多选拔Flex Box
  • 使用CSS 来调度边距等。

Html头部

文书档案的标题

* <title>标题概念文书档案的标题

eg: 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<meta http-equiv="Content-Language" content="zh-cn"/>

<title>标题不会来得在文书档案区</title>

</head>

* 怎么着运用 base 标签使页面中的全部标签新窗口中打开

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<mata http-equiv="Content-Language" content="zh-cn">

<base target="_blank"></head>

<body >

<p>

<a href="" target="_blank">那几个一连</a>将要新窗口中加载,因为 target 属性被安装为 "_blank"</a>

</p>

<p>

<a href="; 那一个链接就要新窗口中加载,及时未有target属性</a></p>

</body>

* 使用<meta>元素来说述文书档案

*使用<meta>元素来定义文书档案的最重要词

* 如何把用户重订新的网站

HTML<Head>元素

<head> 元素是所有头顶成分的器皿,<head>内元素富含脚本,提醒浏览器在什么地方能够找到样式表,提供元音信,等等。以下标签都足以加多到 head 部分,<title>,<link>,<base>,<meta>,<script>,<style>

Html <title>元素

<title>标签定义文书档案的标题,title 成分在具备 HTML/XHTML 文书档案中都是须要的,

title 成分能够:

 *  定义浏览器工具栏中标题

 *  提供页面被增加到收藏夹时显示的标题

 *  显示在检索引擎结果中的页面标题

一个简化的 HTML 文档

<!DOCTYPE html>

<html>

<head>

<title> 那是文章的标题 </title>

</head>

<body>

The content of document ......

</body>

</html>

Html <base>元素

<base>元素页面上有着的链接规定暗中认可地址或者是私下认可目的

<head>

<base target="_blank" />

<base href=""/>

</head >

Html<link>元素

<link>标签定义文书档案与表面财富之间的关系

<link>标签最常用作样式表

eg:<head>

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

</head>

Html<style>元素

<style>标签用于为 HTML 文书档案定义样式消息。

您可以在 style 元素内***规定* HTML 元素在*浏览器中呈现的样式*:
**

<head>

<style>

body {

background-color:yellow

}

p {

color:blue

}

</style>

澳门新浦京娱乐场网站前端编码标准,优化本事。</head>

Html<meta>元素

元数据(metadata)是关于数据的新闻

<meta>标签提供关于 HTML 文书档案的元数据,元数据不会显得在页面上,可是对于机器是可读的,规范的动静是,meta 元素被用于规定页面包车型客车叙说关键词文书档案的笔者、最后修改时间以及其余元数据。

<meta>标签壹味放在 head 成分中。

元数据可用来浏览器(怎么着体现内容或另行加载页面),探究引擎(关键词),或其他 web 服务。

针对检索引擎的首要词

一些找出引擎利用meta元素的namecontent属性目录你的页面;

meta元素概念页面包车型地铁叙说

<meta  name="description  content=" Free Web tutorials on HTML, CSS, XML"/>

meta要素定义页面包车型客车首要性词

<meta name="keywords"  content="HTML CSS  XML">

备注:namecontent的性质的效率来叙述页面包车型大巴剧情

Html<script>元素

<script>标签

复制代码 代码如下:

HTML 内容至上

不要让非内容新闻污染了你的 HTML。现在相似有一种协助:通过 HTML 来解决规划难点,那是显著是狼狈的。HTML 就应有只关心内容。

HTML 标签的指标,正是为了持续地体现内容音讯。

  • 无须引进一些特定的 HTML 结构来减轻一些视觉设计难题
  • 不要将 img 成分当做特地用来做视觉设计的成分

以下例子体现了误将 HTML 用来减轻规划难点的那三种状态:

不推荐

  1. <!-- We should not introduce an additional element just to solve a design problem -->
  2. <span class="text-box">
  3. <span class="square"></span>
  4. See the square next to me?
  5. </span>
  1. .text-box > .square {
  2. display: inline-block;
  3. width: 1rem;
  4. height: 1rem;
  5. background-color: red;
  6. }

推荐

  1. <!-- That's clean markup! -->
  2. <span class="text-box">
  3. See the square next to me?
  4. </span>
  1. /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
  2. .text-box:before {
  3. content: "";
  4. display: inline-block;
  5. width: 1rem;
  6. height: 1rem;
  7. background-color: red;
  8. }

图形和 SVG 图形能被引入到 HTML 中的唯1理由是它们展现出了与内容有关的一些音讯。

不推荐

  1. <!-- Content images should never be used for design elements! -->
  2. <span class="text-box">
  3. <img src="square.svg" alt="Square" />
  4. See the square next to me?
  5. </span>

推荐

  1. <!-- That's clean markup! -->
  2. <span class="text-box">
  3. See the square next to me?
  4. </span>
  1. /* We use a :before pseudo element with a background image to solve the problem */
  2. .text-box:before {
  3. content: "";
  4. display: inline-block;
  5. width: 1rem;
  6. height: 1rem;
  7. background: url(square.svg) no-repeat;
  8. background-size: 100%;
  9. }

CSS

固然本文讲明的是什么样优化HTML,上面介绍了有的使用css的基本工夫:

  • 幸免内联css
  • 最多应用ID类 二遍
  • 当提到多个要素时,可接纳Class来促成。

上述正是本文介绍的优化HTML代码的技能,七个高素质高质量的网址,往往取决于对细节的管理,因此大家在平凡费用中,可以思考到用户体验,中期维护等地点,则会生出更敏捷的付出。

2 赞 8 收藏 2 评论

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

Type 属性

简易样式表与剧本上的 type 属性。鉴于 HTML5 中上述两个私下认可的 type 值就是text/css 和 text/javascript,所以 type 属性一般是足以忽略掉的。以至在老旧版本的浏览器中如此做也是安全可信赖的。

不推荐

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

推荐

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

至于小编:赐紫英桃城控件

澳门新浦京娱乐场网站 4

蒲陶城确立于1977年,是整个世界最大的控件提供商、微软集团求证的金牌合作同伙。 个人主页 · 小编的稿子 · 2 ·    

澳门新浦京娱乐场网站 5

上述两种写法的实效是均等的。可是,并非全体的浏览器都支持defer属性,有些浏览器会忽略这些天性,不延迟脚本的实施。

可用性

若是 HTML伍 语义化标签使用特别,许多可用性难点壹度引刃而解。APRADOIA 规则在有的语义化的成分上可为其添上暗许的可用性剧中人物属性,使用13分的话已使网站的可用性超越12分之5确立。假设你采用 nav, aside, main, footer 等元素,ALX570IA 规则会在其上利用有的关系的私下认可值。
更加多细节可参谋 ARIA specification

其余一些剧中人物属性则能够用来呈现愈来愈多可用性子景(i.e. role="tab")。


您恐怕感兴趣的小说:

  • JavaScript动态增添css样式和script标签
  • IE第88中学动态创设script标签onload无效的消除方法
  • 动态创设script标签完成跨域财富访问的方法介绍
  • Script标签与走访HTML页面详解
  • script标签属性type与language使用接纳
  • script标签的 charset 属性使用验证
  • javascript 获取url参数和script标签中拿走url参数函数代码
  • asp.net(C#) 动态加多非ASP的正经html控件(如增多Script标签)
  • 有趣的script标签用getAttribute方法来自脚本吧
  • 浅谈js script标签中的预分析

Tab Index 在可用性上的接纳

自己商量文书档案中的 tab 切换顺序并传值给成分上的 tabindex,那足以依靠成分的重中之重来重新排列其 tab 切换顺序。你能够安装 tabindex="-1" 在别的因素上来禁止使用其 tab 切换。

当你在三个暗许不可聚集的因素上扩大了功效,你应当总是为其拉长 tabindex 属性使其改为可集中状态,而且那也会激活其 CSS 的伪类 :focus。选取适当的 tabindex 值,或是直接使用 tabindex="0" 将成分们组织成同壹 tab 顺序水平,并劫持干预其本来阅读顺序。


微格式在 SEO 和可用性上的行使

假定 SEO 和可用性情状标准允许的话,提出缅怀动用微格式。微格式是因而在要素标签上表美赞臣(Meadjohnson)多级特定数据来达到一定语义的格局。

谷歌(谷歌)、微软软雅虎对什么样利用这一个额外的数量断定水平上的达到规定的规范1致,借使没有错的采取,那将给寻找引擎优化带来巨大的受益。

您能够访问 schema.org 得到更加多内容细节。

看1个摄像网址的简约例子:

不带微格式

  1. <div>
  2. <h1>Avatar</h1>
  3. <span>Director: James Cameron (born August 16, 1954)</span>
  4. <span>Science fiction</span>
  5. <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
  6. </div>

富含微格式

  1. <div itemscope itemtype =";
  2. <h1 itemprop="name">Avatar</h1>
  3. <div itemprop="director" itemscope itemtype=";
  4. Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  5. </div>
  6. <span itemprop="genre">Science fiction</span>
  7. <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
  8. </div>

ID 和锚点

一般来讲2个相比较好的做法是将页面内享有的底部标题成分都加多 ID. 那样做,页面 UBMWX三L 的 hash 中带上对应的 ID 名称,即产生描点,方便跳转至对应成分所处地点。

打个假使,当你在浏览器中输入 ULX570L http://your-site.com/about#best-practices,浏览器将稳固至以下 H三 上。

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

格式化规则

在每2个块状成分,列表成分和表格成分后,加上壹新空白行,并对其子孙成分进行缩进。内联成分写在一行内,块状成分还也会有列表和表格要另起1行。

(假设出于换行的空格引发了不可预测的难点,那将兼具因素并入一行也是足以承受的,格式警告总好过不当警告)。

推荐

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

HTML 引号

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

不推荐

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

推荐

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

[1]: 此处的空白成分指的是以下因素:area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr


不知凡几小说

  • 前端编码规范(一)—— 一般标准
  • 前者编码规范(2)—— HTML 规范
  • 前者编码标准(叁)—— JavaScript 标准
  • 前端编码标准(四)—— CSS 和 Sass (SCSS) 标准

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站前端编码标准,优化本事