关于『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 ~~（夹带私货失败~~