blob: 54cb20f0b9ec11b3b9495e9802b6f985c527835f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: Semantics（语义）
slug: Glossary/语义
tags:
- 编程
- 语义
- 语义化
translation_of: Glossary/Semantics
---
<p><span class="seoSummary">在编程中，<strong>语义</strong>指的是一段代码的含义 — 例如 "运行这行 JavaScript 代码会产生怎样的影响?", 或者 "这个 HTML 的元素有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么?"。）</span></p>
<h2 id="JavaScript_中的语义">JavaScript 中的语义</h2>
<p>JavaScript 中，考虑一个函数，该函数接受一个字符串参数，然后返回一个以该字符串为文本内容的{{htmlelement("li")}}元素。如果该函数调用是<code>build('Peach')</code>，你会需要去看代码才能理解该函数做了什么吗，如果是<code>createLiWithContent('Peach')</code>呢？</p>
<h2 id="CSS_中的语义">CSS 中的语义</h2>
<p>CSS 中，考虑给一个列表设置样式，<code>li</code> 元素代表不同类型的水果。通过 <code>div > ul > li</code>，你能知道 DOM 的那一部分会被选择中吗？但如果是 <code>.fruits__item</code> 呢？</p>
<h2 id="HTML_中的语义">HTML 中的语义</h2>
<p>HTML 中，例如，{{htmlelement("h1")}} 元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题功能“的角色 (或含义) 。</p>
<pre class="brush: html"><h1>This is a top level heading</h1></pre>
<p>默认情况下，绝大多数浏览器的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">user agent stylesheet</a> 将会赋予一个 {{htmlelement("h1")}} 元素很大的字号尺寸从而使它看上去更像是一个标题（虽然你可以把它格式化为任何你想要的样式），但是更重要的是它的语义会被在很多地方以不同的方式被使用到， 例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序（参见{{ glossary ("SEO")}}），而且屏幕阅读器会使用它来帮助视障用户更好的使用这个页面。</p>
<p>另一方面，你可以通过样式（CSS）来让任何的元素<em>看上去</em>像是一个最高级别的标题，就像下面所展示的方法一样：</p>
<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre>
<p>这将会把这个元素渲染得像是一个最高级别的标题，但是它的值没有对应到最“最高级别标题”这一语义，所以在此之上，它不会获得更多额外的描述（只是一个普通“span”元素而不是“最高级别标题”这一语义）。所以在恰当的需求下使用恰当的HTML元素是一个不错的主意。</p>
<p>HTML should be coded to represent the <em>data</em> that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of <a href="/zh-CN/docs/Web/CSS">CSS</a>.</p>
<p>Some of the benefits from writing semantic markup are as follows:</p>
<ul>
<li>Search engines will consider its contents as important keywords to influence the page's search rankings (see {{glossary("SEO")}})</li>
<li>Screen readers can use it as a signpost to help visually impaired users navigate a page</li>
<li>Finding blocks of meaningful code is significantly easier than searching though endless <code>div</code>s with or without semantic or namespaced classes</li>
<li>Suggests to the developer the type of data that will be populated</li>
<li>Semantic naming mirrors proper custom element/component naming</li>
</ul>
<p>When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.</p>
<h2 id="语义化元素">语义化元素</h2>
<p>这是一些语义化的元（<a href="http://www.w3schools.com/html/html5_semantic_elements.asp" title="w3schools">source</a>）。</p>
<ul>
<li>{{htmlelement("article")}}</li>
<li>{{htmlelement("aside")}}</li>
<li>{{htmlelement("details")}}</li>
<li>{{htmlelement("figcaption")}}</li>
<li>{{htmlelement("figure")}}</li>
<li>{{htmlelement("footer")}}</li>
<li>{{htmlelement("header")}}</li>
<li>{{htmlelement("main")}}</li>
<li>{{htmlelement("mark")}}</li>
<li>{{htmlelement("nav")}}</li>
<li>{{htmlelement("section")}}</li>
<li>{{htmlelement("summary")}}</li>
<li>{{htmlelement("time")}}</li>
</ul>
<h2 id="了解更多">了解更多</h2>
<ul>
<li><a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">HTML element reference</a> on MDN</li>
<li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">Using HTML sections and outlines</a> on MDN</li>
<li><a href="http://www.w3schools.com/html/html5_semantic_elements.asp">HTML5 Semantic Elements</a> on w3schools</li>
<li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary">MDN Web Docs Glossary</a>
<ul>
<li>{{Glossary("SEO")}}</li>
</ul>
</li>
<li>Some of semantic elements in HTML
<ul>
<li>{{htmlelement("article")}}</li>
<li>{{htmlelement("aside")}}</li>
<li>{{htmlelement("details")}}</li>
<li>{{htmlelement("figcaption")}}</li>
<li>{{htmlelement("figure")}}</li>
<li>{{htmlelement("footer")}}</li>
<li>{{htmlelement("header")}}</li>
<li>{{htmlelement("main")}}</li>
<li>{{htmlelement("mark")}}</li>
<li>{{htmlelement("nav")}}</li>
<li>{{htmlelement("section")}}</li>
<li>{{htmlelement("summary")}}</li>
<li>{{htmlelement("time")}}</li>
</ul>
</li>
</ul>
|
