后端程序员的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	分割线
；	空格特殊符
>；/<；	大于小于特殊符><
©；	版权符号©
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 href="http://www.csdn.net" target="_blank">csdna><br/>
<a href="http://www.csdn.net" target="_parent">csdna><br/>
<a href="http://www.csdn.net" target="_self">csdna><br/>
<a href="http://www.csdn.net" target="_top">csdna><br/>

<a href="jump.html#down" target="_blank">跳转downa>

<a href="mailto:[email protected]" target="_blank">联系我a>

3 iframe标签

---

​ iframe标签是一个内联框架标签，相当于html内的iframe中还有一个html。下面是bilibili提供的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>
    <li>上手敲代码li>
    <li>上手敲代码li>
    <li>上手敲代码li>
ol>

<ul>
    <li>多看多想多动手li>
    <li>多看多想多动手li>
    <li>多看多想多动手li>
ul>

<dl>
    <dt>第一dt>
    <dd>多看dd>
    <dd>多想dd>
    <dd>多动手dd>

    <dt>第二dt>
    <dd>猿同学dd>
    <dd>javadd>
    <dd>一起学dd>
dl>

<table border="1px">
    <tr>
        <th>姓名th>
        <th>性别th>
        <th>年龄th>
    tr>
    <tr>
        <td>shentd>
        <td>boytd>
        <td>18td>
    tr>
    <tr>
        <td>wangtd>
        <td>girltd>
        <td>18td>
    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">
   	
    <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>
        
        性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    p>
    <p>
        
        国家：
        <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 name="hobby" id="">
            <option value="code" selected>敲代码option>
            <option value="football">足球option>
            <option value="read">阅读option>
        select>
    p>
    <p>
        
        反馈：<textarea name="feeback" id="#" cols="30" rows="10">反馈信息textarea><br/>
        
        <input type="file" name="files"/>
    p>

    <p>
        
        <p>邮箱<input type="email" name="email"/>p>
        
        <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/>
        
        <label for="mus">点我label>
        <input type="text" id="mus"/>
    p>

    <p>
        
        自定义邮箱
        <input type="text" name="my_email" id="my_email" placeholder="输入邮箱"
               pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$" required/>
    p>

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

效果显示：

7 总结

---

​ 作为后端开发人员，更加要注重form表单的学习，确定侧重点方可事半功倍。

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