지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > HTML最佳实践_html/css_WEB-ITnose

HTML最佳实践_html/css_WEB-ITnose

WBOY
풀어 주다： 2016-06-21 08:59:51
원래의
1162명이 탐색했습니다.

HTML

DOCTYPE 头部开始

Bad:

<html>  ...</html>
로그인 후 복사

Good:

<!DOCTYPE html><html>  ...</html>
로그인 후 복사

不要用旧的 DOCTYPE

Bad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
로그인 후 복사

Good:

<!DOCTYPE html>
로그인 후 복사
로그인 후 복사

不要用 XML 声明

Bad:

<!DOCTYPE html>
로그인 후 복사

Good:

<!DOCTYPE html>
로그인 후 복사
로그인 후 복사

最好不要用字符引用

Bad:

<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
로그인 후 복사
로그인 후 복사

Good:

<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
로그인 후 복사
로그인 후 복사
    ###Escape &, <, >, ", and ' 可以用字符引用
로그인 후 복사

Bad:

<h1>The "&" character</h1>
로그인 후 복사

Good:

<h1>The "&" character</h1>
로그인 후 복사

Use named character references for control or invisible characters

Bad:

<p>This book can read in 1 hour.</p>
로그인 후 복사

Good:

<p>This book can read in 1 hour.</p>
로그인 후 복사

注释的内容两边留个空格

Bad:

<!--This section is non-normative-->
로그인 후 복사

Good:

<!-- This section is non-normative -->
로그인 후 복사

不要忽略闭合标签

Bad:

<html>  <body>    ...
로그인 후 복사

Good:

<html>  <body>    ...
로그인 후 복사

不要搞混空元素的格式

Bad:

<img alt="HTML Best Practices" src="/img/logo.png"><hr />
로그인 후 복사

Good:

<img alt="HTML Best Practices" src="/img/logo.png"><hr>
로그인 후 복사

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

Bad:

<h1 class=" title " >HTML Best Practices</h1>
로그인 후 복사

Good:

<h1 class="title">HTML Best Practices</h1>
로그인 후 복사

不要搞混大小写

Bad:

<a HREF="#general">General</A>
로그인 후 복사

Good:

<a href="#general">General</a>
로그인 후 복사

不要混用引号标记

Bad:

<img alt="HTML Best Practices" src='/img/logo.jpg'>
로그인 후 복사

Good:

<img alt="HTML Best Practices" src="/img/logo.jpg">
로그인 후 복사

Don't separate attributes with two or more white spaces

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

Bad:

<input   name="q"  type="search">
로그인 후 복사

Good:

<input name="q" type="search">
로그인 후 복사

省略布尔属性的值

Bad:

<audio autoplay="autoplay" src="/audio/theme.mp3">
로그인 후 복사

Good:

<audio autoplay src="/audio/theme.mp3">
로그인 후 복사

省略命名空间

Bad:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  ...</svg>
로그인 후 복사

Good:

<svg version="1.1">  ...</svg>
로그인 후 복사

不要用 xml 属性

Bad:

<span lang="ja" xml:lang="ja">...</span>
로그인 후 복사

Good:

<span lang="ja">...</span>
로그인 후 복사

不要搞混 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">
로그인 후 복사

Good:

<img alt="HTML Best Practices" src="/img/logo.png" data-   style="max-width:90%" data- style="max-width:90%" itemprop="image">
로그인 후 복사

更强的原生语义

Bad:

<nav role="navigation">  ...</nav><hr role="separator">
로그인 후 복사

Good:

<nav>  ...</nav><hr>
로그인 후 복사

根元素

添加语言属性

Bad:

<html>
로그인 후 복사

Good:

<html lang="en-US">
로그인 후 복사

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

Bad

<html lang="ja-JP">
로그인 후 복사

Good:

<html lang="ja">
로그인 후 복사

文档的元数据

添加 title 元素

Bad:

<head>  <meta charset="UTF-8"></head>
로그인 후 복사

Good:

<head>  <meta charset="UTF-8">  <title>HTML Best Practices</title></head>
로그인 후 복사
로그인 후 복사

指定微链接资源的 MIME 类型

Bad:

<link href="/pdf" rel="alternate"><link href="/feed" rel="alternate"><link href="/css/screen.css" rel="stylesheet">
로그인 후 복사

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">
로그인 후 복사

不要链接到 favicon.ico

Bad:

<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
로그인 후 복사

Good:

把 favicon.ico 放在根目录
로그인 후 복사

添加 title 属性到 备用样式表

Bad:

<link href="/css/screen.css" rel="stylesheet"><link href="/css/high-contrast.css" rel="alternate stylesheet">
로그인 후 복사

Good:

<link href="/css/screen.css" rel="stylesheet"><link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
로그인 후 복사

给文档指定字符编码

Bad:

<head>  <title>HTML Best Practices</title></head>
로그인 후 복사

Good:

<head>  <meta charset="UTF-8">  <title>HTML Best Practices</title></head>
로그인 후 복사
로그인 후 복사

不要用旧的字符编码格式

Bad:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
로그인 후 복사

Good:

<meta charset="UTF-8">
로그인 후 복사
로그인 후 복사

首先就要指定字符编码

Bad:

    <meta charset="UTF-8">  ...
로그인 후 복사

Good:

  <meta charset="UTF-8">    ...
로그인 후 복사

使用 utf-8 格式

Bad:

<meta charset="Shift_JIS">
로그인 후 복사

Good:

<meta charset="UTF-8">
로그인 후 복사
로그인 후 복사

css 的 type 属性不用写

Bad:

<style type="text/css">  ...</style>
로그인 후 복사

Good:

<style>  ...</style>
로그인 후 복사
로그인 후 복사

不要注释 style 元素的内容

Bad:

<style><!--  ...  --></style>
로그인 후 복사

Good:

<style>  ...</style>
로그인 후 복사
로그인 후 복사

不要搞混 css 和 js 标签

Bad:

<script src="/js/jquery.min.js"></script><link href="/css/screen.css" rel="stylesheet"><script src="/js/main.js"></script>
로그인 후 복사

Good:

<link href="/css/screen.css" rel="stylesheet"><script src="/js/jquery.min.js"></script><script src="/js/main.js"></script>
로그인 후 복사

Also good:

<script src="/js/jquery.min.js"></script><script src="/js/main.js"></script><link href="/css/screen.css" rel="stylesheet">
로그인 후 복사

添加 body 标签

Bad:

<html>      ...    ...
로그인 후 복사

Good:

<html>      ...        ...
로그인 후 복사
로그인 후 복사

忘了 hgroup 元素吧

Bad:

<hgroup>  <h1>HTML Best Practices</h1>  <h2>For writing maintainable and scalable HTML documents.</h2></hgroup>
로그인 후 복사

Good:

<h1>HTML Best Practices</h1><p>For writing maintainable and scalable HTML documents.</p>
로그인 후 복사

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

Bad:

<address>No rights reserved.</address>
로그인 후 복사

Good:

<address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
로그인 후 복사

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

Bad:

<!DOCTYPE html>
로그인 후 복사
로그인 후 복사

Good:

<!DOCTYPE html>
로그인 후 복사
로그인 후 복사

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

Bad:

<blockquote>For writing maintainable and scalable HTML documents.</blockquote>
로그인 후 복사

Good:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p></blockquote>
로그인 후 복사

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

Bad:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p>  <p>— HTML Best Practices</p></blockquote>
로그인 후 복사

Good:

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p></blockquote>
— HTML Best Practices
로그인 후 복사

Also good (recommended by WHATWG):

<figure>  <blockquote>    <p>For writing maintainable and scalable HTML documents.</p>  </blockquote>  <figcaption>— HTML Best Practices</figcaption></figure>
로그인 후 복사

Also good too (recommended by W3C):

<blockquote>  <p>For writing maintainable and scalable HTML documents.</p>  <footer>— HTML Best Practices</footer></blockquote>
로그인 후 복사

每行只写一个列表项目

Bad:

<ul>  <li>General</li><li>The root Element</li><li>Sections</li>...</ul>
로그인 후 복사

Good:

<ul>  <li>General</li>  <li>The root Element</li>  <li>Sections</li>  ...</ul>
로그인 후 복사

给 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>
로그인 후 복사

Good:

<body>  <ol type="I">    <li>General</li>    <li>The root Element</li>    <li>Sections</li>    ...  </ol></body>
로그인 후 복사

把 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>
로그인 후 복사

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>
로그인 후 복사

使用 main 元素

Bad:

<div id="content">  ...</div>
로그인 후 복사

Good:

<main>  ...</main>
로그인 후 복사

尽量的避免使用 div 标签

Bad:

<div class="chapter">  ...</div>
로그인 후 복사

Good:

<section>  ...</section>Text-level semantics
로그인 후 복사

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

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>
로그인 후 복사

Good:

<a href="https://whatwg.org/">  <h1>WHATWG</h1>  <p>A community maintaining and evolving HTML since 2004.</p></a>
로그인 후 복사

用下载属性下载一个资源

Bad:

<a href="/downloads/offline.zip">offline version</a>
로그인 후 복사

Good:

<a download href="/downloads/offline.zip">offline version</a>
로그인 후 복사

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

Bad:

<a href="/ja/pdf">Japanese PDF version</a>
로그인 후 복사

Good:

<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
로그인 후 복사

清理链接的文本

Bad:

<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
로그인 후 복사

Good:

<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
로그인 후 복사

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

Bad:

<em>Caution!</em>
로그인 후 복사

Good:

<strong>Caution!</strong>
로그인 후 복사

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

Bad:

<i class="icon-search"></i>
로그인 후 복사

Good:

<span class="icon-search" aria-hidden="true"></span>
로그인 후 복사

不要在 q 元素里添加引号

Bad:

<q>“For writing maintainable and scalable HTML documents”</q>
로그인 후 복사

Good:

<q>For writing maintainable and scalable HTML documents</q>
로그인 후 복사

Also good:

“For writing maintainable and scalable HTML documents”
로그인 후 복사

给 abbr 元素添加 title 属性

Bad:

<abbr>HBP</abbr>
로그인 후 복사

Good:

<abbr title="HTML Best Practices">HBP</abbr>
로그인 후 복사

ruby 标记元素要长一点

Bad:

<ruby>HTML<rt>えいちてぃーえむえる</ruby>
로그인 후 복사

Good:

<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
로그인 후 복사

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

Bad:

<time>Dec 19, 2014</time>
로그인 후 복사

Good:

<time datetime="2014-12-19">Dec 19, 2014</time>Specify code language with class attribute prefixed with language-
로그인 후 복사

Bad:

<code><DOCTYPE html></code>
로그인 후 복사

Good:

<code class="language-html"><DOCTYPE html></code>
로그인 후 복사

让 kbd 元素尽可能的简单

Bad:

<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
로그인 후 복사

Good:

<kbd>Ctrl+F5</kbd>
로그인 후 복사

尽可能的避免 span 元素

Bad:

HTML <span class="best">Best</span> Practices
로그인 후 복사

Good:

HTML <em>Best</em> Practices
로그인 후 복사

br 元素后面要换行

Bad:

<p>HTML<br>Best<br>Practices</p>
로그인 후 복사
로그인 후 복사

Good:

<p>HTML<br>Best<br>Practices</p>
로그인 후 복사
로그인 후 복사

不要滥用 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>
로그인 후 복사

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>
로그인 후 복사

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

Bad:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p><p>Don't trust!</p></del>
로그인 후 복사

Good:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p><del><p>Don't trust!</p></del>
로그인 후 복사

嵌入内容

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

Bad:

<img  src="/img/logo.png" alt="HTML最佳实践_html/css_WEB-ITnose" >
로그인 후 복사

Good:

<img alt="HTML Best Practices" src="/img/logo.png">
로그인 후 복사

如果可以就把 Alt 的值空着

Bad:

<img alt="Question mark icon" src="/img/icon/help.png">
로그인 후 복사

Good:

<img alt="" src="/img/icon/help.png">
로그인 후 복사

如果有可能就省略 alt 标签

Bad:

<img alt="CAPTCHA" src="captcha.cgi?id=82174">
로그인 후 복사

Good:

<img  src="captcha.cgi?id=82174" title="CAPTCHA" alt="HTML最佳实践_html/css_WEB-ITnose" >
로그인 후 복사

清空 iframe 元素

Bad:

<iframe src="/ads/default.html">  <p>If your browser support inline frame, ads are displayed here.</p></iframe>
로그인 후 복사

Good:

<iframe src="/ads/default.html"></iframe>
로그인 후 복사

map 元素内容

Bad:

  <a href="#general">General</a>  General |  The root element  The root element |  Sections  Sections
로그인 후 복사

Good:

  
    <a href="#general">General</a>    General |    The root element    The root element |    Sections    Sections
로그인 후 복사

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

Bad:

<video>  <source src="/mov/theme.mp4" type="video/mp4">  <source src="/mov/theme.ogv" type="video/ogg">  ...</video>
로그인 후 복사

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>
로그인 후 복사

表格数据

每行写一个 td

Bad:

<tr>  <td>General</td><td>The root Element</td><td>Sections</td></tr>
로그인 후 복사

Good:

<tr>  <td>General</td>  <td>The root Element</td>  <td>Sections</td></tr>
로그인 후 복사

给表格使用表头 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>
로그인 후 복사

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>
로그인 후 복사

表单

用 label 元素包裹表单

Bad:

<p>Query: <input name="q" type="text"></p>
로그인 후 복사

Good:

<p><label>Query: <input name="q" type="text"></label></p>
로그인 후 복사

尽可能的省略属性

Bad:

<label for="q">Query: <input id="q" name="q" type="text"></label>
로그인 후 복사

Good:

<label>Query: <input name="q" type="text"></label>
로그인 후 복사

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

Bad:

<label>Search keyword: <input name="q" type="text"></label>
로그인 후 복사

Good:

로그인 후 복사

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

Bad:

<input type="submit">
로그인 후 복사

Good:

<input type="submit" value="Search">
로그인 후 복사

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

Bad:

<input name="security-code" pattern="[0-9]{3}" type="text">
로그인 후 복사

Good:

<input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
로그인 후 복사

不要使用占位符属性标签

Bad:

<input name="email" placeholder="Email" type="text">
로그인 후 복사

Good:

<label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
로그인 후 복사

每个 option 元素一行

Bad:

<datalist id="toc">  <option label="General"><option label="The root element"><option label="Sections"></datalist>
로그인 후 복사

Good:

<datalist id="toc">  <option label="General">  <option label="The root element">  <option label="Sections"></datalist>
로그인 후 복사

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

Bad:

<progress value="0.5"> 50%</progress>
로그인 후 복사

Good:

<progress max="100" value="50"> 50%</progress>
로그인 후 복사

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

Bad:

<meter value="0.5"> 512GB used (1024GB total)</meter>
로그인 후 복사

Good:

<meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
로그인 후 복사

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

Bad:

<fieldset>  <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>  ...  <legend>About "General"</legend></fieldset>
로그인 후 복사

Good:

<fieldset>  <legend>About "General"</legend>  <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>  ...</fieldset>
로그인 후 복사

Scripting

省略 js 的类型属性

Bad:

<script type="text/javascript">  ...</script>
로그인 후 복사

Good:

<script>  ...</script>
로그인 후 복사
로그인 후 복사

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

Bad:

<script async src="/js/main.js"></script>
로그인 후 복사

Good:

<script async defer src="/js/main.js"></script>
로그인 후 복사

不要注释 script 标签里的元素

Bad:

<script>/*<![CDATA[*/  .../*]]>*/</script>
로그인 후 복사

Also bad:

<script><!--  ...// --></script>
로그인 후 복사

Good:

<script>  ...</script>
로그인 후 복사
로그인 후 복사

不要动态插入 script 元素标签

Bad:

<script>  var script = document.createElement('script');  script.async = true;  script.src = "//example.com/widget.js";  document.getElementsByTagName('head')[0].appendChild(script);</script>
로그인 후 복사

Good:

<script async defer src="//example.com/widget.js"></script>
로그인 후 복사

缩进始终保持一致

Bad:

<html>          ...          ...
로그인 후 복사

Good:

<html>      ...        ...
로그인 후 복사
로그인 후 복사

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

관련 라벨：
HTML最佳实践
원천：php.cn
이전 기사：起点分享会｜HTML 5制作工具和制作团队（附案例分析）_html/css_WEB-ITnose 다음 기사：2015总结。_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
반응으로 3상태 스위칭을 구현하는 가장 좋은 방법은 무엇입니까? 나는 하나에서 다음으로 상태 변경을 트리거하는 몇 가지 버튼을 React에서 만들고 있습니다. 내 버튼 중 일부에는 열거형으로 표시되는 세 가지 상태가 있습니다....
에서 2024-04-06 13:51:32
0
1
418
전달자 토큰을 처리하는 데 적합한 애플리케이션 아키텍처를 선택하세요. OAuth2.0을 사용하는 API를 사용하고 싶습니다. 즉, 서버가 내 신원을 확인할 수 있도록 모든 후속 요청에 포함해야 하는 액세스 토큰을 얻어야 합니다. 애...
에서 2024-04-04 08:55:57
0
1
353
Vue.js에서 getter 및/또는 계산된 속성을 사용하는 모범 사례 저는 vue.js를 좋아하고 계산된 속성과 VueXgetters도 정말 좋아합니다. 그러나 내가 사용하는 방식이 성능상의 단점을 가져올지 확신할 수 없는 지점에 ...
에서 2024-04-01 18:22:49
0
1
431
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿