H5学习01之HTML标签

本篇内容：

1, h5中的基础标签；
2, h5中的列表标签；
3, h5中的表格标签；
4, h5中的表单标签；
5，h5中的多媒体标签；
6，h5中的details标签，marquee标签，废弃的几个标签及其替代以及字符实体

1，h5中的基础标签：

1.1,标题：h1、h2、h3、h4、h5....
1.2,段落：p
1.3,图片：img
1.4,容器：div、span（用来容纳其他标签）
1.5,链接：a
1.6,换行：br
1.7,分割线标签：hr

<!--1,标题标签有六个,h1-h6-->
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>

<!--2,段落标签,前后分行-->
<p>这是一个段落标签,前后都会有分隔</p>
<p></p>

<!--3,image标签-->
![](src/zhang.jpg)
<!--直接写文件名代表当前路径下文件-->
![](current.jpg)
<!--./是当前路径-->
![](current.jpg)
<!--../是上一级路径-->
![](./../root.jpg)
![](src/next.jpg)

<!--4,容器标签-->
<div>
    <span>这是div中的第一个span</span>
    <span>这是div中的第二个span</span>
    <span>这是div中的第三个span</span>
</div>

<!--5,链接-->
<!--href是地址  target是打开网页的方式比如新建一个页面打开-->
<a href="https://www.baidu.com/" target="_blank">这是百度链接</a>

<!--6,换行标签,xml中需要写／用来结尾-->
<br>
<br/>

<!--6,分割线标签，xml中需要写／用来结尾-->
<hr>
<hr/>

2, h5中的列表标签：

列表分为三种：
2.1, 有序列表order list : ol
主要应用：排名榜
2.2, 无需列表 unorder list: ul
主要应用：新闻列表，商品清单等等
2.3, 定义列表defination list: dl, defination title:dt, defination description: dd
主要应用：网站底部的一些介绍，像支付方式，特色服务等等有下级说明的

<!--1.1, 有序列表order list : ol-->
<!--主要应用：排名榜-->
<ol>
    <li>第一名：Ivan</li>
    <li>第二名：Jack</li>
    <li>第三名：Rose</li>
    <li>第四名：Mike</li>
</ol>

<!--1.2, 无需列表 unorder list: ul-->
<!--主要应用：新闻列表，商品清单等等-->
<ul>
    <li>这是无序列表第一行</li>
    <li>这是无序列表第一行</li>
    <li>这是无序列表第一行</li>
    <li>这是无序列表第一行</li>
</ul>


<!--1.3, 定义列表defination list: dl, defination title:dt, defination description: dd-->
<!--主要应用：网站底部的一些介绍，像支付方式，特色服务等等有下级说明的-->
<dl>
    <dt>支付方式</dt>
    <dd>
        <p>支付宝</p>
        <p>微信支付</p>
        <p>银联支付</p>
    </dd>
</dl>

3, h5中的表格标签：

表格标签：
table:表格
tr： table row
td： table data
注意：表格边框宽度需要手动设置
3.1，最基本的表格

Snip20170122_5.png

<!--1，表格的基本属性-->
<table border="2px" cellspacing="0px" cellpadding="10px" align="center">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>

    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

3.2，细线表格

Snip20170122_6.png

<!--2，细线表格-->
<table bgcolor="black" cellspacing="1px" style="margin-top: 50px" align="center">
    <tr bgcolor="white">
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr bgcolor="white">
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

3.3，完整表格的基本结构
Snip20170122_7.png

<!--3, 完整表格的基本结构-->
<!--一般很少会用表格头或者表格尾-->
 <table border="1px" cellpadding="10px" style="margin-top: 50px" align="center">

     <caption>表格标题</caption>
     <thead>
     <tr align="center"><td>第一列头部</td><td>第二列头部</td><td>第三列头部</td></tr>
     </thead>
     <tbody>
     <tr><td>第一行第一列内容</td><td>第一行第二列内容</td><td>第一行第三列内容</td></tr>
     <tr><td>第二行第一列内容</td><td>第二行第二列内容</td><td>第二行第三列内容</td></tr>
     </tbody>
     <tfoot>
     <tr><td>第一行第一列尾部</td><td>第一行第二列尾部</td><td>第一行第三列尾部</td>
     </tfoot>

 </table>

3.4，表格合并某些单元格

Snip20170122_8.png

<!--4, 表格合并-->
<table border="1px" style="margin-top: 50px" align="center">
    <tr align="center">
        <td colspan="2">第一行前两列合并</td>
        <td>第三列</td>
        <td></td>
    </tr>
    <tr align="center">
        <td rowspan="2">第一列后两行合并</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr align="center">
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>

4, h5中的表单标签：

表单.gif

4.1，输入框
4.2，复选框，比如爱好设置等
4.3，单选框，比如性别选择等
4.4, 按钮
4.5，重置
4.6, 提交按钮
4.7，下拉列表，这个是非input标签哦
4.8, 多行输入框，这个也是非input标签哦

具体代码如下：

<form action="http://www.baidu.com">

    <!--1，输入框-->
    <!--1.1明文输入框和暗文输入框-->
    账号00<input type="text" name="account"><br>
    密码00<input type="password" name="pwd"><br>

    <!--1.2,文本与文本框的绑定-->
    <!--文字和输入框绑定，对应绑定，点击文字可以聚焦文本框-->
    <label>账号01<input type="text"><br></label>
    <label>密码01<input type="password"></label><br>
    <!--文本和输入框id自由绑定-->
    <label for="01">账号02</label><input type="text" id="01"><br>
    <label for="02">密码02</label><input type="password" id="02"><br>

    <!--2，复选框，比如爱好设置等-->
    爱好：
    <input type="checkbox" name="lanqiu">篮球
    <input type="checkbox">足球
    <input type="checkbox">羽毛球
    <input type="checkbox">棒球
    <br>

    <!--3，单选框，比如性别选择等-->
    <!--注意：radio在默认情况下并不会互斥，需要设置name之后，name相同的标签才会互斥-->
    性别：
    <input type="radio" checked="checked" name="sex">男
    <input type="radio" name="sex">女
    <br>

    <!--4, 按钮-->
    <!--4.1, 普通按钮-->
    <input type="button" value="我是按钮01" onclick="alert('我是按钮01，你刚才点击了我')">
    <br>

    <!--4.2, 图片按钮,相当与在a标签内部放了一格img标签-->
    <input type="image" src="../root.jpg" width="20px" onclick="alert('我是一个img类型的伪button')">
    <br>

    <!--5，重置-->
    <!--表单上所有已经写好的东西全部清空-->
    <input type="reset" value="我要重置所有">
    <br>

    <!--6, 提交按钮-->
    <!--如果想要真正的进行提交操作，需要对form的action属性设置服务器地址-->
    <input type="submit" value="提交数据">
    <!--隐藏域：配合提交按钮将数据悄悄的提交到服务器-->
    <input type="hidden" name="hideInput" value="指定一个值">
    <br>

    <!--7，下拉列表，这个是非input标签哦-->
    <select>
        <optgroup label="国语经典">
            <option>三国演义</option>
            <option>西游记</option>
            <option>水浒传</option>
            <option>红楼梦</option>
        </optgroup>
        <optgroup label="世界名著">
            <option>我的童年</option>
            <option>我的大学</option>
            <option>在人间</option>
        </optgroup>
    </select>
    <br>

    <!--8, 多行输入框，这个也是非input标签哦-->
    <!--可拉伸，且用默认的行数列数-->
    <textarea></textarea>
    <br>
    <!--可拉伸，但是初始设置行数和列数-->
    <textarea rows="5" cols="5"></textarea>
    <br>
    <!--设置不可拉伸-->
    <textarea style="resize: none;"></textarea>


    <!--新增的表单标签，仅供了解，因为很多浏览器并不支持,所以不计算在内-->
    <input type="color" placeholder="color"><br>
    <input type="date" placeholder="date"><br>
    <input type="datetime" placeholder="datetime"><br>
    <input type="email" placeholder="email"><br>
    <input type="url" placeholder="url"><br>
    <input type="number" placeholder="number"><br>

    <!--有下拉框的输入框-->
    <!--注意：大部分的浏览器并不支持这个标签，所以这个仅供了解，不计算在内-->
    请输入你意向中的大学：<input type="text" list="university" placeholder="双击查看已有备选项">
    <datalist id="university">
        <option>北京大学</option>
        <option>清华大学</option>
        <option>复旦大学</option>
        <option>同济大学</option>
    </datalist>
    
    
    <input type="submit" value="提交数据">

</form>

然后再对表单进行强化一下，做一个实例，如下：
注意：外框是用fieldset来做的，如果不知道可以在w3c中查看一下这个标签

Snip20170122_9.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>

    <style type="text/css">
        input{
            margin-left: 35px;
        }
        .theRegisterBtn, .theClearBtn{
            margin-left: 0px;
            margin-right: 30px;
        }
    </style>
</head>
<body>

<div class="myForm">
    <form>

        <fieldset>
            <legend>注册</legend>
            <div>
                <label>账号：<input type="text"></label>
            </div>
            <div>
                <label>密码：<input type="password"></label>
            </div>
            <div>
                性别：<input type="radio" name="sex" checked="checked">男
                 <input type="radio" name="sex" value="female">女
                 <input type="radio" name="sex" value="male">保密
            </div>
            <div>
                爱好：<input type="checkbox" name="sports" value="basketball">篮球
                <input type="checkbox" name="sports" value="soccer">足球
                <input type="checkbox" name="sports" value="baseball">棒球
            </div>
            <div>
                个人简介：
                <textarea style="resize: none"></textarea>
            </div>

            <div>生日：<input type="date"></div>
            <div>邮箱：<input type="email"></div>
            <div>手机：<input type="number"></div>
            <span>提交：<input type="submit" value="注册" class="theRegisterBtn"></span>
            <span>清空：<input type="reset" value="清空" class="theClearBtn"></span>
        </fieldset>
    </form>
</div>
</body>
</html>

5，h5中的多媒体标签：

5.1，视频相关
5.2，音频相关

多媒体相关.gif

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多媒体标签</title>
</head>
<body>

<!--1，视频相关-->
<!--注意：如果自动播放就没必要开preload，如果不需要自动播放的时候设置preload才有意义-->
<div style="text-align: center">
    <!--方式一：快捷方式，不需要适配不同的格式-->
    <!--muted="muted"-->
    <!--<video src="src/test.mp4" autoplay="autoplay" width="500px" controls="controls" preload="auto" loop="loop"></video>-->
    <!--方式二，因为不同浏览器视频格式不同需要适配的时候：-->
    <video controls="controls" width="500" muted="muted">
        <source src="src/test.mp4" type="video/mp4">
    </video>

</div>

<!--2，音频相关-->
<!--同样两种格式：-->
<div style="text-align: center;margin-top: 50px">
    <!--方式一：-->
    <!--<audio src="src/ljj.mp3" autoplay="autoplay" controls="controls"></audio>-->
    <!--方式二-->
    <audio controls="controls">
        <source src="src/ljj.mp3" type="audio/mpeg">
    </audio>

</div>
</body>
</html>

6，h5中的details标签，marquee标签，废弃的几个标签及其替代以及字符实体

6.1， details标签和marquee标签

详情概要和跑马灯.gif

具体代码如下：

<!--1，详情概要标签，比较简单-->
<details>
    <summary>这是概要</summary>
    这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情，这是详情；
</details>


<!--2，marquee标签-->
<!--注意：这个标签在html5中是找不到的，但是各个浏览器都可以支持-->
<!--loop=20,滚动二十次,默认值-1， 无限滚动-->
<!--scrollamount="30"，滚动速度-->
<!--behavior，滚动方式，默认是slide，alternate是返回弹回-->
<div class="left">
    <marquee direction="left" scrollamount="1">
        这是一个marquee标签
    </marquee>
</div>
<div class="left">
    <marquee direction="right" scrollamount="30">
        这是一个marquee标签
    </marquee>
</div>
<div class="left">
    <marquee direction="up" behavior="alternate">
        这是一个marquee标签
    </marquee>
</div>
<div class="left">
    <marquee direction="down">
        这是一个marquee标签
    </marquee>
</div>
<div class="left">
    <marquee direction="down">
        ![](../root.jpg)
    </marquee>
</div>

6.2，废弃的几个标签及其替代
比较简单，直接上代码：

<!--<br><hr><font></font>这几个标签也被废弃了-->
<!--1，被废弃的标签，废弃原因：没有语义，主要是修改样式的，是css该做的事情-->
<b>这是一个加粗标签</b>
<br>
<i>这是一个斜体标签</i>
<br>
<u>这是一个下划线标签</u>
<br>
<s>这是一个删除先标签</s>
<br>

<!--2，上面四个标签的取代是：-->
<strong>这是一个加粗标签的取代新标签</strong>
<br>
<em>这是一个斜体标签的取代新标签</em>
<br>
<ins>这是一个下划线标签的取代新标签</ins>
<br>
<del>这是一个删除先标签的取代新标签</del>
<br>

6.3，字符实体

Snip20170122_10.png

最后编辑于：2017.12.05 07:26:04

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,457评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,837评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,696评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,183评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,057评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,105评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,520评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,211评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,482评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,574评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,353评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,897评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,174评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,489评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,683评论 2赞 335

H5学习01之HTML标签

本篇内容：

1，h5中的基础标签：

2, h5中的列表标签：

3, h5中的表格标签：

4, h5中的表单标签：

5，h5中的多媒体标签：

6，h5中的details标签，marquee标签，废弃的几个标签及其替代以及字符实体

推荐阅读更多精彩内容