当前位置：Gxlcms > html代码 > HTML最佳实践_html/css_WEB-ITnose

HTML最佳实践_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：16人阅读

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 Best Practices
   
Good:
   
HTML Best Practices
   
在标签里面和属性值里不要留空格
   
Bad:
   
HTML Best Practices
   
Good:
   
HTML Best Practices
   
不要搞混大小写
   
Bad:
   
General
   
Good:
   
General
   
不要混用引号标记
   
Bad:
   
HTML Best Practices
   
Good:
   
HTML Best Practices
   
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 Best Practices
   
Good:
   
HTML Best Practices
   
更强的原生语义
   
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:
   
  Front cover of the “HTML Best Practices” book  
“HTML Best Practices” Cover Art
  Back cover of the “HTML Best Practices” book
   
Good:
   
  Front cover of the “HTML Best Practices” book  Back cover of the “HTML Best Practices” book  
“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:
   
   
Good:
   
HTML Best Practices
   
如果可以就把 Alt 的值空着
   
Bad:
   
Question mark icon
   
Good:
   
   
如果有可能就省略 alt 标签
   
Bad:
   
CAPTCHA
   
Good:
   
   
清空 iframe 元素
   
Bad:
   
   
Good:
   
   
map 元素内容
   
Bad:
   
  General   |  The root element   |  Sections  
   
Good:
   
  
    General     |    The root element     |    Sections      
   
提供音频或视频元素后备内容
   
Bad:
   
   
Good:
   
   
表格数据
   
每行写一个 td
   
Bad:
   
  GeneralThe root ElementSections
   
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
   
                    


                  

	 	
                    

                        
                    

                    
                    
                    
                    
                

              
                    

                
                  

                    

                        
人气教程排行

                    

                    

			
                        
                    

                

            

            
        
    
  



   本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！