新手網(wǎng)站百度seo規(guī)則
文章目錄
- html基本結(jié)構(gòu)
- 屬性
- 語(yǔ)義化
- 為什么要語(yǔ)義化
- 示例
- head中屬性
- 樣式
- 一些概念
- 塊級(jí)元素與行級(jí)元素
- 空白折疊
- html編程
- 沒(méi)有css的html顯示邏輯
html基本結(jié)構(gòu)
html基本單元就是元素，每個(gè)元素有標(biāo)記和屬性，如：
<a href="...">www</a>
屬性
- 局部屬性
部分標(biāo)簽特有的屬性 - 全局屬性
每個(gè)標(biāo)簽都具備的屬性
語(yǔ)義化
- 每個(gè)html標(biāo)簽都具有具體的含義
- 所有標(biāo)簽與展示效果無(wú)關(guān)，由css負(fù)責(zé)顯示
為什么要語(yǔ)義化
- 為了搜索引擎優(yōu)化(SEO)
搜索引擎可以更好的理解網(wǎng)頁(yè)內(nèi)容 - 為了讓瀏覽器更好的理解網(wǎng)頁(yè)
如一些瀏覽器功能：閱讀模式、語(yǔ)音模式等；這些和顯示無(wú)關(guān)，只需要專注html標(biāo)簽即可。
示例
<!DOCTYPE HTML> <!-- HTML5標(biāo)準(zhǔn)網(wǎng)頁(yè)聲明，DOCTYPE -- 文檔類型，DocType -->
<HTML lang="zh-CN"> <!-- HTML為根標(biāo)簽，代表整個(gè)網(wǎng)頁(yè) --><head> <!-- head為頭部標(biāo)簽，一般用來(lái)描述文檔的各種屬性和信息， 包括標(biāo)題等--><meta charset="UTF-8"> <!-- 設(shè)置字符集為utf-8 --><title>my HTML</title> <!-- 設(shè)置瀏覽器的標(biāo)題 -->
</head><!-- 網(wǎng)頁(yè)所有的內(nèi)容都寫(xiě)在body標(biāo)簽內(nèi) -->
<body> 我的第一個(gè)HTML網(wǎng)頁(yè)
</body></HTML>
整體的html有兩個(gè)部分，第一個(gè)部分是包含關(guān)于HTML文檔的信息，可以包含一些輔助性標(biāo)簽。如 <title></title> ，<link />、<meta /> ，<style></style> ， <script></script> 等，但是瀏覽器除了會(huì)在標(biāo)題欄顯示 <title> 元素的內(nèi)容外，不會(huì)向用戶顯示 head 元素內(nèi)的其他任何內(nèi)容。
第二個(gè)部分就是HTML文檔的主體部分，在這個(gè)標(biāo)簽中可以包含 <p><h1><br> 等眾多標(biāo)簽，<body> 標(biāo)簽出現(xiàn)在 </head> 標(biāo)簽之后，且必須在閉標(biāo)簽 </HTML> 之前閉合。
head中屬性
<meta> 標(biāo)簽提供了 HTML 文檔的元數(shù)據(jù)，定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)。位于文檔的head部分，不包含任何內(nèi)容，不會(huì)顯示在客戶端，但是會(huì)被瀏覽器解析。共有四個(gè)屬性，它們分別是scheme屬性、 http-equiv 屬性和 name 屬性，在 HTML5 中，有一個(gè)新的 charset 屬性，它使字符集的定義更加容易，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。
-
charset 指定網(wǎng)頁(yè)的編碼方式
<meta charset="UTF-8"> -
scheme 在 HTML5 不支持
-
name 屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為 content，content 中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。語(yǔ)法格式為
<meta name="參數(shù)" content="具體的參數(shù)值">，如：<!-- keywords，關(guān)鍵字，告訴搜索引擎該網(wǎng)頁(yè)的關(guān)鍵字。 --> <meta name="keywords" content="關(guān)鍵字，可以有多個(gè)關(guān)鍵字" /><!-- description，網(wǎng)站內(nèi)容的描述，用于告訴搜索引擎你網(wǎng)站的主要內(nèi)容，有助于 SEO 搜索引擎優(yōu)化。 --> <meta name="description" content="對(duì)網(wǎng)站內(nèi)容的描述" /><!-- viewport：窗口視圖。 --> <!-- width：設(shè)置 layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串"width-device"。 --> <!-- initial-scale：設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。 --> <!-- minimum-scale：允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。 --> <!-- maximum-scale：允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。 --> <!-- height：設(shè)置 layout viewport 的高度，這個(gè)屬性對(duì)我們并不重要，很少使用 --> <!-- user-scalable：是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes 代表允許。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- author：標(biāo)注網(wǎng)頁(yè)的作者。 --> <meta name="author" content="網(wǎng)頁(yè)的作者"><!-- generator：網(wǎng)頁(yè)制作軟件。 --> <meta name="generator" content="制作軟件"><!-- copyright：說(shuō)明網(wǎng)站版權(quán)信息。 --> <meta name="copyright" content="版權(quán)"> -
http-equiv
http-equiv 相當(dāng)于 http 的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容。<!-- Expires：期限，可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新傳輸。 --> <meta http-equiv="expires" content="Fri,12 Jan 2022 18:18:18 GMT"><!-- Pragma：cache 模式，是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容，設(shè)定后一旦離開(kāi)網(wǎng)頁(yè)就無(wú)法從 cache 中再調(diào)出。 --> <!-- cache模式：允許脫機(jī)瀏覽。 --> <!-- no-cache模式：無(wú)法脫機(jī)瀏覽。 --> <meta http-equiv="peragma" content="no-cache" /> <!-- 當(dāng)前無(wú)法脫機(jī)瀏覽 --> <!-- Refresh：刷新，自動(dòng)刷新并指向新頁(yè)面。 --> <meta http-equiv="refresh" content="時(shí)間（秒為單位）;URL"><!-- Window-Target：顯示窗口的設(shè)定。 --> <!-- Window-Target 有四個(gè)屬性值： --> <!-- _top：表示頁(yè)面以當(dāng)前整個(gè)窗口顯示，可以防止自己的頁(yè)面被其他網(wǎng)頁(yè)嵌套 --> <!-- _blank： 表示頁(yè)面以新打開(kāi)的窗口顯示 --> <!-- _parent：表示頁(yè)面以父容器或窗口顯示 --> <!-- _self：表示頁(yè)面以當(dāng)前容器或窗口顯示 --> <meta http-equiv="window-target" content="_top">
樣式
樣式有三種方式：
- 內(nèi)聯(lián)樣式
<p style="border: red 12px; margin-top: 20px; background-color: brown;">內(nèi)聯(lián)樣式</ p> - 內(nèi)部樣式表
<head><style>p {color : red;}</ style></ head> - 外部應(yīng)用
<link rel="stylesheet" type="text/css" href="http://192.168.232.220:8881/style.css">
一些概念
塊級(jí)元素與行級(jí)元素
- 塊級(jí)元素
在顯示時(shí)會(huì)單獨(dú)占一行的元素，如h、p - 行級(jí)元素
在顯示時(shí)不會(huì)單獨(dú)占一行的元素，如span
空白折疊
在源代碼中的連續(xù)空白字符(空格、換行、制表符)，在頁(yè)面顯示時(shí)，會(huì)被折疊為一個(gè)空格，不論標(biāo)簽內(nèi)外
html編程
html編程分為兩個(gè)層次，一個(gè)是html代碼，他表征整個(gè)html功能，顯示內(nèi)容；一個(gè)是css，他表征整個(gè)html的顯示方式。
因此，本質(zhì)上，對(duì)于一個(gè)html文件，他的本質(zhì)就是最基本的那些元素，如p、a、img...，而div、header...這些的存在有兩方面功能，一種是更好的去進(jìn)行編寫(xiě)css；另外一個(gè)方面是提供更好的語(yǔ)義。
沒(méi)有css的html顯示邏輯
沒(méi)有css顯示方式的編寫(xiě)，整個(gè)html一般就是兩種，一種是塊級(jí)元素，一種是行級(jí)元素，也就是說(shuō)整個(gè)html元素會(huì)從上到下一個(gè)一個(gè)的進(jìn)行顯示，只不過(guò)有的元素會(huì)換行，而有的元素不會(huì)換行