整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML標簽
基本標簽
HTML頁面中內容是由HTML標簽組織起來的，如頁面中的文本、圖像、Flash視頻文件等都是通過HTML標簽合理地顯示在頁面的各個位置。
1 標題標簽<h1>～<h6>
標題標簽表示一段文字的標題（主題），并且支持多層次的內容結構。HTNL.共提供了6級標題，分別為<h1>～<h6>，并賦予了標題一定的外觀，所有標題字體加粗，其中山<h1>字號最大，<h6>字號最小.
2.圖像標簽<img>
在網頁中常用的圖像格式有4種，即JPG、GIF、BMP.PNG，其中使用比較多的是JPG、GIF和PNG，大多數瀏覽器都可以顯示這些圖像。
顯示圖像的語法：
< img src="ur1" alt="文本" width="x" height="y"/>
在語法中：
a、SrC屬性：表示顯示圖像的地址。
b、alt屬性：指定圖像的替代文本，當圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代顯示的文本，這樣，即使圖像無法顯示，用戶還可以看到網頁丟失的信息，所以為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有幫助的。
c、width屬性：表示圖像寬度.
d、height屬性：表示圖像高度。
3.段落標簽<p>
顧名思義，段落標簽表示將一段文字組成一系列段落內容，這樣做的目的是內容應用某些格式和布局，使各個段落的邏輯更清晰明了。在HTML文檔中，段落通過<p>標簽定義。段落標簽<p>表示段落的開始，</p >表示段落的結束。
4.換行標簽<br/>
在希望不產生一個新段落的情況下進行換行，則使用<br>標簽。<br>是一個空的HTML標簽，由于關閉標簽沒有任何意義，因此它沒有結束標簽。
注意：
使用<b>和<br>的結果一樣，在XHTML以及未來的HTML版本中，根據W3C規范，不允許使用沒有結束標簽的HTML元素，因此使用<br>頁面更規范，有更長遠的保障。
5.水平線標簽<hr/>
水平線標簽表示一條水平線，注意該標簽與<br>標簽一樣，沒有結束標簽，直接使用<hr/>表示標簽的開始和結束。
使用以上講解的基本標簽，就可以進行網頁內容排版了。
本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。
標簽 | 英文全拼 | 作用 | 特點 |
?<html></html>?? | html | 網頁的根標簽 | 所有的標簽都要寫在這一對根標簽里面 |
??<head></head>?? | head | 網頁的頭標簽 | 包括完檔的屬性和信息 |
??<body></body>?? | body | 網頁的主題 | 包含文檔的所有內容 |
??<div></div>?? | division | 定義一個區域 | 瀏覽器通常會在??<div>??前后放置一個換行符 |
??<!-- 注釋 -->?? | - | 注釋 | 單標簽 |
??<br>或<br/>?? | break | 換行 | 單標簽，不會在其前后創建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平線 | 單標簽 |
??<img src="">?? | image | 添加圖片 | 單標簽 |
??<embed src="">?? | embed | 嵌入外部應用 | 單標簽 |
??<meta>?? | meta | 提供有關頁面的元信息 | 單標簽，??<meta>???標簽通常位于??<head>??區域內 |
??<link>?? | link | 定義文檔與外部資源的關系 | 單標簽，??<link>???標簽只能存在于??<head>??區域內，不過它可出現任何次數。 |
??<p></p>?? | paragraph | 定義段落 | 自動在其前后創建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定義標題 | h1在一個頁面里只能出現一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗標記該文本 |
??<b></b>?? | bold | 文本加粗 | 加粗顯示文本，不推薦使用 |
??<em></em>?? | emphasize | 文本傾斜 | 傾斜標記文本 |
??<i></i>?? | italic | 文本傾斜 | 傾斜顯示文本，不推薦使用 |
??<del></del>?? | delete | 文本添加刪除線 | - |
??<s></s>?? | strike | 文本添加刪除線 | 不推薦使用 |
??<ins></ins>?? | insert | 文本添加下劃線 | - |
??<u></u>?? | underline | 文本添加下劃線 | 不推薦使用 |
??<a href="">填寫內容</a>?? | anchor | 添加超鏈接 | 最好使用CSS來改變鏈接的樣式 |
??<ul></ul>?? | unordered list | 定義無序列表 | 通常與??<li>??標簽一起使用 |
??<ol></ol>?? | ordered list | 定義有序列表 | 通常與??<li>??標簽一起使用 |
??<li></li>?? | list item | 創建列表項 | 可與各種列表定義標簽一起使用 |
??<dl></dl>?? | definition list | 定義描述列表 | 通常與??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定義條目 | 定義描述列表的項目 |
??<dd></dd>?? | definition description | 定義描述 | 對描述列表中的項目進行描述 |
??<table></table>?? | table | 定義HTML表格 | 盡可能通過樣式改變表格外觀 |
??<tr></tr>?? | table row | 定義表格的行 | 一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽 |
??<th></th>?? | table headline | 定義表格每一列的標題 | 該標簽的文本通常呈現為粗體且居中 |
??<td></td>?? | table data | 定義表格中的單元格數據 | 該標簽的文本呈現為普通且左對齊 |
??<caption>表格標題</caption>?? | caption | 定義整個表格的標題 | ??<caption>???標簽必須直接放在??<table>??標簽后 |
??<input type="">?? | input | 定義輸入控件 | 輸入字段可通過多種方式改變，取決于type屬性 |
??select?? | select | 定義下拉列表 | ??<select>???中的??<option>??標簽定義了列表中的可用選項 |
??<option></option>?? | option | 定義下拉列表中的可用項 | ??<option>??標簽不可自由定義寬高 |
??<optgroup></optgroup>?? | options group | 定義選項組 | ??<optgroup>??標簽用于把相關的選項組合在一起 |
??<textarea></textarea>?? | textarea | 定義多行的文本輸入控件 | 文本的默認字體是等寬字體 |
??<form></form>?? | form | 定義表單 | ??<form>??可以包含多個元素 |
??<fieldset></fieldset>?? | field set | 定義圍繞表單中元素的邊框 | ??<legend>???為??<fieldset>??定義標題 |
??<legend></legend>?? | legend | 為??<fieldset>??定義標題 | ??<legend>??通過css設定樣式 |
??<progress></progress>?? | progress | 定義運行中的任務進度 | ??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條 |
??<audio></audio>?? | audio | 添加音頻 | ??<audio>??標簽是HTML5的新標簽 |
??<video></video>?? | video | 添加視頻 | ??<video>??標簽是HTML5的新標簽 |
??<source>?? | source | 定義媒介資源 | ??<source>??標簽是HTML5中的新標簽 |
普通用法
錨點鏈接
錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超鏈接全局設置
在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置
<head>
<!-- 讓頁面所有的超鏈接新頁面打開 -->
<base target="_blank">
</head>charset編碼
name
網頁自動跳轉
無序列表
無序列表使用粗體圓點進行標記。簡單示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用數字進行標記，我們可以通過整數值start指定列表編號的起始值。簡單示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通過描述列表自定義列表，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。
<dl>
<dt>A</dt> <!-- 小標題 -->
<dd>A1</dd> <!-- 解釋標題 -->
<dd>A2</dd> <!-- 解釋標題 -->
<dt>B</dt> <!-- 小標題 -->
<dd>B1</dd> <!-- 解釋標題 -->
<dd>B2</dd> <!-- 解釋標題 -->
</dl>基礎表格
簡單示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->
<tr>
<!-- 定義表格的行 -->
<td>A1</td> <!-- 定義表格該行第一列中的數據 -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定義表格的行 -->
<th>A</th> <!-- 定義表格每一列的標題 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>單元格合并
簡單示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
<!-- 定義表格的行 -->
<td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
文本輸入框
簡單示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個單選框都可以被選中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，兩個單選框只能有一個被選中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默認選中 -->
</select>示例二，帶組合的單選下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，帶組合的多選下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多選框
簡單示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
簡單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡單示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他類型按鈕
<input type="submit">文件提交按鈕
<input type="button" value="">普通按鈕
<input type="image" src="">圖片按鈕
<input type="reset">重置按鈕
<input type="url">網址控件
<input type="date">日期控件
<input type="time">時間控件
<!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
<input type="email">郵件控件
<input type="number" step="3">數字控件
<input type="range" step="100">滑塊控件
<input type="color">顏色控件表單
示例一，普通表單
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，帶分組信息表單
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??
??<progress>??
簡單示例如下。
<progress value="60" max="100"></progress>??<meter>??
簡單示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
簡單示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
簡單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對照表??
HTML:htper text markup language超文本標記(標簽)語言
由各種標簽組成，用來制作網頁，告訴瀏覽器如何顯示頁面
w3c:world wide web consortium萬維網聯盟，制定web技術相關標準和規范的組織，HTML技術hi由w3c制定的標準
兩個版本:HTML4.0.1、HTML5.0-----通常H5
官網：http://www.W3shcool.com.cn
HTML文檔是以.html或.htm結尾
記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
使用步驟：
使用技巧：
常見的瀏覽器：IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果
瀏覽器的作用是讀取html文件，并以網頁的形式來顯示
瀏覽器不會直接顯示html標簽，而是使用標簽來解釋網頁的內容
一個完整的html標簽的組成：
<標簽名 屬性名="屬性值">內容</標簽名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽</title>
</head>
<body bgcolor="red" text="blue">
html從入門到精通!
</body>
</html>
12345678910屬性值要用雙撇號括起來，一般用雙引號
根據標簽是否關閉，分為，關閉型和非關閉型
<html></html>
<head></head>
<title></title>非關閉型：沒有結束標簽
<meta>
<br>
<h1>....<h6>根據標簽是否獨占一行，分為塊級標簽和行級標簽
塊級標簽：顯示為塊狀，獨占一行
<h1>大家好</h1>
<hr>行級標簽：在行內顯示，可與其他內容在同一行顯示
<span></span>
注釋在瀏覽器中不會顯示,是用來標注解釋html語句,但通過查看源代碼的方式可以看到
語法:
<--注釋內容-->
也稱為特殊字符,用于顯示一些特殊符號,如<>&空格等
語法:
<&實體字符的名稱>
在html文檔的第一行,使用<!DOCTYPE html>
聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規范
目前基本上最常用的html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
123456789101.基本標簽
1.1 有序列表
ol:ordered listli:list item默認使用阿拉伯數字、從1開始標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值；數字1（默認）、字母（a或A）、羅馬數字(i或I) · start屬性：設置起始值，值必須是數字
1.2 無序列表
ul:unodered list
li:list item
默認情況下使用實心圓表作為符號標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值：disc實心圓（默認）、circle空心圓、square正方形、none不 顯示項目符號
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標簽
hr:horizontal
常用屬性：
· color:顏色
兩種方式：
顏色名稱：如red、green、blue、white、black、pink、orange等
16進制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每種顏色的取值范值0-255，轉換為16 進制00-FF
如: #FF0000 紅色 #00FF00綠色 #0000FF藍色 #FFFFFF白色、#CCCCCC #FF7300桔色
· size:粗細，數值
· width寬度
兩種寫法：
? 像素：絕對值（固定值）
? 百分比：相對值，相對于水平線標簽所在父容器寬度的百分比
· align對齊
? 取值：center居中 left right
1.5圖像標簽
img:image
常見的圖片格式：.jpg .png .gif .bmp
常見的屬性：
· src:source指定圖片的路徑（來源），必選叁數
如果圖片與html源代碼在同一個文件夾中，可以直接在src中寫圖片名稱即可
習慣上，我們會將多個圖片與html代碼文檔分別放在同一個文件夾project中的不同目錄下，此時需要 在src中指定圖片的路徑為相對路徑
路徑的分類：
? · 相對路徑
? 表示： ./當前路徑
…/當前位置的上一級文件夾
? 提示：…/image
? · alt:當圖片無法顯示時顯示的提示信息
? · title:當鼠標放到圖片上時顯示的提示信息
? · width和 height:設置圖片的寬度和高度
默認圖片以原始尺寸顯示
? 如果只設置其中一個，則另一個會按比例縮放
? 如果同時設置寬和高，可能導致圖片變形
? 兩種寫法：
? 像素：絕對值（固定值）
? 百分比：相對值，相對于父容器的尺寸的百分比
2.其他標簽
為了更好語義化
3.頭部標簽
· meta定義網頁的摘要信息，如字符編碼，關鍵詞，描述，作者等
· title定義網頁的標題
· style定義內容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎路徑
默認以當前頁面文件所在的位置為相對路徑參照
4.標簽嵌套
一個標簽中嵌套另外一個標簽
標簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時有所不同
chrome瀏覽器提供的開發工具：幫助開發人員查看和調試頁面的
如何打開：
· Elements:從瀏覽器的角度來看頁面，瀏覽器渲染頁面時內部的結構
· console:控制臺，顯示各種警告和錯誤信息
· network:查看網絡請求信息，瀏覽器向服務器請求了哪些資源，資源大小，
加載資源所消耗的時間
四、超鏈接
1.簡介
使用超鏈接可以從一個頁面跳轉到另外一個頁面，實現頁面之間導航
當鼠標移動到超鏈接文本或圖片時，鼠標箭頭會變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接，跳轉到另一個頁面 錨鏈接：鏈接到錨點（鏈接到同一個頁面的指定位置） 功能鏈接：實現特殊功能(發郵件，下載)
2.基本用法
使用 標簽來創建超鏈接
語法格式：
常用屬性：
href:鏈接地址或路徑,鏈接地址
world
鏈接文本或圖片
1 2 3 4 5 1 target:鏈接打開的位置,取值
路徑分類：
絕對路徑 以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑 相對于當前頁面文件所在的路徑,不是以根開始的路徑 ./ 當前路徑 …/ 當前位置上一級目錄
3.錨鏈接
3.1簡介
點擊鏈接后跳轉到某一個頁面的指定位置（錨點anchor）
錨鏈接的分類：
頁面內的錨鏈接 頁面間的錨鏈接
3.2 頁面內的錨鏈接
步驟：
3.3 頁面間的錨鏈接
4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統一資源定位器,用來定位資源所在的位置，最常見的就是網址
5.2 組成
一個完整的URL由8個部分組成：
協議：prococol 如 http:超文本傳輸協議，用來訪問WEB網站Hyper text Transfer protocal https:更加安全的協議 SSL安全套接子層 ftp文件傳輸協議，用來訪問服務器上的文件，實現文件的上傳和下載File Transfer protocol file:文件協議，用來訪問本地文件 主機名hostname服務器地址或服務器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口：port位于主機名的后面，使用冒號進行分隔 不同的協議使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認端口，則端口可以省略 如果使用的不是默認端口，則必須指定端口http://59.49.32.213:7070/ 路徑：path目標文件所在的路徑結構，如:www.baidu.com/img/ 資源resource要訪問的目標文件，如bd_logo1.png 查詢字符串：query string 也稱為參數 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔，多個之間用&分隔，如:name=tom&age=2&sex=male 錨點anchor，在資源后面使用#開頭的文本，如#6 身份認證authentication,指定身份信息，如：ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個規則的行列結構，每個表格是由若干行組成，每行由若干個單元格組成
table row column
2.基本結構
2.1 table標簽
用來定義表格
常用屬性：
border:表格邊框 默認為0 width/height：寬度/高度 bordercolor:邊框的顏色 align:對齊方式，取值：left(默認) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距：單元格與單元格之間的距離 cellpadding邊距：單元格中的內容到邊界之間的距離
2.2 tr標簽
用來定義行：table row
常用屬性：
align:水平對齊 取值：left(默認) center right valign垂直對齊 取值：top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標簽
用來定義單元格，table data
常用屬性：align、valign、bgcolor、background
注意：表格必須是由行組成，行必須由單元格來組成，數據必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個屬性：
rowspan 設置單元格所跨的行數 colspan 設置單元格所跨的列數
步驟：
六、表單
1.簡介
表單是一個包含若干個表單元素的區域，用于獲取瑣類型的用戶數據
表單元素是允許用戶在表單輸入信息的元素，如文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等
2.表單結構
2.1表單語法
1
2.2form標簽
用來定義表單，可以包含多個表單元素
常用屬性：
action:提交數據給誰處理，即處理數據的程序，默認為當前頁面 method:提交數據的方式或方法，取值：get(默認)，post get和post的區別： get:以查詢字符串的形式提交，在地址欄中能看到，長度有限制，不安全 post以表單數據組的形式進行提交，在地址欄中看不到，長度無限制，安全 enctype(encode type)編碼類型：提交數據的編碼，取值：application/X-www-form-urlencoded(默 認)、multipart/form-data(文件上傳)
3.表單元素
大多數的表單元素都是使用 標簽來定義的，通過設置屬性type來定義不同的表單元素
1
3.1單行文本框
常用屬性：
·name名稱，很重要，如果沒有定義name屬性，則該表單元素的數據是無法提交的
·value初始值
·size顯示寬度
·maxlength:大字符數，默認是沒有限制
·readonly只讀：readonly=“readonly”,可簡寫readonly,即只寫屬性名
·disabled禁用：disabled=“disabled”, 可簡寫disabled完全禁用
表單元素被提交的兩個條件，1.有name屬性2.非disabled
3.2 單選按鈕
常用屬性：
·name名稱：多個radio的name屬性必須相同，才能實現互斥（單選）
·value值
·checked:是否被選中，兩種狀態，選中，未選中 checked=“checked” 簡寫 checked
3.3 復選框
常用屬性與單選按鈕radio類似
3.4 文件選擇器
常用屬性：
·name:名稱
·accept設置可選擇的文件類型，用來限制上傳的文件類型
使用MIME格式字符串對資源類型進行限制
常見的MIME類型：
·純文本：text/plain text/xml text/html
· 圖像：image/png image/jpeg image/gif
4.特殊表單元素
4.1下拉列表
select常用屬性：
·name名稱
·size行數，同時顯示多個選項
·multiple允許同時選擇多個
option常用屬性：
·value選項值
·selected設置默認選中項
optgroup常用屬性：
·label分組的標簽
4.2文本域
·name名稱
·rows行數
·cols列數
5、其他標簽
5.1 label標簽
為表單元素提供標簽，當選中label標簽中的文本內容時會自動將光標切換到與之相關聯的表單元素。
常用屬性：
·for必須將該屬性值設置為與相關聯的表單元素的Id屬性值相同。
注：幾乎所有HTML標簽都具有id屬性，且id值必須唯一。
5.2 button標簽
也表示按鈕，與input按鈕類似
語法：
1按鈕文字或圖像
常用屬性：
·type按鈕的類型，取值: submit（默認）、reset、button
5.3 fieldset和legend標簽
fieldset標簽，對表單元素進行分組
legend標簽，對分組添加標題
七、內嵌框架
1、簡介
使用iframe可以在一個頁面中引用另一個頁面，實現復用、靈活
2、基本用法
語法：
1
常用屬性：
· src:引用的頁面
· width/height寬度/高度 ，像素或百分比
· frameborder是否顯示邊框，取值：1(yes) 0(no)—默認
· scrolling是否顯示滾動條，取值：yes no auto
· name屬性 為框架定義名稱
3、在框架中打開鏈接
1
2
3鏈接的文本或圖像
八、HTML5簡介
1、發展
W3C于1992年12月發布了HTML4.0.1標準
W3C于2014年10月發布了HTML5標準
2、特點
· 取消了過時的標簽，如font、center等，它們僅具有展示外觀的功能
· 增加了一些更具有語義化的標簽，如header、footer、aside等
· 增加了一些新功能標簽，如canvas、audio、video
· 增加了一些表單控件，如email、date、time、url、search等
· 可以直接在瀏覽器中繪畫（canvas），無需flash
· 增加了本地存儲的支持
3、兼容性
http://caniuse.com
提供了各種瀏覽器版本對HTML5和CSS規范的支持度
九、HTML5新增內容
1、結構相關的標簽
用來進行頁面結構布局，本身無任何特殊樣式，需要使用CSS進行樣式設置
· article定義一個獨立的內容，完整的文章
· section定義文檔的章節、段落
· header文章的頭部、頁眉、標題
· footer文章的底部、頁腳、標注
· aside定義側邊欄
· figure圖片區域
· figcaption為圖片區域定義標題
· nav定義導航菜單
結構標簽只是表明各部分的角色，并無實際的外觀樣式，與普通div相同
2、語義相關的標簽
2.1 mark標簽
標注，用來突出顯示文本，默認添加黃色背景
2.2 time標簽
定義日期和時間，便于搜索引擎智能查找
2.3 details和 summary標簽
默認顯示summary中的內容，點擊后顯示details中的內容
注：并不是所有的瀏覽器都兼容，chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標簽
計數儀，表示度量
常用屬性：
· max定義大值，默認為1
· min定義小值，默認為0
· value定義當前值
· high定義限定為高的值
· low定義限定為低的值
· optimum定義佳值
規則：
當value大于high時為綠色
當value在low與high之間時為黃色
當value小于low時為紅色
當value小于low時為綠色
當value在low與high之間時為黃色
當value大于high時為紅色
2.5 progress標簽
進度條，表示運行中的進度
常用屬性：
· value定義當前值
· max定義完成的值
3.表單相關
3.1 新增表單元素
新增以下type類型：
· email接收郵箱
· url接收URL
· tel接收電話號碼，目前僅在移動設備上有效
· search搜索文框
· number/range接收數字/數字滑塊,包含min,max,step屬性
· date/month/week/time/datetime日期時間選擇器，兼容性不好
· color顏色拾取
作用：
· 具有格式校驗的功能
· 可以與移動設備的鍵盤相關聯
3.2新增表單屬性
form標簽的屬性：
· autocomplete是否啟動表單的自動完成功能， 取值:on(默認)、o?
· novalidate提交表單時不進行校驗，默認會進行表單校驗
3.3 新增表單元素的屬性
新增表單元素屬性：input/select/textarea等
· placeholder提示文字
· required是否必填
· autocomplete是否啟用該表單元素的自動完成功能
· autofocus設置初始焦點元素
· pattern使用正則表達式（RegExp后面會講解），進行數據校驗
· list使文本元素具有下拉列表的功能，需要配合datalist和option標簽一起使用
· form可以將表單元素寫在form標簽外面，然后通過該屬性關聯指定的表單
4、多媒體標簽
4.1audio標簽
在頁面中插入音頻，不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性：
· src音頻文件的來源
· controls是否顯示控制面板，默認不顯示
· autoplay是否自動播放，默認不自動播放
· loop是否循環播放
· muted是否靜音
· preload是否預加載，取值：none不預加載、auto預加載（默認）、metadata只加載元數據
如果設置了autoplay屬性，則該屬性無效
可以結合source標簽使用，指定多個音頻文，瀏覽器會檢測并使用第一個可用的音頻文件
4.2 video標簽
在頁面中插入視頻，不同的瀏覽器對視頻格式的支持不一樣
用法與audio標簽基本相同，增加屬性：
· widht/height視頻播放器的寬度/高度
· poster在視頻加載前顯示的圖片
<html>
<body>
<tiele>HTML技術</tiele>
</body>
<body>
大家好，歡迎學習html技術!
</body>
</html>1234567效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例1.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽</title>
</head>
<body text="blue">
標簽的組成
<br>
html從入門到精通！
<hr>
<h1>標簽的分類</h1>
<hr>
<h2>標簽的分類</h2>
<hr>
<h6>標簽的分類</h6>
<hr>
<span>哈哈</span>嘿嘿
</body>
</html>1234567891011121314151617181920212223效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例2.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
圖書:<<HTML從入門到精通<<
<hr>
北京 上海 廣州
<hr>
在HTML中用<表示<小于號
<hr>
“HTML語言” 或 &qout;HTML語言&qout;
<hr>
版權所有? 2000-2020 高教培訓
<hr>
×關閉符號
</body>
</html>123456789101112131415161718192021222324效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例3.png)]
（剩下的下期出）
原文鏈接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html
作者：WanXuang
出處：從CSDN
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
