关于『HTML5』:第二弹

关于『HTML5』:第二弹

建议缩放90%食用

咕咕咕咕咕咕咕！！1 （蒟蒻大鸽子终于更新啦）

自开学以来，经过了「一脸蒙圈的 半期考试」、「二脸蒙圈的 体测」的双重洗礼，我终于有空肝 HTML5 辣！！1

 快乐+10086 

HTML5 冲鸭！！1
(语无伦次！！1)

（奇怪的知识又增加了呢~)

HTML5系列向你空投知识，请注意接收

废话over

  又要为大家带来HTML5 了呢~  

---

注：编者用的是CSDN-Markdown编辑器（是的没换）

声明：由于 HTML5 只是在 HTML 的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起。

HTML5 系列体系 大体和原来的 过时的 HTML 并没有太大区别，请不要以为走错片场。

正文begin

(七).语义标签

常见标签：

标签	描述
<header>	规定文档或节的页眉
<footer>	定义文档或节的页脚
<main>	规定文档的主内容
<section>	定义文档的节
<article>	定义文档的文章
<aside>	定义页面内容以外的内容
<nav>	定义导航链接
<mark>	定义重要的或强调的文本
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等
<figcaption>	定义 <figure> 元素的标题
<details>	定义用户能够查看或隐藏的额外细节
<summary>	定义 <details> 元素的可见标题
<time>	定义日期/时间

基本布局：

案例演示：


tips：右键点击检查，悄悄康康OJ的代码做对照叭 （（（Just see see, 请勿对OJ源代码动手动脚

---

(八). 表单标签

常见标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<label>	定义了 <input> 元素的标签，一般为输入标题
<textarea>	定义文本域 (一个多行的输入控件)
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果

案例演示（鸣谢 Visual Studio Code & Microsoft Edge 倾情合作）：

1.form、input、label演示

代码：

<form action="" method="get">
    <p>
        <label for="username">用户：</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    </p>
    <p><input type="submit"></p>
</form>

效果：

2.textarea演示

代码：

<form action="" method="post">
    <textarea name="mycontext" cols="30" rows="10"></textarea>
    <input type="submit">
</form>

效果：

3.fieldset、legend、select、optgroup、option演示

代码：

<form action="" method="post">
    <fieldset>
        <legend>请选择你的爱好：</legend>

        <select name="myhobby" id="myhobby">
            <optgroup label="运动">
                <option value="篮球">篮球</option>
                <option value="足球">足球</option>
            </optgroup>
            <optgroup label="娱乐">
                <option value="看电影">看电影</option>
                <option value="看电视">看电视</option>
            </optgroup>
        </select>
    </fieldset>
</form>

效果：

4.datalist演示

代码：

<form action="" method="post">
    <input list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</form>

效果：

5.单选框演示

代码：

<form action="" method="post">
    <input type="radio" name="sex" id="male" value="male" checked>
    <label for="male">male</label>

    <input type="radio" name="sex" id="female" value="female">
    <label for="female">female</label>
</form>

效果：

6。复选框演示

代码：

<form action="" method="post">
    <input type="checkbox" name="vehicle" id="bike" value="bike">
    <label for="bike">I have a bike</label>

    <input type="checkbox" name="vehicle" id="car" value="car">
    <label for="car">I have a car</label>
</form>

效果：

---

(九). 框架标签

代码：

<iframe src="https://www.luogu.com.cn" frameborder="0" width="500px" height="500px"></iframe>

效果：

---

(十). 音频标签

代码:

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="吱吱吱小吱 - 起风了 (钢琴版).mp3" type="audio/mpeg">
   您的浏览器不支持 Audio 标签。
</audio>

效果：

注：Markdown 编辑器及 .md后缀文件均不支持 HTML （夹带私货失败

---

(十一). 视频标签

代码:

<video width="320" height="240" controls>
   <source src="VID20180212203518.mp4" type="video/mp4">
   <source src="VID20180212203518.ogg" type="video/ogg">
     您的浏览器不支持 Video 标签。
 </video>
 //注：上述文件均为本地

效果：

注：Markdown 编辑器及 .md后缀文件均不支持 HTML （夹带私货失败

---

关于『HTML5』:第二弹 完结啦 []_(￣▽￣) (淋漓的诠释了什么是 “water”)

(百年咕咕…本来想水一篇 tj 挂在讨论板的，想了想还是肝了 html)

填坑.ING

准备开新坑讲点博弈论啥奇奇怪怪的东东

真·旧坑没完挖新坑

鸽王丙叔忠实粉丝实锤

还有，预祝：
(美丽聪明可爱活泼温柔贤惠的) 子酩妹妹NOIP顺利鸭

关于『HTML5』:第二弹 就酱紫结束啦~ 叭叭~(′▽`~)

上一篇:关于『HTML5』:第一弹