整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
search類型的input元素是一種專門用來輸入搜索關(guān)鍵詞的文本框。其代碼格式如下。
<input type="search" name="user_search1"/>
（1）編輯代碼
打開記事本，編寫代碼，在<body>標(biāo)簽中加入以下代碼。并保存為HTML格式文件。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示 。
tel類型的input元素被設(shè)計為用來輸入電話號碼的專用文本框。它沒有特殊的校驗規(guī)則，不強制輸入數(shù)字(因為許多電話號碼通常帶有其他文字)，如0577—99886789。但是開發(fā)者可以通過pattern屬性來制定對于輸入的電話號碼格式的驗證。其代碼格式如下。
<input type="tel" name="tel1">
（1）編輯代碼
打開記事本，編寫代碼，在<body>標(biāo)簽中加入以下代碼。并保存為HTML格式文件。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示，在文本框中輸入不滿足pattern屬性強制規(guī)則的號碼格式，單擊【提交】按鈕后會彈出錯誤提示。
color類型的input元素用來選取顏色，提供了一個顏色選取器。目前它只在部分瀏覽器中被支持。其代碼格式如下。
<input type="color" name="tel1"/>
（1）編輯代碼
打開記事本，編寫代碼，在<body>標(biāo)簽中加入以下代碼。并保存為HTML格式文件。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示，單擊下拉箭頭，彈出顏色選擇框。
TMl 的標(biāo)簽可以分為單個標(biāo)簽和成對標(biāo)簽。
單個標(biāo)簽：html4 規(guī)定單個標(biāo)簽要有一個 / 表示結(jié)尾， html5 則不用
<!--單個標(biāo)簽-->
<meta>
<!--成對標(biāo)簽 -->
<div></div>以下是HTMl中常用的一些標(biāo)簽
div 標(biāo)簽 主要用來將相關(guān)的內(nèi)容組合到一塊，就像菜市場把各個蔬菜分成不同種類區(qū)分?jǐn)[放是一個道理。
div 是最常見也是比較重要的標(biāo)簽，網(wǎng)頁布局中經(jīng)常使用的一類標(biāo)簽。通常布局被稱為 DIV + CSS 布局
<div>
div 就是一個分類的存儲箱子
</div>p標(biāo)簽表示段落， 在網(wǎng)頁文字中應(yīng)用的比較多
<!--段落和段落間會換行-->
<p>第一段</p>
<p>第二段</p>h標(biāo)簽分為六個
標(biāo)簽 | 語義 |
h1 | 一級標(biāo)題 |
h2 | 二級標(biāo)題 |
h3 | 三級標(biāo)題 |
h4 | 四級標(biāo)題 |
h5 | 五級標(biāo)題 |
h6 | 六級標(biāo)題 |
引用標(biāo)題標(biāo)簽后，字體會加粗、字號一會變大
無序標(biāo)簽是沒有顯示順序的列表，無序列表前面通常會有一個“小點”， 這個小點可以用type屬性控制。其中有三個展示方式（不過這種方式比較固定，不夠靈活和美觀， 已經(jīng)被CSS的效果代替），如下：
值（type屬性） | 描述 |
disc | 默認(rèn)值，實心圓 |
circle | 空心圓 |
square | 實心方框 |
舉例:
<!--ul標(biāo)簽內(nèi)部只能放置li標(biāo)簽-->
<!--li標(biāo)簽內(nèi)部可以放其他的標(biāo)簽-->
<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 | 小寫羅馬數(shù)字編號 |
I | 大寫羅馬數(shù)字編號 |
1 | 數(shù)字編號（默認(rèn)） |
有序列表, 從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標(biāo)簽表示自定義列表
dt表示數(shù)據(jù)項，dd表示數(shù)據(jù)定義， dd是dt標(biāo)簽的解釋
<dl>
<dt>西紅柿</dt>
<dd>紅、酸</dd>
<dt>黃瓜</dt>
<dd>綠、澀</dd>
</dl>img 用來插入圖片，包括但不限于以下圖片格式
圖片格式 | 備注 |
.jpg、.jpeg | 通常用于照片，是一種有損壓縮格式 |
.png | 通常用于logo、背景，支持透明和半透明。便攜式網(wǎng)絡(luò)圖像 |
.svg | 矢量圖片 |
<!-- src(source)屬性， 圖片地址，可以為相對路徑，也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網(wǎng)頁上會展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設(shè)置一個， 那么另外一個就會跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">用a標(biāo)簽來制作超級鏈接
<!-- href 屬性 表示 其他頁面的鏈接，支持相對路徑和絕對路徑，還可以鏈接到其它網(wǎng)站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標(biāo)題， 當(dāng)鼠標(biāo)移動到鏈接上，會展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標(biāo)題">百度</a>
<!--也可以用a標(biāo)簽作為錨點 錨點可以是本頁面的錨點，也可以是其他頁面的錨點-->
<h1 id="title">頭部標(biāo)題</h1>
... 此處省略一些代碼
<a href="#title">返回標(biāo)題</a>
<!--下載鏈接，指向 doc， zip， zip等文件格式時，a標(biāo)簽將成為自動下載鏈接-->
<a href="./download/halou.zip">發(fā)郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統(tǒng)將自動打開email相關(guān)軟件-->
<a href="mailto:halouworld@126.com">發(fā)郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統(tǒng)將自動打開撥號鍵-->
<a href="tel:11111111111">打開撥號鍵盤</a>audio標(biāo)簽用來插入音頻標(biāo)簽
<!--添加 controls 后才會顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動播放屬性-->
<!--loop 屬性表示循環(huán)播放-->
<audio controls src="./video/demo.mp3">
您的瀏覽器不支持 audio標(biāo)簽，請升級
</audio>
<audio controls src="./video/demo.mp3" autoplay loop>
您的瀏覽器不支持 audio標(biāo)簽，請升級
</audio>video 標(biāo)簽用于插入一段視頻
<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件 -->
<!-- autoplay 自動播放 -->
<!-- loop 循環(huán)播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
您的瀏覽器不支持 video標(biāo)簽，請升級
</video>以前的區(qū)塊標(biāo)簽只有div，現(xiàn)在為了更好的方便搜索引擎抓取網(wǎng)站，因此有了以下語義更加明確的區(qū)塊標(biāo)簽
<section> | 文檔的區(qū)域，比div語義上還要大一點 |
<header> | 頁頭 |
<main> | 網(wǎng)頁核心部分 |
<footer> | 頁腳 |
表單用來收集信息并且可以完成和后端的數(shù)據(jù)傳輸
表單中大致可以分為三種標(biāo)簽
一些表單的示例
<!--action 表示要提交到后端的網(wǎng)址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->
<form action="/save" meththo="post"></form>
<!--<form> 標(biāo)簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>
<!---單選按鈕，name相等，表示選擇了一個，另一個就不能選擇了-->
<!--checked 表示默認(rèn)被選中-->
<!-- value 屬性表示要提交到后端服務(wù)器的值-->
<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 中的標(biāo)簽 通過for 屬性 和 其他標(biāo)簽的id屬性進(jìn)行綁定-->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<!--復(fù)選框 type="checkbox" 同一組的的復(fù)選框，name值應(yīng)該相同 ，復(fù)選框也有value值， 用于向服務(wù)器提交數(shù)據(jù)-->
<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 分別用于設(shè)置 行數(shù) 和 列數(shù)-->
<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/>
數(shù)字控件: <input type="number"> <br/>
拖拽條: <input type="range"> <br/>
搜索框: <input type="search"> <br/>
網(wǎng)址控件: <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>我是標(biāo)題</caption>
<tr>
<th>第一列標(biāo)題</th>
<th>第二列標(biāo)題</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table><!--跨列示例-->
<table border="1">
<caption>我是標(biāo)題</caption>
<tr>
<th>第一列標(biāo)題</th>
<th>第二列標(biāo)題</th>
</tr>
<tr>
<td colspan="2">跨兩行</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<!--跨行示例-->
<table border="1">
<caption>我是標(biāo)題</caption>
<tr>
<th>第一列標(biāo)題</th>
<th>第二列標(biāo)題</th>
</tr>
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>HTML:htper text markup language超文本標(biāo)記(標(biāo)簽)語言
由各種標(biāo)簽組成，用來制作網(wǎng)頁，告訴瀏覽器如何顯示頁面
w3c:world wide web consortium萬維網(wǎng)聯(lián)盟，制定web技術(shù)相關(guān)標(biāo)準(zhǔn)和規(guī)范的組織，HTML技術(shù)hi由w3c制定的標(biāo)準(zhǔn)
兩個版本:HTML4.0.1、HTML5.0-----通常H5
官網(wǎng)：http://www.W3shcool.com.cn
HTML文檔是以.html或.htm結(jié)尾
記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
使用步驟：
使用技巧：
常見的瀏覽器：IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果
瀏覽器的作用是讀取html文件，并以網(wǎng)頁的形式來顯示
瀏覽器不會直接顯示html標(biāo)簽，而是使用標(biāo)簽來解釋網(wǎng)頁的內(nèi)容
一個完整的html標(biāo)簽的組成：
<標(biāo)簽名 屬性名="屬性值">內(nèi)容</標(biāo)簽名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽</title>
</head>
<body bgcolor="red" text="blue">
html從入門到精通!
</body>
</html>
12345678910屬性值要用雙撇號括起來，一般用雙引號
根據(jù)標(biāo)簽是否關(guān)閉，分為，關(guān)閉型和非關(guān)閉型
<html></html>
<head></head>
<title></title>非關(guān)閉型：沒有結(jié)束標(biāo)簽
<meta>
<br>
<h1>....<h6>根據(jù)標(biāo)簽是否獨占一行，分為塊級標(biāo)簽和行級標(biāo)簽
塊級標(biāo)簽：顯示為塊狀，獨占一行
<h1>大家好</h1>
<hr>行級標(biāo)簽：在行內(nèi)顯示，可與其他內(nèi)容在同一行顯示
<span></span>
注釋在瀏覽器中不會顯示,是用來標(biāo)注解釋html語句,但通過查看源代碼的方式可以看到
語法:
<--注釋內(nèi)容-->
也稱為特殊字符,用于顯示一些特殊符號,如<>&空格等
語法:
<&實體字符的名稱>
在html文檔的第一行,使用<!DOCTYPE html>
聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規(guī)范
目前基本上最常用的html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
123456789101.基本標(biāo)簽
1.1 有序列表
ol:ordered listli:list item默認(rèn)使用阿拉伯?dāng)?shù)字、從1開始標(biāo)記，可以通過屬性進(jìn)行修改
· type屬性：設(shè)置列表的符號標(biāo)記、取值；數(shù)字1（默認(rèn)）、字母（a或A）、羅馬數(shù)字(i或I) · start屬性：設(shè)置起始值，值必須是數(shù)字
1.2 無序列表
ul:unodered list
li:list item
默認(rèn)情況下使用實心圓表作為符號標(biāo)記，可以通過屬性進(jìn)行修改
· type屬性：設(shè)置列表的符號標(biāo)記、取值：disc實心圓（默認(rèn)）、circle空心圓、square正方形、none不 顯示項目符號
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標(biāo)簽
hr:horizontal
常用屬性：
· color:顏色
兩種方式：
顏色名稱：如red、green、blue、white、black、pink、orange等
16進(jìn)制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每種顏色的取值范值0-255，轉(zhuǎn)換為16 進(jìn)制00-FF
如: #FF0000 紅色 #00FF00綠色 #0000FF藍(lán)色 #FFFFFF白色、#CCCCCC #FF7300桔色
· size:粗細(xì)，數(shù)值
· width寬度
兩種寫法：
? 像素：絕對值（固定值）
? 百分比：相對值，相對于水平線標(biāo)簽所在父容器寬度的百分比
· align對齊
? 取值：center居中 left right
1.5圖像標(biāo)簽
img:image
常見的圖片格式：.jpg .png .gif .bmp
常見的屬性：
· src:source指定圖片的路徑（來源），必選叁數(shù)
如果圖片與html源代碼在同一個文件夾中，可以直接在src中寫圖片名稱即可
習(xí)慣上，我們會將多個圖片與html代碼文檔分別放在同一個文件夾project中的不同目錄下，此時需要 在src中指定圖片的路徑為相對路徑
路徑的分類：
? · 相對路徑
? 表示： ./當(dāng)前路徑
…/當(dāng)前位置的上一級文件夾
? 提示：…/image
? · alt:當(dāng)圖片無法顯示時顯示的提示信息
? · title:當(dāng)鼠標(biāo)放到圖片上時顯示的提示信息
? · width和 height:設(shè)置圖片的寬度和高度
默認(rèn)圖片以原始尺寸顯示
? 如果只設(shè)置其中一個，則另一個會按比例縮放
? 如果同時設(shè)置寬和高，可能導(dǎo)致圖片變形
? 兩種寫法：
? 像素：絕對值（固定值）
? 百分比：相對值，相對于父容器的尺寸的百分比
2.其他標(biāo)簽
為了更好語義化
3.頭部標(biāo)簽
· meta定義網(wǎng)頁的摘要信息，如字符編碼，關(guān)鍵詞，描述，作者等
· title定義網(wǎng)頁的標(biāo)題
· style定義內(nèi)容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎(chǔ)路徑
默認(rèn)以當(dāng)前頁面文件所在的位置為相對路徑參照
4.標(biāo)簽嵌套
一個標(biāo)簽中嵌套另外一個標(biāo)簽
標(biāo)簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時有所不同
chrome瀏覽器提供的開發(fā)工具：幫助開發(fā)人員查看和調(diào)試頁面的
如何打開：
· Elements:從瀏覽器的角度來看頁面，瀏覽器渲染頁面時內(nèi)部的結(jié)構(gòu)
· console:控制臺，顯示各種警告和錯誤信息
· network:查看網(wǎng)絡(luò)請求信息，瀏覽器向服務(wù)器請求了哪些資源，資源大小，
加載資源所消耗的時間
四、超鏈接
1.簡介
使用超鏈接可以從一個頁面跳轉(zhuǎn)到另外一個頁面，實現(xiàn)頁面之間導(dǎo)航
當(dāng)鼠標(biāo)移動到超鏈接文本或圖片時，鼠標(biāo)箭頭會變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接，跳轉(zhuǎn)到另一個頁面 錨鏈接：鏈接到錨點（鏈接到同一個頁面的指定位置） 功能鏈接：實現(xiàn)特殊功能(發(fā)郵件，下載)
2.基本用法
使用 標(biāo)簽來創(chuàng)建超鏈接
語法格式：
常用屬性：
href:鏈接地址或路徑,鏈接地址
world
鏈接文本或圖片
1 2 3 4 5 1 target:鏈接打開的位置,取值
路徑分類：
絕對路徑 以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑 相對于當(dāng)前頁面文件所在的路徑,不是以根開始的路徑 ./ 當(dāng)前路徑 …/ 當(dāng)前位置上一級目錄
3.錨鏈接
3.1簡介
點擊鏈接后跳轉(zhuǎn)到某一個頁面的指定位置（錨點anchor）
錨鏈接的分類：
頁面內(nèi)的錨鏈接 頁面間的錨鏈接
3.2 頁面內(nèi)的錨鏈接
步驟：
3.3 頁面間的錨鏈接
4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統(tǒng)一資源定位器,用來定位資源所在的位置，最常見的就是網(wǎng)址
5.2 組成
一個完整的URL由8個部分組成：
協(xié)議：prococol 如 http:超文本傳輸協(xié)議，用來訪問WEB網(wǎng)站Hyper text Transfer protocal https:更加安全的協(xié)議 SSL安全套接子層 ftp文件傳輸協(xié)議，用來訪問服務(wù)器上的文件，實現(xiàn)文件的上傳和下載File Transfer protocol file:文件協(xié)議，用來訪問本地文件 主機名hostname服務(wù)器地址或服務(wù)器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口：port位于主機名的后面，使用冒號進(jìn)行分隔 不同的協(xié)議使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認(rèn)端口，則端口可以省略 如果使用的不是默認(rèn)端口，則必須指定端口http://59.49.32.213:7070/ 路徑：path目標(biāo)文件所在的路徑結(jié)構(gòu)，如:www.baidu.com/img/ 資源resource要訪問的目標(biāo)文件，如bd_logo1.png 查詢字符串：query string 也稱為參數(shù) 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
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 身份認(rèn)證authentication,指定身份信息，如：ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個規(guī)則的行列結(jié)構(gòu)，每個表格是由若干行組成，每行由若干個單元格組成
table row column
2.基本結(jié)構(gòu)
2.1 table標(biāo)簽
用來定義表格
常用屬性：
border:表格邊框 默認(rèn)為0 width/height：寬度/高度 bordercolor:邊框的顏色 align:對齊方式，取值：left(默認(rèn)) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距：單元格與單元格之間的距離 cellpadding邊距：單元格中的內(nèi)容到邊界之間的距離
2.2 tr標(biāo)簽
用來定義行：table row
常用屬性：
align:水平對齊 取值：left(默認(rèn)) center right valign垂直對齊 取值：top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標(biāo)簽
用來定義單元格，table data
常用屬性：align、valign、bgcolor、background
注意：表格必須是由行組成，行必須由單元格來組成，數(shù)據(jù)必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個屬性：
rowspan 設(shè)置單元格所跨的行數(shù) colspan 設(shè)置單元格所跨的列數(shù)
步驟：
六、表單
1.簡介
表單是一個包含若干個表單元素的區(qū)域，用于獲取瑣類型的用戶數(shù)據(jù)
表單元素是允許用戶在表單輸入信息的元素，如文本框、密碼框、單選按鈕、復(fù)選框、下拉列表、按鈕等
2.表單結(jié)構(gòu)
2.1表單語法
1
2.2form標(biāo)簽
用來定義表單，可以包含多個表單元素
常用屬性：
action:提交數(shù)據(jù)給誰處理，即處理數(shù)據(jù)的程序，默認(rèn)為當(dāng)前頁面 method:提交數(shù)據(jù)的方式或方法，取值：get(默認(rèn))，post get和post的區(qū)別： get:以查詢字符串的形式提交，在地址欄中能看到，長度有限制，不安全 post以表單數(shù)據(jù)組的形式進(jìn)行提交，在地址欄中看不到，長度無限制，安全 enctype(encode type)編碼類型：提交數(shù)據(jù)的編碼，取值：application/X-www-form-urlencoded(默 認(rèn))、multipart/form-data(文件上傳)
3.表單元素
大多數(shù)的表單元素都是使用 標(biāo)簽來定義的，通過設(shè)置屬性type來定義不同的表單元素
1
3.1單行文本框
常用屬性：
·name名稱，很重要，如果沒有定義name屬性，則該表單元素的數(shù)據(jù)是無法提交的
·value初始值
·size顯示寬度
·maxlength:大字符數(shù)，默認(rèn)是沒有限制
·readonly只讀：readonly=“readonly”,可簡寫readonly,即只寫屬性名
·disabled禁用：disabled=“disabled”, 可簡寫disabled完全禁用
表單元素被提交的兩個條件，1.有name屬性2.非disabled
3.2 單選按鈕
常用屬性：
·name名稱：多個radio的name屬性必須相同，才能實現(xiàn)互斥（單選）
·value值
·checked:是否被選中，兩種狀態(tài)，選中，未選中 checked=“checked” 簡寫 checked
3.3 復(fù)選框
常用屬性與單選按鈕radio類似
3.4 文件選擇器
常用屬性：
·name:名稱
·accept設(shè)置可選擇的文件類型，用來限制上傳的文件類型
使用MIME格式字符串對資源類型進(jìn)行限制
常見的MIME類型：
·純文本：text/plain text/xml text/html
· 圖像：image/png image/jpeg image/gif
4.特殊表單元素
4.1下拉列表
select常用屬性：
·name名稱
·size行數(shù)，同時顯示多個選項
·multiple允許同時選擇多個
option常用屬性：
·value選項值
·selected設(shè)置默認(rèn)選中項
optgroup常用屬性：
·label分組的標(biāo)簽
4.2文本域
·name名稱
·rows行數(shù)
·cols列數(shù)
5、其他標(biāo)簽
5.1 label標(biāo)簽
為表單元素提供標(biāo)簽，當(dāng)選中l(wèi)abel標(biāo)簽中的文本內(nèi)容時會自動將光標(biāo)切換到與之相關(guān)聯(lián)的表單元素。
常用屬性：
·for必須將該屬性值設(shè)置為與相關(guān)聯(lián)的表單元素的Id屬性值相同。
注：幾乎所有HTML標(biāo)簽都具有id屬性，且id值必須唯一。
5.2 button標(biāo)簽
也表示按鈕，與input按鈕類似
語法：
1按鈕文字或圖像
常用屬性：
·type按鈕的類型，取值: submit（默認(rèn)）、reset、button
5.3 fieldset和legend標(biāo)簽
fieldset標(biāo)簽，對表單元素進(jìn)行分組
legend標(biāo)簽，對分組添加標(biāo)題
七、內(nèi)嵌框架
1、簡介
使用iframe可以在一個頁面中引用另一個頁面，實現(xiàn)復(fù)用、靈活
2、基本用法
語法：
1
常用屬性：
· src:引用的頁面
· width/height寬度/高度 ，像素或百分比
· frameborder是否顯示邊框，取值：1(yes) 0(no)—默認(rèn)
· scrolling是否顯示滾動條，取值：yes no auto
· name屬性 為框架定義名稱
3、在框架中打開鏈接
1
2
3鏈接的文本或圖像
八、HTML5簡介
1、發(fā)展
W3C于1992年12月發(fā)布了HTML4.0.1標(biāo)準(zhǔn)
W3C于2014年10月發(fā)布了HTML5標(biāo)準(zhǔn)
2、特點
· 取消了過時的標(biāo)簽，如font、center等，它們僅具有展示外觀的功能
· 增加了一些更具有語義化的標(biāo)簽，如header、footer、aside等
· 增加了一些新功能標(biāo)簽，如canvas、audio、video
· 增加了一些表單控件，如email、date、time、url、search等
· 可以直接在瀏覽器中繪畫（canvas），無需flash
· 增加了本地存儲的支持
3、兼容性
http://caniuse.com
提供了各種瀏覽器版本對HTML5和CSS規(guī)范的支持度
九、HTML5新增內(nèi)容
1、結(jié)構(gòu)相關(guān)的標(biāo)簽
用來進(jìn)行頁面結(jié)構(gòu)布局，本身無任何特殊樣式，需要使用CSS進(jìn)行樣式設(shè)置
· article定義一個獨立的內(nèi)容，完整的文章
· section定義文檔的章節(jié)、段落
· header文章的頭部、頁眉、標(biāo)題
· footer文章的底部、頁腳、標(biāo)注
· aside定義側(cè)邊欄
· figure圖片區(qū)域
· figcaption為圖片區(qū)域定義標(biāo)題
· nav定義導(dǎo)航菜單
結(jié)構(gòu)標(biāo)簽只是表明各部分的角色，并無實際的外觀樣式，與普通div相同
2、語義相關(guān)的標(biāo)簽
2.1 mark標(biāo)簽
標(biāo)注，用來突出顯示文本，默認(rèn)添加黃色背景
2.2 time標(biāo)簽
定義日期和時間，便于搜索引擎智能查找
2.3 details和 summary標(biāo)簽
默認(rèn)顯示summary中的內(nèi)容，點擊后顯示details中的內(nèi)容
注：并不是所有的瀏覽器都兼容，chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標(biāo)簽
計數(shù)儀，表示度量
常用屬性：
· max定義大值，默認(rèn)為1
· min定義小值，默認(rèn)為0
· value定義當(dāng)前值
· high定義限定為高的值
· low定義限定為低的值
· optimum定義佳值
規(guī)則：
當(dāng)value大于high時為綠色
當(dāng)value在low與high之間時為黃色
當(dāng)value小于low時為紅色
當(dāng)value小于low時為綠色
當(dāng)value在low與high之間時為黃色
當(dāng)value大于high時為紅色
2.5 progress標(biāo)簽
進(jìn)度條，表示運行中的進(jìn)度
常用屬性：
· value定義當(dāng)前值
· max定義完成的值
3.表單相關(guān)
3.1 新增表單元素
新增以下type類型：
· email接收郵箱
· url接收URL
· tel接收電話號碼，目前僅在移動設(shè)備上有效
· search搜索文框
· number/range接收數(shù)字/數(shù)字滑塊,包含min,max,step屬性
· date/month/week/time/datetime日期時間選擇器，兼容性不好
· color顏色拾取
作用：
· 具有格式校驗的功能
· 可以與移動設(shè)備的鍵盤相關(guān)聯(lián)
3.2新增表單屬性
form標(biāo)簽的屬性：
· autocomplete是否啟動表單的自動完成功能， 取值:on(默認(rèn))、o?
· novalidate提交表單時不進(jìn)行校驗，默認(rèn)會進(jìn)行表單校驗
3.3 新增表單元素的屬性
新增表單元素屬性：input/select/textarea等
· placeholder提示文字
· required是否必填
· autocomplete是否啟用該表單元素的自動完成功能
· autofocus設(shè)置初始焦點元素
· pattern使用正則表達(dá)式（RegExp后面會講解），進(jìn)行數(shù)據(jù)校驗
· list使文本元素具有下拉列表的功能，需要配合datalist和option標(biāo)簽一起使用
· form可以將表單元素寫在form標(biāo)簽外面，然后通過該屬性關(guān)聯(lián)指定的表單
4、多媒體標(biāo)簽
4.1audio標(biāo)簽
在頁面中插入音頻，不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性：
· src音頻文件的來源
· controls是否顯示控制面板，默認(rèn)不顯示
· autoplay是否自動播放，默認(rèn)不自動播放
· loop是否循環(huán)播放
· muted是否靜音
· preload是否預(yù)加載，取值：none不預(yù)加載、auto預(yù)加載（默認(rèn)）、metadata只加載元數(shù)據(jù)
如果設(shè)置了autoplay屬性，則該屬性無效
可以結(jié)合source標(biāo)簽使用，指定多個音頻文，瀏覽器會檢測并使用第一個可用的音頻文件
4.2 video標(biāo)簽
在頁面中插入視頻，不同的瀏覽器對視頻格式的支持不一樣
用法與audio標(biāo)簽基本相同，增加屬性：
· widht/height視頻播放器的寬度/高度
· poster在視頻加載前顯示的圖片
<html>
<body>
<tiele>HTML技術(shù)</tiele>
</body>
<body>
大家好，歡迎學(xué)習(xí)html技術(shù)!
</body>
</html>1234567效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例1.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽</title>
</head>
<body text="blue">
標(biāo)簽的組成
<br>
html從入門到精通！
<hr>
<h1>標(biāo)簽的分類</h1>
<hr>
<h2>標(biāo)簽的分類</h2>
<hr>
<h6>標(biāo)簽的分類</h6>
<hr>
<span>哈哈</span>嘿嘿
</body>
</html>1234567891011121314151617181920212223效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁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>
版權(quán)所有? 2000-2020 高教培訓(xùn)
<hr>
×關(guān)閉符號
</body>
</html>123456789101112131415161718192021222324效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁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
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
