HTML5知识总结

小耿i

已于 2024-03-22 08:51:39 修改

阅读量57

点赞数

分类专栏： HTML、css、H5、c3 文章标签： html5 前端 html

于 2023-07-19 19:15:14 首次发布

本文链接：https://blog.csdn.net/geng_____/article/details/131815924

版权

HTML、css、H5、c3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5知识总结

HTML5

HTML5

一、HTML5简介

1、什么是HTML5

HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟（ W3C ）完成标准制定。
官网地址：

W3C 提供： https://www.w3.org/TR/html/index.html

WHATWG 提供：https://whatwg-cn.github.io/html/multipage
HTML5 在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端。

2、HTML5 优势

针对 JavaScript ，新增了很多可操作的接口。
新增了一些语义化标签、全局属性。
新增了多媒体标签，可以很好的替代 flash 。
更加侧重语义化，对于 SEO 更友好。
可移植性好，可以大量应用在移动设备上。

3、HTML5兼容性

支持： Chrome 、 Safari 、 Opera 、 Firefox 等主流浏览器。 IE 浏览器必须是 9 及以上版本才支持 HTML5 ，且 IE9 仅支持部分 HTML5 新特性。

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

</body>
</html>

二、新增的语义标签

新增的布局标签

<header>头部标签

<nav>导航标签

<article>文章、帖子、杂志、新闻等。

<section>页面某段文字（通常包含标题）

<aside>侧边栏标签

<footer>尾部标签

<main>文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用。

关于<article>和<section>

artical 里面可以有多个 section 。

section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素。

article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素。

标签可以使用多次,IE9，需要把这些元素转换成块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header,nav{
            width:900px;
            height: 150px;
            margin: 10px auto;
            background: rebeccapurple;
            text-align: center;
        }
        section{
            width: 900px;
            height: 400px;
            background: red;
            margin: 0 300px;
            display: inline-block;
            text-align: center;
        }
        aside{
            width: 300px;
            height: 350px;
            background: lawngreen;
            margin: 25px 10px;
            text-align: center;
        }
        footer{
            width:900px;
            height: 150px;
            margin: 10px auto;
            background: blue;
            text-align: center;
        }

    </style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
    section
    <aside>aside</aside>
</section>
<footer>footer</footer>
</body>
</html>

新增的状态标签

<mether>定义已知范围内的标量测量。例如：电量、磁盘用量等。

常用属性：

属性	值	描述
`hight`	数值	规定高值
`low`	数值	规定低值
`max`	数值	规定最大值
`min`	数值	规定最小值
`optimum`	数值	规定最优值
`value`	数值	规定当前值

<span>手机电量</span>
<meter max="100" min="0" low="20" high="80" value="90" optimum="90"></meter>

<progress>显示某个任务完成进度，一般用于进度条。

常用属性：

属性	值	描述
`max`	数值	规定目标值
`value`	数值	规定目标值

<progress max="100" value="80"></progress>

新增的列表标签

<datalist>用于搜素框关键字提示。

<details>用于展示问题和答案，或对专有名词进行解释。

<summary>写在<details>里面，用于指定问题或专有名词。

<form action="">
  <input type="text" list="mylist">
  <button>搜索</button>
</form>
<datalist id="mylist">
  <option>数学</option>
  <option>语文</option>
  <option>英语</option>
</datalist>

<details>
  <summary>如何学习</summary>
  <p>认真学习</p>
</details>

新增的文本标签

文本注音

标签名	语义
`ruby`	包裹需要注音的文字
`rt`	写注音，`rt`标签写在`ruby`里面

<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>

文本标记

标签名	语义
`mark`	标记

注意： W3C 建议 mark 用于标记搜索结果中的关键字。

新的多媒体标签

视频标签

video视频

只支持三种视频格式：MP4、webm、ogg

常用属性：

src链接视频地址

controls向用户显示视频控件

muted视频静音

autoplay视频自动播放

loop循环播放

preload视频预加载：

none不预加载
metadata仅预先获取视频原数据
auto可以下载整个视频

<video src="../img/小电影.mp4" controls loop muted autoplay preload="auto"></video>

音频标签

audio音频

支持三种视频格式：MP3、wav、ogg

常用属性：

src音频地址

controls向用户显示音频控件

autoplay音频自动播放

loop循环播放

preload音频预加载：

none不预加载
metadata仅预先获取音频原数据
auto可以下载整个音频

<audio src="../img/音频.mp3" controls loop muted autoplay preload="auto"></audio>

三、新增表单功能

`form`新增属性

novalidate如果给 form 标签设置了该属性，表单提交的时候不再进行验证。

新增表单控件属性

placeholder提示文字，适用于文字输入类的表单控件。

``required`表示该输入项必填，适用于除按钮外的其他表单控件。

autofocus自动获取焦点，适用于所用表单控件。

autocomplete自动完成，可以设置on或off适用于文字输入类的表单控件。

密码框、多行输入框不可用。

pattern填写正则表达式，适用文本输入类表单控件。

多行输入不可用，且空的输入框不会验证，往往与``required`配合。

<form action="" novalidate>
    账号：<input type="text" name="account" placeholder="请输入账号" autofocus required autocomplete="on">
    <br>
    密码：<input type="password" name="pwd" placeholder="请输入账号" required>
    <br>
    性别：<br>
    <input type="radio" value="male" name="gender">男
    <br>
    <input type="radio" value="female" name="gender">女
    <br>
    爱好：<br>
    <input type="checkbox" value="smork" name="hobby">抽烟
    <input type="checkbox" value="drik" name="hobby">喝酒
    <input type="checkbox" value="perm" name="hobby">烫头
    <br>
    <textarea name="other"></textarea>
    <br>
    <button>提交</button>
</form>

`<input>`新增属性值

<input type="url">包含 URL 地址的输入字段。

<input type="tel">包含电话号码的输入字段。

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

<input type="email"> 用于应该包含电子邮件地址的输入字段。

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

<input type="datetime"> 允许用户选择日期和时间（有时区）。

<input type="time"> 允许用户选择时间（无时区）。

<input type="week"> 允许用户选择周和年。

<input type="month"> 允许用户选择月份和年份。

<input type="range"> 用于应该包含一定范围内的值的输入字段。

<input type="color"> 用于应该包含颜色的输入字段。

<input type="date"> 用于应该包含日期的输入字段。

<input type="number">数字类型的输入框

小耿i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识总结

HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟（ W3C ）完成标准制定。官网地址：W3C 提供： https://www.w3.org/TR/html/index.htmlWHATWG 提供：https://whatwg-cn.github.io/html/multipageHTML5 在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端。
复制链接

扫一扫