成都建設企業網站
2022-07-03 分類： 網站建設
成都建設企業網站正確的HTML5語義探究 如果您仔細計劃HTML文檔的結構，則可以幫助計算機理解內容的含義。正確的語法肯定很重要，但是它基本上只是為解析器，搜索引擎和輔助技術提供了毫無意義的數據。
如果您通過關注語義來改進前端工作流，則可以創建吸引更多訪問者的更高質量的內容。語義學是對意義的研究，從廣義上講，它是邏輯學和語言學的一個分支。
在Web開發領域中，當計算機了解文檔的結構及其內部元素的作用時，我們談論的是語義內容。如果我們要建立正確的語義，我們需要深刻理解結構我們的內容和功能的前端技術。
那么有什么實際的好處呢？正確的語義意味著更可搜索的內容，從而導致更好的搜索引擎排名。我們還增加了可訪問性，因為諸如屏幕閱讀器之類的輔助技術可以更好地解釋我們內容的含義。
有許多不同的前端開發技術，使開發人員可以實現語義頁面結構。這篇文章將為您簡要介紹語義HTML標簽和文檔大綱的概念。
如何使用HTML插槽自動生成目錄
如何使用HTML插槽自動生成目錄
目錄可以極大地改善許多網站的用戶體驗，例如文檔站點或在線...
閱讀更多
語義和非語義HTML標簽
語義的概念并不像它看起來的那么新，它早在HTML5時代就已存在。術語語義網最早是由Tim Berners-Lee爵士在2001年提出的。在“語義網”下，他表示可以由機器處理的數據網。
這首先意味著單獨的HTML元素需要具有其可區分的結構角色。根據W3C的定義， “語義元素向瀏覽器和開發人員都清楚地描述了其含義”。
HTML5之前的語義元素
成都建設企業網站 語義元素也在HTML5之前存在，只是在大多數情況下，開發人員并不知道他們使用的某些標記實際上是語義的。只需考慮或![]()
標簽即可。
對于我們和用戶代理，他們的角色都很清楚：只包含一個表單，就像![]()
包含一個圖像一樣。沒有人會在里面放置桌子或標題并![]()
標記（或至少希望如此）。
的元素，和其相關的標記，如表中的行，表格單元格等也都是HTML5之前存在的語義標簽，但是由于這是大量使用了很多年的基于表的布局，大部分開發商并沒有利用他們在語義方式。這導致網絡犧牲了布局的邏輯結構。
有序列表和無序列表，段落，h1-h6標題標記都是HTML5之前的所有語義元素。
非語義元素
非語義元素沒有任何特殊含義，它們之間的層次關系只是虛幻的。非語義HTML標簽最廣泛使用的示例是和標簽。
如果您的網站曾經感染過可怕的神經病，您就會知道我在說什么。是的 Divs不一定是錯誤的，但是如果我們想編寫可維護的，模塊化的和有意義的HTML代碼，就必須格外注意。
對抗神itis
Smashing Magazine精美地解釋了標簽過度和不合理使用的真正問題是什么
。要點是，如果我們在div內包含div，則似乎外部div將是內部div的父元素，而實際上并非如此。
成都建設企業網站兩者之間沒有關系，就像代碼在內聯級別上以相同方式工作一樣。
但是，如果您仍然對
-s和
-s 依附，不要驚慌，因為您不必完全拋棄它們。它們仍然是僅出于樣式目的以及在其他不得已的情況下對內容進行分組的選擇。HTML5中的文本語義
HTML5引入了許多新的語義元素，使內容的組織變得容易。它們不僅幫助您在整個文檔級別上組織內容（請參閱下一節中的詳細信息），而且還可以在文本塊內將它們作為內聯標簽。
可能最流行的文本級語義標記是和，但它們也早于HTML5才存在。在新的內聯語義元素，我們可以找到例如,用于標記人類可讀的日期時間，并為突出顯示的文本。
請參閱此列表以獲取當前正在使用的所有文本級語義元素。
HTML5中的文檔大綱
文檔大綱是HTML文檔的結構。它顯示了元素如何相互關聯。僅通過映射元素（例如標題，表標題，表單標題以及早期版本的HTML（例如HTML4.01和XHTML）中的其他元素）生成文檔大綱。
在HTML5中，概述算法已通過新的sectioning元素得到增強，即：
對于圍繞特定主題分組的部分
用于完整或獨立的作品，例如博客文章或小部件
用于導航塊
用于補充內容，例如側邊欄。
HTML5中有第五個sectioning元素，但這不是新的，而是標簽。在和標簽也是新的，但他們沒有在文檔中產生新的章節，他們瓜分了里面部分的內容。這意味著每個sectioning元素（body，article，section，nav和aside）都可以具有自己的header和footer。
成都建設企業網站語義結構化內容的提示
如果要創建結構合理的文檔大綱，則需要注意以下規則：
1.最外面的section元素始終是標簽。
2. HTML5中的部分可以嵌套。
3.每個部分都有自己的標題層次結構。他們每個人（甚至是最里面的嵌套部分）都可以有一個h1標簽。
4.雖然文檔大綱主要由5個分節元素定義，但每個節也需要適當的標題。
5.始終是定義給定節標題的第一個標題元素（讓它為h1或較低等級的標題標簽）。同一部分中的以下標題標記需要與此相關。（如果第一個標題是sectioning元素內的h4，則不要在其后放置h4。）
6.用和定義的部分不屬于HTML文檔的主要輪廓，通常它們最初并不是由輔助技術來呈現的。
7.每個部分（正文，部分，文章，旁邊，導航）可以有自己的和標簽，用于定義頁眉（例如徽標，作者的姓名，日期，元信息等）和頁腳（版權，注釋，鏈接等）。
示例：語義大綱
讓我們看一個語義文檔大綱的示例，以更清楚地了解其工作方式。我們的示例代碼將導致以下文檔結構：
文檔大綱示例
這是帶有適當語義部分的代碼：
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
Welcome On Our Website!
Here is our logo and slogan.
Choose Your Interest
Menu 1
Menu 2
Menu 3
Title of Article
Subtitle of Article
First Logical Part (e.g. "Theory")
Paragraph 1 in first section
Some Other Subheading in First Section
Paragraph 2 in first section
Second Logical Part (e.g. "Practice")
Paragraph 1 in second section
Paragraph 2 in second section
Author Bio
Paragraph in Article's Footer
Get To Know Us Better
Popular Posts
...
Partners
...
Testimonials
...
Copyright
Social Media Links
如果您看一下上面的代碼片段，您會發現頁眉和頁腳是可選的，我們可以自由選擇是否要使用它們，但是強烈建議始終為每個部分包括一個標題，否則文檔大綱中的“無標題”部分。
幸運的是，互聯網上有很多很棒的工具可以讓我們檢查文檔的大綱，這一次我們將使用html5.org 的Outliner工具。
如果我們將代碼段插入到大綱顯示器提供的表單中，然后單擊“概述此！”。按鈕，我們將看到以下結果：
示例代碼大綱
這是我們的示例代碼的文檔大綱，這是搜索引擎看到它的方式，屏幕閱讀器將它們提供給視障用戶。它是語義性的，結構良好的，并且其中沒有討厭的“無標題”部分。
如果要查看“大綱視圖”中“無標題”部分的外觀，只需刪除示例代碼中的某些標題標簽即可。
網絡語義學的其他方面
語義HTML標簽和文檔大綱只是Web語義的一小部分。借助WAI-ARIA可訪問性協議以及可與RDFa協議，微數據或JSON-LD標記一起使用的結構化數據，可以使網頁的內容變得更加有意義。
當前題目：成都建設企業網站
文章轉載：http://www.js-pz168.com/news40/174140.html
成都網站建設公司_創新互聯，為您提供網站營銷、域名注冊、企業建站、手機網站建設、面包屑導航、網頁設計公司
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 老謝:常用的100種網站推廣技巧 2022-07-03
- 域名解析類型怎么選擇 2022-07-03
- 網站SEO優化善用大數據效果更出彩 2022-07-03
- 網站建設六大誤區，看你中了幾條？ 2022-07-03
- 網站推廣自然排名相對穩定之核心在“內容價值” 2022-07-03
- 成都網站優化，文章目的非常值得關注 2022-07-03
- 李宇昌:關鍵詞如何布局 2022-07-03
- 如何增加網頁設計美感要多實踐多積累 2022-07-03
- 網站優化如何找內容源 2022-07-03
- 成都seo培訓學校 2022-07-03
- 成都網站制作，如何布局展示？ 2022-07-03
- 網站建設要做哪些前期準備工作 2022-07-03
- 數據中心網絡擁塞問題 2022-07-03
- 網站優化中影響排名的是什么 2022-07-03
- 網站優化的同時需要優化結構 2022-07-03
- 企業如何做好網站內容優化，我們需要看看成功的經驗! 2022-07-03
- 助你提高出單率的九件事 2022-07-03
- 談談互聯網運營人必備意識 2022-07-03
- 怎么建網站詳細過程 2022-07-03