【目錄】標簽&標簽屬性

1、HTML 注釋

2、HTML 檔案基礎結構

3、head 內常用標簽

link 鏈接標簽

meta 資訊標簽

4、body 內常用標簽

常用文本標簽

特殊符號

div / span 分塊標簽

a 標簽

img 標簽

list 串列標簽

table 表格標簽

form 表單標簽

0、前端預備知識

HTTP協議：https://www.cnblogs.com/linhaifeng/p/8243379.html

https://www.cnblogs.com/linhaifeng/category/1263978.html

1、HTML 注釋（選中內容或者游標置于注釋行，快捷鍵 ctrl+/ ）

# 注釋:注釋是代碼之母
<!--單行注釋-->
<!--
多行注釋1
多行注釋2
多行注釋3
-->

# 由于HTML代碼非常的雜亂無章并且很多，所以我們習慣性的用注釋來劃定區域方便后續的查找：
<!--導航條開始-->
導航條所有的html代碼
<!--導航條結束-->

<!--左側選單欄開始-->
左側選單欄的HTMl代碼
<!--左側選單欄結束-->

2、HTML 檔案基礎結構（編輯器里搭建HTML格式檔案 !(英文感嘆號)+tab ）

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

</body>
</html>

3、head 內常用標簽

# 1 網頁標題
<title>Title</title> 

# 2 css 樣式
<style>
        h1 {
            color: greenyellow;
        }
</style>  內部用來書寫css代碼

<link rel="stylesheet" href="mycss.css">  可引入外部css檔案

# 3 網站的圖示
<link rel="icon" href="https://www.baidu.com/favicon.ico">

# 4 js 代碼
<script>
        alert(123)
</script>  內部用來書寫js代碼

<script src="myjs.js"></script>  可引入外部js檔案

# 5 網站描述文本
<meta name="keywords" content="教育,Python培訓,Linux培訓,網路安全培訓,Go語言培訓,
人工智能培訓,云計算培訓,
Linux運維培訓,Python自動化運維,Python全堆疊開發,IT培訓">

<!-- 當你在用瀏覽器搜索的時候 只要輸入了keywords后面指定的關鍵字那么該網頁都有可能被百度搜索出來展示給用戶;
網頁的描述性資訊 -->

link 標簽

# 屬性 href = "https://www.cnblogs.com/bigorangecc/p/鏈接地址"

# 引入外部css檔案
<link rel="stylesheet" type="text/css"  href="style.css"></link>
#網站網址小圖示
<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">

meta標簽

Meta標簽介紹：

<meta>元素可提供有關頁面的元資訊（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞，

<meta>標簽位于檔案的頭部，不包含任何內容，

<meta>提供的資訊是用戶不可見的，

meta標簽的組成：

meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的引數值，這些不同的引數值就實作了不同的網頁功能，

1.http-equiv屬性：

相當于http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值，

<!--指定檔案的編碼型別(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳轉到對應的網址，注意引號(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告訴IE以最高級模式渲染檔案(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name屬性:

主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找資訊和分類資訊用的，

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">

#1、指定字符集
<meta charset="gbk">

#2、頁面描述
<meta name="Description" content="具體描述，，，">

#3、關鍵字：有助于搜索引擎SEC優化，再怎么優化也抵不過競價排名
<meta name="Keywords" content="網易，郵箱，游戲，新聞">

#4、3秒后跳轉
<meta http-equiv="refresh" content="3,http://www.baidu.com">

#5、三秒重繪
<meta http-equiv="refresh" content="3">

4、body內常用標簽

【補充】

標簽默認具有的兩個重要屬性

1.id值
類似于標簽的身份證號，在同一個html頁面上id值不能重復
2.class值
該值有點類似于面向物件里面的繼承，一個標簽可以繼承多個class值

標簽既可以有默認的屬性，也可以有自定義的屬性

<p id="d1" class="c1" username="jason" password="123"></p>

編輯器里快速編輯標簽的技巧——開始標簽的后半部分+tab 鍵（部分編輯器支持）

例如：span 標簽

span>（然后按tab鍵）
最后效果如下：
<span></span>

（1）格式排版/文本標簽

格式排版標簽

文本標簽

<!--一下文本標簽  作為了解-->
<cite>    用于引證、舉例、(標簽定義作品（比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題)通常為斜體字
<dfn> 定義一個定義專案
<code> 定義計算機代碼文本
<samp> 定義樣式文本 標簽并不經常使用，只有在要從正常的背景關系中將某些短字符序列提取出來，對它們加以強調的極少情況下，才使用這個標簽，
<kbd> 定義鍵盤文本，它表示文本是從鍵盤上鍵入的，它經常用在與計算機相關的檔案或手冊中，
<abbr> 定義縮寫 配合title屬性  (IE6以上)
<bdo>  來覆寫默認的文本方向 dir屬性 值: lrt  rtl
<var> 定義變數，您可以將此標簽與 <pre> 及 <code> 標簽配合使用，
<small> 標簽定義小型文本（和旁注）
<b>    粗體字標簽 根據 HTML 5 的規范，<b> 標簽應該做為最后的選擇，只有在沒有其他標記比較合適時才使用它，
<i>    斜體字標簽 標簽被用來表示科技術語、其他語種的成語俗語、想法、宇宙飛船的名字等等，
<u>    下劃線字體標簽 標簽定義與常規文本風格不同的文本，像拼寫錯誤的單詞或者漢語中的專有名詞， 請盡量避免使用 <u> 為文本加下劃線，用戶會把它混淆為一個超鏈接，
<s>  洗掉線
<q>  簽定義一個短的參考，瀏覽器經常會在這種參考的周圍插入引號，(小段文字)
<blockquote> 標簽定義摘自另一個源的塊參考，瀏覽器通常會對 <blockquote> 元素進行縮進，(大段文字) (塊狀元素)
<address>  定義地址 通常為斜體 (注意非通訊地址)  塊狀元素

<font>    H5已洗掉 字體標簽，可以通過標簽的屬性指定文字的大小、顏色及字體等資訊
<tt>    H5已洗掉 打字機文字
<big>    H5已洗掉 大型字體標簽
<acronym>  H5已洗掉 首字母縮寫 請使用<abbr>代替

<bdi>      H5新增 標簽允許您設定一段文本，使其脫離其父元素的文本方向設定，(經測驗,各大瀏覽器都不起作用)
<mark>     H5新增 標簽定義帶有記號的文本 請在需要突出顯示文本時使用,如搜索引擎搜索頁面
<meter>    H5新增 定義預定義范圍的度量
<progress> H5新增 標簽標示任務的進度（行程）
<time>     H5新增 定義時間和日期 
<wbr>        H5新增    規定在文本中的何處適合添加換行符，Word Break Opportunity

其他文本標簽

html5中推出了一些新的標簽：

strong == b

   ins == u

    em == i

   del == s

新的標簽是有語意的，而老的只是單純的添加樣式（這是CSS干的事）
        strong的語意：定義重要性強調的文字
        ins的語意（inserted）：定義插入的文字
        em的語意（emphasized）：定義強調的文字
        del的語意（deleted）：定義被洗掉的文字

（2）特殊符號

HTML 特殊符號編碼對照表

&nbsp;  空格
&gt;   大于號
&lt;   小于號
&amp;  & 
&yen;  ¥   人民幣符號
&copy; ©   著作權
&reg;  ®   商標

（3）分塊標簽

div 塊兒級標簽
span 行內標簽

上述的兩個標簽是在構造頁面初期最常使用的, 主要通過 CSS樣式為其賦予不同的表現，

# 頁面的布局一般先用div和span占位之后再去調整樣式

尤其是div使用非常的頻繁
div你可以把它看成是一塊區域也就意味著用div來提前規定所有的區域，之后往該區域內部填寫內容即可
而普通的文本先用span標簽

關于標簽嵌套：

通常,塊級元素可以包含行內元素或某些塊級元素，但行內元素不能包含塊級元素，它只能包含其它行內元素，

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

（4）img 標簽

# 圖片標簽
<img src="" alt="">

#【屬性】

src="https://www.cnblogs.com/bigorangecc/p/圖片路徑"
1.圖片的路徑可以是本地的也可以是網上的
2.url:自動朝該url發送get請求獲取資料

(什么是URL？URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是因特網上標準的資源的地址，)

alt="圖片描述資訊"
當圖片加載不出來的時候給圖片的描述性資訊

title="滑鼠懸浮停留時，自動提示資訊"
當滑鼠懸浮到圖片上之后自動展示的提示資訊

height="800px"

width=""

高度和寬度當你只修改一個的時候另外一個引數會等比例縮放
如果你修改了兩個引數并且沒有考慮比例的問題那么圖片就會失真

（5）a 標簽

# 鏈接標簽
<a href="https://www.cnblogs.com/bigorangecc/p/" target=" " ></a>

"""
當a標簽指定的網址從來沒有被點擊過那么a標簽的字體顏色是藍色
如果點擊過了就會是紫色（瀏覽器給你記憶了）
"""

# 屬性

href="https://www.cnblogs.com/bigorangecc/p/"
1.放url，用戶點擊就會跳轉到該url頁面
2.放其他標簽的id值點擊即可跳轉到對應的標簽位置

target=" "
默認a標簽是在當前頁面完成跳轉 target="_self"

新建頁面跳轉 target="_blank"

# a標簽的錨點功能
eg:點擊一個文本標題頁面自動跳轉到標題對應的內容區域

# 方法一：使用a標簽的 href 和 id 屬性

<a href="" id="d1">頂部</a>  # href 后面不寫內容，則有重繪效果--》也是回到頂部的效果
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 1000px;background-color: greenyellow"></div>
……
<a href="#d1">底部</a>
<a href="#d2">回到中間</a>
<a href="#d111">回到中間</a>

# 方法二：使用 a 標簽的 href 和 name 屬性 
<p>
    <a href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px">八個八</a>
</p>   # 點擊’八個八‘，會跳轉到下方指定位置 

<p>
    <a href="#p2" style="color: darkseagreen;text-decoration:none;font-size:18px">八 用戶與程式互動</a>
</p>   # 點擊’用戶與程式互動‘，會跳轉到下方指定位置

……
<p>1111111111</p>
<p>1111111111</p>
<a href="" name="p1"></a>
<p style="color: red">八個八-來這里</p>
……
<p>1111111111</p>
<a href="" name="p2"></a>
<p style="color: green">八 用戶與程式互動-來這里</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
……
<a href="">跳到首頁</a>  #有重繪效果

 <a href="#">跳到首頁</a> # 沒有重繪效果

# 假鏈接

# 效果也是回到首頁，但是沒有重繪效果
<a href="#">假鏈接</a>

# 點擊以下鏈接，頁面沒有任何反應，因為還沒有指定點擊事件的動作，因此 可以使用這個假鏈接，（使用js代碼）定制指定事件動作
<a href="javascript:">假鏈接</a>

（6）串列標簽

**無序串列(使用較多) —— 快捷語法 ul>li*4**

<ul>
        <li>第一項</li>
        <li>第二項</li>
        <li>第二項</li>
        <li>第二項</li>
</ul>
雖然ul標簽很丑 但是在頁面布局的時候 只要是排版一致的幾行資料基本上用的都是ul標簽

**有序串列(了解) —— 快捷語法 ol>li*3**

<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

type屬性：

1 數字串列，默認值

A 大寫字母

a 小寫字母

Ⅰ大寫羅馬

ⅰ小寫羅馬

標題串列(了解)

<dl>
    <dt>標題1</dt> 
    <dd>內容1</dd>
    <dt>標題2</dt>
    <dd>內容2</dd>
    <dt>標題3</dt>
    <dd>內容3</dd>
</dl>

（7）table 表格標簽

<!-- 表格標簽
<thead> 表頭
<tbody> 表單資料
<tr> 一個<tr> 就是一行
<th> 加粗文本，一般用于表頭標題
<td> 正常文本，一般用于其他表格內容
    
屬性（一般加在 開始標簽里）
<table border="1">  加外邊框
<td colspan="2"></td>  水平方向占2個單元格（合并同一行中的單元格）
<td rowspan="2"></td>   垂直方向占2個單元格（合并同一列中的單元格）
-->
    <table>  /* 表格標簽里，由<thead></thead>和<tbody></tbody> 組成*/
        <thead>
            <tr>
                <th>uername</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>mili</td>
                <td>1314</td>
            </tr>
            <tr>
                <td>cc</td>
                <td>520</td>
            </tr>
        </tbody>
    </table>

屬性:

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素百分比.（最好通過css來設定長寬）

rowspan: 單元格豎跨多少行

colspan: 單元格橫跨多少列（即合并單元格）

（8）form 表單標簽　

form 標簽的屬性:

屬性描述

accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集），

action 規定向何處提交表單的地址（URL）（提交頁面），

autocomplete 規定瀏覽器應該自動完成表單（默認：開啟），

enctype 規定被提交資料的編碼（默認：url-encoded），

method 規定在提交表單時所用的 HTTP 方法（默認：GET），

name 規定識別表單的名稱（對于 DOM 使用：document.forms.name），

novalidate 規定瀏覽器不驗證表單，

target 規定 action 屬性中地址的目標（默認：_self），

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集），
action	規定向何處提交表單的地址（URL）（提交頁面），
autocomplete	規定瀏覽器應該自動完成表單（默認：開啟），
enctype	規定被提交資料的編碼（默認：url-encoded），
method	規定在提交表單時所用的 HTTP 方法（默認：GET），
name	規定識別表單的名稱（對于 DOM 使用：document.forms.name），
novalidate	規定瀏覽器不驗證表單，
target	規定 action 屬性中地址的目標（默認：_self），

input 標簽的屬性:

name：表單提交時的“鍵”，注意和id的區別

value：表單提交時對應項的值checked：radio和checkbox默認被選中的項

type="button", "reset", "submit"時，為按鈕上顯示的文本年內容

type="text","password","hidden"時，為輸入框的初始值

type="checkbox", "radio", "file"，為輸入相關聯的值

readonly：text和password設定只讀

disabled：所有input均適用

input 標簽的 type屬性值:

type屬性值 表現形式 對應代碼

text 單行輸入文本 <input type=text" />

password 密碼輸入框 <input type="password" />

date 日期輸入框 <input type="date" />

checkbox 復選框 <input type="checkbox" checked="checked" />

radio 單選框 <input type="radio" />

submit 提交按鈕 <input type="submit" value="https://www.cnblogs.com/bigorangecc/p/提交" />

reset 重置按鈕 <input type="reset" value="https://www.cnblogs.com/bigorangecc/p/重置" />

button 普通按鈕 <input type="button" value="https://www.cnblogs.com/bigorangecc/p/普通按鈕" />

hidden 隱藏輸入框 <input type="hidden" />

file 文本選擇框 <input type="file" />

type屬性值	表現形式	對應代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	復選框	<input type="checkbox" checked="checked" />
radio	單選框	<input type="radio" />
submit	提交按鈕	<input type="submit" value="https://www.cnblogs.com/bigorangecc/p/提交" />
reset	重置按鈕	<input type="reset" value="https://www.cnblogs.com/bigorangecc/p/重置" />
button	普通按鈕	<input type="button" value="https://www.cnblogs.com/bigorangecc/p/普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" />

select 標簽的屬性：

multiple：布爾屬性，設定后為多選，否則默認單選

disabled：禁用

selected：默認選中該項

value：定義提交時的選項值

textarea 標簽的屬性說明：

name：名稱

rows：行數

cols：列數

disabled：禁用

<!-- 表單標簽 
#能夠獲取前端用戶資料(用戶輸入的、用戶選擇、用戶上傳...)基于網路發送給后端服務器

1\
form 標簽的默認屬性 action:
    控制資料提交的后端路徑(給哪個服務端提交資料)
        1.什么都不寫  默認就是朝當前頁面所在的url提交資料
        2.寫全路徑:https://www.baidu.com  朝百度服務端提交
        3.只寫路徑后綴action='/index/'  
            自動識別出當前服務端的ip和port拼接到前面
        host:port/index/
    form表單提交檔案需要注意
        1.method必須指定為 post
        （form表單默認提交資料的方式是get請求，資料是直接放在url后面的，
　　　　　　無法保證資料安全 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on）
        2.enctype="multipart/form-data"
            enctype類似于資料提交的編碼格式
            默認是urlencoded 只能夠提交普通的文本資料
            formdata 就可以支持提交檔案資料
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

2\
# label 和 input都是行內標簽，ps:input不跟label關聯也沒有問題
label 標簽的默認屬性 for：
    for的值要與相關聯的 input標簽的 id值一致

/* 第一種:直接將input框寫在label內 */
<label for="d1"> 
    username:<input type="text" id="d1">
</label>

 /* 第二種 通過id鏈接即可 無需嵌套 */
<label for="d2">password:</label>
<input type="text" id="d2">   

input標簽 就類似于前端的變形金剛 ，通過type屬性變形
    text:普通文本
    password:密文
    date:日期    
    submit:用來觸發form表單提交資料的動作
    button:就是一個普普通通的按鈕 本身沒有任何的功能 但是它是最有用的，學完js之后可以給它自定義各種功能
    reset:重置內容
    radio:單選
        默認選中要加checked='checked'
        <input type="radio" name="gender" checked='checked'>男
        當標簽的屬性名和屬性值一樣的時候可以簡寫
        <input type="radio" name="gender" checked>女

    checkbox:多選
        <input type="checkbox" checked>DBJ
    
    file:獲取檔案 也可以一次性獲取多個
        <input type="file" multiple>
    hidden:隱藏當前input框     釣魚網站伎倆    

3\
select 標簽 默認是單選 可以加mutiple引數變多選 默認選中selected

4\
textarea 標簽  獲取大段文本，多行文本

ps:
# 能夠觸發form表單提交資料的按鈕有哪些(一定要記住)
        1、<input type="submit" value="https://www.cnblogs.com/bigorangecc/p/注冊">
        2、<button>點我</button>
# 所有獲取用戶輸入的標簽 都應該有name屬性
    name就類似于字典的key
    用戶的資料就類似于字典的value

# 針對用戶選擇的標簽 用戶不需要輸入內容，但是你需要提前給這些標簽添加內容value值
# 針對用戶輸入的標簽，如果你加了value 那就是默認值
    <label for="d1">
        username:<input type="text" id="d1" name="username" value="https://www.cnblogs.com/bigorangecc/p/默認值">
    </label>

其他input標簽屬性
    disable 禁用
    readonly 只讀

-->

示例代碼

<form action="">
        <!-- 用戶輸入框 -->
        <p>
            <label for="d1">username:<input type="text" id="d1"></label>
        </p >
        <p>
            <label for="d2">password:<input type="password" id="d2"></label>
        </p >
        <!-- 日期選擇功能 -->
        <p>birthday:
            <input type="date">
        </p >
        <!-- input標簽-單選 (將 name 的值設為一樣的，就可實作 單選) -->
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender" checked>女
            <input type="radio" name="gender">其他
        </p >
        <!--input標簽-多選 -->
        <p>hobby:
            <input type="checkbox">read
            <input type="checkbox" checked>DBJ
            <input type="checkbox" checked>JBD
            <input type="checkbox">hecha
        </p >

        <!-- select標簽-單選 -->
        <p>province：
            <select name="" id="">
                <option value="">上海</option>
                <option value="" selected>北京</option>
                <option value="">深圳</option>
            </select>
        </p >
         <!-- select標簽-多選 使用 multiple 屬性 -->
        <p>前女友:
            <select name="" id="" multiple>
                <option value="" selected>新垣結衣</option>
                <option value="" selected>斯佳麗</option>
                <option value="">明老師</option>
            </select>
        </p >
         <!-- select標簽-多級單選串列 嵌套 <optgroup>標簽 -->
       <p>province1:
           <select name="" id="">
               <optgroup label="上海">
                   <option value="">浦東</option>
                   <option value="">黃埔</option>
                   <option value="">青浦</option>
               </optgroup>
               <optgroup label="北京">
                   <option value="">朝陽</option>
                   <option value="">昌平</option>
                   <option value="">沙河</option>
               </optgroup>
               <optgroup label="深圳">
                   <option value="">111</option>
                   <option value="">222</option>
                   <option value="">333</option>
               </optgroup>
           </select>
       </p >
       <!-- 上傳檔案 multiple屬性可支持用戶能上傳多種檔案 -->
        <p>檔案:
            <input type="file" multiple>
        </p >
        <!-- 文本輸入框 -->
        <p>自我介紹:
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p >
        <input type="submit" value="注冊">
        <!--  當你沒有使用 value屬性 指定按鈕的文本內容 不同的瀏覽器打開之后可能渲染的文本內容不一致-->
        <input type="button" value="按鈕">
        <input type="reset" value="重置">
        <button>點我</button>
    </form>

使用python 本地后端接收表單資訊（了解即可）

from flask import Flask, request


app = Flask(__name__)


# 當前url既可以支持get請求也可以支持post請求  如果不寫默認只能支持get請求

@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 獲取form表單提交過來的非檔案資料
    # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
    print(request.files)  # 獲取檔案資料
    file_obj = request.files.get('myfile.png')
    file_obj.save(file_obj.name)
    return 'OK'

app.run()

表單HTML 的form 需要加上相應屬性：

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

參考閱讀：

https://www.cnblogs.com/xiaoyuanqujing/articles/11669926.html

https://www.cnblogs.com/Dominic-Ji/p/10136928.html

https://www.cnblogs.com/linhaifeng/category/1263978.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39097.html

標籤：Html/Css

上一篇：【教程干貨】前端學習資源網站

下一篇：【2020Python修煉記】前端開發之 CSS基礎和CSS選擇器

【2020Python修煉記】前端開發之 HTML常用標簽匯總

【目錄】 標簽&標簽屬性

1、HTML 注釋

2、HTML 檔案基礎結構

3、head 內常用標簽

link 鏈接標簽

meta 資訊標簽

4、body 內常用標簽

常用文本標簽

特殊符號

div / span 分塊標簽

a 標簽

img 標簽

list 串列標簽

table 表格標簽

form 表單標簽

0、前端預備知識

HTTP協議：https://www.cnblogs.com/linhaifeng/p/8243379.html

https://www.cnblogs.com/linhaifeng/category/1263978.html

1、HTML 注釋 （選中內容或者游標置于注釋行，快捷鍵 ctrl+/ ）

2、HTML 檔案基礎結構 （編輯器里 搭建HTML格式檔案 !(英文感嘆號)+tab ）

3、head 內常用標簽

link 標簽

# 屬性 href = "https://www.cnblogs.com/bigorangecc/p/鏈接地址"

meta標簽

Meta標簽介紹：

<meta>元素可提供有關頁面的元資訊（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞，

<meta>標簽位于檔案的頭部，不包含任何內容，

<meta>提供的資訊是用戶不可見的，

meta標簽的組成：

meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的引數值，這些不同的引數值就實作了不同的網頁功能，

1.http-equiv屬性：

相當于http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值，

2.name屬性:

主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找資訊和分類資訊用的，

4、body內常用標簽

【補充】

標簽默認具有的兩個重要屬性

1.id值類似于標簽的身份證號，在同一個html頁面上id值不能重復2.class值該值有點類似于面向物件里面的繼承，一個標簽可以繼承多個class值

標簽既可以有默認的屬性，也可以有自定義的屬性

編輯器里快速編輯標簽的技巧——開始標簽的后半部分+tab 鍵（部分編輯器支持）

例如：span 標簽

（1）格式排版/文本標簽

格式排版標簽

文本標簽

html5中推出了一些新的標簽：

（2）特殊符號

HTML 特殊符號編碼對照表

（3）分塊標簽

div 塊兒級標簽span 行內標簽

上述的兩個標簽是在構造頁面初期最常使用的, 主要通過 CSS樣式為其賦予不同的表現，

# 頁面的布局一般先用div和span占位之后再去調整樣式

尤其是div使用非常的頻繁div你可以把它看成是一塊區域 也就意味著用div來提前規定所有的區域，之后往該區域內部填寫內容即可而普通的文本先用span標簽

關于標簽嵌套：

通常,塊級元素 可以包含 行內元素或某些塊級元素，但行內元素不能包含塊級元素，它只能包含其它行內元素，

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

（4）img 標簽

# 圖片標簽<img src="" alt="">

#【屬性】

src="https://www.cnblogs.com/bigorangecc/p/圖片路徑" 1.圖片的路徑 可以是本地的也可以是網上的2.url:自動朝該url發送get請求獲取資料

(什么是URL？URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是因特網上標準的資源的地址，)

alt="圖片描述資訊"當圖片加載不出來的時候 給圖片的描述性資訊

title="滑鼠懸浮停留時，自動提示資訊"當滑鼠懸浮到圖片上之后 自動展示的提示資訊

height="800px" width=""

高度和寬度當你只修改一個的時候 另外一個引數會等比例縮放如果你修改了兩個引數 并且沒有考慮比例的問題 那么圖片就會失真

（5）a 標簽

# 鏈接標簽<a href="https://www.cnblogs.com/bigorangecc/p/" target=" " ></a>

"""當a標簽指定的網址從來沒有被點擊過 那么a標簽的字體顏色是藍色如果點擊過了就會是紫色（瀏覽器給你記憶了）"""

# 屬性

href="https://www.cnblogs.com/bigorangecc/p/"1.放url，用戶點擊就會跳轉到該url頁面2.放其他標簽的id值 點擊即可跳轉到對應的標簽位置

target=" "默認a標簽是在當前頁面完成跳轉 target="_self"

新建頁面跳轉 target="_blank"

# a標簽的錨點功能eg:點擊一個文本標題 頁面自動跳轉到標題對應的內容區域

# 假鏈接

（6）串列標簽

無序串列(使用較多) —— 快捷語法 ul>li*4

有序串列(了解) —— 快捷語法 ol>li*3

type屬性：

1 數字串列，默認值

A 大寫字母

【目錄】標簽&標簽屬性

1、HTML 注釋（選中內容或者游標置于注釋行，快捷鍵 ctrl+/ ）

2、HTML 檔案基礎結構（編輯器里搭建HTML格式檔案 !(英文感嘆號)+tab ）

1.id值
類似于標簽的身份證號，在同一個html頁面上id值不能重復
2.class值
該值有點類似于面向物件里面的繼承，一個標簽可以繼承多個class值

div 塊兒級標簽
span 行內標簽

尤其是div使用非常的頻繁
div你可以把它看成是一塊區域也就意味著用div來提前規定所有的區域，之后往該區域內部填寫內容即可
而普通的文本先用span標簽

通常,塊級元素可以包含行內元素或某些塊級元素，但行內元素不能包含塊級元素，它只能包含其它行內元素，

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

# 圖片標簽
<img src="" alt="">

src="https://www.cnblogs.com/bigorangecc/p/圖片路徑"
1.圖片的路徑可以是本地的也可以是網上的
2.url:自動朝該url發送get請求獲取資料

alt="圖片描述資訊"
當圖片加載不出來的時候給圖片的描述性資訊

title="滑鼠懸浮停留時，自動提示資訊"
當滑鼠懸浮到圖片上之后自動展示的提示資訊

height="800px"

width=""

高度和寬度當你只修改一個的時候另外一個引數會等比例縮放
如果你修改了兩個引數并且沒有考慮比例的問題那么圖片就會失真

# 鏈接標簽
<a href="https://www.cnblogs.com/bigorangecc/p/" target=" " ></a>

"""
當a標簽指定的網址從來沒有被點擊過那么a標簽的字體顏色是藍色
如果點擊過了就會是紫色（瀏覽器給你記憶了）
"""

href="https://www.cnblogs.com/bigorangecc/p/"
1.放url，用戶點擊就會跳轉到該url頁面
2.放其他標簽的id值點擊即可跳轉到對應的標簽位置

target=" "
默認a標簽是在當前頁面完成跳轉 target="_self"

# a標簽的錨點功能
eg:點擊一個文本標題頁面自動跳轉到標題對應的內容區域

**無序串列(使用較多) —— 快捷語法 ul>li*4**

**有序串列(了解) —— 快捷語法 ol>li*3**

width: 像素百分比.（最好通過css來設定長寬）

（8）form 表單標簽　