点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

HTML最佳实践_html/css

来源：动视网责编：小采时间：2020-11-27 16:36:27

HTML最佳实践_html/css

推荐度：

点击下载本文 文档为doc格式

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.

每行只写一个列表项目

Bad:

 General
The root Element
Sections
...

Good:

 General
 The root Element
 Sections
 ...

给 ol 元素用上 type 属性

Bad:

   General
 The root Element
 Sections
 ...

Good:

  General
 The root Element
 Sections
 ...

把 figcaption 元素放在 figure 元素里的开头或结尾

Bad:

  “HTML Best Practices” Cover Art

Good:

   “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:

Dec 19, 2014

Good:

Dec 19, 2014Specify 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:

Rule name:
Rule description:

Good:

Rule name:

Rule description:

不要在 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:

如果可以就把 Alt 的值空着

Bad:

Good:

如果有可能就省略 alt 标签

Bad:

Good:

清空 iframe 元素

Bad:

If your browser support inline frame, ads are displayed here.

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

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

Element	Empty	Tag omission
`pre`	No	Neither tag is omissible
`img`	Yes	No end tag

表单

用 label 元素包裹表单

Bad:

Query:

Good:

Query:

尽可能的省略属性

Bad:

Query:

Good:

Query:

使用合适的类型属性的input元素

Bad:

Search keyword:

Good:

Search keyword:

当输入框是提交属性时要添加 value 值

Bad:

Good:

当 input 元素有验证属性时，给他添加标题属性

Bad:

Good:

不要使用占位符属性标签

Bad:

Good:

Email:

每个 option 元素一行

Bad:

Good:

给进度条元素添加最大的属性值

Bad:

50%

Good:

50%

给计数元素添加最小和最大值

Bad:

 512GB used (1024GB total)

Good:

 512GB used (1024GB total)

把 legend 元素作为 fieldest 元素的第一个元素

Bad:

 Is this section is useful?: 
 ... About "General"

Good:

 About "General" Is this section is useful?: 
 ...

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最佳实践_html/css

推荐度：

点击下载本文 文档为doc格式

标签： html css web

热门焦点

HTML最佳实践_html/css

HTML最佳实践_html/css

不要直接包含属性在 blockquote 元素里

每行只写一个列表项目

给 ol 元素用上 type 属性

把 figcaption 元素放在 figure 元素里的开头或结尾

使用 main 元素

尽量的避免使用 div 标签

不要把相同的链接分开来，可以用一个来包围

WHATWG

WHATWG

用下载属性下载一个资源

如果需要的话就使用 rel,hreflang 等类型属性

清理链接的文本

不要使用 em 元素来警告着重

尽量避免使用 s,i,b,u 这些元素

不要在 q 元素里添加引号

给 abbr 元素添加 title 属性

ruby 标记元素要长一点

给 non-machine-readable 元素添加 datetime 属性

让 kbd 元素尽可能的简单

尽可能的避免 span 元素

br 元素后面要换行

不要滥用 br 元素标签

不要在 del 和 ins 元素里插入其他标签元素

嵌入内容

如果需要就给 img 元素添加 alt 属性值

如果可以就把 Alt 的值空着

如果有可能就省略 alt 标签

清空 iframe 元素

map 元素内容

提供音频或视频元素后备内容

表格数据

每行写一个 td

给表格使用表头 header

表单

用 label 元素包裹表单

尽可能的省略属性

使用合适的类型属性的input元素

当输入框是提交属性时要添加 value 值

当 input 元素有验证属性时，给他添加标题属性

不要使用占位符属性标签

每个 option 元素一行

给进度条 元素添加最大的属性值

给计数元素添加最小和最大值

把 legend 元素作为 fieldest 元素的第一个元素

Scripting

省略 js 的类型属性

如果 script 元素有异步属性，需要给 script 标签添加异不属性

不要注释 script 标签里的元素

不要动态插入 script 元素标签

缩进始终保持一致

HTML最佳实践_html/css

最新推荐

猜你喜欢

热门推荐

给进度条元素添加最大的属性值