HTML簡介，結構，標籤以及標籤語義

宅男呀發表於2020-12-23
HTML

HTML簡介，結構，標籤以及標籤語義

1.HTML基本結構

1.1文件宣告

  • 宣告幫助瀏覽器正確地顯示網頁 ;
  • 定義這個文件的型別，瀏覽器會先識別這句話，會按照這個型別去解析這個文件；
  • HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面 ；
  • 一般高版本相容低版本，所以在工作中我們預設寫高版本就可以了(html5文件宣告)
  • 文件宣告不區分大小寫；
  • 文件宣告必須放在第一行(因為瀏覽器是從上到下解析的)
  • 必須寫文件宣告，如果不寫就會發生怪異事件；
  • 文件宣告不是一個標籤，它只是一個宣告；
HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html根元素

  • 此元素告訴瀏覽器其自身是一個html文件
  • 是由開始標籤和結束標籤組成的，HTML檔案裡面所有的內容都會放在這個元素內

語言型別 lang="en"

  • 因為我們寫的都是中文的，所以可以把這句話刪掉

head頭部元素

  • head 元素是所有頭部元素的容器 , head內的元素可包含指令碼，指示瀏覽器在何處可以找到樣式表，提供元資訊，等等。
  • 以下標籤都可以新增到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>

image.png

title 標題

  • title 標籤定義文件的標題。
  • html文件名稱一個頁面只有一個title元素
  • title元素裡面的內容是放文字，一般顯示在瀏覽器的頁卡位
  • title 元素能夠定義瀏覽器工具欄中的標題
  • 提供頁面被新增到收藏夾時顯示的標題
  • 顯示在搜尋引擎結果中的頁面標題

base元素

  • base 標籤為頁面上的所有連結規定預設地址或預設目標（target）：
    <head>
<base href="http://www.ls_zhainaya.cn/images/" />
<base target="_blank" />
</head>

link元素

  • link 引入外部CSS和網頁標題前面的小圖示（一般放在head頭部內）
    <link rel="stylesheet" type="text/css" href="index.css" />
<link rel="icon" href="icon.png" type="image/x-icon" />
    • rel 不能缺少的 icon 圖示
    • href=”” 圖示的地址或者路徑
    • type 型別 “image/x-icon” 圖示 可以省略，但是不建議省略

meta 元資訊

  • meta 規定了html文件的元資訊；
  • charset 文件編碼 UTF-8 國際 gb2312 國標
  • name=”keywords” content=”關鍵字的內容”
  • name=”description” content=”描述網站的一句話”

script 元素

  • Script 標籤用於定義客戶端指令碼，比如 JavaScript

style元素

  • style 標籤用於為 HTML 文件定義樣式資訊，您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

body元素

  • 定義整個文件的主體部分，所有展示給使用者的內容，都要在這個元素內
  • body中常用的html元素，文字內容，音訊，視訊，圖片，表單等

2.HTML常用的標籤

HTML 超連結 - a標籤

  • 超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影像，您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。
  • 當把滑鼠指標移動到網頁中的某個連結上時，箭頭會變為一隻小手
  • 我們通過使用 <a>標籤在 HTML 中建立連結
  • 超連結a標籤的標籤屬性：
    • href=“要跳轉的連結地址” , 禁止a標籤的連結跳轉的行為href=“javascript:void(0)” 、 href=“javascript:;”
    • target="_blank" 在新視窗開啟，當前的視窗還在
    • target="_self" 在當前視窗開啟，當前視窗被覆蓋
<a href="https://www.baidu.com" target="_blank">百度首頁</a>

HTML 插入圖片 - img標籤

  • 源屬性 src: 影像的 URL 地址;
  • 替換文字屬性 alt: 該屬性用來為影像定義一串預備的可替換的文字。替換文字屬性的值是使用者定義的;在瀏覽器無法載入影像時，替換文字屬性告訴讀者她們失去的資訊。此時，瀏覽器將顯示這個替代性的文字而不是影像。為頁面上的影像都加上替換文字屬性是個好習慣，這樣有助於更好的顯示資訊，並且對於那些使用純文字瀏覽器的人來說是非常有用的;
  • 滑鼠移上屬性 title: 滑鼠移上的圖片文字描述說明
<img src="logo.jpg" alt="zhainan" title="zhainan"  width="100"  height="100" >

HTML 標題 - h1 ~ h6 標籤
瀏覽器會自動地在標題的前後新增空行 ；預設情況下，HTML 會自動地在塊級元素前後新增一個額外的空行，比如段落、標題元素前後

  • 標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的
  • <h1>定義最大的標題；
  • <h6>定義最小的標題；
  • 標題很重要
    • 請確保將 HTML heading 標籤只用於標題。不要僅僅是為了產生粗體或大號的文字而使用標題；
    • 搜尋引擎使用標題為您的網頁的結構和內容編制索引；
    • 因為使用者可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文件結構是很重要的。
    • 應該將 h1 用作主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推；

HTML 段落 - P標籤

  • 可以把 HTML 文件分割為若干段落；
  • 瀏覽器會自動地在段落的前後新增空行（<p>是塊級元素）
<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 區塊 - div 和 span標籤
HTML <div>元素

  • HTML <div>元素是塊級元素，它是可用於組合其他 HTML 元素的容器。
  • <div>元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。
  • 如果與 CSS 一同使用，<div>元素可用於對大的內容塊設定樣式屬性。
  • <div>元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文件佈局不是表格的正確用法。<table> 元素的作用是顯示錶格化的資料

HTML <span>元素

  • HTML <span> 元素是內聯元素，可用作文字的容器。
  • <span> 元素也沒有特定的含義。
  • 當與 CSS 一同使用時，<span> 元素可用於為部分文字設定樣式屬性。

image.png

HTML三大列表 - ul li、ol li、dl dt dd
無序列表

  • 無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記;
  • 無序列表始於 <ul> 標籤。每個列表項始於 <li>;
  • 列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等;

有序列表

  • 有序列表也是一列專案，列表專案使用數字進行標記;
  • 有序列表始於<ol>標籤。每個列表項始於 <li>標籤;
  • 列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等;

定義列表

  • 自定義列表不僅僅是一列專案，而是專案及其註釋的組合；
  • 自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始；
  • 定義列表的列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等；

HTML 文字格式化標籤image.png

HTML 巢狀網頁 - Iframe
iframe語法 ： 該URL指向不同的網頁

<iframe src="URL"></iframe>

iframe設定高度與寬度

  • height 和 width 屬性用來定義iframe標籤的高度與寬度
  • 屬性預設以畫素為單位, 但是你可以指定其按比例顯示 (如：”80%”)
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe移除邊框

  • frameborder 屬性用於定義iframe表示是否顯示邊框。
  • 設定屬性值為 “0” 移除iframe的邊框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe來顯示目標連結頁面

  • iframe可以顯示一個目標連結的頁面
  • 目標連結的屬性必須使用iframe的屬性，如下例項:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.baidu.cn" target="iframe_a">baidu</a></p>

HTML 字元實體
image.png

3.HTML標籤語義化

**含義：**合理的標籤做合理的事情

為什麼要遵循標籤語義化：

  • 利於SEO優化（也就是搜尋引擎的抓取，搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重）；
  • 在樣式丟失的時候，還是可以比較好的呈現結構；
  • 更好的支援各種終端，例如無障礙閱讀和有聲小說等；
  • 利於團隊開發和維護，W3C給我們定了一個標準，那麼團隊中都遵循這個標準，那麼程式碼的差異就會縮小，在開發和維護的時候就可以提高效率；

日常工作中怎樣遵循標籤語義化：

  • 儘量減少使用無意義標籤，例如span和div；
  • 儘量不使用標籤本身的css屬性，例如b、font、s等標籤，如果需要這些樣式，那麼使用css樣式來進行新增；
  • 在需要強調的部分，使用strong、em，但是樣式儘量使用css樣式來描述；
  • 表格搭建時，使用表格頭部 表格身體 `表格尾部``；
  • 列表搭建時，使用<ul>無序列表</ul> <ol>有序列表</ol> <dl>定義列表 ；

4.相對路徑與絕對路徑

**絕對路徑 **

  • 指帶域名的檔案的完整路徑和磁碟中指定檔案的全部路徑
  • 網址(網站的尾部)–a標籤用的比較多
<img src="D:/xm/assest/image/1.jpg" alt="">
<a href="http://www.ls_zhainanya.cn">aaaa</a>

**相對路徑 **

  • 是指在同一個資料夾下，通過一個參考點來找到其他檔案
  • 返回上一級 …/
  • 同級之間直接寫檔名
  • 下一級用 /

5.標籤的巢狀規範

1.塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素

  • —— 對
  • —— 對
  • —— 錯

2.塊級元素不能放在

裡面

    —— 錯

  • —— 錯

3.有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素

  • 這幾個特殊的標籤是： h1、h2、h3、h4、h5、h6、p、dt

4.ul,li/ol,li/dl,dt,dd擁有父子級關係的標籤；ul、ol下都只能跟li，dl下只能跟dt.dd

    —— 對
    —— 錯
  • —— 對
  • <dl><a></a><dt></dt><dd></dd></dl> —— 錯

5.a標籤不能巢狀a標籤

  • <a><a></a></a> —— 錯

6.使用者體驗和常用SEO優化技巧

SEO（Search Engine Optimization）了提升網頁在搜尋引擎自然搜尋結果中的收錄數量以及排序位置而做的優化行為。簡言之，就是希望百度等搜尋引擎能多多我們收錄精心製作後的網站，並且在別人訪問時網站能排在前面

**網站結構優化 **
最主要的要求就是網站結構層次結構要少，最好的是扁平化的網站結構設計

  • 控制首頁的連結。網站首頁的連結最好在100個以內。
  • 網站結構扁平化鋪開，最好是三層到底。結構大概是首頁-分類頁-詳細頁。
  • 導航設定，最佳導航設定是麵包屑導航：所謂麵包屑導航就是如下圖所示，使用者在點選每個目錄名稱時可以到達其所在位置，麵包屑導航可以讓使用者始終知道自己所在的位置。
  • 保證網頁的載入速度。單頁大小最好不要超過100K

網頁程式碼優化

  • 網頁的title，keywords，description一定要寫，要精簡全面。
  • 網頁使用語義化程式碼。
  • a標籤要設定title屬性；外部連結還要設定rel屬性– –rel=”nofollow”，nofollow值會使得網路爬蟲不順著連結爬出。
  • 所有的標題使用h1標籤，樣式可以使用css設定。
  • br標籤只能用於文字換行。
  • table一定要使用caption設定表格題目。
  • strong用來設定重標，em設定斜體。
  • img標籤一定要設定其alt屬性。

相關文章