HTML的基本結構與標簽的初步了解

2020-03-24 15:58:12

字體：大中小

來源：轉載

供稿：網友

一、初步了解HTML

HTML是一種超文本標簽語言，瀏覽器則是用來“解釋和執行”HTML源碼的工具。

HTML的基本結構

 !DOCTYPE html html head meta charset= UTF-8 title /title /head body /body /html

其中 !DOCTYPE html 是文檔類型聲明，聲明這個文件必須是HTML5文件，讓瀏覽器按照HTML5準備進行解析，必須在HTML5中，必須要有，且是一定要寫在文件的最上方滴。

title /title 是網頁的標題，顯示在最上方的文字：

 head /head 是用來描述網頁的一些關鍵信息。例如網頁的配置、設置、關鍵字等等。。。這些信息，大多在瀏覽器看不到，但是對網頁的解析至關重要！

 body /body 則是所有的代碼都寫在其中。
二、初步了解標簽

1、 head 頭部部分1）link：網頁標題的圖標

鏈接網頁的小圖標，網頁選項卡上面的小圖片

其中rel= icon 表示當前link的作用是鏈接網頁圖標

href= img/ss.gif 表示圖標的地址所在的位置

 link rel= icon href= img/sss.gif /

2)meta:用于描述網頁的各種信息

①其中 meta charset= utf-8 / 設置網頁的編碼格式為utf-8格式
常見的中文編碼格式：GB2312：國標碼，簡體中文；GBK：擴展國標碼，簡體中文
utf-8：萬國碼，兼容各種語言編碼，常用！

 meta charset= utf-8 /

②可以設置網頁的關鍵字有助于搜索引擎的搜索，多個關鍵字用英文逗號分開

 meta name= keywords content= 杰睿教育,網頁開發 /

③設置網頁的詳細信息，搜索引擎時標題下面的一段文字！

name= description 表示這個meta標簽設置的是網頁的描述信息；
content= 表示描述信息的詳細內容！！

 meta name= description content= 這是我在，，，， /

2、 body 主體部分

1）標簽的分類

①塊級標簽：顯示為塊狀，獨占一行，自動換行。
②行級標簽：在一行中，從左往右依次排列，不會自動換行。

2）塊級標簽

常見的塊級標簽有：

a.標題標簽： h1 /h1 ...... h6 /h6 特點:h1最大，h6最小且自動加粗。

b.水平線標簽： hr/

c.段落標簽： p /p

d.換行標簽： br/

e.引用標簽： blockquote /blockquote
要的cite屬性表明引用的來源，一般為網址，且網址不會在網頁中展示，瀏覽器一般顯示為首行縮進

f.預格式標簽： pre /pre
瀏覽器默認顯示樣式：①顯示為等寬字體

②代碼中的換行，空格等元素可在瀏覽器中直接顯示。

 !DOCTYPE html html head meta charset= UTF-8 title HTML基本塊級標簽 /title /head  body h1 這是h1標簽 /h1 h2 這是h2標簽 /h2 h3 這是h3標簽 /h3 h4 這是h4標簽 /h4 h5 這是h5標簽 /h5 h6 這是h6標簽 /h6 hr/ p 這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！ 哈哈啊哈哈哈啊哈哈哈哈啊哈！ br/ 這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！ /p p 這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！ /p pre if(entity != null){  tring result = EntityUtils.toString(entity, UTF-8 //HttpEntity轉為字符串類型  jsonObject = JSONObject.fromObject(result);//字符串類型轉為JSON類型 } /pre blockquote cite= http://www.jredu100.com 光明正大的不要臉！這段話就是抄的！你能咋地！ /blockquote /body /html

g.有序列表
ol （order list）
li ... /li 列表項可以有n多個
li ... /li
li ... /li
/ol

h.無序列表
ul (unorder list)
li ... /li n多個
li ... /li
li ... /li
/ul

i.定義描述列表
dl
dt 一般只有一項 /dt （列表標題）
dd 可以有很多項 /dd （列表描述項）
dd 132 /dd
dd 123 /dd
/dl

g.組合標簽顯示效果：上面是圖片，下面是圖片的標題，同時圖片和標題前代縮進。
figure
img/ 圖片
figcaption /figcaption 圖片的標題。
/figure

k.分區標簽

div /div 可以包裹任何標簽，也可以被包裹進任何標簽。

!DOCTYPE html html head meta charset= UTF-8 title HTML基本塊級標簽 /title /head body ul li 這是無序列表第一項 /li li 這是無序列表第二項 /li li 這是無序列表第三項 /li li 這是無序列表第四項 /li /ul ol li 這是無序列表第一項 /li li 這是無序列表第二項 /li li 這是無序列表第三項 /li li 這是無序列表第四項 /li /ol dl dt 這是dl列表的標題 /dt dd 這是dl列表的描述項1 /dd dd 這是dl列表的描述項2 /dd dd 這是dl列表的描述項3 /dd /dl figure img src= img/icon.jpg / figcaption 圖片的描述標題 /figcaption /figure div >

3)行級標簽

常見的行級標簽：

（1）文本標簽span

① span標簽只是包裹作用，沒有任何其他含義；
② span作用與div類似，需配合CSS使用。只不過div是塊級標簽、span是行級標簽

（2）強調標簽em與strong；傾斜標簽i；加粗標簽b；四個之間的區別

① em和i都能傾斜。strong和b都能加粗！但是，i和b僅僅是單純的傾斜加粗，而em和Strong多了強調的語義。
② em和strong都表示強調，但是strong強調的級別更高！！
注意：
1、強調的目的：讓搜索引擎知道網頁重點強調的內容！便于搜索引擎顯示！
2、Strong和em都可以多層嵌套，表示強調程度的遞增！

（3）短引用標簽q：表示短引用。 cite屬性：用于聲明引用的來源。

【常用的引用標簽】
blockquote 用于引用一段內容 /blockquote
q 用于引用一句話 /q
cite 常用于引用作品名、書畫名等 /cite

相同點：三個引用標簽，都用cite屬性表示引用來源
不同點：① 引用的內容不同。 blockquote- 一段話，q- 一句話，cite- 作品名
② 顯示的默認效果不同。 blockquote- 默認整段向右縮進； q- 默認加引號； cite- 默認傾斜！

（4）縮小標簽small：將字體縮小一號；big標簽：將字體放大一號。

注意：
① small和big可以多層嵌套，直到字體達到最小或最大為止；
② 這倆標簽已經被淘汰，并不建議使用。

（5）圖片標簽img

① src屬性：表示圖片的路徑
[圖片路徑的合法方式]
A.網絡鏈接：由于圖片在其他網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式；
img src= https://cdn14.x6kj.com/uploads/allimg/191119/11014340I-1.png /

B.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協議才能訪問！所以，嚴禁使用這種方式！
img src= file:///E:/icon.jpg /

C.相對路徑：
a、圖片與當前文檔在同一層文件夾：直接寫圖片名
img src= icon.jpg /
b、圖片在當前文檔的下一層文件夾：文件夾名/圖片名
img src= img/icon.jpg /
c、圖片在當前文檔的上一層文件夾： ../圖片名 (../表示后退一層)
img src= ../icon.jpg /
但是，一定要注意：圖片必須包含在項目里面，不能訪問項目外的圖片。

② height:圖片的高度 width：圖片的寬度
img src= img/icon.jpg height= 500 width= 10 /

③ title：圖片的標題，也就是鼠標指上后看到的提示文字
img src= img/icon.jpg title= 鼠標指上后看到的提示文字 /

④ alt: 圖片無法加載時顯示的文字
img src= img/icon.jpg alt= 圖片無法加載時顯示的文字 /

⑤ align：圖片周圍的文字相對于圖片如何對齊。
可選值：top- 圖片頂部 center- 圖片中部 bottom- 圖片底部
img src= img/icon.jpg align= top / 12345

（6）超鏈接標簽a

A、href屬性：表示超鏈接跳轉的頁面。
① 可以寫網絡地址：
a href= http://www.baidu.com 這是一個超鏈接 /a

② 可以打開本地的html文件：
采用相對路徑確定文件地址。與img標簽確定方式相同。
a href= 01-HTMLhead部分index.html 這是一個超鏈接 /a

B、title屬性：鼠標指上后顯示的提示文字
a href= 01-HTMLhead部分index.html title= ttt 這是一個超鏈接 /a

C、target屬性：設置新頁面打開的窗口位置
可選值：_self自身頁面打開（默認）
_blank 新窗口打開
a href= 01-HTMLhead部分index.html target _blank 這是一個超鏈接 /a

【超鏈接的特殊應用】
1、功能性鏈接：（了解）
mailto:// 點擊鏈接給指定郵箱發送郵件
a href= mailto://jianghao@jerei.com target _blank 點擊發送郵件 /a
tencent://message/?uin=1105093212
還有：tell://手機端點擊打電話
message://手機端點擊發送短信
ftp://使用ftp協議進行文件的上傳下載
2、錨點鏈接：
本頁面錨鏈接
① 在頁面的指定位置中設置一個錨點，用那么屬性表示錨點名字：
a name= top /a
div > ② 將超鏈接的href屬性，設置為#加錨點名字
a href= #top 點擊鏈接，跳轉到top錨點位置 /a
頁面間錨鏈接
① 在新頁面的指定位置中設置一個錨點，用那么屬性表示錨點名字：
a name= top /a
div > ② 將超鏈接的href屬性，設置為“新頁面地址#加錨點名字”：
a href= 錨點.html#3 點擊鏈接，跳轉到錨地.html的top錨點位置 /a

!DOCTYPE html html head meta charset= UTF-8 title HTML基本行級標簽 /title /head body a name= e /a 糖糖 span >

4）塊級標簽與行級標簽的區別

1、塊級標簽：默認寬度100%(占滿一行)；
塊級標簽自動換行(獨占一行，右邊不能有任何東西)；
塊級標簽可以使用CSS設置寬度高度！

2、行級標簽：默認寬度由內容撐開(內容多寬、寬度就占多寬)；
行級標簽不會自動換行(一行當中，從左往右依次排列)；
行級標簽的寬度高度不能設置！

5）表格

（1）表格table

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示

th表示的是：表頭。表頭中的文字，默認為加粗居中。th要放在tr中，用于替換掉td。

（2）table的常用屬性
A、border：給表格加邊框。默認給所有td加邊框，并且給整個table加外邊框。當增大border的值時，td上的邊框不變化，只有最外層大邊框變寬。

B、cellspacing：單元格與單元格之間的距離。
cellspacing= 0 表示單元格與單元格之間沒有距離，但是邊框線的寬度依然是兩條線的寬度。

[注意] 表格邊框合并的CSS寫法：
>
這條CSS與cellspacing= 0 有什么區別？
cellspacing= 0 僅僅是將單元格之間的距離調整為0，實際上單元格之間依然還是兩條線；
border-collapse: collapse; 是將表格相鄰的兩條邊框進行合并處理，只有一條線存在。(一旦邊框合并，cellspace屬性將會失效。)

C、cellpadding：單元格中的文字與單元格邊框的距離。

D、 height：表格的高度
width：表格的寬度

使用表格寬、高屬性設置大小：
table height= 400 width= 500 /table

使用CSS樣式設置大小：
table >

E、align：設置表格在瀏覽器中的位置。不建議使用了。
可選值：left 表格居左 /center 表格居中/right 表格居右

F、bgcolor：背景色
bordercolor:邊框顏色
background:背景圖 background= img/computer.jpg
背景色和背景圖同時存在時，背景圖會覆蓋背景色

（3）tr與td常用屬性
A、width：單元格寬度
height：單元格的高度

B、bgcolor：單元格的顏色

C、align:設置單元格中的文字，水平對齊方式。
left、center、right
valign:設置單元格中的文字，垂直對齊方式。
top、middle、bottom

D、 nowrap= nowrap 當單元格文字過多時，設置單元格文字不斷行顯示。但是，會把表格的寬度撐大!!!

（4）表格的跨行與跨列

①跨列：在td上使用屬性colspan= n 進行跨列。如果一個單元格跨n列，則，單元格右邊的n-1個單元格需要去掉。

②跨行：在td上使用屬性rowspan= n 進行跨行。如果一個單元格跨n行，則，單元格下邊的n-1個單元格需要去掉。

!DOCTYPE html html head meta charset= UTF-8 title 表格 /title /head body table border= 1 tr th 標題一 /th th colspan= 2 標題二 /th /tr tr td rowspan= 2 1-1 /td td 1-2 /td td 1-3 /td /tr tr td 2-2 /td td 2-3 /td /table table border= 10 width= 500 height= 400 bordercolor= #ff99cc >

三、寫在后面的話

第一次接觸博客，第一發文內心還是有些小激動的，對于剛接觸不久代碼的我，就覺得代碼是一個神奇的地方，而且既神奇又覺得很好玩。

之前就一直覺得這些東西很深奧，感覺是我所觸及不到的，但是當我接觸到后，還是挺喜歡的。

最后請各位多多關照。