整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頁html的組成是由：文字、圖片、音頻、視頻、超鏈接組成。
1-文字由什么組成？
文字標(biāo)簽在“body”標(biāo)簽下，由文本標(biāo)簽比如：標(biāo)題<h1>~<h6>,段落<p></p>等；
2-圖片怎么顯示的？
圖片標(biāo)簽img單標(biāo)簽，也是在“body”標(biāo)簽下 ，顯示引用文件；
3-音頻、視頻、標(biāo)簽
音頻標(biāo)簽“audio”和視頻標(biāo)簽“video”，這兩個(gè)標(biāo)簽都是雙標(biāo)記，引用文件顯示內(nèi)容，本身是一個(gè)功能。
4-超鏈接
超鏈接標(biāo)簽“a href="路徑位置"”是單標(biāo)記，需要有載體，點(diǎn)擊活著觸發(fā)跳轉(zhuǎn)。
以下是示例：
<body>
<h1>這是標(biāo)題也是文字</h1>
<p>這是段落，文本，文字</p>
<img src="./image/1auto的副本.gif" alt="300"><br> 這是一個(gè)圖片標(biāo)簽<br><br>
<!--img是圖片-->
<audio src="./image/yinyue.mp3" controls></audio><br>
這是一段音頻，由音頻標(biāo)簽讓其顯示<br><br>
<!--audio是音頻標(biāo)簽-->
<video src="./image/shipin的副本.mp4" width="600"> </video><br>
<!--這里是一個(gè)視頻-->
<a href="https://www.baidu.com"><br> 這是一個(gè)鏈接，點(diǎn)擊夠可以跳轉(zhuǎn)</a>
<!--這是一個(gè)鏈接標(biāo)簽-->
</body>
</html>
----------------------------------------------------------------------------
下圖是顯示
個(gè)人理解，如有錯(cuò)漏，請(qǐng)留言指正。
TML基礎(chǔ)簡(jiǎn)介
超文本標(biāo)記語言（英語：HyperText Markup Language，簡(jiǎn)稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。您可以使用 HTML 來建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來解析。
HTML是一個(gè)網(wǎng)頁文件的拓展名，和txt、jpg、mp3一樣，是一個(gè)文件格。.html文件就是網(wǎng)頁文件。
2.html 的格式化標(biāo)簽
<!DOCTYPE>
<html>
--html是一個(gè)雙標(biāo)簽 開始標(biāo)簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標(biāo)題
</head>
<body>--用來存放頁面中的內(nèi)容
</body>
</html> --結(jié)束標(biāo)簽
DOCTYPE----文檔類型聲明 meta標(biāo)簽----設(shè)置頁面編碼格式，關(guān)鍵字，以及頁面的描述 <title></title>--------->標(biāo)題部分 <head></head>------>頁面的頭部分 <body></body>------>頁面的主體部分
2.內(nèi)容標(biāo)簽
這其中<hr> <br> 是單標(biāo)簽
<div></div> <span></span> 無意義區(qū)塊容器標(biāo)簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網(wǎng)頁標(biāo)題</h1></div>
HTML標(biāo)記—注釋標(biāo)記
<!--注釋語句-->
標(biāo)題： <h1>這是一個(gè)標(biāo)題</h1> <h2>這是一個(gè)標(biāo)題</h2> <h3>這是一個(gè)標(biāo)題</h3>
段落： <p>這是一個(gè)段落。</p> <p>這是另外一個(gè)段落。</p>
HTML 鏈接
<!--提示:在 href 屬性中指定鏈接的地址。-->
<a >這是一個(gè)鏈接</a>
當(dāng)您點(diǎn)擊 HTML 頁面中的某個(gè)鏈接時(shí)，對(duì)應(yīng)的 <a> 標(biāo)簽指向萬維網(wǎng)上的一個(gè)地址。
一個(gè)統(tǒng)一資源定位器(URL) 用于定位萬維網(wǎng)上的文檔。
URL - 統(tǒng)一資源定位器
scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
domain - 定義因特網(wǎng)域名，比如 runoob.com
:port - 定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱
這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉(zhuǎn)到了一個(gè)有下載功能的頁面。
常見的 URL Scheme
HTML 圖像
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
3.HTML屬性
屬性實(shí)例:
HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個(gè)鏈接</a>
4.HTML 表格
表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
5.HTML 表單
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。
文本域（Text Fields）
文本域通過<input type="text"> 標(biāo)簽來設(shè)定
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域
密碼字段
密碼字段通過標(biāo)簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>
單選按鈕（Radio Buttons）
<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時(shí)需要設(shè)置默認(rèn)選項(xiàng),需要設(shè)置checked屬性:
<input type="radio" name="sex" checked ="checked"/>男
復(fù)選框（Checkboxes）
<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多選框一般不需要設(shè)置默認(rèn)選項(xiàng),如果要設(shè)置,也是設(shè)置checked屬性
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達(dá)到效果
action 設(shè)置表單提交參數(shù)路徑
method 當(dāng)前請(qǐng)求方式(同iOS開發(fā)網(wǎng)絡(luò)請(qǐng)求一樣,get/post)
假如您在上面的文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會(huì)傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結(jié)果。
圖片按鈕(使用不多)
Select下拉框
selected默認(rèn)選項(xiàng)
<select>
<option selected="selected" >選項(xiàng)一</option>
<option>選項(xiàng)二</option>
</select>
Textarea文本域
<textarea></textarea>
6.HTML 列表
HTML 支持有序、無序和定義列表:
無序列表使用 <ul> 標(biāo)簽
<ul>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ul>
有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。
列表項(xiàng)項(xiàng)使用數(shù)字來標(biāo)記。
<ol>
<li>第一個(gè)列表項(xiàng)</li>
<li>第二個(gè)列表項(xiàng)</li>
<li>第三個(gè)列表項(xiàng)</li>
</ol>
自定義列表以 <dl> 標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以 <dt> 開始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點(diǎn)去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}
7.內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性
HTML樣式實(shí)例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個(gè)標(biāo)題</h2>
<p style="background-color:green;">這是一個(gè)段落。</p>
</body>
HTML 樣式實(shí)例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
HTML 樣式實(shí)例 - 文本對(duì)齊方式
<h1 style="text-align:center;">居中對(duì)齊的標(biāo)題</h1>
而關(guān)于其他CSS內(nèi)容,這里就簡(jiǎn)單介紹一下:
內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。你可以在<head> 部分通過 <style>標(biāo)簽定義內(nèi)部樣式表:
<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 樣式標(biāo)簽
最后提一下什么是Web安全色?
數(shù)年以前，當(dāng)大多數(shù)計(jì)算機(jī)僅支持 256 種顏色的時(shí)候，一系列 216 種 Web 安全色作為 Web 標(biāo)準(zhǔn)被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。
216 跨平臺(tái) web 安全色被用來確保：當(dāng)計(jì)算機(jī)使用 256 色調(diào)色板時(shí)，所有的計(jì)算機(jī)能夠正確地顯示所有的顏色。
注釋：<!-- -->
DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范
head：網(wǎng)頁頭部標(biāo)簽
body：代表網(wǎng)頁主題
標(biāo)題標(biāo)簽
段落標(biāo)簽
換行標(biāo)簽
水平線標(biāo)簽
字體樣式標(biāo)簽
注釋
特殊字符
特殊符號(hào)就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一級(jí)目錄
文本鏈接
<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
圖像鏈接：就是嵌套圖片標(biāo)簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內(nèi)元素
什么是列表：就是一種展示方式
有序列表
無序列表
自定義列表
<dl>
<dt></dt> 標(biāo)題
<dd></dd> 選項(xiàng)
<dd></dd>
<dd></dd>
</dl>為什么使用表格
基本結(jié)構(gòu)
<table border="1px" 邊框>表格標(biāo)簽
<tr>
<td></td>列標(biāo)簽
<td></td>
<td></td>
</tr>行標(biāo)簽 這代表一行
</table>跨列：使用colspan="夸的列數(shù)" <td colspan="4">
跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標(biāo)題頭部區(qū)域的內(nèi)容(用于頁面或頁面中的一塊區(qū)域) |
footer | 標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁面或頁面的一塊區(qū)域） |
section | web頁面中的一塊獨(dú)立區(qū)域 |
atricle | 獨(dú)立的文章內(nèi)容 |
aside | 相關(guān)內(nèi)容或應(yīng)用(常用于側(cè)邊欄) |
nav | 導(dǎo)航類輔助內(nèi)容 |
<iframe src="path" name="mainFrame"></iframe>
表單：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件
表單元素格式
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認(rèn)為text |
name | 指定表單元素的名稱 必填，用來后臺(tái)讀取 |
value | 元素的初試值。type為radio時(shí)必須指定一個(gè)值 |
size | 指定元素的初始寬度。當(dāng)type為text時(shí)或者password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位 |
maxlength | type為txet或password時(shí)，輸入的最大字符數(shù) |
cheaked | type為radio或cheackbox時(shí)，指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點(diǎn)擊" />普通按鈕
<input type="image" src ="點(diǎn)擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕下拉框
<select name="列表名稱">
<option value="選項(xiàng)的值" select>中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
</select>
提交的格式就是列表名稱和value文本域
<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>郵件驗(yàn)證
<input type="email" name="youjian">URL
<input type="url" name="url"> 數(shù)字驗(yàn)證
<input type="number" name="num" max="100" min="0" step="10">滑塊
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隱藏域 hidden
<input type="text" id="mark" hidden>只讀 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增強(qiáng)鼠標(biāo)可用性
<label for="mark">點(diǎn)擊</label>
<input type="text" id="mark">為什么要進(jìn)行表單驗(yàn)證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全
提示信息
非空判斷
正則表達(dá)式驗(yàn)證
高級(jí)驗(yàn)證使用js
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
