Heim > Web-Frontend > HTML-Tutorial > HTML最佳实践_html/css_WEB-ITnose

HTML最佳实践_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:59:51
Original
1162 Leute haben es durchsucht

HTML

DOCTYPE 头部开始

Bad:

<html>  ...</html>
Nach dem Login kopieren

Good:

<!DOCTYPE html><html>  ...</html>
Nach dem Login kopieren

不要用旧的 DOCTYPE

Bad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
Nach dem Login kopieren

Good:

<!DOCTYPE html>
Nach dem Login kopieren
Nach dem Login kopieren

不要用 XML 声明

Bad:

<!DOCTYPE html>
Nach dem Login kopieren

Good:

<!DOCTYPE html>
Nach dem Login kopieren
Nach dem Login kopieren

最好不要用字符引用

Bad:

<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
Nach dem Login kopieren
Nach dem Login kopieren

Good:

<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
Nach dem Login kopieren
Nach dem Login kopieren
    ###Escape &, <, >, ", and ' 可以用字符引用
Nach dem Login kopieren

Bad:

<h1>The "&" character</h1>
Nach dem Login kopieren

Good:

<h1>The "&" character</h1>
Nach dem Login kopieren

Use named character references for control or invisible characters

Bad:

<p>This book can read in 1 hour.</p>
Nach dem Login kopieren

Good:

<p>This book can read in 1 hour.</p>
Nach dem Login kopieren

注释的内容两边留个空格

Bad:

<!--This section is non-normative-->
Nach dem Login kopieren

Good:

<!-- This section is non-normative -->
Nach dem Login kopieren

不要忽略闭合标签

Bad:

<html>  <body>    ...
Nach dem Login kopieren

Good:

<html>  <body>    ...  
Nach dem Login kopieren

不要搞混空元素的格式

Bad:

<img alt="HTML Best Practices" src="/img/logo.png"><hr />
Nach dem Login kopieren

Good:

<img alt="HTML Best Practices" src="/img/logo.png"><hr>
Nach dem Login kopieren

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

Bad:

<h1 class=" title " >HTML Best Practices</h1>
Nach dem Login kopieren

Good:

<h1 class="title">HTML Best Practices</h1>
Nach dem Login kopieren

不要搞混大小写

Bad:

<a HREF="#general">General</A>
Nach dem Login kopieren

Good:

<a href="#general">General</a>
Nach dem Login kopieren

不要混用引号标记

Bad:

<img alt="HTML Best Practices" src='/img/logo.jpg'>
Nach dem Login kopieren

Good:

<img alt="HTML Best Practices" src="/img/logo.jpg">
Nach dem Login kopieren

Don't separate attributes with two or more white spaces

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

Bad:

<input   name="q"  type="search">
Nach dem Login kopieren

Good:

<input name="q" type="search">
Nach dem Login kopieren

省略布尔属性的值

Bad:

<audio autoplay="autoplay" src="/audio/theme.mp3">
Nach dem Login kopieren

Good:

<audio autoplay src="/audio/theme.mp3">
Nach dem Login kopieren

省略命名空间

Bad:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  ...</svg>
Nach dem Login kopieren

Good:

<svg version="1.1">  ...</svg>
Nach dem Login kopieren

不要用 xml 属性

Bad:

<span lang="ja" xml:lang="ja">...</span>
Nach dem Login kopieren

Good:

<span lang="ja">...</span>
Nach dem Login kopieren

不要搞混 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">
Nach dem Login kopieren

Good:

<img alt="HTML Best Practices" src="/img/logo.png" data-   style="max-width:90%" data- style="max-width:90%" itemprop="image">
Nach dem Login kopieren

更强的原生语义

Bad:

<nav role="navigation">  ...</nav><hr role="separator">
Nach dem Login kopieren

Good:

<nav>  ...</nav><hr>
Nach dem Login kopieren

根元素

添加语言属性

Bad:

<html>
Nach dem Login kopieren

Good:

<html lang="en-US">
Nach dem Login kopieren

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

Bad

<html lang="ja-JP">
Nach dem Login kopieren

Good:

<html lang="ja">
Nach dem Login kopieren

文档的元数据

添加 title 元素

Bad:

<head>  <meta charset="UTF-8"></head>
Nach dem Login kopieren

Good:

<head>  <meta charset="UTF-8">  <title>HTML Best Practices</title></head>
Nach dem Login kopieren
Nach dem Login kopieren

指定微链接资源的 MIME 类型

Bad:

<link href="/pdf" rel="alternate"><link href="/feed" rel="alternate"><link href="/css/screen.css" rel="stylesheet">
Nach dem Login kopieren

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">
Nach dem Login kopieren

不要链接到 favicon.ico

Bad:

<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
Nach dem Login kopieren

Good:

把 favicon.ico 放在根目录
Nach dem Login kopieren

添加 title 属性到 备用样式表

Bad:

<link href="/css/screen.css" rel="stylesheet"><link href="/css/high-contrast.css" rel="alternate stylesheet">
Nach dem Login kopieren

Good:

<link href="/css/screen.css" rel="stylesheet"><link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
Nach dem Login kopieren

给文档指定字符编码

Bad:

<head>  <title>HTML Best Practices</title></head>
Nach dem Login kopieren

Good:

<head>  <meta charset="UTF-8">  <title>HTML Best Practices</title></head>
Nach dem Login kopieren
Nach dem Login kopieren

不要用旧的字符编码格式

Bad:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Nach dem Login kopieren

Good:

<meta charset="UTF-8">
Nach dem Login kopieren
Nach dem Login kopieren

首先就要指定字符编码

Bad:

    <meta charset="UTF-8">  ...
Nach dem Login kopieren

Good:

  <meta charset="UTF-8">    ...
Nach dem Login kopieren

使用 utf-8 格式

Bad:

<meta charset="Shift_JIS">
Nach dem Login kopieren

Good:

<meta charset="UTF-8">
Nach dem Login kopieren
Nach dem Login kopieren

css 的 type 属性不用写

Bad:

<style type="text/css">  ...</style>
Nach dem Login kopieren

Good:

<style>  ...</style>
Nach dem Login kopieren
Nach dem Login kopieren

不要注释 style 元素的内容

Bad:

<style><!--  ...  --></style>
Nach dem Login kopieren

Good:

<style>  ...</style>
Nach dem Login kopieren
Nach dem Login kopieren

不要搞混 css 和 js 标签

Bad:

<script src="/js/jquery.min.js"></script><link href="/css/screen.css" rel="stylesheet"><script src="/js/main.js"></script>
Nach dem Login kopieren

Good:

<link href="/css/screen.css" rel="stylesheet"><script src="/js/jquery.min.js"></script><script src="/js/main.js"></script>
Nach dem Login kopieren

Also good:

<script src="/js/jquery.min.js"></script><script src="/js/main.js"></script><link href="/css/screen.css" rel="stylesheet">
Nach dem Login kopieren

添加 body 标签

Bad:

<html>      ...    ...
Nach dem Login kopieren

Good:

<html>      ...        ...  
Nach dem Login kopieren
Nach dem Login kopieren

忘了 hgroup 元素吧

Bad:

<hgroup>  <h1>HTML Best Practices</h1>  <h2>For writing maintainable and scalable HTML documents.</h2></hgroup>
Nach dem Login kopieren

Good:

<h1>HTML Best Practices</h1><p>For writing maintainable and scalable HTML documents.</p>
Nach dem Login kopieren

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

Bad:

<address>No rights reserved.</address>
Nach dem Login kopieren

Good:

<address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
Nach dem Login kopieren

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

Bad:

<!DOCTYPE html>
Nach dem Login kopieren
Nach dem Login kopieren

Good:

<!DOCTYPE html>
Nach dem Login kopieren
Nach dem Login kopieren

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

Bad:

<blockquote>For writing maintainable and scalable HTML documents.</blockquote>
Nach dem Login kopieren

Good:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p></blockquote>
Nach dem Login kopieren

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

Bad:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p>  <p>— HTML Best Practices</p></blockquote>
Nach dem Login kopieren

Good:

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

— HTML Best Practices

Nach dem Login kopieren

Also good (recommended by WHATWG):

<figure>  <blockquote>    <p>For writing maintainable and scalable HTML documents.</p>  </blockquote>  <figcaption>— HTML Best Practices</figcaption></figure>
Nach dem Login kopieren

Also good too (recommended by W3C):

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p>  <footer>— HTML Best Practices</footer></blockquote>
Nach dem Login kopieren

每行只写一个列表项目

Bad:

<ul>  <li>General</li><li>The root Element</li><li>Sections</li>...</ul>
Nach dem Login kopieren

Good:

<ul>  <li>General</li>  <li>The root Element</li>  <li>Sections</li>  ...</ul>
Nach dem Login kopieren

给 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>
Nach dem Login kopieren

Good:

<body>  <ol type="I">    <li>General</li>    <li>The root Element</li>    <li>Sections</li>    ...  </ol></body>
Nach dem Login kopieren

把 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

使用 main 元素

Bad:

<div id="content">  ...</div>
Nach dem Login kopieren

Good:

<main>  ...</main>
Nach dem Login kopieren

尽量的避免使用 div 标签

Bad:

<div class="chapter">  ...</div>
Nach dem Login kopieren

Good:

<section>  ...</section>Text-level semantics
Nach dem Login kopieren

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

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>
Nach dem Login kopieren

Good:

<a href="https://whatwg.org/">  <h1>WHATWG</h1>  <p>A community maintaining and evolving HTML since 2004.</p></a>
Nach dem Login kopieren

用下载属性下载一个资源

Bad:

<a href="/downloads/offline.zip">offline version</a>
Nach dem Login kopieren

Good:

<a download href="/downloads/offline.zip">offline version</a>
Nach dem Login kopieren

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

Bad:

<a href="/ja/pdf">Japanese PDF version</a>
Nach dem Login kopieren

Good:

<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
Nach dem Login kopieren

清理链接的文本

Bad:

<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
Nach dem Login kopieren

Good:

<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
Nach dem Login kopieren

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

Bad:

<em>Caution!</em>
Nach dem Login kopieren

Good:

<strong>Caution!</strong>
Nach dem Login kopieren

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

Bad:

<i class="icon-search"></i>
Nach dem Login kopieren

Good:

<span class="icon-search" aria-hidden="true"></span>
Nach dem Login kopieren

不要在 q 元素里添加引号

Bad:

<q>“For writing maintainable and scalable HTML documents”</q>
Nach dem Login kopieren

Good:

<q>For writing maintainable and scalable HTML documents</q>
Nach dem Login kopieren

Also good:

“For writing maintainable and scalable HTML documents”
Nach dem Login kopieren

给 abbr 元素添加 title 属性

Bad:

<abbr>HBP</abbr>
Nach dem Login kopieren

Good:

<abbr title="HTML Best Practices">HBP</abbr>
Nach dem Login kopieren

ruby 标记元素要长一点

Bad:

<ruby>HTML<rt>えいちてぃーえむえる</ruby>
Nach dem Login kopieren

Good:

<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
Nach dem Login kopieren

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

Bad:

<time>Dec 19, 2014</time>
Nach dem Login kopieren

Good:

<time datetime="2014-12-19">Dec 19, 2014</time>Specify code language with class attribute prefixed with language-
Nach dem Login kopieren

Bad:

<code><DOCTYPE html></code>
Nach dem Login kopieren

Good:

<code class="language-html"><DOCTYPE html></code>
Nach dem Login kopieren

让 kbd 元素尽可能的简单

Bad:

<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
Nach dem Login kopieren

Good:

<kbd>Ctrl+F5</kbd>
Nach dem Login kopieren

尽可能的避免 span 元素

Bad:

HTML <span class="best">Best</span> Practices
Nach dem Login kopieren

Good:

HTML <em>Best</em> Practices
Nach dem Login kopieren

br 元素后面要换行

Bad:

<p>HTML<br>Best<br>Practices</p>
Nach dem Login kopieren
Nach dem Login kopieren

Good:

<p>HTML<br>Best<br>Practices</p>
Nach dem Login kopieren
Nach dem Login kopieren

不要滥用 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

Bad:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p><p>Don't trust!</p></del>
Nach dem Login kopieren

Good:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p><del><p>Don't trust!</p></del>
Nach dem Login kopieren

嵌入内容

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

Bad:

<img  src="/img/logo.png" alt="HTML最佳实践_html/css_WEB-ITnose" >
Nach dem Login kopieren

Good:

<img alt="HTML Best Practices" src="/img/logo.png">
Nach dem Login kopieren

如果可以就把 Alt 的值空着

Bad:

<img alt="Question mark icon" src="/img/icon/help.png">
Nach dem Login kopieren

Good:

<img alt="" src="/img/icon/help.png">
Nach dem Login kopieren

如果有可能就省略 alt 标签

Bad:

<img alt="CAPTCHA" src="captcha.cgi?id=82174">
Nach dem Login kopieren

Good:

<img  src="captcha.cgi?id=82174" title="CAPTCHA" alt="HTML最佳实践_html/css_WEB-ITnose" >
Nach dem Login kopieren

清空 iframe 元素

Bad:

<iframe src="/ads/default.html">  <p>If your browser support inline frame, ads are displayed here.</p></iframe>
Nach dem Login kopieren

Good:

<iframe src="/ads/default.html"></iframe>
Nach dem Login kopieren

map 元素内容

Bad:

  <a href="#general">General</a>  General |  The root element  The root element |  Sections  Sections
Nach dem Login kopieren

Good:

  

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

Nach dem Login kopieren

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

Bad:

<video>  <source src="/mov/theme.mp4" type="video/mp4">  <source src="/mov/theme.ogv" type="video/ogg">  ...</video>
Nach dem Login kopieren

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>
Nach dem Login kopieren

表格数据

每行写一个 td

Bad:

<tr>  <td>General</td><td>The root Element</td><td>Sections</td></tr>
Nach dem Login kopieren

Good:

<tr>  <td>General</td>  <td>The root Element</td>  <td>Sections</td></tr>
Nach dem Login kopieren

给表格使用表头 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

表单

用 label 元素包裹表单

Bad:

<p>Query: <input name="q" type="text"></p>
Nach dem Login kopieren

Good:

<p><label>Query: <input name="q" type="text"></label></p>
Nach dem Login kopieren

尽可能的省略属性

Bad:

<label for="q">Query: <input id="q" name="q" type="text"></label>
Nach dem Login kopieren

Good:

<label>Query: <input name="q" type="text"></label>
Nach dem Login kopieren

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

Bad:

<label>Search keyword: <input name="q" type="text"></label>
Nach dem Login kopieren

Good:

Nach dem Login kopieren

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

Bad:

<input type="submit">
Nach dem Login kopieren

Good:

<input type="submit" value="Search">
Nach dem Login kopieren

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

Bad:

<input name="security-code" pattern="[0-9]{3}" type="text">
Nach dem Login kopieren

Good:

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

不要使用占位符属性标签

Bad:

<input name="email" placeholder="Email" type="text">
Nach dem Login kopieren

Good:

<label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
Nach dem Login kopieren

每个 option 元素一行

Bad:

<datalist id="toc">  <option label="General"><option label="The root element"><option label="Sections"></datalist>
Nach dem Login kopieren

Good:

<datalist id="toc">  <option label="General">  <option label="The root element">  <option label="Sections"></datalist>
Nach dem Login kopieren

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

Bad:

<progress value="0.5"> 50%</progress>
Nach dem Login kopieren

Good:

<progress max="100" value="50"> 50%</progress>
Nach dem Login kopieren

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

Bad:

<meter value="0.5"> 512GB used (1024GB total)</meter>
Nach dem Login kopieren

Good:

<meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
Nach dem Login kopieren

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

Bad:

<fieldset>  <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>  ...  <legend>About "General"</legend></fieldset>
Nach dem Login kopieren

Good:

<fieldset>  <legend>About "General"</legend>  <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>  ...</fieldset>
Nach dem Login kopieren

Scripting

省略 js 的类型属性

Bad:

<script type="text/javascript">  ...</script>
Nach dem Login kopieren

Good:

<script>  ...</script>
Nach dem Login kopieren
Nach dem Login kopieren

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

Bad:

<script async src="/js/main.js"></script>
Nach dem Login kopieren

Good:

<script async defer src="/js/main.js"></script>
Nach dem Login kopieren

不要注释 script 标签里的元素

Bad:

<script>/*<![CDATA[*/  .../*]]>*/</script>
Nach dem Login kopieren

Also bad:

<script><!--  ...// --></script>
Nach dem Login kopieren

Good:

<script>  ...</script>
Nach dem Login kopieren
Nach dem Login kopieren

不要动态插入 script 元素标签

Bad:

<script>  var script = document.createElement('script');  script.async = true;  script.src = "//example.com/widget.js";  document.getElementsByTagName('head')[0].appendChild(script);</script>
Nach dem Login kopieren

Good:

<script async defer src="//example.com/widget.js"></script>
Nach dem Login kopieren

缩进始终保持一致

Bad:

<html>          ...          ...  
Nach dem Login kopieren

Good:

<html>      ...        ...  
Nach dem Login kopieren
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage