整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML基礎(chǔ)簡介
超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。您可以使用 HTML 來建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來解析。
HTML是一個網(wǎng)頁文件的拓展名，和txt、jpg、mp3一樣，是一個文件格。.html文件就是網(wǎng)頁文件。
2.html 的格式化標(biāo)簽
<!DOCTYPE>
<html>
--html是一個雙標(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>這是一個標(biāo)題</h1> <h2>這是一個標(biāo)題</h2> <h3>這是一個標(biāo)題</h3>
段落： <p>這是一個段落。</p> <p>這是另外一個段落。</p>
HTML 鏈接
<!--提示:在 href 屬性中指定鏈接的地址。-->
<a >這是一個鏈接</a>
當(dāng)您點(diǎn)擊 HTML 頁面中的某個鏈接時，對應(yīng)的 <a> 標(biāo)簽指向萬維網(wǎng)上的一個地址。
一個統(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ī)上的端口號（http 的默認(rèn)端口號是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱
這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉(zhuǎn)到了一個有下載功能的頁面。
常見的 URL Scheme
HTML 圖像
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
3.HTML屬性
屬性實(shí)例:
HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個鏈接</a>
4.HTML 表格
表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <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 表單
表單是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。
文本域（Text Fields）
文本域通過<input type="text"> 標(biāo)簽來設(shè)定
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域
密碼字段
密碼字段通過標(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è)置默認(rèn)選項(xiàng),需要設(shè)置checked屬性:
<input type="radio" name="sex" checked ="checked"/>男
復(fù)選框（Checkboxes）
<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個或若干選項(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)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(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)前請求方式(同iOS開發(fā)網(wǎng)絡(luò)請求一樣,get/post)
假如您在上面的文本框內(nèi)鍵入幾個字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會傳送到 "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)簽。每個列表項(xiàng)始于 <li> 標(biāo)簽。
列表項(xiàng)項(xiàng)使用數(shù)字來標(biāo)記。
<ol>
<li>第一個列表項(xiàng)</li>
<li>第二個列表項(xiàng)</li>
<li>第三個列表項(xiàng)</li>
</ol>
自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項(xiàng)以 <dt> 開始。每個自定義列表項(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;">這是一個標(biāo)題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>
HTML 樣式實(shí)例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
HTML 樣式實(shí)例 - 文本對齊方式
<h1 style="text-align:center;">居中對齊的標(biāo)題</h1>
而關(guān)于其他CSS內(nèi)容,這里就簡單介紹一下:
內(nèi)部樣式表
當(dāng)單個文件需要特別樣式時，就可以使用內(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)用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點(diǎn)的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 樣式標(biāo)簽
最后提一下什么是Web安全色?
數(shù)年以前，當(dāng)大多數(shù)計(jì)算機(jī)僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標(biāo)準(zhǔn)被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。
216 跨平臺 web 安全色被用來確保：當(dāng)計(jì)算機(jī)使用 256 色調(diào)色板時，所有的計(jì)算機(jī)能夠正確地顯示所有的顏色。
、封裝獲取元素的方法
封裝思想——函數(shù)封裝——代碼復(fù)用
function get_id(id){
// 這個函數(shù)是專門來通過id獲取元素
return document.getElementById(id)
}
function get_els(parentId, tagName){
// 這個函數(shù)是專門來獲取某個父標(biāo)簽范圍內(nèi)的某些標(biāo)簽
return get_id(parentId).getElementsByTagName(tagName)
}二、表單元素屬性
常用的表單元素包括 input、select、textarea、button等，下面我們學(xué)習(xí)這些表單元素中常用的屬性。
需求：點(diǎn)擊按鈕修改input的類型和內(nèi)容
html和css代碼
<input type="button" value="按鈕" id="btn">JavaScript代碼
于每一個學(xué)習(xí)Web前端的人來說，HTML是必學(xué)的知識點(diǎn)之一，其中form又是HTML模塊下的一個小知識點(diǎn)。<form> 元素表示了文檔中的一個區(qū)域，這個區(qū)域包含有交互控制元件，用來向Web服務(wù)器提交信息。在接下來的Web前端學(xué)習(xí)入門中，小編就給大家簡單介紹一下form相關(guān)的知識點(diǎn)。
form表單的屬性是action以及method。其中action：接受請求的URL，URL為處理上傳數(shù)據(jù)的頁面。method屬性有兩種，分別為：get、post
get：
1）采用GET方法發(fā)送數(shù)據(jù)時，瀏覽器會與表單處理服務(wù)器建立連接，然后直接在一個傳輸步驟中發(fā)送所有的表單數(shù)據(jù)：瀏覽器會將數(shù)據(jù)直接附在表單的 action 的URL之后，這兩者之間用問號進(jìn)行分隔。這種方式并不安全，因?yàn)樯蟼鞯臄?shù)據(jù)可以直接在URL中反映出來。
2）GET方法提交數(shù)據(jù)后的URL鏈接是可以添加書簽的，每次打開該書簽都相當(dāng)于向服務(wù)器提交了相同的數(shù)據(jù)。
3）URL的長度是有限的（約3000字符），所以get方式經(jīng)常用來提交較小的數(shù)據(jù)。
4）結(jié)合以上特性，一般使用get方式來提交非敏感內(nèi)容，比如說搜索查詢。不僅速度較快，還可以將頁面保存到書簽之中
post：
1）采用POST方法，瀏覽器將會按照下面兩步來發(fā)送數(shù)據(jù)。首先，瀏覽器將與action屬性中指定的表單處理服務(wù)器建立聯(lián)系；一旦建立連接之后，瀏覽器就會按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器。通過這種方式來上傳數(shù)據(jù)安全性較高。
2）POST方法上傳的數(shù)據(jù)沒有長度限制，可以傳輸大量的數(shù)據(jù)，所以在上傳文件只能使用Post。
3）大多數(shù)情況都應(yīng)該使用POST方式進(jìn)行數(shù)據(jù)的傳輸。
form其他屬性：
form標(biāo)簽元素自身并沒有數(shù)據(jù)傳輸，它的name屬性只是提供了一種在腳本中引用表單的方法。與此同時，form標(biāo)簽元素內(nèi)的數(shù)據(jù)都是通過name來傳遞的，只有設(shè)置了name屬性的表單元素才能在提交表單時傳遞它們的值。
enctype屬性：規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進(jìn)行編碼。
target屬性：和a標(biāo)簽的功能相似，規(guī)定了在何處打開表單上傳后的處理頁面。
autocomplete屬性：規(guī)定表單是否應(yīng)該啟用自動完成功能。當(dāng)用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，顯示出在該字段中填寫過的選項(xiàng)，從而簡化用戶的輸入。autocomplete只有兩個值，on 和 off，分別對應(yīng)啟用和關(guān)閉這個功能。默認(rèn)值為on。
novalidate屬性：規(guī)定當(dāng)提交表單時不對其進(jìn)行驗(yàn)證。通過將novalidate=novalidate屬性放置到form元素上，form元素的原生校驗(yàn)特征就會忽略，這樣就可以防止它同JavaScript的校驗(yàn)方法起沖突。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
