一,HTML簡介(來源HTML百度百科)
HTML:超文本標記語言,是指能夠包含鏈接,圖片,程序,視頻等非文字元素的頁面
二,HTML,XML,XHTML之間有什么區別
- HTML:超文本標記語言,語法比較松散,書寫格式不是那么規范,用于展示數據;
- XML:可擴展標記語言,書寫格式類似于HTML,但是標簽都是自定義,且書寫格式嚴格,用于傳輸數據;
- XHTML:可擴展超文本標記語言,基于XML,書寫格式非常嚴格的HTML模式,用于展示數據;
之間的區別:
1.XML用于傳輸數據;
2.HTML和XHTML用于展示數據;
3.相較于XHTML,HTML的書寫格式并不那么嚴謹,其它的和HTML4.0幾乎一樣;
三:HTML的主要結構
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
-
<!DOCTYPE html>
:聲明文檔類型,用于告訴瀏覽器以什么樣的方式對該文檔進行渲染,如果沒有這個聲明則使用怪異模式進行渲染,有則使用標準模式進行渲染; -
<html>
:頁面的根標簽:限定了頁面的開始和結束,在這個標簽包裹<head>
和<body>
標簽; -
<head>
:頭部標簽,用于定義文檔的頭部,包裹該文檔的頭部元素,用于引入腳本、樣式、包裹元標簽等; -
<body>
:內容標簽,用于展示的內容都寫在這個標簽以內,定義文檔的主體;
注意點:
- 標簽閉合:例如
<html>
這個標簽,閉合就用</html>
,也就是添加斜杠完成,除了<html>
標簽外,其它的除了自閉合標簽和空標簽以外的標簽都可以使用這種方式進行閉合; - 添加語言:在
<html>
標簽內,可以添加屬性lang屬性來告訴瀏覽器當前文檔使用的是何種語言
,例如:
lang = "en"
就是告訴瀏覽器當前文檔使用的是英語;
3.書寫:標簽的書寫全部使用小寫英文;
四:HTML書寫規范
- 行級元素不要包裹塊級元素:例如
<span><div></div></span>
這樣是錯誤的,但是塊級元素可以包裹行級元素; - 標簽閉合:例如:
<p></p>,<span></span>
; - 標簽全部用英文小寫書寫;
- 標簽用尖括號進行包裹:
<標簽名>
;
五:關于<meta>
標簽
-
在<html>標簽內,你會見到一個叫
<meta>
的標簽,例如下面這樣:<head> <meta> </head>
上面的<meta>
就是文檔的元標簽,它可以通過一些屬性提供的值來標示這個文檔的元信息,例如解碼方式,關鍵詞等,它是一個自閉合標簽,不需要閉合,它不提供任何文檔的內容;
-
<meta>
標簽的常用屬性介紹:
1.charset
:charset
屬性有一個值,這個值填寫的是編碼方式,例如:charset = "UTF-8"
就是標明該文檔的編碼方式是 UTF-8,其它的編碼方式還有gbk,Unicode等;
2.http-equiv
:http-equiv
:該屬性可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容,要與content
屬性一起使用,正確的格式是:http-equiv = "參數"
,例如:http-equiv = "X-UA-Compatible"
;
3.content
:用于標示數據傳輸中的值;
4.name
:name
屬性要與content
屬性一起使用,name
屬性常用的值有:
①:viewport
:例如:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport
這個值用來限定用戶是否能縮放或放大頁面,最大和最小多少;
②:keywords
:例如:<meta name="keywords" content="前端 饑人谷">
keywords
值顧名思義,是用來告訴瀏覽器這個頁面的關鍵詞是什么,方便搜索引擎進行關鍵詞抓取;
③:description
:例如:<meta name="description" content="最有愛的前端學習社區">
description
值用來告訴搜索引擎這個頁面大體內容的描述,以及搜索出來檢索顯示的信息;
- 常見問題之——內容文字變成亂碼
例子:
網頁文字變亂碼
1.出現的原因:在<meta>
標簽內的編碼方式是UTF-8
編碼方式
而我們的解碼方式是:
解碼方式
由上可以看出文字變亂碼是編碼方式和解碼方式的不同所造成的;
2 . 如何解決:設置編碼方式和解碼方式相同即可
3 . 此外還要注意,有些編輯器默認保存的編碼方式就是utf-8,例如sublime
默認保存的編碼方式
六:常用標簽介紹
-
標題標簽:
<h1~6>
,用來書寫標題,<h1>~<h6>
字體依次由大到小,表明標題的重要性由大到小;
標題標簽展示 -
字體突出標簽:
1.<mark>
:用來標記文段,標明該文段出錯或其他
mark標簽
2.
<strong>
:用于強調標記的語句,強調語氣比<em>
強,字體會變成加粗體
strong標簽
3.
<em>
:用于強調標記的語句,強調語氣較輕,字體會變成斜體
em標簽
-
段落標簽:
<p>
:用于包裹文段;
P標簽
-
塊標簽:
<div>
:用于劃分一個區塊,常用于頁面布局;
div標簽,為顯示我加了樣式
-
行標簽:
<span>
:用于組合行內元素,方便進行定位設置樣式
span標簽用法
-
圖片標簽:
[站外圖片上傳中……(1)]
,用來插入圖片;
圖片正常顯示時
圖片不能顯示時
-
列表標簽
1.無序列表:<ul><li>
,用來顯示無序的列表信息,直接子元素必須是<li>
,默認樣式是小圓點
無序列表
2.有序列表:<ol><li>
,用來顯示有順序的列表信息,直接子元素必須是<li>
,默認樣式是阿拉伯數字
有序列表
3.自定義列表:<dl><dt><dd>
,<dt>
用來顯示列表標題,<dd>
用來顯示列表項
自定義列表
-
鏈接標簽:
<a href="鏈接地址" target="以什么方式打開">可點擊的文字</a>
a標簽
-
表格標簽 :
<table><tr><th><td>
其中<tr>
是行,有幾個<tr>
標簽就有幾行。<th>
是表頭單元,是該列信息的歸類。<td>
是標準單元,用來顯示信息
表格
關于HTML文檔的語義化
- 什么是HTML語義化:我所理解的語義化就是將文檔的書寫當做寫文章一樣,該用什么標簽就用什么標簽,盡量少用無語義的標簽
- 語義化的好處:方便閱讀以及搜索引擎的搜索
樣式和內容分離原則
- 樣式和內容分離是指,樣式不要寫在標簽內,比如這樣:
- 最好也不要寫在
<head>
標簽的<style>
里,比如這樣:
- 最好是另外建立一個文件專門寫樣式,然后
<head>
標簽內進行引入,比如這樣:
Paste_Image.png