HTML相关规范学习-html教程-PHP中文网

首页

web前端

html教程

HTML相关规范学习

巴扎黑

Jul 19, 2017 pm 04:43 PM

html规范

前面的话

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

整体结构

【页面头部】

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

<!DOCTYPE html>

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

<meta charset="utf-8">

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

<meta name="description" content="不超过150个字符"><meta name="keywords" content="">

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

<head><meta charset="UTF-8"><title>页面标题</title></head>

【资源引入】

　　1、保证 favicon 可访问

<link rel="shortcut icon" href="path/to/favicon.ico">

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

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

<link rel="stylesheet" href="page.css?1.1.11">

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

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

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11"></script>

【结构优化】

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

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

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

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

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

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

代码格式

【缩进】

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

<ul><li>first</li><li>second</li></ul>

【命名】

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

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

<!-- good --><div class="sidebar"></div><!-- bad --><div class="left"></div>

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

【标签】

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

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

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

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

Hello StyleGuide!
Hello StyleGuide!
<ul><li>first</li><li>second</li></ul>first
second

【注释】

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

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

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

　　允许只有开始注释

<!-- 头部 --><div class="g-hd"><!-- LOGO --><h1 class="m-logo"><a href="#">LOGO</a></h1><!-- /LOGO --><!-- 导航 --><ul class="m-nav"><li><a href="#">NAV1</a></li><li><a href="#">NAV2</a></li><!-- 更多导航项 --></ul><!-- /导航 --></div><!-- /头部 -->

【属性】

　　1、属性和值全部小写

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

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

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

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

<!-- good --><table cellspacing="0">...</table><!-- bad --><table cellSpacing="0">...</table><!-- good --><script src="esl.js?1.1.11"></script><!-- bad --><script src=&#39;esl.js&#39;></script><script src=esl.js></script>

【属性顺序】

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

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

特殊元素

【图片】

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

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

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

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

<img src="#" alt="#" width="#" height="#">

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

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

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

【表单】

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

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

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

<button type="submit">提交</button><button type="button">取消</button>

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

<input type="date">

【多媒体】

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

<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"><object width="100" height="50" data="audio.mp3"><embed width="100" height="50" src="audio.swf"></object></audio><video width="100" height="50" controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg"><object width="100" height="50" data="video.mp4"><embed width="100" height="50" src="video.swf"></object></video>

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

以上是HTML相关规范学习的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles