前端之HTML標籤
阿新 • • 發佈：2022-04-02
一、簡介
1.超文字標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。 2.本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對同一個標籤可能會有不同的解釋。（相容性問題） 3.網頁檔案的副檔名：.html或.htm
二、web遵循的協議
1、HTTP協議
超文字傳輸協議，規定了瀏覽器與服務端之間訊息傳輸的資料格式
2、HTTP的四大特性：
1.基於請求響應
2.基於TCP/IP之上的作用於應用層的協議
3.無狀態(服務端無法儲存使用者的狀態,一個人來一千次 我都記不住 還當你如初見)
4.無連線(請求來一次我響應一次 之後立馬斷開連線 兩者之間就不再有任何關係了)，websocket 相當於是HTTP協議的一個大的補丁，它支援長連線
三、HTML標籤分類
1、語法註釋
<!--單行註釋--> <!-- 多行註釋 多行註釋 -->
2、標籤種類
1.雙標籤(有頭有尾) <a></a> 2.自閉合標籤(單標籤) <img/>
四、HTML最基本文件結構
基本結構 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> </body> </html> 解釋 1.<!DOCTYPE html> :宣告為HTML文件 2.<meta charset="UTF-8"> :對於中文網頁需要使用<meta charset="utf-8"> 宣告編碼，否則會出現亂碼。有些瀏覽器會設定 GBK 為預設編碼， 則你需要設定為 <meta charset="gbk">。 3.<html>,</html> :是文件開始標記和結束的標記。是HTML頁面的根元素，在他們之間是文件的頭部(head)和主體(body) 4.<head>,</head> :定義了HTML文件的開頭部分。它們之間的內容不會在瀏覽器的文件視窗顯示。包含了文件的元(meta)資料。 5.<title>,</title> :定義了網頁標題，在瀏覽器標題欄顯示。 6.<body>,</boby> :之間的文字是可見的網頁主體內容。
五、head內常見的標籤
title：用來顯示網頁標題
<title>牛逼網</title>
style：用來控制樣式的，內部支援寫css程式碼
style 內部支援css程式碼(新增html樣式) <style> h1 { color: green; } </style>
script：內支援寫js程式碼，也支援匯入外界的js檔案
寫js程式碼 script 內部支援編寫js程式碼 還可以通過src屬性匯入外部js檔案(js動態效果) <script> prompt('歡迎光臨亞太 澳門') </script> 引入js檔案 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
link：專門用來引入外部的css檔案
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
meta：定義網頁源資訊主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。
1、keywords 關鍵字搜尋 <meta name="keywords" content="物流,科技,奶茶,跳轉"> 2、description 網頁描述資訊(簡介) <meta name="description" content="恆運集團科技"> 3、<meta http-equiv="refresh" content="3;URL=https://www.jd.com"> 指定該網址，3秒後跳到京東
六、body內的標籤
h1~h6 標題標籤
p 段落標籤
b 加粗
i 斜體
u 下劃線
s 刪除線
br 換行
hr 水平分割線
特殊符號
空格 > 大於號 < 小於號 & &符號 ¥ 羊角符 © 版權符 ® 註冊
七、常見標籤
1、塊級標籤（獨佔瀏覽器一行）
塊標籤：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特點：獨佔一行，對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬；
p標籤：段落標籤，段落文字使用，預設格式：段尾進行換行；
div標籤：劃分塊的主要使用標籤；
ul標籤：無序列表的主標籤，後面的標號為圓點（黑色）；
ol標籤：有序列表的主標籤，後面一般跟有序的1,2,3,4,5...；
li標籤：列表中的主體使用標籤
dl標籤：自定義標籤的主標籤；
dt標籤：自定義標籤的表頭；
dd標籤：自定義標籤的表頭的解釋（描述）資訊；
h1~h6：6級標題標籤、字型的大小依次變小。
塊級標籤特點：
1.塊級標籤可以修改長度
2.塊級標籤內部可以巢狀任意的塊級標籤
總結：
只要是塊級標籤，都是可以巢狀行 內的標籤
但是：p標籤只能巢狀行內，其他塊級可以巢狀任意的塊級標籤
2、行內標籤（自身文字多大就佔多大）
行內標籤：包含a、span、em、strong、b、i、u、label、br；
特點：可以多個標籤存在一行，不能直接設定行內標籤的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高.
a標籤：主要用來連結一個其他的網頁；
span標籤：主要用來對行內的文字進行一些樣式以及其他的操作；
em標籤：一般用來對文字進行強調，使用斜體體現出來；
strong標籤：一般用來對文字進行強調，使用加粗字型體現出來；
img標籤：圖片引用標籤，其中 src屬性中寫入圖片的地址；
var標籤：JavaScript中命名變數的標籤。
3、行內塊標籤
行內塊標籤：img,input,textarea
特點：結合的行內和塊級的有點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；
各種標籤之間的轉換
1、塊級標籤轉換為行內標籤：display:inline;
2、行內標籤轉換為塊級標籤：display:block;
3、轉換為行內塊標籤：display：inline-block;
程式碼例項：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> </head> <body> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2215934588,2652507557&fm=26&gp=0.jpg" alt="校花"> <stript> <p><a href="http://xiaohuar.com"> 點選</a></p> </stript> <div>div <div>div1</div> <div>div2 <p>p <a href="https://www.baidu.com">a</a> </p> </div> </div> <span>span</span> <a href="" id="d1">頂部</a> <div style="height: 100px;background-color: black"></div> <a href="" id="d2" class="c1">中間</a> <div style="height: 200px;background-color: green"></div> <a href="#d2">回到id為d2的標籤</a> <div style="height: 150px;background-color: yellow"></div> <a href="#d1" username="jason" password="123">回到id為d1標籤</a> </body> </html>
4、列表標籤
1、無序列表
<ul type="circle"> <li>第一項</li> <li>第二項</li> </ul> type屬性： disc（實心圓點，預設值） circle（空心圓圈） square（實心方塊） none（無樣式）
2、有序列表
<ol type="1" start="1"> <li>第一</li> <li>第二</li> </ol> type屬性： 1 數字列表，預設值 A 大寫字母 a 小寫字母 Ⅰ大寫羅馬 ⅰ小寫羅馬
3、標題列表
<dl> <dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl>
5、表格標籤
1、引數解釋
<table> <thead></thead> <tbody></tbody> </table> tr表示一行 th和td都是文字 在thead內用th tbody內用td colspan表示的水平方向 rowspan表示的豎直方向 屬性設定: border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 畫素 百分比.（最好通過css來設定長寬） rowspan: 單元格豎跨多少行 colspan: 單元格橫跨多少列（即合併單元格）
程式碼演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格標籤</title> </head> <body> {#定義整個表#} <table border="20" cellpadding="10" cellspacing="10"> {# 表標題#} <thead> <tr> <th>username</th> <th>password</th> <th>hobby</th> </tr> </thead> {# 表內容#} <tbody> <tr> <td colspan="2">ccc </td> <td>123</td> <td rowspan="2">跑起</td> </tr> <tr> <td>aaa</td> <td>123</td> <td>打球唄</td> </tr> <tr> <td>bbb</td> <td>123</td> <td>我不要</td> </tr> </tbody> </table> </body> </html>
八、form表單提交資料
表單用於向伺服器傳輸資料,從而實現使用者與Web伺服器的互動,表單能夠包含輸入輸出系列標籤,比如文字欄位,複製框、單選框、提交框等表單還可以包含：textarea、select、fieldset、label標籤
1、表單屬性
2、input
<input type=""> 元素會根據不同的 type 屬性，變化為多種形態。
屬性說明
name：表單提交時的“鍵”，注意和id的區別
value：表單提交時對應項的值
type 是 "button", "reset", "submit"時，為按鈕上顯示的文字內容
type 是 "text","password","hidden"時，為輸入框的初始值
type 是 "checkbox", "radio", "file"，為輸入相關聯的值
checked：radio和checkbox預設被選中的項
readonly：text和password設定只讀
disabled：所有input均適用
3、select標籤
<form action="" method="post"> <select name="city" id="city" multiple=true> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">廣州</option> <option value="4">深圳</option> </select> </form> 屬性說明 multiple：布林屬性，設定後為多選，否則預設單選 disabled：禁用 selected：預設選中該項 value：定義提交時的選項值
4、label標籤
<form action=""> <label for="username">使用者名稱</label> <input type="text" id="username" name="username"> </form> // 另一種寫法 <form> <input type='text' id='username' name='username'> </form>
5、textarea標籤
<textarea name="memo" id="memo" cols="30" rows="10"> 預設內容 </textarea> 屬性說明： name:名稱 rows:行數 cols: 列數 disabled: 禁用 獲取使用者輸入的大段文字