02【HTML5】

五、HTML元素类型

在HTML中元素分为三类：块级元素、行内元素、行内块元素

5.1 块级元素

  • 块级元素特点：
    • 1）独占一行，自上而下排列
    • 2）默认不设置宽度时，继承父元素的宽度（默认为父级宽度的100%）
    • 3）可以定义自己的宽度和高度，以及盒模型中的任意属性（margin，padding，border）
    • 4）块级元素可以作为一个容器容纳其他的任何元素

常见块元素有：p、ul、ol、li、dl、dt、dd、table、tr、td、form、h1、h2、h3、h4、h5、h6

5.2 行内元素

  • 行内元素的特点：
    • 1）不会独占一行，从左到右排列
    • 2）里面的内容会把行内元素撑大，宽高由内容来决定
    • 3）不能定义自己的宽度和高度，可以设置左右盒模型属性（margin、padding），不可以设置上下盒模型属性（margin、padding、line-height等）
    • 4）行内元素只能嵌套行内元素，不能嵌套块元素

常见的行内元素有：a、span、strong、b、em、i、label

5.3 行内块元素

  • 行内块元素的特点（vertical-align属性只针对这类型元素设置有效）：
    • 1）即具有行内元素特点：不会独占一行，从左到右排列
    • 2）又具有块元素的特点：可以定义宽高以及盒模型中的任意属性

常见的行内块元素有：img、input、textarea、select

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--css宽度写法,等到后面在学-->
<div style="width: 100px">你好</div>
<div style="width: 100px">我好</div>

<hr>
<!--行内元素没有宽高-->
<span style="width: 100px">aa</span>
<span style="width: 100px">bb</span>
<a href="https://www.jd.com" style="width: 100px">cc</a>

<hr>
<img src="img/1.png" alt="" style="width: 100px">
<input type="text" style="width: 100px">
</body>
</html>

六、HTML5新增标签

6.1 布局标签

6.1.1 常规布局标签

标签 语义 元素种类
header 整个页面，或部分区域的头部 块级
footer 整个页面，或部分区域的底部 块级
nav 导航 块级
article 文章、帖子、杂志、新闻、博客、评论等。 块级
section 页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。 块级
aside 侧边栏 块级
menu 定义列表或菜单 块级
small 定义一小段文本 行内

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

<hr>

<article>
    　　<h2>文章标题</h2>
    　　<p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
</article>

<hr>
<menu>
    <li>定义列表</li>
    <li>定义列表</li>
    <li>定义列表</li>
</menu>

<hr>
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
<hr>
</body>
</html>

6.1.2 控件标签

1）meter标签

meter标签是一个行内块标签，用于定义度量衡；

  • meter标签的属性：
    | 属性 | 值 | 描述 |
    | --- | --- | --- |
    | max | 数值 | 规定最大值 |
    | min | 数值 | 规定最小值 |
    | value | 数值 | 规定当前值 |
    | high | 数值 | 规定高值 |
    | low | 数值 | 规定低值 |
    | optimum | 数值 | 规定最优值 |

  • 1）只设置min、max、value属性时,不管value值是多少,度量条的颜色始终是绿色

  • 2）设置了low、high属性时
    • 1）当value值处于low(含)与high(含)之间时,度量条的颜色为绿色
    • 2）当value值不处于low与high之间时(小于log或大于high),度量条颜色为黄色

  • 3）设置了low、high、optimum属性时,首先需要看optimum所处在的区间，例如optimum="90"处于80~100区间，那么：
    • 1）value值处于80(含)~100(含)区间则为绿色
    • 2）value值处于20(含)~80(不含)区间则为黄色
    • 3）value值处于0(含)~20(不含)区间则为红色

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    只设置min、max、value属性时,不管value值是多少,度量条的颜色始终是绿色
-->
<meter min="0" max="100" value="10"></meter>
<hr>
<!--
    设置了low、high属性时
        当value值处于low(含)与high(含)之间时,度量条的颜色为绿色,表示正常
        当value值不处于low与high之间时(小于log或大于high),度量条颜色为黄色,表示警告
-->
<meter min="0" max="100" value="80" low="20" high="80"></meter>
<hr>
<!--
    设置了low、high、optimum属性时,首先需要看optimum所处在的区间
        例如optimum="90"处于80~100区间,那么:
            1. value值处于80(含)~100(含)区间则为绿色
            2. value值处于20(含)~80(不含)区间则为黄色
            3. value值处于0(含)~20(不含)区间则为红色
-->
<meter min="0" max="100" value="1" low="20" high="80" optimum="90"></meter>
</body>
</html>

2）progress标签

progress标签用于显示某个任务完成的进度的指示器，一般用于表示进度条，属于行内块标签；

属性 值 描述
max 数值 规定目标值。
value 数值 规定当前值。

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<progress value="80" max="100"></progress>
</body>
</html>

3）details标签

details标签用于描述文档或文档某个部分的细节，可以通过其open属性来控制details标签内容的折叠。属于块级标签；

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<details>
    <summary>戳我！！</summary>
    <p>精彩内容即将呈现</p>
</details>

<details open>
    <summary>戳我！！</summary>
    <p>精彩内容即将呈现</p>
</details>
</body>
</html>

4）dialog标签

dialog标签用于描述文档或文档某个部分的细节，可通过open属性来控制其显示与隐藏；属于块级标签；

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dialog open id="window">
    <h4>hello</h4>
    <p>xxxxxx</p>
</dialog>

<button id="btn">点击</button>

<!--js代码,后续再学,只看效果-->
<script>
    document.getElementById("btn").onclick = function () {
        if (document.getElementById("window").getAttribute("open") == 'open') {
            document.getElementById("window").removeAttribute("open")
        } else {
            document.getElementById("window").setAttribute("open","open")
        }
    }
</script>
</body>
</html>

6.1.3 文本标签

1）ruby标签

ruby标签用于文本注音，搭配rt标签使用；两个标签都是行内元素。

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<details>
    <summary>查看生僻字</summary>
    <ruby>
        <!--span标签中写文字-->
        <span>犇 猋 骉 麤</span>
        <!--rt标签中写注音-->
        <rt>bēn biāo biāo cū</rt>
    </ruby>
</details>

</body>
</html>

2）mark标签

mark标签用于定义带有记号的文本；属于行内元素。

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<mark>HTML</mark>的全称为<mark>超文本标记语言</mark>，是一种<mark>标记语言</mark>。
<p></p>
</body>
</html>

6.2 表单标签

6.2.1 H5新增input类型

在H5推出后，对input的type做了许多丰富，如下：

属性名 功能
email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url 类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search 搜索类型的输入框，表单提交时不会验证格式。
tel 电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range 范围选择框，默认值为 50 ，表单提交时不会验证格式。
color 颜色选择框，默认值为黑色，表单提交时不会验证格式。
date 日期选择框，默认值为空，表单提交时不会验证格式。
month 月份选择框，默认值为空，表单提交时不会验证格式。
week 周选择框，默认值为空，表单提交时不会验证格式。
time 时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local 日期+时间选择框，默认值为空，表单提交时不会验证格式。

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="/" method="post">
    <!--输入的值必须符合邮箱格式 xxx@xx.xx -->
    email: <input type="email" name="email">
    <hr>
    <!--输入的值必须符合url格式 xxx://xxx.xx.xx-->
    url: <input type="url" name="url">
    <hr>
    number: <input type="number" name="number">
    <hr>
    search: <input type="search" name="search">
    <hr>
    tel: <input type="tel" name="tel">
    <hr>
    <!--
        min: range框的最小值
        max: range框的最大值
    -->
    range: <input type="range" name="range" min="10" max="100">
    <hr>
    color: <input type="color" name="color">
    <hr>
    month: <input type="month" name="month">
    <hr>
    week: <input type="week" name="week">
    <hr>
    date: <input type="date" name="date">
    <hr>
    time: <input type="time" name="time">
    <hr>
    datetime: <input type="datetime-local" name="datetime">
    <hr>
    <input type="submit">

</form>
</body>
</html>

案例效果：

打开F12控制台，点击提交，查看提交数据的详情：

6.2.2 H5新增表单相关属性

  • 1）控件新增属性

  • 2）新增表单相关属性：
    | 属性名 | 用法 | 描述 |
    | --- | --- | --- |
    | novalidate | <form action="/" method="post" novalidate> | 表单提交时不再进行验证 |

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- novalidate: 提交时不对表单进行校验-->
<form action="/" method="post" novalidate>
    用户名: <input type="text" name="username" placeholder="请输入用户名" required accesskey="u" >
    <hr>
    密码: <input type="text" name="password" placeholder="请输入密码" required accesskey="p" autofocus>
    <hr>
    邮箱: <input type="email" name="email" placeholder="请输入邮箱" >
    <hr>
    选择文件(单个): <input type="file" name="file">
    <hr>
    选择文件(多个): <input type="file" name="files" multiple>
    <hr>
    城市:
    <input list="cities" name="cities">
    <datalist id="cities" >
        <option value="NC">南昌</option>
        <option value="NN">南宁</option>
        <option value="NJ">南京</option>
        <option value="BJ">北京</option>
        <option value="XC">西昌</option>
    </datalist>
    <hr>
    <input type="submit">
</form>
</body>
</html>

打开F12控制台，点击提交，查看提交数据的详情：

6.3 多媒体标签

6.3.1 video视频标签

1）video标签的属性

video 标签用于定义视频，是双标签。

  • video标签的属性如下：
    | 属性 | 描述 | 使用示例 |
    | --- | --- | --- |
    | src | 视频的URL地址 | <video src='/video/test.mp4'> |
    | width | 视频控件的宽度，宽高必须等比例设置 | <video widht='300'> |
    | height | 视频控件的高度 | <video height='300'> |
    | controls | 显示视频控件的其他功能，如播放、进度条、音量大小、全屏化等功能 | <video controls> |
    | muted | 视频静音 | <video muted> |
    | autoplay | 视频自动播放
    Tips：该属性只有设置了muted才能生效 | <video autoplay> |
    | loop | 循环播放视频 | <video loop> |
    | poster | 视频封面的图片URL地址 | <video poster='img/1.png'> |
    | preload | 视频预加载，如果使用了autoplay
    属性，则该属性忽略。
  • 1）none
    ：不预加载视频
  • 2）metadata
    ：预先加载视频的元数据，如视频长度
  • 3）auto
    ：让浏览器自动选择（根据网速等综合情况来选择加载的长短）
    Tips：每个浏览器的默认值都不相同，即使规范建议设置为 metadata | <video preload='metadata'> |
    | disablepictureinpicture | 禁用视频"画中画"功能 | <video disablepictureinpicture> |
    | controlslist | 禁用视频控件默认的一些功能，即使有些浏览器并不会显示这么全的功能
  • 1）nodownload
    ：不要视频下载按钮
  • 2）nofullscreen
    ：不要全屏播放按钮
  • 3）noremoteplayback
    ：不要远程回放按钮
  • 4）noplaybackrate
    ：不要播放速度按钮
    Tips：如果要一次性禁用多个视频控件用","隔开，但有些浏览器不支持一次性禁用多个视频控件； | <video controlslist="nodownload"> |

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>只有封面,其他什么都没有</h3>
<video src="video/七里香.mp4" width="400"></video>
<hr>
<h3>显示了播放、进度条、全屏化等控制按钮</h3>
<video src="video/七里香.mp4" width="400" controls></video>
<hr>
<h3>自动播放视频</h3>
<video src="video/七里香.mp4" width="400" controls muted autoplay></video>
<hr>
<h3>视频封面</h3>
<video src="video/七里香.mp4" width="400" poster="img/1.png" controls preload="metadata"></video>
<h3>禁止画中画</h3>
<video src="video/七里香.mp4" width="400" controls preload="metadata" disablepictureinpicture></video>
<h3>设置video控件列表-禁用全屏</h3>
<video src="video/七里香.mp4" width="400" controls preload="metadata" controlslist="nofullscreen"></video>
</body>
</html>

2）video标签的其他用法

视频格式有非常多，但我们并不能保证所有的视频格式浏览器都能够正常解析，因此video标签允许我们有多个"备选方案"；

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<video controls preload="metadata">
    <source src="video/半城烟沙.mkv">
    <source src="video/七里香.MP4">
    <p>对不起,您的浏览器暂时不支持视频播放！请下载最新浏览器</p>
</video>

</body>
</html>

6.3.2 radio音频标签

radio 标签用于定义音频，是双标签。

  • radio标签的属性如下：
    | 属性 | 描述 | 使用示例 |
    | --- | --- | --- |
    | src | 音频的URL地址 | <radio src='./radio/demo.mp4'> |
    | width | 音频控件的宽度，默认为300px | |
    | height | 音频控件的高度，默认为30px | |
    | controls | 显示音频控件的其他功能，如播放、进度条、音量大小、播放速度等功能 | |
    | muted | 音频静音 | |
    | autoplay | 音频自动播放
    Tips：对于音频控件，即使设置了muted属性也不能自动播放，该参数需要看浏览器的默认行为 | |
    | loop | 循环播放音频 | |
    | preload | 音频预加载，如果使用了autoplay
    属性，则该属性忽略。
  • 1）none：不预加载音频
  • 2）metadata：预先加载视频的元数据，如视频长度
  • 3）auto：让浏览器自动选择（根据网速等综合情况来选择加载的长短）
    Tips：每个浏览器的默认值都不相同，即使规范建议设置为 metadata | |

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--
    src: 音频的地址
    controls: 显示音频控件
    preload: 音频预加载
    loop: 循环播放
-->
<audio src="./audio/LettingGo.MP3" controls preload="metadata" loop></audio>
<hr>

<audio  controls preload="metadata" >
    <source src="./audio/红色高跟鞋.MP3">
    <source src="./audio/LettingGo.MP3">
    <p>对不起,您的浏览器版本过低,请升级您的浏览器</p>
</audio>
</body>
</html>

Tips：audio和video标签虽然属于行内标签，但却可以设置其宽高、边距等属性，这是较为特殊的一点；

七、标签的全局属性

7.1 标签全局属性

  • 标签全局属性：
    | 属性名 | 描述 | 使用示例 |
    | --- | --- | --- |
    | id | 给标签指定唯一标识
    Tips：id不允许重复，一个id只能给一个标签使用 | <p id="txt">hello<p> |
    | class | 类标签指定class名称，class名称允许重复 | <p class="txt">hello<p> |
    | style | 给标签设置CSS样式 | <p style='width: 300px;'>hello<p> |
    | title | 标签的标题，鼠标悬停在标签上时显示 | <p title="我是标题">hello<p> |
    | dir | 标签中内容的方向
  • 1）ltr
    ：从左到右
  • 2）rtl
    ：从右到左 | <p dir="rtl">hello<p> |

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p id="txt">hello</p>
<p class="txt">hello</p>
<p style="width:300px">hello</p>
<p title="我是标题">hello</p>
<p dir="rtl">Hello, everyone, I am a Chinese</p>

</body>
</html>

7.2 H5新增全局属性

  • HTML5新增全局属性：
    | 属性名 | 描述 | 使用示例 |
    | --- | --- | --- |
    | hidden | 让元素隐藏 | <p hidden>hello<p> |
    | contenteditable | 设置元素是否可以被编辑
  • 1）true：可以编辑
  • 2）false：不可编辑，默认值 | <p contenteditable='true'>hello<p> |
    | draggable | 设置元素是否可以被拖动
  • 1）true：可以拖动
  • 2）false：不可拖动，默认值 | <p draggable='true'>hello<p> |
    | data-* | 用于自定义属性使用 | <p data-a='1' data-b='2'>hello<p> |

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>hidden-隐藏</h3>
<p hidden>hello</p>

<h3>contenteditable-编辑</h3>
<p contenteditable="true">hello</p>

<h3>draggable-拖拽</h3>
<p draggable="true">hello</p>

<h3>data-* 自定义属性</h3>
<p id="txt" data-a="1" data-b="2">hello</p>
<button id="btn">点击</button>

<script>
    // JavaScript代码,后面再学,只看效果
    document.getElementById("btn").onclick = function () {
        console.log(document.getElementById("txt").dataset)
    }
</script>
</body>

</html>

点击按钮后，打开F12，查看控制台：

posted @ 2023-10-28 22:31  绿水长流*z  阅读(53)  评论(0)    收藏  举报