後端程序員的HTML5

0 閱讀須知

---

HTML5是Hyper Text Markup Langage（超文本標記語言）。超文本:超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本；標記語言:由標籤構成的語言。<標籤名稱> 如 html、xml，標記語言不是編程語言。
單詞識記

單詞	漢譯
placeholder	佔位符
frame	框架
feedback	反饋
audio	音頻
video	視頻
radio	收音機（單選框）
textarea	文本域
pattern	模式;方式;範例;典範;榜樣;樣板;圖案;花樣;式樣

1 常用標籤

---

標籤名	描述
meta	描述head中信息
title	標題
p	段落標籤
strong	粗體
em	斜體
br	換行標籤
hr	分割線
&nbsp；	空格特殊符
&gt；/&lt；	大於小於特殊符><
&copy；	版權符號©
img	圖像標籤
a	超鏈接標籤
ol–li	有序列表
ul–li	無序列表
dl–dt–dd(常用在網站底部)	自定義列表
table–tr–th–td	表格
iframe	內聯框架

2 a標籤

---

​ a標籤中的target標籤值得注意：

_blank在新窗口中打開；
_parent在當前窗口打開；

​ a標籤中的href分爲一下幾類：

href	描述
url：http://www.csdn.net	普通鏈接
#+name：jump.html#down	錨標籤：從當前html跳轉到jump.html中的a標籤下name="down"位置
mailto:郵箱	mailto標籤：跳轉到郵箱

<!--a標籤-->
<a href="http://www.csdn.net" target="_blank">csdn</a><br/>
<a href="http://www.csdn.net" target="_parent">csdn</a><br/>
<a href="http://www.csdn.net" target="_self">csdn</a><br/>
<a href="http://www.csdn.net" target="_top">csdn</a><br/>
<!--錨標籤-->
<a href="jump.html#down" target="_blank">跳轉down</a>
<!--mailto標籤-->
<a href="mailto:[email protected]" target="_blank">聯繫我</a>

3 iframe標籤

---

​ iframe標籤是一個內聯框架標籤，相當於html內的iframe中還有一個html。下面是bilibili提供的iframe標籤：

<!--iframe標籤-->
<iframe src="//player.bilibili.com/player.html? aid=55631961&cid=97257967&page=11" scrolling="no" border="0"
        frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

效果如下：

4 列表標籤+table標籤

---

​ 列表分類：ol有序列表、ul無序列表、dl自定義列表；table標籤中：tr行、th表頭、td列。具體使用如下：

<!--ol-->
<ol>
    <li>上手敲代碼</li>
    <li>上手敲代碼</li>
    <li>上手敲代碼</li>
</ol>
<!--ul-->
<ul>
    <li>多看多想多動手</li>
    <li>多看多想多動手</li>
    <li>多看多想多動手</li>
</ul>
<!--dl-->
<dl>
    <dt>第一</dt>
    <dd>多看</dd>
    <dd>多想</dd>
    <dd>多動手</dd>

    <dt>第二</dt>
    <dd>猿同學</dd>
    <dd>java</dd>
    <dd>一起學</dd>
</dl>
<!--table-->
<table border="1px">
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>shen</td>
        <td>boy</td>
        <td>18</td>
    </tr>
    <tr>
        <td>wang</td>
        <td>girl</td>
        <td>18</td>
    </tr>
</table>

效果如下：

5 音頻視頻標籤

---

標籤	描述
audio	音頻標籤，使用src、controls、autoplay屬性
video	視頻標籤，使用src、controls、autoplay屬性

具體使用如下：

<!--視頻-->
<video src="media/video.mp4" controls autoplay>視頻</video>
<!--音頻-->
<audio src="media/audio.mp3" controls>音頻</audio>

效果如下：

注意：html中的video、audio標籤對視頻音頻資源有限制，只能支持ogg、mpeg4、wehm的視頻格式和ogg、mp3、wav的音頻格式。

6 form表單

---

​ form表單中常用的標籤：

標籤	描述
form	表示form表單
input	輸入框
select—selected選中	下拉框
textarea	文本域
label	標籤，用於鼠標增強

​ form表單中最常用的是input標籤，常用的input的type如下：

type	描述
text	普通輸入框
password	密碼輸入框
radio—checked選中	單選框
checkbox—checked選中	複選框
file	文件輸入
email	郵件地址校驗框
url	url校驗框
number	數字框
range	滑塊框
search	搜索框
button	按鈕
image	圖片提交
submit	提交
reset	重置

​ form表單中常用的屬性：

屬性	描述
palceholder	提示
required	非空
pattern	正則表達式
readonly	只讀
disabled	禁用
hidden	隱藏

具體使用如下：

<form action="#" method="get">
   	<!--input-->
    <p>姓名:<input type="text" name="username" value="admin" placeholder="輸入姓名" maxlength="8" size="30" readonly/></p>
    <p>密碼:<input type="password" name="username" value="123456" placeholder="輸入密碼" minlength="6" hidden/></p>
    <p>
        <!--radio-->
        性別：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>
        <!--checkbox-->
        國家：
        <input type="checkbox" value="china" name="country" checked/>中國
        <input type="checkbox" value="us" name="country"/>美國
        <input type="checkbox" value="japan" name="country"/>日本
    </p>
    <p>
        <!--select-->
        下拉框：<select name="hobby" id="">
            <option value="code" selected>敲代碼</option>
            <option value="football">足球</option>
            <option value="read">閱讀</option>
        </select>
    </p>
    <p>
        <!--textarea-->
        反饋：<textarea name="feeback" id="#" cols="30" rows="10">反饋信息</textarea><br/>
        <!--files-->
        <input type="file" name="files"/>
    </p>

    <p>
        <!--郵箱-->
        <p>郵箱<input type="email" name="email"/></p>
        <!--url-->
        <p>url <input type="url" name="url"/></p>
        <!--數字-->
        <p>數字<input type="number" name="number" max="100" min="0" step="10"/></p>
        <!--滑塊-->
        <p>滑塊<input type="range" name="voice" max="100" min="0" step="2"/></p>
        <!--搜索-->
        <p>搜索<input type="search" name="search" placeholder="輸入搜索內容"/></p>
    </p>

    <p>
        <!--只讀、失效、隱藏-->
        readonly、disabled、hidden ---> 見姓名、密碼、性別輸入框 <br/>
        <!--鼠標增強:for綁定id-->
        <label for="mus">點我</label>
        <input type="text" id="mus"/>
    </p>

    <p>
        <!--placeholder:提示;required:非空;pattern:正則表達式https://www.jb51.net/tools/regexsc.htm-->
        自定義郵箱
        <input type="text" name="my_email" id="my_email" placeholder="輸入郵箱"
               pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$" required/>
    </p>

    <p>
        <!--button-->
        <input type="button" value="按鈕" name="btn"/>
        <!--image-->
        <input type="image" src="images/wechat.jpg" name="img" height="30px" width="30px"/>
        <!--submit-->
        <input type="submit" value="提交" name="submit"/>
        <!--reset-->
        <input type="reset" value="重置" name="reset"/>
    </p>
</form>

效果顯示：

7 總結

---

​ 作爲後端開發人員，更加要注重form表單的學習，確定側重點方可事半功倍。

​ 不斷提升自我，迭代自我，我是猿同學~~~