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

本文轉載自查看原文 2020-05-12 10:11 648 web前端-三劍客

【目錄】標簽&標簽屬性

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" type="text/css" href="mycss.css"> 可引入外部css文件 # 3 網站的圖標 <link rel="icon" type="images/x-icon" href="https://www.baidu.com/favicon.ico"> # 4 js 代碼 <script> 　　alert(123) </script> 內部用來書寫js代碼 <script type="text/javascript" src="myjs.js"></script> 可引入外部js文件 # 5 網站描述關鍵字/文本 <meta name="keywords" content="教育,Python培訓,Linux培訓,網絡安全培訓,Go語言培訓, 人工智能培訓,雲計算培訓, Linux運維培訓,Python自動化運維,Python全棧開發,IT培訓">

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

link 標簽

# 屬性 href = " 鏈接地址 "

# 引入外部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=" 圖片路徑"
1.圖片的路徑可以是本地的也可以是網上的
2.url:自動朝該url發送get請求獲取數據

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

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

title="鼠標懸浮停留時，自動提示信息"
當鼠標懸浮到圖片上之后自動展示的提示信息

height="800px"

width=""

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

#1、用法 <img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "鼠標懸停到圖片上時顯示的內容" /> #2、注意 2.1 src指定的圖片地址可以是網絡地址，也可以是一個本地地址，本地地址可以用絕對或相對路徑，但通常用相對路徑，相對路徑是以html文件當前所在路徑為基准進行的 2.2 圖片的格式可以是png、jpg和gif 2.3 alt="圖片加載失敗時顯示的內容" 為img標簽加上該屬性可用於支持搜索引擎和盲人讀屏軟件。 2.4 title = "鼠標懸停到圖片上時顯示的內容" 2.5 如果沒有指定圖片的width和height則按照圖片默認的寬高顯示，如果指定圖片的width和height則可能讓圖片變形 那如果又想指定寬度和高度，又不想讓圖片變形，我們可以只指定寬度和高度的一個值即可 只要指定了一個值，系統會根據該值計算另外一個值，並且都是等比拉伸的，圖片將不會變形

詳細講解

（5）a 標簽——標記一個內容為超鏈接，全稱anchor，錨

# 鏈接標簽
<a href=" " target=" " title=" " ></a>

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

# 屬性

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

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

新建頁面跳轉 target="_blank"

title="鼠標懸浮停留時，自動提示信息"
當鼠標懸浮到圖片上之后自動展示的提示信息

去除a標簽內的文本下划線

style="text-decoration:none;"

# 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標簽跳轉到指定的位置，是沒有過渡動畫的，
    是直接一下子就跳轉到了指定位置；
    如果跳到首頁需要過渡動畫，則不用a標簽做。

# 假鏈接(占位作用)

#1、什么是假鏈接？
就是點擊之后不會跳轉的鏈接，我們稱之為假鏈接 #2、假鏈接存在的意義：
在企業開發前期，其他界面都還沒有寫出來， 那么我們就不知道應該跳轉到什么地方，所以就只能使用假鏈接來代替 #3、假鏈接的定義格式

# 效果也是回到頂部，但是沒有刷新效果
<a href="#">假鏈接</a>

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

#1、超鏈接標簽是超文本文件的精髓，可以控制頁面與頁面之間的跳轉，語法如下 <a href="跳轉到的目標頁面地址" target="是否在新頁面中打開" title="鼠標懸浮顯示的內容">需要展現給用戶查看的內容/也可以是圖片</a> #2、注意： 2.1 a標簽不僅可以標記文字，也可以標記圖片 <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a> 2.2 a標簽必須有href屬性，href的值必須是http://或https://開頭 2.3 a標簽還可以跳轉到自己的頁面 <a href="template/aaa.html">錘你胸口</a> 2.4 target="_blank"代表在新頁面中打開，其余的值均無需記憶， 如果頁面中大量的a標簽都需要設置target="_blank",那么我們可以在head標簽內新增一個base標簽進行統一設置 <base target="_blank"> 如果a標簽自己設置了target，那么就以自己的為准，否則就會參照base的設置 2.5 title="鼠標懸浮顯示的內容"

詳解版

（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>

<ol>
    <li>
        <dl>
            <dt>標題1</dt> 
            <dd>內容1</dd>

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

1、無序列表（列表標簽中使用最多的一種，非常重要）：unordered list #1、作用： 制作導航條、商品列表、新聞列表等 #2、組合使用ul>li <ul>
        <li>秒殺</li>
        <li>優惠券</li>
        <li>PLUS會員</li>
        <li>閃購</li>
        <li>拍賣</li>
        <li>京東服飾</li>
        <li>京東超市</li>
        <li>生鮮</li>
        <li>全球購</li>
        <li>京東金融</li>
    </ul> #3、ul標簽的屬性type（這屬於列表的樣式，所以了解即可） type：列表標識的類型 disc：實心圓(默認值) circle：空心圓 square：實心矩形 none：不顯示標識 可以通過css直接去掉小圓點 <style type="text/css"> ul { list-style: none;
            }
</style> #4、注意 ul與li是組合標簽應該一起出現，並且ul的子標簽只應該是li，而li的子標簽則可以是任意其他標簽 2、有序列表（極少使用） <h1>智商排名</h1>
    <ol>
        <li>Egon</li>
        <li>劉清正</li>
        <li>武佩奇</li>
        <li>alex</li>
        <li>元昊</li>
    </ol>

    <!--有序列表能干的事，完全可以用無序列表取代-->
    <h1>智商排名</h1>
    <ul style="list-style: none">
        <li>1. Egon</li>
        <li>2. 劉清正</li>
        <li>3. 武佩奇</li>
        <li>4. alex</li>
        <li>5. 元昊</li>
    </ul> 自定義列表（也會經常使用） 復制代碼 #1、作用分析 選擇用什么標簽的唯一標准，是看文本的實際語義，而不是看長什么樣子 無序列表：內容是並列的,沒有先后順序 有序列表：內容是有先后順序的 自定義列表：對一個題目進行解釋說明的時候，用自定義列表,可以做網站尾部相關信息，網易注冊界面的輸入框 #2、自定義列表也是一個組合標簽：dl>dt+dd dl:defination list，自定義列表 dt：defination title，自定義標題 dd：defination description，自定義描述 <dl>
    <dt>自定義標題1<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>

    <dt>自定義標題2<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>

    <dt>自定義標題3<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>
</dl> #3、注意: 3.1 dl>dt+dd應該組合出現，dl中只應該存放dt和dd，而可以在dt和dd中添加任意其他標簽 3.2 一個dt可以沒有對應的dd，也可以有多個，但建議一個dt對應一個dd

詳解版

（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: 單元格橫跨多少列（即合並單元格）

#1、寬度和高度
 可以給table和td設置width和height屬性 1.1 默認情況下表格的寬高是按照內容的尺寸來調整的，也可以通過給table標簽設置widht和height來手動指定表格的寬高 1.2 如果給td標簽設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度 #2、水平對齊和垂直對齊
 水平對齊align可以給table、tr、td標簽設置 垂直對齊valign只能給tr、td標簽設置 ========水平對齊=========== 取值 align=“left” align=“center” align=“right” 2.1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊 強調：table只能設置水平方向 2.2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊 2.3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為准 ========垂直對齊=========== 取值 valign=“top” valign=“center” valign=“bottom” 2.4 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊 2.5 給td設置垂直對齊可以讓當前單元格內容垂直對齊 #3、外邊距和內邊距
 只能給table設置 3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值為2px 3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px" 表格屬性（了解知識點）

表格屬性

#1、方式一
 在標簽中，想通過指定外邊距為0來實現細線表格是不靠譜的，其實他是將2條線合成了一條線.所以看上去很不舒服,如下實現 <table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
    </tr>

    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>

    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>
#2、方式二
 細線表格的制作方式： 1、給table標簽設置bgcolor 2、給tr標簽設置bgcolor 3、給table標簽設置cellspacing="1px" 注意： table、tr、td標簽都支持bgcolor屬性 <table width="200px" height="200px" bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
    </tr>

    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>

    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>

#3、方式三（style="border-collapse: collapse;border: 1px solid red"）
<table border="1px" style="border-collapse: collapse;border: 1px solid red">
    <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
    </tr>
    <tr>
        <td>egon</td>
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>alex</td>
        <td>female</td>
        <td>19</td>
    </tr>
</table>

三種方式制作細線表格

為了方便管理維護以及提升語義，我們將表格中存儲的數據分為四類： #1、表格的標題:caption 特點:相對於表格寬度自動居中對齊 注意: 1.1 該標簽一定要寫在table標簽里，否則無效 1.2 caption一定要緊跟在table標簽內的第一個 #2、表格的表頭信息:thead 特點：專門用來存儲每一列的標題，只要將當前列的標題存儲在這個標簽中就會自動居中+加粗文字 #3、表格的主體信息:tbody 注意： 3.1 如果沒有添加tbody，瀏覽器會自動添加 3.2 如果指定了thread和tfoot，那么在修改整個表格的高度時，thead和tfoot有自己默認的高度，不會隨着 表格的高度變化而變化 #4、表尾信息:tfoot <html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">

        <caption>學員信息統計</caption>
        <thead>
            <tr bgcolor="white">
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>

        <tbody>
            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>

            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>

            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>
        </tbody>

        <tfoot>
            <tr bgcolor="white">
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

</body>
</html> 表格結構詳解

表格完整結構

#1、水平向上的單元格 colspan --合並列 可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待 <td colspan="2"></td> #2、垂直向上的單元格 rowspan --合並行 可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待 #注意注意注意: 1、由於把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格 2、一定要記住，單元格合並永遠是向后或者向下合並，而不能向前或向上合並

表格合並

傳統的布局方式就是使用table來做整體頁面的布局，布局的技巧歸納為如下幾點： #1、定義表格寬高，將border、cellpadding、cellspacing全部設置為0 #2、單元格里面嵌套表格 #3、單元格中的元素和嵌套的表格用align和valign設置對齊方式 #4、通過屬性或者css樣式設置單元格中元素的樣式 傳統布局目前應用： #1、快速制作用於演示的html頁面 #2、商業推廣EDM制作(廣告郵件) 傳統布局

傳統布局的技巧

（8）form 表單標簽　

https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911#map

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：表單提交時的“鍵” key ，注意和id的區別。----> key

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

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

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

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

readonly：text和password設置只讀

disabled：所有input均適用

placeholder：后面加上提示信息-placeholder='請輸入密碼：'

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="提交" />

reset 重置按鈕 <input type="reset" value="重置" />

button 普通按鈕 <input type="button" value="普通按鈕" />

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="提交" />
reset	重置按鈕	<input type="reset" value="重置" />
button	普通按鈕	<input type="button" value="普通按鈕" />
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 就可以支持提交文件數據

　　　　　　　　　　 application/x-www-form-urlencoded：在發送前編碼所有字符，不允許提交文件數據（默認）

　　　　　　　　multipart/form-data：不對字符進行編碼，在使用包含文件上傳控件的表單時，必須使用該值

　　　　　　　　text/plain：只對普通字符進行編碼，如空格轉換為 "+" 加號，但不對特殊字符以及文件編碼

 <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="注冊"> 2、<button>點我</button> # 所有獲取用戶輸入的標簽 都應該有name屬性 name就類似於字典的key 用戶的數據就類似於字典的value # 針對用戶選擇的標簽 用戶不需要輸入內容，但是你需要提前給這些標簽添加內容value值 # 針對用戶輸入的標簽。如果你加了value 那就是默認值 <label for="d1"> username:<input type="text" id="d1" name="username" value="默認值" placeholder="請輸入密碼："> </label> 其他input標簽屬性 disable 禁用 readonly 只讀 -->

【補充】

在form內還可以添加一種標簽：

<fieldset>添加邊框
    <legend>注冊頁面</legend>
    表單控件......
</fieldset>

示例代碼

<form action=""> <!-- 用戶輸入框 --> <p> <label for="d1">username:<input type="text" id="d1" placeholder="請輸入用戶名："></label> </p > <p> <label for="d2">password:<input type="password" id="d2" placeholder="請輸入密碼："></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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【2020Python修煉記】web框架之 Django框架基礎 Python開發【前端】:匯總前端開發常用網站匯總前端之HTML標簽、HTTP協議、常用的標簽、 Python開發【前端】：HTML Web前端——Html常用標簽及屬性 Web前端——Html常用標簽及屬性 [原]《Web前端開發修煉之道》-讀書筆記HTML部分 H5移動前端開發常用高能css3匯總前端常用網站匯總

【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 = " 鏈接地址 "

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=" 圖片路徑" 1.圖片的路徑 可以是本地的也可以是網上的2.url:自動朝該url發送get請求獲取數據

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

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

title="鼠標懸浮停留時，自動提示信息"當鼠標懸浮到圖片上之后 自動展示的提示信息

height="800px" width=""

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

（5）a 標簽——標記一個內容為超鏈接，全稱anchor，錨

# 鏈接標簽<a href=" " target=" " title=" " ></a>

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

# 屬性

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

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

新建頁面跳轉 target="_blank"

title="鼠標懸浮停留時，自動提示信息"當鼠標懸浮到圖片上之后 自動展示的提示信息

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

# 假鏈接(占位作用)

（6）列表標簽

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

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

type屬性：

1 數字列表，默認值

【目錄】標簽&標簽屬性

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=" 圖片路徑"
1.圖片的路徑可以是本地的也可以是網上的
2.url:自動朝該url發送get請求獲取數據

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

title="鼠標懸浮停留時，自動提示信息"
當鼠標懸浮到圖片上之后自動展示的提示信息

height="800px"

width=""

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

# 鏈接標簽
<a href=" " target=" " title=" " ></a>

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

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

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

title="鼠標懸浮停留時，自動提示信息"
當鼠標懸浮到圖片上之后自動展示的提示信息

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

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

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

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

（8）form 表單標簽　