HTML基本結構與標籤總結整理篇

時間 2019-11-29

標籤 html 基本結構標籤總結整理欄目 HTML 简体版

原文原文鏈接

HTML基本結構與標籤總結整理篇

前言：這是筆者的學習總結與整理，若是有錯誤或疑問的地方，歡迎指正與討論！另：此文會不定時更新~css

　　1.瞭解HTMLhtml

　　學習前端技術，必然涉及三個方面：html（結構）、css（表現）、js（行爲），本文整理的就是html的基本內容。html是超文本標記語言，其中「超文本」是指網頁內能夠包含文字、圖片、連接等內容。前端

　　html4.0一、xhtml、html5之間的區別（面試可能會遇到）：html5

　　如今主流是使用html5語言，而html5與以前的html4.01和xhtml的區別從歷史順序來看，是html4.01—>xhtml—>html5。在html4.01及以前的語言標準不是很規範，都是程序員先實現後有標準，爲了規範HTML語言，W3C（萬維網聯盟）結合XML和HTML4.01制定了xhtml，此種標準很嚴格，每種標籤必須閉合，每種屬性必須用引號包住。後來因爲xhtml缺少交互性，因而就出現了html5，在網頁的第一行寫<!DOCTYPE html>，它就是一個html5頁面。程序員

　　2.html的基本結構面試

　　html文檔有三部分：文檔聲明、<head>「頭」部分</head>、<body>主體部分</body>。其中頭部提供頁面的信息，主體部分提升頁面具體內容。編程

如下爲html的基本結構：瀏覽器

 1 <!DOCTYPE html>
 2 <!--
 3     這是一個文檔聲明，html5已經簡化成上述樣式
 4     注意事項：文檔聲明必須有，並且必須在文檔頁面的第一行
 5 -->
 6 <html>
 7     <head>
 8         <meta charset="UTF-8">
 9         <title>此處標題</title>
10     </head>
11     <body>
12         網頁內容
13     </body>
14 </html>

　　3.html的基本標籤緩存

　　首先全部的html標籤必須是閉合標籤,即必須是「<...>」形式。標籤通常是成對出現的，好比<title>...</title>；也能夠是自閉合標籤，好比：<img />; 也就是說/表示這一個或者一對標籤的閉合。安全

　　3.1 <head></head>標籤:網頁的頭部，存放網頁的摘要信息，有利於瀏覽器的解析以及搜索引擎的搜索。Head中常見的標籤有兩種，title和meta；

　　3.1.1<title> </title> : 網頁標題

　　3.1.2<meta></meta>: 用於給瀏覽器和搜索引擎看，描述文檔類型和編碼，能夠描述文檔的關鍵字keywords和描述description。

　　　　　　　　　　　常見的寫法有兩種：

1 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
2 <meta name="keywords" content="html5,網頁製做,前端學習" />

　　　　　　　　　　 1.charset:設置文檔的字符集編碼格式

　　　　　　　　　　　　　　　》》常見的幾種字符集編碼格式：
　　　　　　　　　　　　　　　　 UTF-8：萬國碼(兼容全部國家編碼) 又稱Unicode(Unicode8/Unicode16)經常使用！
　　　　　　　　　　　　　　　　 GB-2312：GB 萬國碼簡體中文
　　　　　　　　　　　　　　　　 GBK：擴展的國際碼
　　　　　　　　　　 2.http-equiv:將信息寫給瀏覽器看，讓瀏覽器按照這裏的要求執行，須要配合content使用
(http-equiv屬性只是代表須要設置那部分，具體的設置內容，放到content屬性中)
　　　　　　　　　　　　　　　　可選屬性值：content-type(文檔類型)、refresh(自動刷新)、set-cookie(設置瀏覽器cookie緩存)
　　　　　　　　　　 3.name:使用方法同http-equiv,要配合content使用，將咱們的信息寫給搜索引擎看
　　　　　　　　　　　　　　經常使用屬性值：author(做者)、keywords(關鍵字)、description(網頁描述)
　　　　　　　　　　　　　　這三個屬性設置，網頁必不可少

1         <meta name="author" content="http://www.jierui.com" />  
2         <!--做者-->
3         <meta name="keywords" content="html5,網頁製做,前端學習" /> 
4         <!--多個關鍵字用英文逗號分隔-->
5         <meta name="description" content="煙臺旅遊，電話：0535-6680131專爲您提供出境遊、國內遊、周邊遊、簽證等服務,帶您開啓愉快之旅！"/>
6         <!--搜索網站時，title下面的顯示解釋文字，相當重要！-->
7         <title>煙臺國際旅行社</title>
8         <!--網頁的標題，即網頁的選項卡上的文字-->

　　3.1.3<link></link>標籤：鏈接網頁和其餘文件　　　　　

　　　　　　　　經常使用：使用link標籤鏈接網頁圖標；例如title前面的小loge
　　　　　　　　 rel屬性：聲明超文本的類型，此處選icon(圖標)
　　　　　　　　 href屬性：鏈接的路徑地址
　　　　　　　　 type屬性：能夠省略

<link rel="icon" href="ivicon.png" />

　　3.2 <body></body>主體部分

　　　 a.塊級標籤：顯示爲塊，先後隔一行（自動換行，且行間距大）。
　　 b.行級標籤：按行從左往右逐一顯示。

　　 3.2.1 html常見的塊級標籤

　　　　a：換行符<br/>

　　　　b：水平線<hr/>　　　　

　　　　c：標題標籤<h1></h1><h1></h1>......<h6></h6> 特色:h1最大，h6最小，自動加粗。

　　　　d：段落標籤<p></p>

　　　　e：預格式標籤<pre></pre>:瀏覽器默認顯示樣式，即顯示爲等寬字體;保留代碼中的換行、空格等元素在瀏覽器中的格式。

　　　　f：引用標籤<blockquote></blockquote>：重要的cite屬性代表引用的來源，通常爲網址，且網址不會在網頁中展現，瀏覽器通常顯示爲首行縮進，此標籤的目的是實現編程語言的語義化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常見的塊級標籤</title>
    </head>
    <body>
        <h1>h1標題標籤</h1>
        <h2>h2標題標籤</h2>
        <h3>h3標題標籤</h3>
        <br/>
        <h4>h4標題標籤</h4>
        <h5>h5標題標籤</h5>
        <hr/>
        <h6>h6標題標籤</h6>

        <p>這是段落標籤</p>
        <p>第二行</p>
        <pre>一二三四五
                              一二三四五
        </pre>
         <blockquote cite="此處通常爲網址">
            近朱者赤，近墨者黑
        </blockquote>
        </body>
</html>

　　3.2.2 html基於佈局的塊級標籤

　　列表分爲:無序列表；有序列表；定義列表

　　a.有序列表
　　<ol> （order list縮寫）
　　　　<li>...</li> 列表項能夠有n多個
　　　　<li>...</li>
　　　　<li>...</li>
　　 </ol>

　　 b.無序列表
　　 <ul> (unorder list)
　　　　<li>...</li> n多個
　　　　<li>...</li>
　　　　<li>...</li>
　　</ul>

　　c.定義描述列表
　　 <dl>
　　　　<dt>通常只有一項</dt> （列表標題:標題頂格顯示）
　　　　<dd>能夠有不少項</dd> （列表描述項:描述項相對標題縮進顯示）
　　　　<dd>...</dd>
　　　　<dd>...</dd>
　　 </dl>

　　注意：嵌套時，HTML標籤必定不能交叉！！

　　 d.組合標籤顯示效果：上面是圖片，下面是圖片的標題，同時圖片和標題前代縮進。
　　<figure>
　　　　<img src="..."/> （圖片）
　　　　<figcaption>...</figcaption> （圖片的標題）
　　</figure>

　　e.分區標籤:能夠包裹任何標籤，也能夠被包裹進任何標籤,用於把頁面劃分爲不一樣的分區，能夠經過CSS設置寬度、高度、邊框、背景色各類屬性。

　　 <div>...</div>

　　就不舉例子了，上面的格式寫的很清楚~

　　3.2.3 html的行級標籤

　　a.<span>...</span>：文本

　　b.<em>...</em>：強調

　　c.<strong>...</strong>：強調　

　　[注意] 1.強調程度來講： strong>em；
　　　　　 2.HTML5語言，要求標籤儘量的實現語義化。（strong與em所包含的b與i不具有的強調含義）

　　d.<i>...</i>：傾斜

　　e.<b>...</b>：加粗

　　f.<q>...</q>：短引用，與blockquote(長引用)對比，無引號

　　g.<small>...</small>（縮小字體）與<big>...</big>（放大字體）【二者能夠多重嵌套,但不經常使用】

　　以上標籤較簡單，本身多練習便可，無需舉例~

　　h.<img src="..."/>：圖片

　　　　1.src: 表示引用圖片的地址
　　　　路徑地址的寫法：a.★相對路徑：以當前文件爲準去尋找圖片地址。
　　　　　　　　　　　　　　　　　　　與當前文件處於同一層的圖片直接寫圖片及其後綴名；
　　　　　　　　　　　　　　　　　　　圖片在當前文件下一層：文件夾名/圖片名
　　　　　　　　　　　　　　　　　　　圖片在當前文件上一層：../圖片名
　　　　　　　　　　　　b.絕對路徑：嚴禁使用！！例如file:///D:/文件夾/圖片.後綴名
　　　　　　　　　　　　c.網絡地址：網絡上的圖片連接。可是，通常不使用。
　　　　2.height width ：圖片的高度和寬度，能夠用css樣式(style="height: ;width: ;")所代替
　　　　3.title ：圖片的標題，當鼠標之上後顯示的文字。
　　　　4.alt:當圖片沒法加載的時候顯示的文字。
　　　　*5.align：圖片兩邊文字所對應圖片的位置。（top center bottom）

 1         <img src="ivicon.png" />
 2         <img src="練習用圖/ivicon.png" />
 3         <img src="../img/ivicon.png"/>
 4         <!--以上爲相對路徑寫法-->
 5         
 6         <img src="此處爲路徑"/>
 7         <!--以上爲絕對路徑寫法-->
 8         
 9         <img src="此處爲網絡地址"/>
10         <!--以上爲網絡地址寫法-->

　　i.<a>...</a>：超連接

　　　　1.href="...":超連接的路徑(網絡鏈接或者本地文件)，路徑肯定同img。
　　　　2.target:_blank 新頁面打開 _self 自身頁面跳轉
　　　　3.title:同上
　　　　4.rel（瞭解）：指定當前文檔與被鏈接文檔的關係，實現語義化
　　　　　　　　　　prev（前一片）
　　　　　　　　　　next（後一篇）
　　　　　　　　　　★icon (被連接圖片是當前文檔的圖標)
　　　　　　　　　　★stylesheet（被連接文檔是當前文檔的樣式表）
　　　　　　　　　　prefetch（預加載，當你在當前文檔加載完成，利用空餘時間，預加載即將連接文檔）
　　　　5.錨連接：
　　　　　　　　a.本頁面錨連接 s1.設置錨點<a name="top"></a> 當我點擊超連接時，跳轉到指定位置
　　　　　　　　　　　　　　　 s2.在超連接上使用<a href="#top">...</a> 跳轉到對應錨點
　　　　　　　　b.頁面間錨連接：在即將跳轉的頁面某位置設定錨點<a name="name"></a>
　　　　　　　　　　　　　　　　在超連接的href屬性中使用"頁面地址.html#name"
　　　　　　　　6.功能性連接：
　　　　　　　　　　　　　　　mailto：郵箱地址用於給指定郵箱發送文件
　　　　　　　　　　　　　　　tencen://message/?uin=qq號碼給指定qq發送消息

        <a name="weixin">     <!--錨連接的跳轉點，與後面的代碼呼應 -->
           <img src="練習用圖/ivicon.png" style="height:100px ;width:100px ;"title="哈啊哈" alt="這裏沒顯示"/>
        </a>
　　　　 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <a href="#weixin" target="_self">這是一個超連接，去看微信的</a>
        <a href="練習1.html#qq" target="_self" title="aaaaa">這個是練習一，自身跳轉的</a>
        <a href="mailto:471612939@qq.com">這裏發郵件</a>
        <a href="tencen://message/?uin=2572035894">這裏發信息</a>
        <a href="ivicon.png" target="_blank">picture</a>

　　3.2.4表格元素：行列格

　　表格 <table></table>
　　表格的行 <tr></tr>
　　每行中的列 <td></td>
　　表格的表頭 <th></th> 默認加粗，單元格居中

　　一、table的常見屬性：
　　　 a. border 邊框，其增大時，只增長外圍框線，單元格邊框始終爲1像素
　　　 b. cellspacing 單元格之間的間隙距離,當=0的時候，只會是單元格的間隙等於0，但不會合並邊框線，此時表格中線爲兩個像素，若想使其合併，則

　　　　　★使用 style="border-collapse:collapse"★
　　　 c. cellpadding 單元格里邊的文字與邊框線的距離(不經常使用)
　　　 d. width height 寬度和高度
　　　 e. align 表格的對齊方式：【left right center】
　　　　【注意事項：至關於讓表格浮動，會影響其後的元素的原有排列方式】
　　　　f. bgcolor 單元格的背景色，等同於style="background-color:;"
　　　　g. background 單元格的背景圖片,等同於style="background-image:...;"，且背景圖會覆蓋背景色
　　　　h. bordercolor 邊框的顏色

　　二、tr td（th）相關屬性
　　　　a. width height 單元格的寬度和高度
　　　　b. bgcolor 單元格的背景顏色
　　　　c. align (left right center)單元格中的文字水平對齊方式(text-align 文本居中)
　　　　d. valign (top center bottom)單元格中的文字垂直對齊方式
　　　　e. nowrap 單元格中文字不換行
　　　　【注意】當表格屬性與行列屬性相沖突時，以行列屬性爲準（近者優先！！！）
　　　　　　　　table中的align控制表格在整個瀏覽器中的顯示位置！
　　　　　　　　單元格中的align控制其中文字在單元格中的對齊方式！
　　　　　　　　表格的align屬性並不影響單元格內文字的水平對齊方式！
　　　　　　　　tr的align屬性能夠控制一行中全部單元格的水平對齊方式！

　　三、表格的跨行和跨列
　　　　跨列：colspan="n列" N行對應刪除右邊N-1行
　　　　跨行：rowspan="n行" N列對應刪除右邊N-1列

 1 <table width="500" height="200" border="5" style="border-collapse:collapse"
 2             cellpadding="20" align="center" bgcolor="aqua" bordercolor="red">
 3             <caption>我是表格的標題</caption>
 4             <tr>
 5                 <th bgcolor=coral>表頭1</th>
 6                 <th colspan="3">表頭2</th>
 7             </tr>
 8             <tr>
 9                 <td rowspan="2">1-1</td>
10                 <td>1-2</td>
11                 <td>1-3</td>
12                 <td>1-4</td>
13             </tr>
14             <tr>
15                 <td>2-1</td>
16                 <td>2-2</td>
17                 <td>2-3</td>
18             </tr>
19             
20         </table>

此代碼的效果圖以下：

　　3.2.5 表單<form>...</form>

　　基本屬性：action、method

　　內涵經常使用標籤：input、select、textarea、fieldset

　　對於屬性action：指定由服務器上哪一個處理程序處理；寫法：action="提交的服務器地址 "

　　對於屬性method：規定提交的數據方法；寫法：method="提交的數據方法" [get/post]　　　　　　　

　　　　　　get和post的區別：
　　　　　　　　　　　　get ：使用URL傳參：http://服務器地址?name1=value1&name2=value2
　　　　　　　　　　　　　　　[?表示傳遞參數，?後面採用name=value的形式傳遞，多個參數之間，用&鏈接]
　　　　　　　　　　　　　　　url傳遞參數不安全，全部信息均可以在地址欄看到，而且能夠經過地址欄隨意傳遞其餘數據
　　　　　　　　　　　　　　　url傳遞數據有限，只能傳遞少許數據
　　　　　　　　　　　　post：使用Http請求傳遞數據時，url地址欄不可見，比較安全，且傳遞數據沒有限制

下圖爲get傳參，信息泄露：

下圖爲post傳參：

　　<input> 標籤及屬性：
　　　　a. type：表示Input輸入的類型，可選值有：
　　　　b. name：input輸入框的別名，通常狀況下，必填，由於傳遞數據時，使用name=value的形式傳遞
　　　　c. value：input輸入框的默認值
　　　　d. placeholder：input的提示內容，當輸入框使用value時，提示內容消失
　　　　e. 特殊屬性值：
　　　　　　　　　　checked="checked"默認選中
　　　　　　　　　　disabled="disabled"設置控制不能使用；用在按鈕上不能點擊，用在輸入框上不能修改；並且，若是輸入框disabled，則輸入框信息不能日後臺傳遞
　　　　　　　　　　hidden="hidden"隱藏，等同於<input type="hidden" name="username" value="某某某"/>經常使用於配合disabled，或根據其餘須要，使用隱藏域傳遞數據
　　　　f. (瞭解)tabindex="1":控制tab鍵的跳轉順序，從最小的數值開始，逐步往大的數跳轉，得到焦點。

　　　　【input-type】屬性詳解：
　　　　　　a. text：文本輸入框
　　　　　　b. password：密碼輸入框，輸入內容時顯示小黑點
　　　　　　c. radio：單選按鈕
　　　　　　d. checkbox:複選按鈕
　　　　　　　》》name和value按鈕必須同時存在，提交時，提交的是value中的屬性值
　　　　　　　　　例如：<input type="radio" name="sex" value="女"/>提交時，顯示"sex=女"
　　　　　　　》》radio憑藉name屬性區分是否爲同一組，name相同爲同組，同組當中只能選一個
　　　　　　　》》checked="checked"默認選中【radio只能選一個，checkbox能夠選多個】
　　　　　　e. file：文件上傳按鈕
　　　　　　f. submit:提交按鈕，提交表單數據
　　　　　　g. reset:重置按鈕，將表單數據重置爲初始狀態
　　　　　　h. image：圖形提交按鈕，功能同submit，能夠提交數據
　　　　　　i. button：普通按鈕，沒有任何功能

　　<select>下拉選擇控件：
　　　　1.寫法：<select>
　　　　　　　　　　<option>...</option>
　　　　　　　　</select>
　　　　2.name屬性，寫在<select>裏，全部選項只有一個name
　　　　3.option 經常使用屬性：
　　　　　　value=""：當option沒有屬性時，日後臺傳遞的是<option></option>標籤中的文字，當option有value屬性時，日後臺傳遞的是value屬性值
　　　　　　title="":鼠標指向後顯示的文字
　　　　　　selected="selected":默認選中
　　　　4.multiple:設置select爲多選。（通常不用，體驗太差；ctrl+鼠標進行多選）
　　　　5.<optgroup lable="山東省"></optgroup>:用於將option分組，lable表示組名

　　<textarea>文本域：
　　　　1.寫法：<textarea></textarea>
　　　　2.設置寬高style="width=100px;height=100px;"；自身有cols="";rows=""兩個屬性，但不經常使用
　　　　3.readonly="readonly":不容許編輯
　　　　4.style="resize=none":固定寬高，將其設置爲不容許修改寬高
　　　　5.style="overflow=」...":設置當文字超出區域時，如何處理
　　　　　　》》經常使用屬性值：hidden 超出區域的文字隱藏，不顯示
　　　　　　　　　　　　　　 scroll 不管文字多少，均會顯示滾動
　　　　　　　　　　　　　　 auto 自動，根據文字多少，自動決定是否顯示滾動條(默認設置)
　　<fieldset>表單的邊框與標題：
　　　　寫法:<fieldset> //邊框
　　　　　　　　<legend>...</legend> //表單的標題
　　　　　　</fieldset>
　　　　》》若是想要讓標題嵌入到邊框中，需將標題標籤寫到邊框標籤裏面
　　　　》》一個表單，能夠有多組邊框+標題組合

如下爲某個表單代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>合做意向表</title>
 6     </head>
 7     <body>
 8         <form action="D3-HTML基本標籤之表格.html" method="post">
 9             <table border="1" style="border-collapse: collapse;border-color: lightgray;" width="450"height="380" align="center">
10             <tr><td>
11                 <h2 style="font-family: '微軟雅黑';"><span style="color: orange;">&nbsp;&nbsp;&nbsp;合做</span>意向表</h2>
12                 <p style="color: orange;font-family: '微軟雅黑' ;font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;咱們在收到您的需求後，會在第一時間與您聯繫</p>
13                 <table style="font-family: '微軟雅黑';font-size: 14px;"  width="400" align="center">
14                     <tr>
15                         <td width="90" >公司名稱：</td>
16                         <td ><input type="text" name="campanyname" style="width: 300px;"/></td>
17                     </tr>
18                     <tr>
19                         <td>姓名：</td>
20                         <td><input type="text" name="username"style="width: 300px;"/></td>
21                     </tr>
22                     <tr>
23                         <td>電話：</td>
24                         <td><input type="tel" name="tel"style="width: 300px;"/></td>
25                     </tr>
26                 </table>
27                 <table  width="400" style="font-family: '微軟雅黑';font-size: 14px;"  align="center">
28                     <tr>
29                         <td colspan="2" style="color: orange;">您須要的服務</td>
30                     </tr>
31                     <tr>
32                         <td><input type="checkbox" name="save" value="網站建設與傳播"/>網站建設與傳播</td>
33                         <td><input type="checkbox" name="save" value="電子商務"/>電子商務</td>
34                     </tr>
35                     <tr>
36                         <td><input type="checkbox" name="save" value="數字化展館"/>數字化展館</td>
37                         <td><input type="checkbox" name="save" value="多媒體互動"/>多媒體互動</td>
38                     </tr>
39                     <tr>
40                         <td><input type="checkbox" name="save" value="軟件服務"/>軟件服務</td>
41                         <td><input type="checkbox" name="save" value="移動開發"/>移動開發</td>
42                     </tr>
43                     <tr>
44                         <td colspan="2" align="center" ><br/>
45                             <input type="submit" name="submit" id="submit" value="提交+" style="background-color: orange;color: white;border-color: orange;"/>
46                         </td>
47                     </tr>
48                 </table>
49             </td></tr>
50         
51         </table>
52         </form>
53         
54     </body>
55 </html>