欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

HTML最佳实践_html/css_WEB-ITnose

程序员文章站 2024-02-08 13:22:04
...
HTML

DOCTYPE 头部开始

Bad:

  ...

Good:

  ...

不要用旧的 DOCTYPE

Bad:

   
Good:
   
   
不要用 XML 声明
   
Bad:
   
Good:
   
   
最好不要用字符引用
   
Bad:
   
Copyright © 2014 W3C®
   
Good:
   
Copyright © 2014 W3C®
   
    ###Escape &, , ", and ' 可以用字符引用
   
Bad:
   
The "&" character
   
Good:
   
The "&" character
   
Use named character references for control or invisible characters
   
Bad:
   
This book can read in 1 hour.
   
Good:
   
This book can read in 1 hour.
   
注释的内容两边留个空格
   
Bad:
   
   
Good:
   
   
不要忽略闭合标签
   
Bad:
   
      ...
   
Good:
   
      ...  
   
不要搞混空元素的格式
   
Bad:
   
HTML最佳实践_html/css_WEB-ITnose
   
Good:
   
HTML最佳实践_html/css_WEB-ITnose
   
在标签里面和属性值里不要留空格
   
Bad:
   
HTML Best Practices
   
Good:
   
HTML Best Practices
   
不要搞混大小写
   
Bad:
   
General
   
Good:
   
General
   
不要混用引号标记
   
Bad:
   
HTML最佳实践_html/css_WEB-ITnose
   
Good:
   
HTML最佳实践_html/css_WEB-ITnose
   
Don't separate attributes with two or more white spaces
   
属性之间不要用两个空格隔开
   
Bad:
   
   
Good:
   
   
省略布尔属性的值
   
Bad:
   
   
Good:
   
   
省略命名空间
   
Bad:
   
  ...
   
Good:
   
  ...
   
不要用 xml 属性
   
Bad:
   
...
   
Good:
   
...
   
不要搞混 data-*,Microdata，RDFa Lite 属性和通用的属性
   
Bad:
   
HTML最佳实践_html/css_WEB-ITnose
   
Good:
   
HTML最佳实践_html/css_WEB-ITnose
   
更强的原生语义
   
Bad:
   
   
Good:
   
   
根元素
   
添加语言属性
   
Bad:
   
   
Good:
   
   
保持语言属性值尽可能的短
   
Bad
   
   
Good:
   
   
文档的元数据
   
添加 title 元素
   
Bad:
   
   
Good:
   
  HTML Best Practices
   
指定微链接资源的 MIME 类型
   
Bad:
   
   
Good:
   
   
不要链接到 favicon.ico
   
Bad:
   
   
Good:
   
把 favicon.ico 放在根目录
   
添加 title 属性到 备用样式表
   
Bad:
   
   
Good:
   
   
给文档指定字符编码
   
Bad:
   
  HTML Best Practices
   
Good:
   
  HTML Best Practices
   
不要用旧的字符编码格式
   
Bad:
   
   
Good:
   
   
首先就要指定字符编码
   
Bad:
   
    ...
   
Good:
   
    ...
   
使用 utf-8 格式
   
Bad:
   
   
Good:
   
   
css 的 type 属性不用写
   
Bad:
   
   
Good:
   
   
不要注释 style 元素的内容
   
Bad:
   
   
Good:
   
   
不要搞混 css 和 js 标签
   
Bad:
   
   
Good:
   
   
Also good:
   
   
添加 body 标签
   
Bad:
   
      ...    ...
   
Good:
   
      ...        ...  
   
忘了 hgroup 元素吧
   
Bad:
   
HTML Best Practices
  
For writing maintainable and scalable HTML documents.
   
Good:
   
HTML Best Practices
For writing maintainable and scalable HTML documents.
   
仅仅当在联系信息的时候用 address 元素
   
Bad:
   
No rights reserved.
   
Good:
   
Contact: Kyo Nagashima

   
pre 元素不要在新的一行开始写
   
Bad:
   
<!DOCTYPE html>
   
Good:
   
<!DOCTYPE html>
   
在引号元素里面使用 appropriate 元素
   
Bad:
   
For writing maintainable and scalable HTML documents.
   
Good:
   
  
For writing maintainable and scalable HTML documents.


   
不要直接包含属性在 blockquote 元素里
   
Bad:
   
  
For writing maintainable and scalable HTML documents.
  
— HTML Best Practices


   
Good:
   
  
For writing maintainable and scalable HTML documents.


— HTML Best Practices
   
Also good (recommended by WHATWG):
   
    
For writing maintainable and scalable HTML documents.
  
  
— HTML Best Practices
   
Also good too (recommended by W3C):
   
  
For writing maintainable and scalable HTML documents.
  
— HTML Best Practices


   
每行只写一个列表项目
   
Bad:
   


    

  • General
    • 

  • The root Element
    • 

  • Sections
    • ...


Good:
   


    

  • General
    •   
  • The root Element
    •   
  • Sections
    •   ...


给 ol 元素用上 type 属性
   
Bad:
   
  
    

  1. General
    2.     
  2. The root Element
    3.     
  3. Sections
    4.     ...  
   
Good:
   
  
    

  1. General
    2.     
  2. The root Element
    3.     
  3. Sections
    4.     ...  
   
把 figcaption 元素放在 figure 元素里的开头或结尾
   
Bad:
   
HTML最佳实践_html/css_WEB-ITnose
“HTML Best Practices” Cover Art
HTML最佳实践_html/css_WEB-ITnose
   
Good:
   
HTML最佳实践_html/css_WEB-ITnoseHTML最佳实践_html/css_WEB-ITnose
“HTML Best Practices” Cover Art
   
使用 main 元素
   
Bad:
   
  ...
   
Good:
   
  ...
   
尽量的避免使用 div 标签
   
Bad:
   
  ...
   
Good:
   
  ...
Text-level semantics
   
不要把相同的链接分开来，可以用一个来包围
   
Bad:
   
WHATWG
A community maintaining and evolving HTML since 2004.
   
Good:
   
  
WHATWG
  
A community maintaining and evolving HTML since 2004.
   
用下载属性下载一个资源
   
Bad:
   
offline version
   
Good:
   
offline version
   
如果需要的话就使用 rel,hreflang 等类型属性
   
Bad:
   
Japanese PDF version
   
Good:
   
Japanese PDF version
   
清理链接的文本
   
Bad:
   
Click here to view PDF version.
   
Good:
   
PDF version is also available.
   
不要使用 em 元素来警告着重
   
Bad:
   
Caution!
   
Good:
   
Caution!
   
尽量避免使用 s,i,b,u 这些元素
   
Bad:
   
   
Good:
   
   
不要在 q 元素里添加引号
   
Bad:
   
“For writing maintainable and scalable HTML documents”
   
Good:
   
For writing maintainable and scalable HTML documents
   
Also good:
   
“For writing maintainable and scalable HTML documents”
   
给 abbr 元素添加 title 属性
   
Bad:
   
HBP
   
Good:
   
HBP
   
ruby 标记元素要长一点
   
Bad:
   
HTMLえいちてぃーえむえる
   
Good:
   
HTML (えいちてぃーえむえる) 
   
给 non-machine-readable 元素添加 datetime 属性
   
Bad:
   
   
Good:
   
Specify code language with class attribute prefixed with language-
   
Bad:
   
<DOCTYPE html>
   
Good:
   
<DOCTYPE html>
   
让 kbd 元素尽可能的简单
   
Bad:
   
Ctrl+F5
   
Good:
   
Ctrl+F5
   
尽可能的避免 span 元素
   
Bad:
   
HTML Best Practices
   
Good:
   
HTML Best Practices
   
br 元素后面要换行
   
Bad:
   
HTML
Best
Practices
   
Good:
   
HTML
Best
Practices
   
不要滥用 br 元素标签
   
Bad:
   

   
Good:
   
   
不要在 del 和 ins 元素里插入其他标签元素
   
Bad:
   
For writing maintainable and scalable HTML documents. And for mental stability.
Don't trust!
   
Good:
   
For writing maintainable and scalable HTML documents. And for mental stability.
Don't trust!
   
嵌入内容
   
如果需要就给 img 元素添加 alt 属性值
   
Bad:
   
HTML最佳实践_html/css_WEB-ITnose
   
Good:
   
HTML最佳实践_html/css_WEB-ITnose
   
如果可以就把 Alt 的值空着
   
Bad:
   
HTML最佳实践_html/css_WEB-ITnose
   
Good:
   
HTML最佳实践_html/css_WEB-ITnose
   
如果有可能就省略 alt 标签
   
Bad:
   
HTML最佳实践_html/css_WEB-ITnose
   
Good:
   
HTML最佳实践_html/css_WEB-ITnose
   
清空 iframe 元素
   
Bad:
   
   
Good:
   
   
map 元素内容
   
Bad:
   
General  General |  The root element  The root element |  Sections  Sections
   
Good:
   
    General    General |    The root element    The root element |    Sections    Sections
   
提供音频或视频元素后备内容
   
Bad:
   
   
Good:
   
   
表格数据
   
每行写一个 td
   
Bad:
   

General
The root Element
Sections

   
Good:
   

General  The root Element  Sections

   
给表格使用表头 header
   
Bad:
   





Element      Empty      Tag omission    




pre      No      Neither tag is omissible    



img      Yes      No end tag    





Good:
   





Element      Empty      Tag omission    




pre      No      Neither tag is omissible    



img      Yes      No end tag    





表单
   
用 label 元素包裹表单
   
Bad:
   
Query: 
   
Good:
   
   
尽可能的省略属性
   
Bad:
   
   
Good:
   
   
使用合适的类型属性的input元素
   
Bad:
   
   
Good:
   
   
当输入框是提交属性时要添加 value 值
   
Bad:
   
   
Good:
   
   
当 input 元素有验证属性时，给他添加标题属性
   
Bad:
   
   
Good:
   
   
不要使用占位符属性标签
   
Bad:
   
   
Good:
   
   
每个 option 元素一行
   
Bad:
   



   
Good:
   



   
给进度条 元素添加最大的属性值
   
Bad:
   
 50%
   
Good:
   
 50%
   
给计数元素添加最小和最大值
   
Bad:
   
 512GB used (1024GB total)
   
Good:
   
 512GB used (1024GB total)
   
把 legend 元素作为 fieldest 元素的第一个元素
   
Bad:
   




  ...  About "General"



Good:
   



About "General"  
  ...


Scripting
   
省略 js 的类型属性
   
Bad:
   
   
Good:
   
   
如果 script 元素有异步属性，需要给 script 标签添加异不属性
   
Bad:
   
   
Good:
   
   
不要注释 script 标签里的元素
   
Bad:
   
   
Also bad:
   
   
Good:
   
   
不要动态插入 script 元素标签
   
Bad:
   
   
Good:
   
   
缩进始终保持一致
   
Bad:
   
          ...          ...  
   
Good:
   
      ...        ...  
   
    
原文出处：https://github.com/dyygtfx/html-best-practices
   
					

															

						相关标签：												
							HTML最佳实践						
											

															

						

							上一篇：							
								mysql-Hibernate 无法执行在MySQL中建表							
						

						

							下一篇：							
								php5.4 联接Sqlserver2008 咋整啊折腾3天鸟、累死了							
						

					

															

						

							推荐阅读