Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > HTML最佳实践_html/css_WEB-ITnose

HTML最佳实践_html/css_WEB-ITnose

WBOY
Release： 2016-06-21 08:59:51
Original
1162 people have browsed it

HTML

DOCTYPE 头部开始

Bad:

<html>  ...</html>
Copy after login

Good:

<!DOCTYPE html><html>  ...</html>
Copy after login

不要用旧的 DOCTYPE

Bad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
Copy after login

Good:

<!DOCTYPE html>
Copy after login
Copy after login

不要用 XML 声明

Bad:

<!DOCTYPE html>
Copy after login

Good:

<!DOCTYPE html>
Copy after login
Copy after login

最好不要用字符引用

Bad:

<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
Copy after login
Copy after login

Good:

<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
Copy after login
Copy after login
    ###Escape &, <, >, ", and ' 可以用字符引用
Copy after login

Bad:

<h1>The "&" character</h1>
Copy after login

Good:

<h1>The "&" character</h1>
Copy after login

Use named character references for control or invisible characters

Bad:

<p>This book can read in 1 hour.</p>
Copy after login

Good:

<p>This book can read in 1 hour.</p>
Copy after login

注释的内容两边留个空格

Bad:

<!--This section is non-normative-->
Copy after login

Good:

<!-- This section is non-normative -->
Copy after login

不要忽略闭合标签

Bad:

<html>  <body>    ...
Copy after login

Good:

<html>  <body>    ...
Copy after login

不要搞混空元素的格式

Bad:

<img alt="HTML Best Practices" src="/img/logo.png"><hr />
Copy after login

Good:

<img alt="HTML Best Practices" src="/img/logo.png"><hr>
Copy after login

在标签里面和属性值里不要留空格

Bad:

<h1 class=" title " >HTML Best Practices</h1>
Copy after login

Good:

<h1 class="title">HTML Best Practices</h1>
Copy after login

不要搞混大小写

Bad:

<a HREF="#general">General</A>
Copy after login

Good:

<a href="#general">General</a>
Copy after login

不要混用引号标记

Bad:

<img alt="HTML Best Practices" src='/img/logo.jpg'>
Copy after login

Good:

<img alt="HTML Best Practices" src="/img/logo.jpg">
Copy after login

Don't separate attributes with two or more white spaces

属性之间不要用两个空格隔开

Bad:

<input   name="q"  type="search">
Copy after login

Good:

<input name="q" type="search">
Copy after login

省略布尔属性的值

Bad:

<audio autoplay="autoplay" src="/audio/theme.mp3">
Copy after login

Good:

<audio autoplay src="/audio/theme.mp3">
Copy after login

省略命名空间

Bad:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  ...</svg>
Copy after login

Good:

<svg version="1.1">  ...</svg>
Copy after login

不要用 xml 属性

Bad:

<span lang="ja" xml:lang="ja">...</span>
Copy after login

Good:

<span lang="ja">...</span>
Copy after login

不要搞混 data-*,Microdata，RDFa Lite 属性和通用的属性

Bad:

<img alt="HTML Best Practices" data-   style="max-width:90%" data- style="max-width:90%" itemprop="image" src="/img/logo.png">
Copy after login

Good:

<img alt="HTML Best Practices" src="/img/logo.png" data-   style="max-width:90%" data- style="max-width:90%" itemprop="image">
Copy after login

更强的原生语义

Bad:

<nav role="navigation">  ...</nav><hr role="separator">
Copy after login

Good:

<nav>  ...</nav><hr>
Copy after login

根元素

添加语言属性

Bad:

<html>
Copy after login

Good:

<html lang="en-US">
Copy after login

保持语言属性值尽可能的短

Bad

<html lang="ja-JP">
Copy after login

Good:

<html lang="ja">
Copy after login

文档的元数据

添加 title 元素

Bad:

<head>  <meta charset="UTF-8"></head>
Copy after login

Good:

<head>  <meta charset="UTF-8">  <title>HTML Best Practices</title></head>
Copy after login
Copy after login

指定微链接资源的 MIME 类型

Bad:

<link href="/pdf" rel="alternate"><link href="/feed" rel="alternate"><link href="/css/screen.css" rel="stylesheet">
Copy after login

Good:

<link href="/pdf" rel="alternate" type="application/pdf"><link href="/feed" rel="alternate" type="application/rss+xml"><link href="/css/screen.css" rel="stylesheet">
Copy after login

不要链接到 favicon.ico

Bad:

<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
Copy after login

Good:

把 favicon.ico 放在根目录
Copy after login

添加 title 属性到 备用样式表

Bad:

<link href="/css/screen.css" rel="stylesheet"><link href="/css/high-contrast.css" rel="alternate stylesheet">
Copy after login

Good:

<link href="/css/screen.css" rel="stylesheet"><link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
Copy after login

给文档指定字符编码

Bad:

<head>  <title>HTML Best Practices</title></head>
Copy after login

Good:

<head>  <meta charset="UTF-8">  <title>HTML Best Practices</title></head>
Copy after login
Copy after login

不要用旧的字符编码格式

Bad:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Copy after login

Good:

<meta charset="UTF-8">
Copy after login
Copy after login

首先就要指定字符编码

Bad:

    <meta charset="UTF-8">  ...
Copy after login

Good:

  <meta charset="UTF-8">    ...
Copy after login

使用 utf-8 格式

Bad:

<meta charset="Shift_JIS">
Copy after login

Good:

<meta charset="UTF-8">
Copy after login
Copy after login

css 的 type 属性不用写

Bad:

<style type="text/css">  ...</style>
Copy after login

Good:

<style>  ...</style>
Copy after login
Copy after login

不要注释 style 元素的内容

Bad:

<style><!--  ...  --></style>
Copy after login

Good:

<style>  ...</style>
Copy after login
Copy after login

不要搞混 css 和 js 标签

Bad:

<script src="/js/jquery.min.js"></script><link href="/css/screen.css" rel="stylesheet"><script src="/js/main.js"></script>
Copy after login

Good:

<link href="/css/screen.css" rel="stylesheet"><script src="/js/jquery.min.js"></script><script src="/js/main.js"></script>
Copy after login

Also good:

<script src="/js/jquery.min.js"></script><script src="/js/main.js"></script><link href="/css/screen.css" rel="stylesheet">
Copy after login

添加 body 标签

Bad:

<html>      ...    ...
Copy after login

Good:

<html>      ...        ...
Copy after login
Copy after login

忘了 hgroup 元素吧

Bad:

<hgroup>  <h1>HTML Best Practices</h1>  <h2>For writing maintainable and scalable HTML documents.</h2></hgroup>
Copy after login

Good:

<h1>HTML Best Practices</h1><p>For writing maintainable and scalable HTML documents.</p>
Copy after login

仅仅当在联系信息的时候用 address 元素

Bad:

<address>No rights reserved.</address>
Copy after login

Good:

<address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
Copy after login

pre 元素不要在新的一行开始写

Bad:

<!DOCTYPE html>
Copy after login
Copy after login

Good:

<!DOCTYPE html>
Copy after login
Copy after login

在引号元素里面使用 appropriate 元素

Bad:

<blockquote>For writing maintainable and scalable HTML documents.</blockquote>
Copy after login

Good:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p></blockquote>
Copy after login

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

Bad:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p>  <p>— HTML Best Practices</p></blockquote>
Copy after login

Good:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p></blockquote>
— HTML Best Practices
Copy after login

Also good (recommended by WHATWG):

<figure>  <blockquote>    <p>For writing maintainable and scalable HTML documents.</p>  </blockquote>  <figcaption>— HTML Best Practices</figcaption></figure>
Copy after login

Also good too (recommended by W3C):

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p>  <footer>— HTML Best Practices</footer></blockquote>
Copy after login

每行只写一个列表项目

Bad:

<ul>  <li>General</li><li>The root Element</li><li>Sections</li>...</ul>
Copy after login

Good:

<ul>  <li>General</li>  <li>The root Element</li>  <li>Sections</li>  ...</ul>
Copy after login

给 ol 元素用上 type 属性

Bad:

<head>  <style>    .toc {      list-style-type: upper-roman;    }  </style></head><body>  <ol class="toc">    <li>General</li>    <li>The root Element</li>    <li>Sections</li>    ...  </ol></body>
Copy after login

Good:

<body>  <ol type="I">    <li>General</li>    <li>The root Element</li>    <li>Sections</li>    ...  </ol></body>
Copy after login

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

Bad:

<figure>  <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">  <figcaption>“HTML Best Practices” Cover Art</figcaption>  <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png"></figure>
Copy after login

Good:

<figure>  <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">  <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">  <figcaption>“HTML Best Practices” Cover Art</figcaption></figure>
Copy after login

使用 main 元素

Bad:

<div id="content">  ...</div>
Copy after login

Good:

<main>  ...</main>
Copy after login

尽量的避免使用 div 标签

Bad:

<div class="chapter">  ...</div>
Copy after login

Good:

<section>  ...</section>Text-level semantics
Copy after login

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

Bad:

<h1><a href="https://whatwg.org/">WHATWG</a></h1><p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>
Copy after login

Good:

<a href="https://whatwg.org/">  <h1>WHATWG</h1>  <p>A community maintaining and evolving HTML since 2004.</p></a>
Copy after login

用下载属性下载一个资源

Bad:

<a href="/downloads/offline.zip">offline version</a>
Copy after login

Good:

<a download href="/downloads/offline.zip">offline version</a>
Copy after login

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

Bad:

<a href="/ja/pdf">Japanese PDF version</a>
Copy after login

Good:

<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
Copy after login

清理链接的文本

Bad:

<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
Copy after login

Good:

<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
Copy after login

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

Bad:

<em>Caution!</em>
Copy after login

Good:

<strong>Caution!</strong>
Copy after login

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

Bad:

<i class="icon-search"></i>
Copy after login

Good:

<span class="icon-search" aria-hidden="true"></span>
Copy after login

不要在 q 元素里添加引号

Bad:

<q>“For writing maintainable and scalable HTML documents”</q>
Copy after login

Good:

<q>For writing maintainable and scalable HTML documents</q>
Copy after login

Also good:

“For writing maintainable and scalable HTML documents”
Copy after login

给 abbr 元素添加 title 属性

Bad:

<abbr>HBP</abbr>
Copy after login

Good:

<abbr title="HTML Best Practices">HBP</abbr>
Copy after login

ruby 标记元素要长一点

Bad:

<ruby>HTML<rt>えいちてぃーえむえる</ruby>
Copy after login

Good:

<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
Copy after login

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

Bad:

<time>Dec 19, 2014</time>
Copy after login

Good:

<time datetime="2014-12-19">Dec 19, 2014</time>Specify code language with class attribute prefixed with language-
Copy after login

Bad:

<code><DOCTYPE html></code>
Copy after login

Good:

<code class="language-html"><DOCTYPE html></code>
Copy after login

让 kbd 元素尽可能的简单

Bad:

<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
Copy after login

Good:

<kbd>Ctrl+F5</kbd>
Copy after login

尽可能的避免 span 元素

Bad:

HTML <span class="best">Best</span> Practices
Copy after login

Good:

HTML <em>Best</em> Practices
Copy after login

br 元素后面要换行

Bad:

<p>HTML<br>Best<br>Practices</p>
Copy after login
Copy after login

Good:

<p>HTML<br>Best<br>Practices</p>
Copy after login
Copy after login

不要滥用 br 元素标签

Bad:

<p><label>Rule name: <input name="rule-name" type="text"></label><br><label>Rule description:<br><textarea name="rule-description"></textarea></label></p>
Copy after login

Good:

<p><label>Rule name: <input name="rule-name" type="text"></label></p><p><label>Rule description:<br><textarea name="rule-description"></textarea></label></p>
Copy after login

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

Bad:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p><p>Don't trust!</p></del>
Copy after login

Good:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p><del><p>Don't trust!</p></del>
Copy after login

嵌入内容

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

Bad:

<img  src="/img/logo.png" alt="HTML最佳实践_html/css_WEB-ITnose" >
Copy after login

Good:

<img alt="HTML Best Practices" src="/img/logo.png">
Copy after login

如果可以就把 Alt 的值空着

Bad:

<img alt="Question mark icon" src="/img/icon/help.png">
Copy after login

Good:

<img alt="" src="/img/icon/help.png">
Copy after login

如果有可能就省略 alt 标签

Bad:

<img alt="CAPTCHA" src="captcha.cgi?id=82174">
Copy after login

Good:

<img  src="captcha.cgi?id=82174" title="CAPTCHA" alt="HTML最佳实践_html/css_WEB-ITnose" >
Copy after login

清空 iframe 元素

Bad:

<iframe src="/ads/default.html">  <p>If your browser support inline frame, ads are displayed here.</p></iframe>
Copy after login

Good:

<iframe src="/ads/default.html"></iframe>
Copy after login

map 元素内容

Bad:

  <a href="#general">General</a>  General |  The root element  The root element |  Sections  Sections
Copy after login

Good:

  
    <a href="#general">General</a>    General |    The root element    The root element |    Sections    Sections
Copy after login

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

Bad:

<video>  <source src="/mov/theme.mp4" type="video/mp4">  <source src="/mov/theme.ogv" type="video/ogg">  ...</video>
Copy after login

Good:

<video>  <source src="/mov/theme.mp4" type="video/mp4">  <source src="/mov/theme.ogv" type="video/ogg">  ...  <iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe></video>
Copy after login

表格数据

每行写一个 td

Bad:

<tr>  <td>General</td><td>The root Element</td><td>Sections</td></tr>
Copy after login

Good:

<tr>  <td>General</td>  <td>The root Element</td>  <td>Sections</td></tr>
Copy after login

给表格使用表头 header

Bad:

<table>  <thead>    <tr>      <td><strong>Element</strong></td>      <td><strong>Empty</strong></td>      <td><strong>Tag omission</strong></td>    </tr>  </thead>  <tbody>    <tr>      <td><strong><code>pre</code></strong></td>      <td>No</td>      <td>Neither tag is omissible</td>    </tr>    <tr>      <td><strong><code>img</code></strong></td>      <td>Yes</td>      <td>No end tag</td>    </tr>  </tbody></table>
Copy after login

Good:

<table>  <thead>    <tr>      <th>Element</th>      <th>Empty</th>      <th>Tag omission</th>    </tr>  </thead>  <tbody>    <tr>      <th><code>pre</code></th>      <td>No</td>      <td>Neither tag is omissible</td>    </tr>    <tr>      <th><code>img</code></th>      <td>Yes</td>      <td>No end tag</td>    </tr>  </tbody></table>
Copy after login

表单

用 label 元素包裹表单

Bad:

<p>Query: <input name="q" type="text"></p>
Copy after login

Good:

<p><label>Query: <input name="q" type="text"></label></p>
Copy after login

尽可能的省略属性

Bad:

<label for="q">Query: <input id="q" name="q" type="text"></label>
Copy after login

Good:

<label>Query: <input name="q" type="text"></label>
Copy after login

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

Bad:

<label>Search keyword: <input name="q" type="text"></label>
Copy after login

Good:

Copy after login

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

Bad:

<input type="submit">
Copy after login

Good:

<input type="submit" value="Search">
Copy after login

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

Bad:

<input name="security-code" pattern="[0-9]{3}" type="text">
Copy after login

Good:

<input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
Copy after login

不要使用占位符属性标签

Bad:

<input name="email" placeholder="Email" type="text">
Copy after login

Good:

<label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
Copy after login

每个 option 元素一行

Bad:

<datalist id="toc">  <option label="General"><option label="The root element"><option label="Sections"></datalist>
Copy after login

Good:

<datalist id="toc">  <option label="General">  <option label="The root element">  <option label="Sections"></datalist>
Copy after login

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

Bad:

<progress value="0.5"> 50%</progress>
Copy after login

Good:

<progress max="100" value="50"> 50%</progress>
Copy after login

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

Bad:

<meter value="0.5"> 512GB used (1024GB total)</meter>
Copy after login

Good:

<meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
Copy after login

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

Bad:

<fieldset>  <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>  ...  <legend>About "General"</legend></fieldset>
Copy after login

Good:

<fieldset>  <legend>About "General"</legend>  <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>  ...</fieldset>
Copy after login

Scripting

省略 js 的类型属性

Bad:

<script type="text/javascript">  ...</script>
Copy after login

Good:

<script>  ...</script>
Copy after login
Copy after login

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

Bad:

<script async src="/js/main.js"></script>
Copy after login

Good:

<script async defer src="/js/main.js"></script>
Copy after login

不要注释 script 标签里的元素

Bad:

<script>/*<![CDATA[*/  .../*]]>*/</script>
Copy after login

Also bad:

<script><!--  ...// --></script>
Copy after login

Good:

<script>  ...</script>
Copy after login
Copy after login

不要动态插入 script 元素标签

Bad:

<script>  var script = document.createElement('script');  script.async = true;  script.src = "//example.com/widget.js";  document.getElementsByTagName('head')[0].appendChild(script);</script>
Copy after login

Good:

<script async defer src="//example.com/widget.js"></script>
Copy after login

缩进始终保持一致

Bad:

<html>          ...          ...
Copy after login

Good:

<html>      ...        ...
Copy after login
Copy after login

原文出处：https://github.com/dyygtfx/html-best-practices

Related labels：
HTML最佳实践
source：php.cn
Previous article：起点分享会｜HTML 5制作工具和制作团队（附案例分析）_html/css_WEB-ITnose Next article：2015总结。_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
Best way to implement three-state switching in react? I'm creating some buttons in React that trigger a state change from one to the next. Some ...
From 2024-04-06 13:51:32
0
1
418
Choose the appropriate application architecture to handle bearer tokens I want to use an API that uses OAuth2.0 In short, I need to obtain an access token that I ...
From 2024-04-04 08:55:57
0
1
353
Best practices for using getters and/or computed properties in Vue.js I love vue.js and I definitely love computed properties and VueXgetters. But I've reached ...
From 2024-04-01 18:22:49
0
1
431
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template