整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TMl 的標簽可以分為單個標簽和成對標簽。
單個標簽：html4 規定單個標簽要有一個 / 表示結尾， html5 則不用
<!--單個標簽-->
<meta>
<!--成對標簽 -->
<div></div>以下是HTMl中常用的一些標簽
div 標簽 主要用來將相關的內容組合到一塊，就像菜市場把各個蔬菜分成不同種類區分擺放是一個道理。
div 是最常見也是比較重要的標簽，網頁布局中經常使用的一類標簽。通常布局被稱為 DIV + CSS 布局
<div>
div 就是一個分類的存儲箱子
</div>p標簽表示段落， 在網頁文字中應用的比較多
<!--段落和段落間會換行-->
<p>第一段</p>
<p>第二段</p>h標簽分為六個
標簽 | 語義 |
h1 | 一級標題 |
h2 | 二級標題 |
h3 | 三級標題 |
h4 | 四級標題 |
h5 | 五級標題 |
h6 | 六級標題 |
引用標題標簽后，字體會加粗、字號一會變大
無序標簽是沒有顯示順序的列表，無序列表前面通常會有一個“小點”， 這個小點可以用type屬性控制。其中有三個展示方式（不過這種方式比較固定，不夠靈活和美觀， 已經被CSS的效果代替），如下：
值（type屬性） | 描述 |
disc | 默認值，實心圓 |
circle | 空心圓 |
square | 實心方框 |
舉例:
<!--ul標簽內部只能放置li標簽-->
<!--li標簽內部可以放其他的標簽-->
<ul type=">
<li>無序列表元素1</li> <!--列表項-->
<li>無序列表元素2</li>
</ul>
實心圓
<ul type="disc">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
實心方框
<ul type="square">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>type屬性值 | 意義 |
a | 小寫英文字母編號 |
A | 大寫英文字母編號 |
i | 小寫羅馬數字編號 |
I | 大寫羅馬數字編號 |
1 | 數字編號（默認） |
有序列表, 從2開始
<ol start="2">
<li>元素1</li>
<li>元素2</li>
</ol>
小寫字母表示
<ol type="a">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
倒敘
<ol reversed>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>dl標簽表示自定義列表
dt表示數據項，dd表示數據定義， dd是dt標簽的解釋
<dl>
<dt>西紅柿</dt>
<dd>紅、酸</dd>
<dt>黃瓜</dt>
<dd>綠、澀</dd>
</dl>img 用來插入圖片，包括但不限于以下圖片格式
圖片格式 | 備注 |
.jpg、.jpeg | 通常用于照片，是一種有損壓縮格式 |
.png | 通常用于logo、背景，支持透明和半透明。便攜式網絡圖像 |
.svg | 矢量圖片 |
<!-- src(source)屬性， 圖片地址，可以為相對路徑，也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網頁上會展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設置一個， 那么另外一個就會跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">用a標簽來制作超級鏈接
<!-- href 屬性 表示 其他頁面的鏈接，支持相對路徑和絕對路徑，還可以鏈接到其它網站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標題， 當鼠標移動到鏈接上，會展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標題">百度</a>
<!--也可以用a標簽作為錨點 錨點可以是本頁面的錨點，也可以是其他頁面的錨點-->
<h1 id="title">頭部標題</h1>
... 此處省略一些代碼
<a href="#title">返回標題</a>
<!--下載鏈接，指向 doc， zip， zip等文件格式時，a標簽將成為自動下載鏈接-->
<a href="./download/halou.zip">發郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統將自動打開email相關軟件-->
<a href="mailto:halouworld@126.com">發郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統將自動打開撥號鍵-->
<a href="tel:11111111111">打開撥號鍵盤</a>audio標簽用來插入音頻標簽
<!--添加 controls 后才會顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動播放屬性-->
<!--loop 屬性表示循環播放-->
<audio controls src="./video/demo.mp3">
您的瀏覽器不支持 audio標簽，請升級
</audio>
<audio controls src="./video/demo.mp3" autoplay loop>
您的瀏覽器不支持 audio標簽，請升級
</audio>video 標簽用于插入一段視頻
<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件 -->
<!-- autoplay 自動播放 -->
<!-- loop 循環播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
您的瀏覽器不支持 video標簽，請升級
</video>以前的區塊標簽只有div，現在為了更好的方便搜索引擎抓取網站，因此有了以下語義更加明確的區塊標簽
<section> | 文檔的區域，比div語義上還要大一點 |
<header> | 頁頭 |
<main> | 網頁核心部分 |
<footer> | 頁腳 |
表單用來收集信息并且可以完成和后端的數據傳輸
表單中大致可以分為三種標簽
一些表單的示例
<!--action 表示要提交到后端的網址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->
<form action="/save" meththo="post"></form>
<!--<form> 標簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>
<!---單選按鈕，name相等，表示選擇了一個，另一個就不能選擇了-->
<!--checked 表示默認被選中-->
<!-- value 屬性表示要提交到后端服務器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio" name="radio_group">
<label>
<input type="radio" name="sex"> 男
</label>
<label>
<input type="radio" name="sex"> 女
</label>
<!--html4 中的標簽 通過for 屬性 和 其他標簽的id屬性進行綁定-->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<!--復選框 type="checkbox" 同一組的的復選框，name值應該相同 ，復選框也有value值， 用于向服務器提交數據-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球
<!--密碼框-->
<input type="password" placeholder="請輸入密碼">
<!-- 下拉菜單 -->
<select>
<option value="alipay">支付寶</option>
<option value="wxpay">微信支付</option>
</select>
<!--多文本框 rows 和 clos 分別用于設置 行數 和 列數-->
<textarea rows="3" cols="5"></textarea>
<!--三種按鈕 submit 提交按鈕 button 普通按鈕 可以簡寫為 <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
<input type="reset" value="重置按鈕">
<input type="submit" value="提交表單">
<!--像 email 和 url 等格式，如果點擊提交按鈕，不符合格式，會有提示-->
<form>
日期空間: <input type="date"> <br/>
時間空間: <input type="time"> <br/>
日期時間空間 <input type="datetime-local"> <br/>
文件:<input type="file"> <br/> <br/>
數字控件: <input type="number"> <br/>
拖拽條: <input type="range"> <br/>
搜索框: <input type="search"> <br/>
網址控件: <input type="url"> <br/>
郵箱控件: <input type="email" >
<input type="submit" value="提交">
</form>
<!-- datalist 備選項示例 -->
<input type="text" list="province">
<datalist id="province">
<option value="陜西"></option>
<option value="山西"></option>
<option value="河北"></option>
<option value="山東"></option>
</datalist>可以用html渲染表格
<!--表格示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table><!--跨列示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td colspan="2">跨兩行</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<!--跨行示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>1、表單：就是從網頁上看見的各種各樣的框，比如 登陸框、同意協議的選項框、下拉框、只能選男女的選框等。
代碼需要復制到編譯器里面看，效果會好些
代碼實例：所有的框、按鈕，都在下面的代碼中，并且有注釋，照著寫就好
注意事項：單標簽的內容是單標簽的屬性（也就是在標簽中加入 value 屬性）；雙標簽的內容在兩個標簽之間。
注意事項：
1、表單元素中，用戶可以輸入值的時候，可以不加value屬性 -- （比如：文本框、文本域）。
2、當表單元素中沒有值的時候，需要加value屬性 -- （比如：單選框、復選框）。
本標簽: 32
例:
<dl>
<dt>標題1</dt>
<dd>內容11</dd>
<dd>內容12</dd>
<dt>標題2</dt>
<dd>內容21</dd>
<dd>內容22</dd>
</dl>
target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);
rel="...",發送鏈接的類型;
rev="...",保存鏈接的類型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長度百分比來定義形狀的尺寸;
tabindex="...",使用定義過的tabindex元素設置在各個元素之間的焦點獲取順序(使用tab鍵使元素獲得焦點).
action="...",接收數據的服務器的URL;
method="...",HTTP的方法(get,,post),其中get是被反對使用的;
enctype="...",指定MIME(Internet媒體類型);
onsubmit="...",當提交表單時發生的內部事件;
noreset="...",在重新設置表單時發生的內部事件;
target="...",決定把內容顯示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按鈕的狀態設置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
type="...",用于輸入控件的類型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個單選鈕設置為選中的狀態;
disabled="...",把控件的狀態設置為不能使用;
readonly="...",只對輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來指定字符的數目;
src="...",一個圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數目;
alt="...",另外一種文本描述;
usemap="...",到客戶端圖形鏡像的URL;
align="...",被反對.控制對齊方式(left,,center,,right,,justify);
tabindex="...",通過定義的tabindex值確定在不同元素之間獲得焦點的順序;
onfocus="...",當元素獲得焦點時發生的事件;
onblur="...",當元素失去焦點時發生的事件;
onselect="...",當元素被選中時發生的事件;
onchang="...",當元素狀態被改變時發生的事件;
accept="...",允許上載的文件類型.
scr="...",定義在幀中顯示的內容的來源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對,控制對齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
