標籤：file 限制 運算式 圖片 特定 htm 屬性 legend lsp
一、Html的基本結構：<!DOCTYPE html><html><head><meta charset=utf-8"><title></title></head><body>網頁的文本、圖片等資訊；</body></html> 二、Head部分：用於表示網頁的中繼資料即描述網頁的基本資料其常用標籤及屬性有：1、title標籤：瀏覽器標籤頁顯示的標題2、meta標籤：其常用屬性①charset:設定文檔的字元集編碼格式。HTML5中設定字元集編碼：<meta charset="UTF-8">常見的字元集編碼格式：a.GB-2312:國標碼，簡體中文b.GBK：擴充的國標碼c.UTF-8：萬國碼 Unicode 常用②http-equiv屬性:將我們的資訊寫給瀏覽器看，讓瀏覽器按照這裡面的要求執行，可選屬性值：Content-Type(文件類型) refresh(網頁定時重新整理) set-cookie(設定瀏覽器cookie緩衝) 需要配合content屬性使用。（http-equiv屬性只是表明需要設定哪一部分，具體的設定內容，放到content屬性中）③name屬性：使用方法同“http-equiv”。將我們的資訊寫給搜尋引擎看常用且需要掌握的屬性值：author（作者） keywords（網頁關鍵字） description（網頁描述） 這兩個屬性設定，網頁必不可少。3、link標籤：連結網頁表徵圖（title前的小logo），其常用屬性有：①rel屬性：聲明連結檔案的類型，此處選icon②type屬性：可以省略③href屬性：表示圖片的路徑地址 三、body部分：網頁的文本、圖片等資訊 標籤的分類： 塊級標籤：顯示為塊，前後隔一行（自動換行） 行級標籤：按行從左往右逐一顯示。 1、 常見的塊級標籤：①<h1></h1>......<h6><h6>：標題標籤，自動加粗，h1最大，h6最小。②<hr/>：水平線標籤，添加一條水平線。③<p></p>:段落標籤，④<br/>:換列標籤，⑤<blockquote/></blockquote>:引用標籤，cite屬性，表明引用的來源，一般引用網址瀏覽器預設首行縮排。⑥<pre></pre>:預格式標籤，用於重載代碼。瀏覽器預設顯示樣式：1、顯示為等寬字型。 2、代碼中的換行、空格等元素能在瀏覽器中顯示。【補充】html 檔案中空格的表示： 2、 基於布局的塊級標籤列表：無序列表、有序列表、定義列表①有序列表：<ol></ol> 清單項目：<li></li>②無序列表：<ul></ul> 清單項目：<li></li>③定義列表（實現圖文混排）:<dl></dl>列表標題：<dt>一般只有一項</dt>列表描述項：<dd>可以有很多項</dd>3、組合標籤：<figure></figure>用於顯示圖片及圖片標題他有兩個子標籤：<img />圖片<figcaption></figcaption>圖片的標題例如：<figure><img src="img/EZ.jpg" height="20%" width="20%" alt="探險家"/><figcaption>探險家 伊澤瑞爾</figcaption></figure>4、分區標籤：<div></div> 5、常見的行級標籤<1>span（文本）:無實際意義，用於包裹某部分文字，修改特定樣式，例如：這是<span style="color: red;font-size: 36px;">span</span>中的文字img（圖片）：其常用屬性：①src:表示引用圖片的地址。 路徑地址的寫法：相對路徑：以當前檔案為最准，去尋找圖片地址 a、與檔案處於同一層的圖片，直接寫圖片名 b、圖片在當前檔案下一層：檔案名稱/圖片名 c、圖片在當前檔案上一層：../圖片名 絕對路徑:file:///盤符：/檔案夾/圖片名，但 是嚴禁使用 圖片網址：網路上的圖片連結，但是一般不用 ②height和width：圖片的高度和寬度。可以用CSS樣式代替 ③title：圖片標。當滑鼠指上之後顯示的文字 ④alt:當圖片無法顯示的時候，顯示的文字 <2>em（傾斜強調）<3>strong（加粗強調）<4>b（加粗）<5>i（傾斜） Strong、em、b、i的區別 1、Strong、em都表示強調，Strong為粗體，em為斜體，而Strong的強調 程度逗比em高 2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強調的語義 。H5要求標籤儘可能實現語義化。 <6>q（短引用）<7>small/big（縮小/放大字型）：small和big分別是縮小和擴大字型，都可以多層嵌套直至上限或下限<8>a（超連結） 1、href:超連結的路徑，可以是網路連結，也可以是本地檔案。 2、target:跳轉頁面開啟的位置。_self自身頁面，_blank新頁面。 3、title:滑鼠指在超連結上顯示的名稱。 4、Rel（被連結是當前的前/後一篇）:指定被連結文檔與當前文檔的關係,搜尋引擎 會利用該屬性 擷取更多的有關連結的資訊： rel="prev"被連結文檔是當前文檔的前一篇文 檔， rel="next"被連結文檔是當前文檔的後一篇文檔, rel="icon"被連結文檔是當前文檔的表徵圖 rel="stylesheet"被連結文檔是當前文檔的樣式表 5、Rev（當前是被連結的前/後一篇） 錨連結： ①本頁面錨連結:a、設定錨點：<a name="top"></a> b、跳轉錨點：#name名 ①頁面間錨連結:a、在即將跳轉頁面的指定位置設定錨點 b、跳轉錨點：頁面地址.html#name名 <a href="02_常見的塊級標籤.html#Hbuilder">頁面間錨連結</a><br/> 功能性連結： mailto用於給指定郵箱發送郵件 file：///e:/aaa.png開啟本地檔案 tencent://message/?uin=1315618220 給指定QQ發送息 <9>s標籤，有誤文本：刪除線<s>這是S標籤中的文字</s><br /><10>cite標籤：瀏覽器顯示為傾斜，常用於書、畫作、作品的引用<cite>這是cite中的文本</cite><br /><11>code:電腦代碼，不保留代碼格式<pre><code></code></pre><12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左<bdo dir="rtl">1234567</bdo><br />kbd:表示需要使用者用鍵盤輸入的內容，瀏覽器顯示為等寬字型請輸入“<kbd>Esc</kbd>”延遲系統<br /><13>sup:上標文本，sub:下標文本x<sub>6</sub><br />? © 空格 ? © 空格 <br /><14>u:底線<u>這是底線</u><br />mark:高亮或標記文本，瀏覽器顯示為黃色背景<mark>mark</mark><br />6、表格：表格的行：tr，每行中的列：td，表格的表頭：th 表格的常用屬性： 表格行列屬性：[tr和td的屬性]： 1、width/heigh：儲存格的寬高 2、bgcolor:儲存格的背景顏色 3、align:left center right 儲存格中的文字水平對齊 4、valign:top center bottom 儲存格中的文字垂直對其方式 5、nowrap:儲存格中文字不換行 【注意】當表格屬性與行列屬性衝突時，行列屬性優先順序高 7、表單（form）【兩個重要屬性】：action-表單提交的伺服器位址 method-表單提交資料的方法（get/post） get/post區別: 1>get使用URL傳參：http://伺服器位址?name1=value1&name2=value2 （?表示傳遞參數，?後面採用name=value的形式傳遞，多個參數之間用&串連） ① URL傳參不安全，所有資訊可在地址欄看到，並且別人可以很容易url注入，來 攻擊自己的資料庫。 ② URL傳參資料量有限，只能傳遞少量資料。 2>post:使用http請求傳遞資料。URL地址看不到資料資訊，安全且傳遞資訊量沒有限制 綜上所述：大部分使用post傳參，但是get傳參比Post快【input標籤及屬性】 ①type：input輸入框的類型，可選值有： ②name：input輸入框的別名，必填，因為傳參的時候採用name=value的形式傳遞。 ③value：input輸入框的預設值 ④placeholder:提示內容，當輸入框有value時，提示內容消失。【input特殊屬性值】 ① checked="checked"預設選中 ② disabled="disabled"設定控制不能使用，按鈕上不能點擊，輸入框上不能修改，而且如果 輸入框時disabled，則輸入框資訊不傳遞到後台 ③hidden=“hidden”隱藏。等同於<input type="hidden" name="username"value="1234" /> 等同於配合disabled或根據其他需要，使用隱藏欄位傳遞資訊. 【input-type屬性詳解】 ①text：文本輸入框 ②password：密碼輸入框，內容不對外顯示 ③radio：選項按鈕 checkbox:複選按鈕 a、選項按鈕，name和value屬性需同時存在，提交時，提交的是value中的屬性值 例如：<input type="radio" name="sex" value="男"/>提交顯示為"sex=男" b、radio憑藉name屬性區分是否為同一組，name相同為同組，且只能選擇一個 c、checked="checked"預設選中，（radio只可以選一個，checkbox可以選多個） ④submit：提交按鈕，提交表單資料 ⑤reset：重設按鈕，重設為預設狀態 ⑥file：檔案上傳按鈕 ⑦image：圖片提交按鈕，功能同submit，可以提交資料 ⑧button：普通按鈕，沒什麼軟用 ⑨其他常用屬性值：見 【select標籤】下拉選擇標籤 寫法：
<select name="=city">
<option>青島</option>
<option>煙台</option>
<option>北京</option>
<option>紐約</option>
<option>羅馬</option>
</select>
常用屬性
①name屬性：寫在select裡，所有選項只有一個name
②multiple屬性：multiple="multiple"設定select為多選，一般不用
③option常用屬性：value=""屬性，當option沒有value屬性時，往後台傳遞的是<option></option>中間的文字，
當有value屬性時，傳遞的是value的屬性值。
title=""屬性,滑鼠之上後現實的文字
select="select"預設屬性值
④optgroup屬性： 用於option屬性分組，用lable屬性工作表示分組名。
<optgroup label="中國">
<option>青島</option>
<option>煙台</option>
<option>北京</option>
</optgroup>
【textarea】:文本域，其常用屬性 ：
①設定寬度高度 style="width: 150px;height: 200px;
②readonly="readonly"：唯讀模式，不允許修改編輯
③style="resize: none;"設定為寬度高度不允許修改
④style="overflow:;"設定文字超出地區時，如何處置，常用屬性值有：
hidden 超出地區的文字，隱藏無法顯示
scroll 無論文字多少，均顯示滾動
auto 自動，根據文字多少自動決定是否會顯示為捲軸
【fieldset 、legend】表單的邊框與標題
<fieldset> //邊框
<legend> //標題
</legend>
</fieldset>
如果想讓標題嵌入到邊框中，需將標題標籤寫到邊框標籤裡面
一個表單可以有多組標題加邊框組合
【h5智能表單】
1、H5新增input的form屬性，用於指定特form表單的id，實現input無需放在form標籤之中，即可通過表單進行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input元素的新增屬性：
Autocomplete：自動完成功能，記錄使用者之前輸入的內容，並在使用者下次輸入時提示使用者輸入
》》》屬性值：on/off
》》》可以再form表單使用，對整個表單的所有控制項進行自動完成的開關也可以在input上使用，
對特定輸入框進行修改
》》》絕大部分瀏覽器預設開啟
Autofocus：自動獲得焦點，autofocus="autofocus"只能獲得一個焦點
Form：所屬表單，通過id確認屬於哪個表單
Required：必填,required="required",設定必填，否則停止提交
Pattern：使用Regex驗證input的模式
Placeholder：提示，當有value時取消提示。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>請假單</title></head><body ><!--<table width="500"><caption><u><b>特別請假單</b></u></caption><tr><td>申請日期： 年 月 日</td></tr> </table><table border="1" style="border-collapse: collapse;" width="500"><tr><td>所屬單位</td><td>蔔祖班</td><td>職稱</td><td>111</td><td>姓名</td><td>111</td><td>廠長</td></tr><tr><td rowspan="2">期間</td><td colspan="3">年月日</td><td colspan="2" rowspan="2">天數</td><td>111</td></tr><tr><td colspan="3">年月日</td><td>主管</td></tr><tr><td colspan="2">職務代理人</td><td colspan="4">蓋章</td><td>111</td></tr><tr><td colspan="1">到職日期</td><td colspan="3">年月日</td><td colspan="2">審核意見</td><td colspan="1">組長</td></tr><tr><td colspan="2">全年特別休假書</td><td colspan="2" align="right">天</td><td colspan="1">111</td><td colspan="1">111</td><td colspan="1">111</td></tr><tr><td colspan="2">疫情家屬</td><td colspan="2"align="right">天</td><td >人事主任</td><td >認識經辦</td><td >班長</td></tr><tr><td colspan="2">本次申請日期</td><td colspan="2"align="right">天</td><td rowspan="2">111</td><td rowspan="2">111</td><td rowspan="2">111</td></tr><tr><td colspan="2">剩餘請假日期</td><td colspan="2"align="right">天</td></table>--><h2 style="text-decoration:underline ;text-align: center;"width="500px" >貼別休假申請單</h2><p> 申請日期： 年 月 日</p><table border="1" style="border-collapse: collapse;" width="500px" align="center"><tr><td>所屬單位</td><td>蔔祖班</td><td>職稱</td><td>111</td><td>姓名</td><td>111</td><td>廠長</td></tr><tr><td rowspan="2">期間</td><td colspan="3">年月日</td><td colspan="2" rowspan="2">天數</td><td>111</td></tr><tr><td colspan="3">年月日</td><td>主管</td></tr><tr><td colspan="2">職務代理人</td><td colspan="4">蓋章</td><td>111</td></tr><tr><td colspan="1">到職日期</td><td colspan="3">年月日</td><td colspan="2">審核意見</td><td colspan="1">組長</td></tr><tr><td colspan="2">全年特別休假書</td><td colspan="2" align="right">天</td><td colspan="1">111</td><td colspan="1">111</td><td colspan="1">111</td></tr><tr><td colspan="2">疫情家屬</td><td colspan="2"align="right">天</td><td >人事主任</td><td >認識經辦</td><td >班長</td></tr><tr><td colspan="2">本次申請日期</td><td colspan="2"align="right">天</td><td rowspan="2">111</td><td rowspan="2">111</td><td rowspan="2">111</td></tr><tr><td colspan="2">剩餘請假日期</td><td colspan="2"align="right">天</td></table></body></html>
【樣本-表單】
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form action="04_form1.html" method=""><table ><tr><td>登入名稱</td><td><input type="text" name="username" />（可包含a-z 0-9 和底線）</td><td><img src="../img/icon.png">閱讀貴美網服務合約</td></tr><tr><td>密碼</td><td><input type="password" name="password1" />（至少包含6個字元）</td><td rowspan="8"><textarea style="width: 150px;height: 200px; resize: none;overflow: auto;"readonly="readonly"> 1、房產：a夫妻雙方婚後購有坐落在×路×號×小區×棟×單元×號的樓房一套，登記在男方/女方(或雙方)名下，屬夫妻共有財產。離婚後，該套房屋歸男方/女方所有(註：包括房內裝修內附屬設施及相關配套設施)，雙方相互配合辦理產權變更登記手續。因辦理產權變更登記手續所應支付的一切稅費等均由男方/女方承擔。取得房屋所有權的一方給予另一方經濟補償人民幣×××元，在本協議簽訂之日起×日內付清。 b夫妻雙方婚後購有坐落在×路×號×小區×棟×單元×號的樓房一套，購房時以男方/女方為主貸人向×銀行按揭貸款購買，首付及按揭還款都來源於夫妻共有存款，該房屬夫妻共有財產。離婚後，該套房屋歸男方/女方所有(註：包括房內裝修內附屬設施及相關配套設施)，雙方相互配合辦理產權變更登記及辦理貸款主貸人變更手續。因辦理產權變更登記及辦理貸款主貸人變更手續所應支付的一切稅費等均由男方/女方承擔。取得房屋所有權的一方給予另一方經濟補償人民幣×××元，在本協議簽訂之日起×內付清。 夫妻共有房屋內的家用電器及傢具等等(見清單)，雙方同意作價×××萬元，歸男方/女方所有，取得的一方給予另一方經濟補償人民幣×××元，在本協議簽訂之日起×內付清。 </textarea></td></tr><tr><td>再次輸入密碼</td><td><input type="password" name="password2" /></td></tr><tr><td>電子郵箱</td><td><input type="text" name="email" />（必須包含@字元）</td></tr><tr><td>性別：</td><td><input type="radio" name="sex" value="男" checked="checked"/><img src="../img/male.gif" />男<input type="radio" name="sex" value="女" /><img src="../img/female.gif" />女</td></tr><tr><td>頭像：</td><td><input type="file" name="files" "/></td></tr><tr><td>愛好：</td><td><input type="checkbox" name="hobby" value="吃" checked="checked"/>吃<input type="checkbox" name="hobby" value="喝"/>喝<input type="checkbox" name="hobby" value="玩"/>玩</td></tr><tr><td>城市</td><td><select name="city" ><optgroup label="中國" title="中國地區"><option title="山東青島">青島</option><!--可以有n多個--><option title="山東煙台">煙台</option><option title="首都北京">北京</option></optgroup><optgroup label="外國" title="外國地區"> <option title="美國紐約">紐約</option><option title="意大利羅馬">羅馬</option></optgroup></select></td></tr><tr><td style="text-align: center;" colspan="2"><input type="submit" name="登入" value="登入"/><input type="reset" name="重設" value="重設"/></td></tr></table></form></body></html>
html5常用基本標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
