1. HTML簡介

用戶使用瀏覽器打開網(wǎng)頁看到結(jié)果的過程就是：瀏覽器將服務端的文本文件（即網(wǎng)頁文件）內(nèi)容下載到本地，然后打開顯示的過程。

而文本文件的文檔結(jié)構(gòu)只有空格和黃航兩種組織方式，如此，文本文件在打開顯示時，顯示的效果將會非常的單一。

為了讓顯示的效果不那么單調(diào)，我們會偏向會使用

我們會偏向使用word一類的文本編輯工具來編排文本內(nèi)容，編排的原理就是：在編輯文件時會選中各部分內(nèi)容，然后為內(nèi)容打上不同的標記，比如什么是標題，什么是段落，然后存放硬盤里，等下次打開時，word會識別之前的標記，然后按照預先編排好的結(jié)果顯示出來。

站在顯示文本內(nèi)容的角度去看，瀏覽器與word的原理一樣，我們可以將瀏覽器當成一個網(wǎng)頁版的只讀word，瀏覽器也必須有一套自己能識別的標記文本的規(guī)范，該規(guī)范被稱為HTML,HTML全稱是超文本標記語言（HyperText Markup Language）。

“超文本”指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本。

“標記”指的是在編輯文本時用特殊的記號標記一下各部分內(nèi)容的意義，該記號稱之為標簽，比如用標簽h1標記標題，用標簽p標簽段落，如此我們標記一首唐詩就成了如下格式：

靜夜思

床前明月光

疑是地上霜

舉頭望明月

低頭思故鄉(xiāng)

這樣瀏覽器在接收到文本內(nèi)容后，就可以按照事先規(guī)定好的記號去顯示各部分的內(nèi)容，顯示結(jié)果如下圖

2. HTML標簽與文檔結(jié)構(gòu)

一個網(wǎng)頁可以沒有樣式，可以沒有交互，但是必須要有網(wǎng)頁需要呈現(xiàn)的內(nèi)容，而HTML作為一門標記語言，是通過各種各樣的標簽來標記網(wǎng)頁內(nèi)容的，所以HTML部分是整個前端的基礎(chǔ)，我們學習HTML主要就是學習的HTML標簽。

2.1. 什么是標簽呢

在HTML中規(guī)定標簽使用英文的尖括號即<和>包起來，如，，都是標簽

HTML中標簽通常情況下是成對出現(xiàn)的，分為開始標簽和結(jié)束標簽，結(jié)束標簽比開始標簽多了一個/，開始標簽和結(jié)束標簽之間的就是標簽的內(nèi)容。

有些標簽功能比較簡單，使用一個標簽即可，這種標簽叫做自閉和標簽，例如：

HTML中的標簽存放于文本文件中，需要按照下述固定的文檔結(jié)構(gòu)組織：

<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>

# 1. <!DOCTYPE HTML>
<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位于<html>標簽之前，表明該文檔是HTML5文檔。

# 2. <html></html>
<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中。
HTML的lang屬性可用于網(wǎng)頁或部分網(wǎng)頁的語言。通常用于搜索引擎和瀏覽器的統(tǒng)計分析，不定義也沒什么影響。
根據(jù)W3C推薦標準，您應該通過<html>標簽中的lang屬性對每張頁面中的主要語言進行聲明，比如：<html lang='en'></html>

# 3. <head></head>
<head></head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。常見的頭部元素有<title>,<script>,<script>,<link>和<meta>等標簽，頭部標簽在下一節(jié)中會有詳細介紹，
<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
# 4. <body></body>
在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，最終會在瀏覽器中顯示出來。

標簽間的關(guān)系

并列(兄弟/平級)

head與body
嵌套（父子/上下級）

html內(nèi)有body

2.2. HTML標簽詳細語法與注意點

標簽的語法:

雙標簽

<標簽名屬性1=“值1” 屬性2=“值2” …… >內(nèi)容部分</標簽名>
單標簽

<標簽名屬性1=“值1” 屬性2=“值2” …… />

標簽注意事項

記好/標簽是不會顯示出來的
標簽只是用來做記號而不負責控制樣式：雖然用
標記的文本在顯示時會被加大加粗，但請務必記住，HTML的作用只有一個它是專門用來對文件做記號來表示其語義的（語義指的是該文本是做什么用的），加大和加粗這種為文本添加樣式的操作并不是HTML擅長的，雖然早期的時候確實也用HTML來制作樣式，但以后我們專門用CSS來做這件事，這也是一種解耦合的思想。
HTML標簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但是我們通常建議使用小寫，大部分程序員都以小寫為準。
HTML中部分標簽是可以嵌套的。例如：
?
,但不能交叉
?

?

幾個很重要的屬性

id:定義標簽的唯一ID，HTML文檔樹中唯一
class：為HTML元素定義一個或多個類名(classname)（CSS樣式類名）
style：規(guī)定元素的行內(nèi)樣式(CSS樣式)

2.3. HTML中標簽分類

但從是否可以嵌套子標簽的角度去分，標簽分為兩類

容器類標簽

容器標簽可以簡單的理解為能嵌套其他所有標簽的標簽

常見的容器級的標簽：

h系列

ul>li

ol>li

dl>dt+dd

div

文本類標簽

文本級的標簽對應容器級標簽，只能嵌套文字/圖片/超鏈接的標簽。

常見文本的標簽：

span

strong

ins

del

分類2

塊級標簽：獨占一行

p,h1~h6,div
行內(nèi)標簽：自身文本多大就占多大

span,b,i,s

2.4 HTML注釋

無論我們學習什么編程語言，一定要重視的就是注釋，HTML中注釋的格式:

注意：注釋中可以直接使用回車換行。

并且我們習慣用注釋的標簽把HTML代碼包裹起來。如：

這里放你xx部分的HTML代碼

HTML注釋的注意事項：

HTML注釋不支持嵌套。
HTML注釋不能寫在HTML標簽中

3. head內(nèi)常用標簽

< meta > 是HTML的元素，在網(wǎng)頁頭部標簽內(nèi)定義，可提供與網(wǎng)頁有關(guān)的結(jié)構(gòu)化元數(shù)據(jù)，即網(wǎng)頁源信息(meta_information).網(wǎng)頁上并不會顯示這些元信息，但計算機可以識別他們。

在pycharm中寫HTML代碼，只需要寫標簽名，尖括號可以不寫，Tab鍵補全

< meta > 相關(guān)標簽

指定字符集
頁面描述

< meta name="Description" content="具體描述" >
關(guān)鍵字：有助于所有引擎SEC優(yōu)化，再怎么優(yōu)化也抵不過競價排名

< meta name="Description" content="網(wǎng)易，騰訊，游戲，新聞" >網(wǎng)頁面描述

< meta name="keyword" content="網(wǎng)易，騰訊，游戲，新聞" >關(guān)鍵字描述，搜索關(guān)鍵字都能搜到此網(wǎng)頁
3秒后跳轉(zhuǎn)

< meta name="Description" content="3,baidu.com" >
三秒刷新

< meta http-equiv="refresh" content="3" >

非meta相關(guān)標簽

標題

< title >百度一下，你就知道
網(wǎng)站的圖標
定義內(nèi)部樣式
引入外部樣式文件
定義JavaScript代碼或引入JavaScript文件

4.body內(nèi)常用標簽

4.1. HTML語義化

body中的標簽是會顯示到瀏覽器窗口的，body內(nèi)的標簽只有一個作用就是用來標記語義的，語義指的是從字面意思就可以理解被標記內(nèi)容是用來做什么的

雖然不同的標簽會有不同的顯示樣式，但我們一定要強制自己忘記標簽的顯示樣式，只記它的語義，因為每個標簽的樣式各不同，記憶不同標簽的樣式來控制顯示樣式，對前端開發(fā)來說將會是一種災難，更何況添加并不是HTML擅長的事情，而且在布局的時候使用語義化的標簽，會方便搜索引擎在爬取網(wǎng)頁文件時更好地解析文檔結(jié)構(gòu)，從而進行收錄。

提醒：對于那些只用來修改樣式的標簽將會被淘汰掉!

4.2. 字符實體

在HTML中對空格/回車/tab不敏感，會把多個空格/回車/tab當作一個空格來處理。

字符實體指的是在HTML中，有的字符是被HTML保留的比如大于號小于號

有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來那么這些東西向顯示出來就必須通過字符實體

4.3.h系列標簽

H系列標簽標記內(nèi)容為一個標題，全稱headline

h系列標簽從h1-h6共6個，沒有h7標簽，標記內(nèi)容為1~6級標題，h1用作主標題（代表最重要的），其次是h2。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>勇敢牛牛不怕困難</title>
</head>
<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
    

</body>
</html>

注意1：沒有六級以上的標題

注意2：雖然h1-h6標簽的顯示樣式是從大到小，但再次強調(diào)：HTML標簽的顯示樣式是沒有意義的

注意3：在企業(yè)開發(fā)中一定要慎用h寫列標簽，特別是h1標簽，在企業(yè)開發(fā)中一般一個界面中只能出現(xiàn)一個h1標簽（處于搜索引擎優(yōu)化考慮，搜索引擎會使用標題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引）

4.4. p標簽

p標簽標記內(nèi)容為一個段落，全稱paragraph

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>勇敢牛牛不怕困難</title>
</head>
<body>
    <h1>勇敢蛙蛙</h1>
    <p>蛙蛙，娃娃，哇哇</p>
    <p>不怕困難</p>

</body>
</html>

4.5. img標簽

img標簽為標記一個圖片，全稱image，具體的用法是：

< img src="圖片地址" alt="圖片加載失敗時顯示的內(nèi)容" title = "鼠標懸停到圖片上時顯示的內(nèi)容" />

使用img標簽有以下的幾點注意事項

src指定的圖片地址可以使網(wǎng)絡地址，也可以是一個本地地址，本地地址可以使用絕對或相對路徑，但通常用相對路徑，相對路徑是以html文件當前所在路徑為基準進行的
圖片的格式可以是png，jpg和gif
alt="圖片加載失敗時顯示的內(nèi)容"為img標簽加上該屬性可用于支持搜索引擎和盲人讀屏軟件
title = "鼠標懸停到圖片上時顯示的內(nèi)容"
如果沒有指定圖片的width和height則按照圖片默認的寬高顯示，如果指定圖片的width和height則可能讓圖片變形，那如果又想指定寬度和高度，又不想讓圖片變形，我們可以至指定寬度和搞得一個值即可，只要指定了一個值，系統(tǒng)會根據(jù)該值計算另外一個值，并且都是等比拉伸的，圖片不會變形。
一個p標簽一個段落

4.6. a標簽

a標簽標記一個內(nèi)容為超鏈接，全稱anchor，也被稱作錨。

超鏈接標簽是超文本文件的精髓，可以控制頁面與頁面之間的跳轉(zhuǎn)，語法如下

< a href="跳轉(zhuǎn)到的目標頁面地址" target=“是否在新的頁面中打開” title="鼠標懸浮顯示的內(nèi)容">需要展現(xiàn)給用戶查看的內(nèi)容/也可以是圖片< /a>

使用a標簽需要注意以下幾點：

a標簽不僅可以標記文字，也可以標記圖片

< a >< img src="mv.png" />百度一下，你就知道
a標簽必須有href屬性，href的值必須是http://或https://開頭
a標簽還可以跳轉(zhuǎn)到自己的頁面

< a href="template/aaa.html">跳轉(zhuǎn)到自己這個頁面 < /a>
target=“_ bank”代表在新頁面中打開，其余的值均無需記憶，如果頁面中大量的a標簽都需要設置target=" _ bankk",那么我們可以在head標簽內(nèi)新增一個base標簽進行統(tǒng)一設置

< base target="_blank">

如果a標簽自己設置了target，那么就以自己的為準，否則就會參照base的設置

target：
- _blank表示在新標簽頁中打開目標網(wǎng)頁
- _self表示在當前標簽頁中打開目標網(wǎng)頁
title="鼠標懸浮顯示的內(nèi)容"

4.8. 其他標簽

i 標簽：字體變斜體
u標簽：下劃線
s標簽：刪除線
b標簽：字體加粗
br標簽：< br>換行
hr標簽：
水平分割線

4.9. body內(nèi)特殊符號

& nbsp; 空格
& gt; 大于號
& lt; 小于號
& amp; &
& yen；￥
&copy: 版權(quán)
&reg: 注冊

4.10. div標簽和span標簽

div標簽用來定義一個塊級元素，并無實際的意義。主要通過css樣式為其賦予不同的表現(xiàn)。

span標簽用來定義內(nèi)聯(lián)（行內(nèi)）元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。

塊計元素與行內(nèi)元素的區(qū)別：

塊元素：是以另起一行開始渲染的元素，

行內(nèi)元素則不需另起一行。如果單獨在網(wǎng)頁插入這兩個元素，頁面產(chǎn)生任何的影響。

這兩個元素專門為定義CSS樣式而生的。

注意：

關(guān)于標簽嵌套：通常塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素，但內(nèi)聯(lián)元素不能包含塊級元素，他只能抱哈其他內(nèi)聯(lián)元素

p標簽不能包含塊級標簽，p標簽也不能包含p標簽

5. 列表標簽

列表標簽可以標記一堆數(shù)據(jù)是一個整體或列表html中列表標簽分為三種：

5.1. 無序列列表

提示：這是列表標簽中使用最多的一種，非常重要，重點掌握

無序列表可以制作當航條，商品列表，新聞列表等

無序列表的組合使用

ul>li

秒殺
優(yōu)惠券
PLUS會員
閃購
拍賣
京東服飾
京東超市
生鮮
全球購
京東金融

type屬性：

disc(實心圓點，默認值)
circle（空心圓圈）
square（實心方塊）
none（無樣式）

注意：ul與li是組合標簽應該一起出現(xiàn)，并且ul的子標錢只應該是li，而li的子標簽則可以是任意其他標簽

5.2. 有序列表

提示：這種類型的列表在實際引用中并不多見；

智商排名

學生A
學生B
學生 C
學生 D
學生 E

type屬性：

1 數(shù)字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬

提示：有序列表能干的事，完全可以用無序列表取代

5.3 自定義列表（也會經(jīng)常使用）

作用分析：

選擇用什么標簽的唯一標準，是看文本的實際語義，而不是看長什么樣子。

無序列表：內(nèi)容是并列的，沒有先后順序

有序列表：內(nèi)容是由先后順序的

自定義列表：對一個題目進行解釋說的時候，用自定義列表，可以做網(wǎng)站尾部相關(guān)信息，網(wǎng)易注冊界面的輸入框

自定義列表也是一個組合標簽：dl>dt+dd

dl:defination list,自定義列表

dt：defination title，自定義標題

dd：defination description，自定義描述

自定義標題1
: 描述1; 描述2; 描述3
自定義標題2
: 描述1; 描述2; 描述3
自定義標題3
? ? ? ? ? 描述1
　　? ?描述2
　　? ?描述3

6. table標簽

table標簽可以標記一段數(shù)據(jù)為表格。

表格標簽是一種數(shù)據(jù)的展現(xiàn)形式，當數(shù)據(jù)量非常大的時候，實用表格的形式來展示被認為是最清晰的。

6.1.表格的格式

< table>

tr代表表格的一行數(shù)據(jù)的一行數(shù)據(jù)

td表一行中的一個普通單元格th標識表頭單元格

th文字加粗

注意：表格標簽有個邊框?qū)傩?，這個屬性決定了邊寬的寬度

默認請款下這個屬性的值為0，所以看不到邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table>
  <thead>
  <tr>
    <th>序號</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>wyz</td>
    <td>睡覺</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>噠噠噠</td>
  </tr>
  </tbody>
</table>
</body>
</html>

屬性:

border: 表格邊框.
cellpadding: 內(nèi)邊距
cellspacing: 外邊距.
width: 像素百分比.（最好通過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）

6.2. 表格的結(jié)構(gòu)

為了方便管理維護以及提升語義，我們將表格中存儲的數(shù)據(jù)分為四類：

表格的標題：caption

特點：相對于表格寬度自動居中對齊

注意：
- 該標簽一定要寫在table標簽里，否則無效
- caption一定要緊跟在table標簽內(nèi)的第一個
表格的表頭信息：thead

特點：專門用來存儲每一列的標題，只要當前列的標題存儲在這個標簽中就會自動居中+加粗文字
表格的主題信息：tbody

注意：
- 如果沒有添加tbody，瀏覽器會自動添加
- 如果制定了thead和tfoot，那么在修改整個表格的高度時，thead和tfoot有自己默認的高度，不會隨著表格的高度變化而變化
標為信息：tfoot

7. form標簽（表單標簽）

表單標簽：能夠獲取前端用戶數(shù)據(jù)（用戶輸入的，用戶選擇，用戶上傳）基于網(wǎng)絡發(fā)送給后端服務器

< form action=""> 在該form標簽內(nèi)部書寫的獲取用戶的數(shù)據(jù)都會被form標簽提交到后端

action：控制數(shù)據(jù)提交的后端路徑(給那個服務端提交數(shù)據(jù))

什么都不寫默認就是朝當前頁面所在的url提交數(shù)據(jù)
寫全路徑：https://www.baidu.com?朝百度服務端提交
只寫路徑后綴action='/index/'
自動識別當前服務端的ip和port拼接到前面：host:port/index/

每個表單可以寫在labe里，這里有兩種寫法

# 第一種 直接將input框?qū)懺趌abel內(nèi)
<label for="d1">username:<input type="text" id="d1">
# 第二種 通過id鏈接即可 無需嵌套
</label>
<label for="d3">txt:</label>
<input type="text" id="d3">
placeholder="用戶名"   # 設置提示字
form表單提交文件需要注意
    1.method必須是post
    2.enctype="multipart/form-data"
      enctype類似于數(shù)據(jù)提交的編碼格式
        默認是urlencode只能夠提交普通的文本數(shù)據(jù)
        formdata 就可以支持提交文件數(shù)據(jù)

ps：input不跟label關(guān)聯(lián)也沒有問題

label 和input都是行內(nèi)標簽

提示：forms表單是個很重要的知識點

7.1. 表單的type屬性

type屬性：

text：普通文本

password：密文

date：日期

submit：用來觸發(fā)form表單提交數(shù)據(jù)的動作，若submit沒有制定按鈕的文本內(nèi)容，不同的瀏覽器打開之后可能渲染的文本內(nèi)容不一致

button：就是一個普普通通的按鈕本身沒有任何的功能，但是他是最有用的，學了js之后可以給他自定義各種功能

reset：重置內(nèi)容

radio：單選

默認選中要加checked="checked"
        <input type="radio" name="gender" checked="checked">女
        當標簽的屬性名和屬性值一樣的時候可以簡寫
        <input type="radio" name="gender" checked>女
 <p>gender
        <input type="radio" name="gender" checked="checked">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
 </p>
# 所有獲取用戶輸入的標簽 都應該有name屬性
name就類似于字典的key
用戶的數(shù)據(jù)就類似于字典的value
 <p>gender
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
    </p>

file：獲取文件也可以一次性獲取多個

hidden：隱藏當前input框

? 作用：可以做釣魚網(wǎng)站

7.2. select標簽

select標簽默認是單選可以加mutiple參數(shù)變多選，默認選中selected

# 單選
<p>province
    <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">深圳</option>
    </select>
</p>
# 多選
<p>食品：
    <select name="" id="" multiple>
        <option value="" selected="selected">雞蛋</option>
        <option value="" >雞心</option>
        <option value="" >雞肝</option>
        <option value="" >雞雜</option>
        <option value="" selected="selected">雞屎</option>
    </select>
</p>

7.3. textarea標簽

textarea標簽：獲取大段文本

<p>自我介紹：
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

7.4. 能夠觸發(fā)form表單提交數(shù)據(jù)的按鈕有哪些

1. <input type="submit" value="提交">
2. < button>提交</button>

本文摘自：https://www.cnblogs.com/

HTML2022-04-25 23:05:07

1. HTML簡介

靜夜思

2. HTML標簽與文檔結(jié)構(gòu)

2.1. 什么是標簽呢

2.2. HTML標簽詳細語法與注意點

2.3. HTML中標簽分類

2.4 HTML注釋

3. head內(nèi)常用標簽

4.body內(nèi)常用標簽

4.1. HTML語義化

4.2. 字符實體

4.3.h系列標簽

4.4. p標簽

4.5. img標簽

4.6. a標簽

4.8. 其他標簽

4.9. body內(nèi)特殊符號

4.10. div標簽和span標簽

5. 列表標簽

5.1. 無序列列表

5.2. 有序列表

智商排名

5.3 自定義列表（也會經(jīng)常使用）

6. table標簽

6.1.表格的格式

6.2. 表格的結(jié)構(gòu)

7. form標簽（表單標簽）

7.1. 表單的type屬性

7.2. select標簽

7.3. textarea標簽

7.4. 能夠觸發(fā)form表單提交數(shù)據(jù)的按鈕有哪些

HTML
2022-04-25 23:05:07