视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]HTML5代码规范写法的几种建议(2)

时间:2017-01-24 20:20酷播
图片属性 图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。 img src = html5.gif alt = HTML5 style = width:128px;height:128px 定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。 img src =

图片属性

图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。

  1. <img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> 

定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

  1. <img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> 

空格和等号

等号前后可以使用空格。

  1. <link rel = "stylesheet" href = "styles.css"> 

但我们推荐少用空格:

  1. <link rel="stylesheet" href="styles.css"> 

避免一行代码过长

使用 HTML 编辑器，左右滚动代码是不方便的。

每行代码尽量少于 80 个字符。

空行和缩进

不要无缘无故添加空行。

为每个逻辑功能块添加空行，这样更易于阅读。

缩进使用两个空格，不建议使用 TAB。

比较短的代码间不要使用不必要的空行和缩进。

  1. 不必要的空行和缩进: 
  2. <body> 
  3.  
  4.   <h1>菜鸟教程</h1> 
  5.  
  6.   <h2>HTML</h2> 
  7.  
  8.   <p> 
  9.     菜鸟教程，学的不仅是技术，更是梦想。 
  10.     菜鸟教程，学的不仅是技术，更是梦想。 
  11.    菜鸟教程，学的不仅是技术，更是梦想, 
  12.     菜鸟教程，学的不仅是技术，更是梦想。 
  13.   </p> 
  14.  
  15. </body> 
  16. 推荐: 
  17. <body> 
  18.  
  19. <h1>菜鸟教程</h1> 
  20.  
  21. <h2></h2> 
  22. <p>菜鸟教程，学的不仅是技术，更是梦想。 
  23. 菜鸟教程，学的不仅是技术，更是梦想。 
  24. 菜鸟教程，学的不仅是技术，更是梦想。 
  25. 菜鸟教程，学的不仅是技术，更是梦想。</p> 
  26.  
  27. </body> 
  28. 表格实例: 
  29. <table> 
  30.   <tr> 
  31.     <th>Name</th> 
  32.     <th>Description</th> 
  33.   </tr> 
  34.   <tr> 
  35.     <td>A</td> 
  36.     <td>Description of A</td> 
  37.   </tr> 
  38.   <tr> 
  39.     <td>B</td> 
  40.     <td>Description of B</td> 
  41.   </tr> 
  42. </table> 
  43. 列表实例: 
  44. <ol> 
  45.   <li>London</li> 
  46.   <li>Paris</li> 
  47.   <li>Tokyo</li> 
  48. </ol> 

省略 <html> 和 <body>?

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。

以下 HTML5 文档是正确的:

  1.  <!DOCTYPE html> 
  2. <head> 
  3.   <title>页面标题</title> 
  4. </head> 
  5.  
  6. <h1>这是一个标题</h1> 
  7. <p>这是一个段落。</p> 

不推荐省略 <html> 和 <body> 标签。

<html> 元素是文档的根元素，用于描述页面的语言：

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 

声明语言是为了方便屏幕阅读器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。

省略 <body> 在旧版浏览器 (IE9)会发生错误。

省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。

默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。

  1. 实例 
  2. <!DOCTYPE html> 
  3. <html> 
  4. <title>页面标题</title> 
  5.  
  6. <body> 
  7.   <h1>这是一个标题</h1> 
  8.   <p>这是一个段落。</p> 
  9. </body> 
  10.  
  11. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器