成都建設(shè)企業(yè)網(wǎng)站
2022-07-03 分類： 網(wǎng)站建設(shè)
成都建設(shè)企業(yè)網(wǎng)站正確的HTML5語(yǔ)義探究 如果您仔細(xì)計(jì)劃HTML文檔的結(jié)構(gòu)，則可以幫助計(jì)算機(jī)理解內(nèi)容的含義。正確的語(yǔ)法肯定很重要，但是它基本上只是為解析器，搜索引擎和輔助技術(shù)提供了毫無(wú)意義的數(shù)據(jù)。
如果您通過(guò)關(guān)注語(yǔ)義來(lái)改進(jìn)前端工作流，則可以創(chuàng)建吸引更多訪問(wèn)者的更高質(zhì)量的內(nèi)容。語(yǔ)義學(xué)是對(duì)意義的研究，從廣義上講，它是邏輯學(xué)和語(yǔ)言學(xué)的一個(gè)分支。
在Web開發(fā)領(lǐng)域中，當(dāng)計(jì)算機(jī)了解文檔的結(jié)構(gòu)及其內(nèi)部元素的作用時(shí)，我們談?wù)摰氖钦Z(yǔ)義內(nèi)容。如果我們要建立正確的語(yǔ)義，我們需要深刻理解結(jié)構(gòu)我們的內(nèi)容和功能的前端技術(shù)。
那么有什么實(shí)際的好處呢？正確的語(yǔ)義意味著更可搜索的內(nèi)容，從而導(dǎo)致更好的搜索引擎排名。我們還增加了可訪問(wèn)性，因?yàn)橹T如屏幕閱讀器之類的輔助技術(shù)可以更好地解釋我們內(nèi)容的含義。
有許多不同的前端開發(fā)技術(shù)，使開發(fā)人員可以實(shí)現(xiàn)語(yǔ)義頁(yè)面結(jié)構(gòu)。這篇文章將為您簡(jiǎn)要介紹語(yǔ)義HTML標(biāo)簽和文檔大綱的概念。
如何使用HTML插槽自動(dòng)生成目錄
如何使用HTML插槽自動(dòng)生成目錄
目錄可以極大地改善許多網(wǎng)站的用戶體驗(yàn)，例如文檔站點(diǎn)或在線...
閱讀更多
語(yǔ)義和非語(yǔ)義HTML標(biāo)簽
語(yǔ)義的概念并不像它看起來(lái)的那么新，它早在HTML5時(shí)代就已存在。術(shù)語(yǔ)語(yǔ)義網(wǎng)最早是由Tim Berners-Lee爵士在2001年提出的。在“語(yǔ)義網(wǎng)”下，他表示可以由機(jī)器處理的數(shù)據(jù)網(wǎng)。
這首先意味著單獨(dú)的HTML元素需要具有其可區(qū)分的結(jié)構(gòu)角色。根據(jù)W3C的定義， “語(yǔ)義元素向?yàn)g覽器和開發(fā)人員都清楚地描述了其含義”。
HTML5之前的語(yǔ)義元素
成都建設(shè)企業(yè)網(wǎng)站 語(yǔ)義元素也在HTML5之前存在，只是在大多數(shù)情況下，開發(fā)人員并不知道他們使用的某些標(biāo)記實(shí)際上是語(yǔ)義的。只需考慮或![]()
標(biāo)簽即可。
對(duì)于我們和用戶代理，他們的角色都很清楚：只包含一個(gè)表單，就像![]()
包含一個(gè)圖像一樣。沒有人會(huì)在里面放置桌子或標(biāo)題并![]()
標(biāo)記（或至少希望如此）。
的元素，和其相關(guān)的標(biāo)記，如表中的行，表格單元格等也都是HTML5之前存在的語(yǔ)義標(biāo)簽，但是由于這是大量使用了很多年的基于表的布局，大部分開發(fā)商并沒有利用他們?cè)谡Z(yǔ)義方式。這導(dǎo)致網(wǎng)絡(luò)犧牲了布局的邏輯結(jié)構(gòu)。
有序列表和無(wú)序列表，段落，h1-h6標(biāo)題標(biāo)記都是HTML5之前的所有語(yǔ)義元素。
非語(yǔ)義元素
非語(yǔ)義元素沒有任何特殊含義，它們之間的層次關(guān)系只是虛幻的。非語(yǔ)義HTML標(biāo)簽最廣泛使用的示例是和標(biāo)簽。
如果您的網(wǎng)站曾經(jīng)感染過(guò)可怕的神經(jīng)病，您就會(huì)知道我在說(shuō)什么。是的 Divs不一定是錯(cuò)誤的，但是如果我們想編寫可維護(hù)的，模塊化的和有意義的HTML代碼，就必須格外注意。
對(duì)抗神itis
Smashing Magazine精美地解釋了標(biāo)簽過(guò)度和不合理使用的真正問(wèn)題是什么
。要點(diǎn)是，如果我們?cè)赿iv內(nèi)包含div，則似乎外部div將是內(nèi)部div的父元素，而實(shí)際上并非如此。
成都建設(shè)企業(yè)網(wǎng)站兩者之間沒有關(guān)系，就像代碼在內(nèi)聯(lián)級(jí)別上以相同方式工作一樣。
但是，如果您仍然對(duì)
-s和
-s 依附，不要驚慌，因?yàn)槟槐赝耆珤仐壦鼈?。它們?nèi)匀皇莾H出于樣式目的以及在其他不得已的情況下對(duì)內(nèi)容進(jìn)行分組的選擇。HTML5中的文本語(yǔ)義
HTML5引入了許多新的語(yǔ)義元素，使內(nèi)容的組織變得容易。它們不僅幫助您在整個(gè)文檔級(jí)別上組織內(nèi)容（請(qǐng)參閱下一節(jié)中的詳細(xì)信息），而且還可以在文本塊內(nèi)將它們作為內(nèi)聯(lián)標(biāo)簽。
可能最流行的文本級(jí)語(yǔ)義標(biāo)記是和，但它們也早于HTML5才存在。在新的內(nèi)聯(lián)語(yǔ)義元素，我們可以找到例如,用于標(biāo)記人類可讀的日期時(shí)間，并為突出顯示的文本。
請(qǐng)參閱此列表以獲取當(dāng)前正在使用的所有文本級(jí)語(yǔ)義元素。
HTML5中的文檔大綱
文檔大綱是HTML文檔的結(jié)構(gòu)。它顯示了元素如何相互關(guān)聯(lián)。僅通過(guò)映射元素（例如標(biāo)題，表標(biāo)題，表單標(biāo)題以及早期版本的HTML（例如HTML4.01和XHTML）中的其他元素）生成文檔大綱。
在HTML5中，概述算法已通過(guò)新的sectioning元素得到增強(qiáng)，即：
對(duì)于圍繞特定主題分組的部分
用于完整或獨(dú)立的作品，例如博客文章或小部件
用于導(dǎo)航塊
用于補(bǔ)充內(nèi)容，例如側(cè)邊欄。
HTML5中有第五個(gè)sectioning元素，但這不是新的，而是標(biāo)簽。在和標(biāo)簽也是新的，但他們沒有在文檔中產(chǎn)生新的章節(jié)，他們瓜分了里面部分的內(nèi)容。這意味著每個(gè)sectioning元素（body，article，section，nav和aside）都可以具有自己的header和footer。
成都建設(shè)企業(yè)網(wǎng)站語(yǔ)義結(jié)構(gòu)化內(nèi)容的提示
如果要?jiǎng)?chuàng)建結(jié)構(gòu)合理的文檔大綱，則需要注意以下規(guī)則：
1.最外面的section元素始終是標(biāo)簽。
2. HTML5中的部分可以嵌套。
3.每個(gè)部分都有自己的標(biāo)題層次結(jié)構(gòu)。他們每個(gè)人（甚至是最里面的嵌套部分）都可以有一個(gè)h1標(biāo)簽。
4.雖然文檔大綱主要由5個(gè)分節(jié)元素定義，但每個(gè)節(jié)也需要適當(dāng)?shù)臉?biāo)題。
5.始終是定義給定節(jié)標(biāo)題的第一個(gè)標(biāo)題元素（讓它為h1或較低等級(jí)的標(biāo)題標(biāo)簽）。同一部分中的以下標(biāo)題標(biāo)記需要與此相關(guān)。（如果第一個(gè)標(biāo)題是sectioning元素內(nèi)的h4，則不要在其后放置h4。）
6.用和定義的部分不屬于HTML文檔的主要輪廓，通常它們最初并不是由輔助技術(shù)來(lái)呈現(xiàn)的。
7.每個(gè)部分（正文，部分，文章，旁邊，導(dǎo)航）可以有自己的和標(biāo)簽，用于定義頁(yè)眉（例如徽標(biāo)，作者的姓名，日期，元信息等）和頁(yè)腳（版權(quán)，注釋，鏈接等）。
示例：語(yǔ)義大綱
讓我們看一個(gè)語(yǔ)義文檔大綱的示例，以更清楚地了解其工作方式。我們的示例代碼將導(dǎo)致以下文檔結(jié)構(gòu)：
文檔大綱示例
這是帶有適當(dāng)語(yǔ)義部分的代碼：
1個(gè)
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
如果您看一下上面的代碼片段，您會(huì)發(fā)現(xiàn)頁(yè)眉和頁(yè)腳是可選的，我們可以自由選擇是否要使用它們，但是強(qiáng)烈建議始終為每個(gè)部分包括一個(gè)標(biāo)題，否則文檔大綱中的“無(wú)標(biāo)題”部分。
幸運(yùn)的是，互聯(lián)網(wǎng)上有很多很棒的工具可以讓我們檢查文檔的大綱，這一次我們將使用html5.org 的Outliner工具。
如果我們將代碼段插入到大綱顯示器提供的表單中，然后單擊“概述此！”。按鈕，我們將看到以下結(jié)果：
示例代碼大綱
這是我們的示例代碼的文檔大綱，這是搜索引擎看到它的方式，屏幕閱讀器將它們提供給視障用戶。它是語(yǔ)義性的，結(jié)構(gòu)良好的，并且其中沒有討厭的“無(wú)標(biāo)題”部分。
如果要查看“大綱視圖”中“無(wú)標(biāo)題”部分的外觀，只需刪除示例代碼中的某些標(biāo)題標(biāo)簽即可。
網(wǎng)絡(luò)語(yǔ)義學(xué)的其他方面
語(yǔ)義HTML標(biāo)簽和文檔大綱只是Web語(yǔ)義的一小部分。借助WAI-ARIA可訪問(wèn)性協(xié)議以及可與RDFa協(xié)議，微數(shù)據(jù)或JSON-LD標(biāo)記一起使用的結(jié)構(gòu)化數(shù)據(jù)，可以使網(wǎng)頁(yè)的內(nèi)容變得更加有意義。
標(biāo)題名稱：成都建設(shè)企業(yè)網(wǎng)站
分享路徑：http://www.rwnh.cn/news/174140.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、Google、搜索引擎優(yōu)化、網(wǎng)站策劃
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 老謝:常用的100種網(wǎng)站推廣技巧 2022-07-03
- 域名解析類型怎么選擇 2022-07-03
- 網(wǎng)站SEO優(yōu)化善用大數(shù)據(jù)效果更出彩 2022-07-03
- 網(wǎng)站建設(shè)六大誤區(qū)，看你中了幾條？ 2022-07-03
- 網(wǎng)站推廣自然排名相對(duì)穩(wěn)定之核心在“內(nèi)容價(jià)值” 2022-07-03
- 成都網(wǎng)站優(yōu)化，文章目的非常值得關(guān)注 2022-07-03
- 李宇昌:關(guān)鍵詞如何布局 2022-07-03
- 如何增加網(wǎng)頁(yè)設(shè)計(jì)美感要多實(shí)踐多積累 2022-07-03
- 網(wǎng)站優(yōu)化如何找內(nèi)容源 2022-07-03
- 成都seo培訓(xùn)學(xué)校 2022-07-03
- 成都網(wǎng)站制作，如何布局展示？ 2022-07-03
- 網(wǎng)站建設(shè)要做哪些前期準(zhǔn)備工作 2022-07-03
- 數(shù)據(jù)中心網(wǎng)絡(luò)擁塞問(wèn)題 2022-07-03
- 網(wǎng)站優(yōu)化中影響排名的是什么 2022-07-03
- 網(wǎng)站優(yōu)化的同時(shí)需要優(yōu)化結(jié)構(gòu) 2022-07-03
- 企業(yè)如何做好網(wǎng)站內(nèi)容優(yōu)化，我們需要看看成功的經(jīng)驗(yàn)! 2022-07-03
- 助你提高出單率的九件事 2022-07-03
- 談?wù)劵ヂ?lián)網(wǎng)運(yùn)營(yíng)人必備意識(shí) 2022-07-03
- 怎么建網(wǎng)站詳細(xì)過(guò)程 2022-07-03