HTML相关规范学习-html tutorial-php.cn

Jadual Kandungan

前面的话

整体结构

代码格式

特殊元素

Rumah

hujung hadapan web

html tutorial

HTML相关规范学习

Jul 19, 2017 pm 04:43 PM

html spesifikasi

前面的话

　　HTML是描述网页结构的超文本标记语言，HTML规范能够使HTML代码风格保持一致，使得HTML更容易理解和维护。本文将详细介绍HTML规范

整体结构

【页面头部】

　　1、文件应以“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”

&lt;!DOCTYPE html&gt;

Salin selepas log masuk

　　2、必须声明文档的编码charset，且与文件本身编码保持一致，指定字符编码的 meta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码<meta charset="utf-8">

&lt;meta charset=&quot;utf-8&quot;&gt;

Salin selepas log masuk

　　3、根据页面内容和需求填写适当的keywords和description

&lt;meta name=&quot;description&quot; content=&quot;不超过150个字符&quot;&gt;&lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;

Salin selepas log masuk

　　4、页面title是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后

&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;title&gt;页面标题&lt;/title&gt;&lt;/head&gt;

Salin selepas log masuk

【资源引入】

　　1、保证 favicon 可访问

&lt;link rel=&quot;shortcut icon&quot; href=&quot;path/to/favicon.ico&quot;&gt;

Salin selepas log masuk

　　2、引入 CSS 和 JavaScript 时无须指明 type 属性

　　3、引入 CSS 时必须指明 rel="stylesheet"

&lt;link rel=&quot;stylesheet&quot; href=&quot;page.css?1.1.11&quot;&gt;

Salin selepas log masuk

　　4、使用link将css文件引入，并置于head中；使用script将js文件引入，并置于body底部

　　5、移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境

&lt;script src=&quot;//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11&quot;&gt;&lt;/script&gt;

Salin selepas log masuk

【结构优化】

　　1、尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度

　　2、结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取，也会将重要内容在HTML结构顺序上提前

　　3、结构、表现、行为三者分离，避免内联

　　4、每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾空格

　　5、对于内容较为简单的表格，建议将tr写成单行

　　6、可以在大的模块之间用空行隔开，使模块更清晰

代码格式

【缩进】

　　使用4个空格代替1个Tab（大多数编辑器中可设置）

&lt;ul&gt;&lt;li&gt;first&lt;/li&gt;&lt;li&gt;second&lt;/li&gt;&lt;/ul&gt;

Salin selepas log masuk

【命名】

　　1、class 必须单词全字母小写，单词间以 - 分隔

　　2、class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名

&lt;!-- good --&gt;&lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;&lt;!-- bad --&gt;&lt;div class=&quot;left&quot;&gt;&lt;/div&gt;

Salin selepas log masuk

　　3、同一页面，应避免使用相同的 name 与 id。因为IE7-浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心

【标签】

　　1、标签名必须使用小写字母

　　2、对于无需自闭合的标签，不需要自闭合

　　3、对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签

　　4、HTML 标签的使用应该遵循标签的语义，且要符合标签嵌套规则

<!-- good --><p>Hello StyleGuide!</p><!-- bad --><P>Hello StyleGuide!</P><!-- good --><input type="text" name="title"><!-- bad --><input type="text" name="title" /><!-- good -->&lt;ul&gt;&lt;li&gt;first&lt;/li&gt;&lt;li&gt;second&lt;/li&gt;&lt;/ul&gt;<!-- bad --><ul><li>first<li>second</ul>

Salin selepas log masuk

【注释】

　　采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式

开始注释：（文案两头空格）

结束注释：（文案前加“/”符号，类似标签的闭合）

　　允许只有开始注释

&lt;!-- 头部 --&gt;&lt;div class=&quot;g-hd&quot;&gt;&lt;!-- LOGO --&gt;&lt;h1 class=&quot;m-logo&quot;&gt;&lt;a href=&quot;#&quot;&gt;LOGO&lt;/a&gt;&lt;/h1&gt;&lt;!-- /LOGO --&gt;&lt;!-- 导航 --&gt;&lt;ul class=&quot;m-nav&quot;&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;NAV1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;NAV2&lt;/a&gt;&lt;/li&gt;&lt;!-- 更多导航项 --&gt;&lt;/ul&gt;&lt;!-- /导航 --&gt;&lt;/div&gt;&lt;!-- /头部 --&gt;

Salin selepas log masuk

【属性】

　　1、属性和值全部小写

　　2、属性值必须用双引号包围

　　3、布尔类型的属性，建议不添加属性值

　　4、自定义属性建议以 xxx- 为前缀，推荐使用 data-

　　5、可以省略style标签和script标签的type属性

&lt;!-- good --&gt;&lt;table cellspacing=&quot;0&quot;&gt;...&lt;/table&gt;&lt;!-- bad --&gt;&lt;table cellSpacing=&quot;0&quot;&gt;...&lt;/table&gt;&lt;!-- good --&gt;&lt;script src=&quot;esl.js?1.1.11&quot;&gt;&lt;/script&gt;&lt;!-- bad --&gt;&lt;script src=&#39;esl.js&#39;&gt;&lt;/script&gt;&lt;script src=esl.js&gt;&lt;/script&gt;

Salin selepas log masuk

【属性顺序】

　　HTML 属性应该按照特定的顺序出现以保证易读性

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

Salin selepas log masuk

特殊元素

【图片】

　　1、禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面

　　2、为图片添加 alt 属性，提高图片加载失败时的用户体验

　　3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸

　　4、为图片添加 width 和 height 属性，以避免页面抖动

&lt;img src=&quot;#&quot; alt=&quot;#&quot; width=&quot;#&quot; height=&quot;#&quot;&gt;

Salin selepas log masuk

　　5、有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现

　　产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载

　　无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现

【表单】

　　1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id

&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;confirm&quot; value=&quot;on&quot;&gt; 我已确认上述条款&lt;/label&gt;

Salin selepas log masuk

　　2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交

&lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt;&lt;button type=&quot;button&quot;&gt;取消&lt;/button&gt;

Salin selepas log masuk

　　3、在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性，能获得友好的输入体验

&lt;input type=&quot;date&quot;&gt;

Salin selepas log masuk

【多媒体】

　　1、在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素，并使用退化到插件的方式来对多浏览器进行支持

&lt;audio controls&gt;&lt;source src=&quot;audio.mp3&quot; type=&quot;audio/mpeg&quot;&gt;&lt;source src=&quot;audio.ogg&quot; type=&quot;audio/ogg&quot;&gt;&lt;object width=&quot;100&quot; height=&quot;50&quot; data=&quot;audio.mp3&quot;&gt;&lt;embed width=&quot;100&quot; height=&quot;50&quot; src=&quot;audio.swf&quot;&gt;&lt;/object&gt;&lt;/audio&gt;&lt;video width=&quot;100&quot; height=&quot;50&quot; controls&gt;&lt;source src=&quot;video.mp4&quot; type=&quot;video/mp4&quot;&gt;&lt;source src=&quot;video.ogg&quot; type=&quot;video/ogg&quot;&gt;&lt;object width=&quot;100&quot; height=&quot;50&quot; data=&quot;video.mp4&quot;&gt;&lt;embed width=&quot;100&quot; height=&quot;50&quot; src=&quot;video.swf&quot;&gt;&lt;/object&gt;&lt;/video&gt;

Salin selepas log masuk

　　2、只在必要的时候开启音视频的自动播放

Atas ialah kandungan terperinci HTML相关规范学习. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn