HTML 代码约定很多 Web 开发人员对 HTML 的代码规范知之甚少。在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议。使用正确的文档类型文档类型声明位于HTML文档的第一行:<!DOCTYPE html>如果你想跟其他标签一样使用小写,可以使用以下代码:<!doctype html>使用小写元素名HTML5 元素名可以使用大写和小写字母。推荐使用小写字母:混合了大小写的风格是非常糟糕的。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。不推荐:<SECTION><p>这是一个段落。</p></SECTION>非常糟糕:<Section><p>这是一个段落。</p></SECTION>推荐:<section><p>这是一个段落。</p></section>关闭所有 HTML 元素在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素),但我们建议每个元素都要添加关闭标签。不推荐:<section><p>这是一个段落。<p>这是一个段落。</section>推荐:<section><p>这是一个段落。</p><p>这是一个段落。</p></section>关闭空的 HTML 元素在 HTML5 中, 空的 HTML 元素也不一定要关闭:我们可以这么写:<meta charset=”utf-8″>也可以这么写:<meta charset=”utf-8″ />在 XHTML 和 XML 中斜线 (/) 是必须的。如果你期望 XML 软件使用你的页面,使用这种风格是非常好的。使用小写属性名HTML5 属性名允许使用大写和小写字母。我们推荐使用小写字母属性名:同时使用大小写是非常不好的习惯。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。不推荐:<div CLASS=”menu”>推荐:<div class=”menu”>属性值HTML5 属性值可以不用引号。属性值我们推荐使用引号:如果属性值含有空格需要使用引号。混合风格不推荐的,建议统一风格。属性值使用引号易于阅读。以下实例属性值包含空格,没有使用引号,所以不能起作用:<table class=table striped>以下使用了双引号,是正确的:<table class=”table striped”>图片属性图片通常使用 alt 属性。 在图片不能显示时,它能替代图片显示。<img src=”html5.gif” alt=“HTML5” style=”width:128px;height:128px”>定义好图片的尺寸,在加载时可以预留指定空间,减少闪烁。<img src=”html5.gif” alt=”HTML5″ style=“width:128px;height:128px“>空格和等号等号前后可以使用空格。<link rel = “stylesheet” href = “styles.css”>但我们推荐少用空格:<link rel=”stylesheet” href=”styles.css”>避免一行代码过长使用 HTML 编辑器,左右滚动代码是不方便的。每行代码尽量少于 80 个字符。空行和缩进不要无缘无故添加空行。为每个逻辑功能块添加空行,这样更易于阅读。缩进使用两个空格,不建议使用 TAB。比较短的代码间不要使用不必要的空行和缩进。不必要的空行和缩进:<body><h1>菜鸟教程</h1><h2>HTML</h2><p>菜鸟教程,学的不仅是技术,更是梦想。菜鸟教程,学的不仅是技术,更是梦想。菜鸟教程,学的不仅是技术,更是梦想,菜鸟教程,学的不仅是技术,更是梦想。</p></body>推荐:<body><h1>菜鸟教程</h1><h2></h2><p>菜鸟教程,学的不仅是技术,更是梦想。菜鸟教程,学的不仅是技术,更是梦想。菜鸟教程,学的不仅是技术,更是梦想。菜鸟教程,学的不仅是技术,更是梦想。</p></body>表格实例:<table><tr><th>Name</th><th>Description</th></tr><tr><td>A</td><td>Description of A</td></tr><tr><td>B</td><td>Description of B</td></tr></table>列表实例:<ol><li>London</li><li>Paris</li><li>Tokyo</li></ol>省略 <html> 和 <body>?在标准 HTML5 中, <html> 和 <body> 标签是可以省略的。以下 HTML5 文档是正确的:实例:<!DOCTYPE html><head><title>页面标题</title></head><h1>这是一个标题</h1><p>这是一个段落。</p>尝试一下 »不推荐省略 <html> 和 <body> 标签。<html> 元素是文档的根元素,用于描述页面的语言:<!DOCTYPE html><html lang=”zh”>声明语言是为了方便屏幕阅读器及搜索引擎。省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。省略 <body> 在旧版浏览器 (IE9)会发生错误。省略 <head>?在标准 HTML5 中, <head>标签是可以省略的。默认情况下,浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。实例<!DOCTYPE html><html><title>页面标题</title><body><h1>这是一个标题</h1><p>这是一个段落。</p></body></html>尝试一下 »现在省略 head 标签还不推荐使用。元数据HTML5 中 <title> 元素是必须的,标题名描述了页面的主题:<title>菜鸟教程</title>标题和语言可以让搜索引擎很快了解你页面的主题:<!DOCTYPE html><html lang=”zh”><head><meta charset=”UTF-8″><title>菜鸟教程</title></head>HTML 注释注释可以写在 <!– 和 –> 中:<!– 这是注释 –>比较长的评论可以在 <!– 和 –> 中分行写:<!–这是一个较长评论。 这是 一个较长评论。这是一个较长评论。这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。–>长评论第一个字符缩进两个空格,更易于阅读。样式表样式表使用简洁的语法格式 ( type 属性不是必须的):<link rel=”stylesheet” href=”styles.css”>短的规则可以写成一行:p.into {font-family: Verdana; font-size: 16em;}长的规则可以写成多行:body {background-color: lightgrey;font-family: “Arial Black”, Helvetica, sans-serif;font-size: 16em;color: black;}将左花括号与选择器放在同一行。左花括号与选择器间添加以空格。使用两个空格来缩进。冒号与属性值之间添加已空格。逗号和符号之后使用一个空格。每个属性与值结尾都要使用符号。只有属性值包含空格时才使用引号。右花括号放在新的一行。每行最多 80 个字符。在逗号和分号后添加空格是常用的一个规则。在 HTML 中载入 JavaScript使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):<script src=”myscript.js”>使用 JavaScript 访问 HTML 元素一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。以下两个 JavaScript 语句会输出不同结果:实例var obj = getElementById(“Demo”)var obj = getElementById(“demo”)HTML 中 JavaScript 尽量使用相同的命名规则。访问 JavaScript 代码规范。使用小写文件名大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。你必须保持统一的风格,我们建议统一使用小写的文件名。文件扩展名HTML 文件后缀可以是 .html (或r .htm)。CSS 文件后缀是 .css 。JavaScript 文件后缀是 .js 。.htm 和 .html 的区别.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。区别在于:.htm 应用在早期 DOS 系统,系统现在或者只能有三个字符。在 Unix 系统中后缀没有特别限制,一般用 .html。技术上区别如果一个 URL 没有指定文件名 (如http://www.runoob.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。如果服务器只配置了 “index.html” 作为默认文件,你必须将文件命名为 “index.html”, 而不是 “index.htm”。但是,通常服务器可以设置多个默认文件,你可以根据需要设置默认文件吗。不管怎样,HTML 完整的后缀是 “.html”。
- 随机文章
- 热门文章
- 热评文章
- 蜜月 欧洲 马尔代夫(新人蜜月游:欧洲与马尔代夫双重浪漫)
- 马尔代夫麦兜简介(马尔代夫麦兜介绍:畅享天堂岛国生活 → 马尔代夫麦兜:心心念念的岛国生活)
- 内大南区马尔代夫(后的:马尔代夫大南区:极致浪漫胜地)
- 国足 马尔代夫 1 0(国足一球小胜马尔代夫)
- 国奥 马尔代夫(国奥赢得与马尔代夫的比赛)
- 马尔代夫带啤酒(马尔代夫现允许带入啤酒)
- 国足 马尔代夫 视频(国足在马尔代夫踩场备战:球迷在现场助威!)
- 桐庐 马尔代夫 在哪里(马尔代夫位于中国浙江省桐庐县?)
- 印度不打马尔代夫(印度暂停前往马尔代夫的所有商业航班)
- 悉尼大学马尔代夫(悉尼大学与马尔代夫政府达成合作协议)
- 宣城马尔代夫攻略(浪漫之旅,看这份宣城到马尔代夫攻略)
- 拍摄马尔代夫的人(拍摄马尔代夫美景,你必须知道的事项)
- 平潭马尔代夫老板(平潭岛旅游企业家投资马尔代夫度假村)
- 日照马尔代夫图片(探索日照马尔代夫:美丽风景尽收眼底)
- 孟津 马尔代夫(旅游胜地:孟津马尔代夫)
- 广东马尔代夫旅行(广东最美马尔代夫,开启清新度假之旅)
- 一万以内马尔代夫(马尔代夫限制入境人数,一万名游客。)
- 绿岛 马尔代夫(绿岛与马尔代夫:美丽岛屿之旅)
- 哪去马尔代夫便宜(马尔代夫旅游攻略:省钱的自由行建议)
- 广州东方马尔代夫(广州东方马尔代夫将成为您的度假胜地)
- 1印度 马尔代夫 评论(新:印度与马尔代夫之间的关系受到评论)
- 2马尔代夫首都街道(重建后的马尔代夫首都街道焕然一新)
- 3机票 上海 马尔代夫(上海直飞马尔代夫,轻松享受海岛度假)
- 4日出 潮汐 马尔代夫(马尔代夫自然景观:迎接美丽日出与潮汐奇观)
- 5中国女孩马尔代夫(中国女孩在马尔代夫体验美丽海岛生活)
- 6代理马尔代夫好吗(代理去马尔代夫是否可靠?新手必读!)
- 7马尔代夫首都概况(探索马尔代夫首都的文化和历史特色)
- 8南方 马尔代夫(南方 马尔代夫发展:从岛国到旅游强国)
- 9图瓦卢和马尔代夫(两个海上天堂:图瓦卢和马尔代夫探秘)
- 10描述马尔代夫句子(如何体验马尔代夫度假的五大绝佳方式)
- 11芬兰 马尔代夫 冰岛(三国游:芬兰、马尔代夫、冰岛)
- 12蛋糕 马尔代夫(马尔代夫岛屿上的蛋糕享受)
- 13印度马尔代夫豪宅(印度商人在马尔代夫购置奢华海滨别墅)
- 14银联 马尔代夫(银联进军马尔代夫支付市场)
- 15海边北方马尔代夫(北马尔代夫:远离人流的海边度假胜地)
- 16小毕 马尔代夫(重新探索马尔代夫,跟随小毕的脚步 46)
- 17水下婚礼马尔代夫(浪漫水下婚礼,感受马尔代夫海底恋歌)
- 18李哲 马尔代夫(李哲探秘马尔代夫:海豚、沙滩和潜水!)
- 19鄂州马尔代夫旅游(鄂州市民疫情后再次踏上马尔代夫海滩)
- 20马尔代夫乡村图片(美不胜收!马尔代夫乡村风光令人陶醉)
- 1联系我们
- 2沈阳 国足 马尔代夫(沈阳国足将前往马尔代夫备战,迎接挑战!)
- 3问.去马尔代夫(体验天堂!沉浸在马尔代夫最美的海滩和海洋中)
- 4上海 飞 马尔代夫(上海往返马尔代夫:畅游美轮美奂的海岛天堂)
- 5广州-马尔代夫多久(从广州到马尔代夫需要多长时间?)
- 6父母 马尔代夫 游记(远离喧嚣,探寻马尔代夫与父母的完美旅程)
- 7长沙 直飞 马尔代夫(长沙至马尔代夫直航新航班开通!)
- 8印度-马尔代夫(印度与马尔代夫加强合作关系)
- 9心 马尔代夫(马尔代夫:浪漫蓝色海洋的度假胜地)
- 10中国 拥有 马尔代夫(中国正式拥有马尔代夫!)
- 11杭州--马尔代夫(杭州与马尔代夫间的关系简介)
- 12中国-马尔代夫直播(中马直播,探秘马尔代夫神秘之旅)
- 13赤道 银河 马尔代夫(美不胜收!探索马尔代夫赤道下的银河奇观)
- 14美景 国外 马尔代夫(迷人的马尔代夫景色)
- 15迪拜-马尔代夫机票(迪拜至马尔代夫特价机票,折扣多多)
- 16北京-马尔代夫机票(北京至马尔代夫机票预订!)
- 17迪拜-马尔代夫机票(打折机票抵达迪拜后直飞马尔代夫)
- 18长沙-马尔代夫(长沙至马尔代夫,美丽岛国任你游!)
- 19广州-马尔代夫(广州至马尔代夫直飞航班开通!)
- 20中国-马尔代夫(中国和马尔代夫加强合作 关注互利共赢发展)