后端程序员的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.youkuaiyun.com	普通链接
#+name：jump.html#down	锚标签：从当前html跳转到jump.html中的a标签下name="down"位置
mailto:邮箱	mailto标签：跳转到邮箱

<!--a标签-->
<a href="http://www.youkuaiyun.com" target="_blank">csdn</a><br/>
<a href="http://www.youkuaiyun.com" target="_parent">csdn</a><br/>
<a href="http://www.youkuaiyun.com" target="_self">csdn</a><br/>
<a href="http://www.youkuaiyun.com" target="_top">csdn</a><br/>
<!--锚标签-->
<a href="jump.html#down" target="_blank">跳转down</a>
<!--mailto标签-->
<a href="mailto:610254602@qq.com" 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表单的学习，确定侧重点方可事半功倍。

​ 不断提升自我，迭代自我，我是猿同学~~~