HTML5

于 2024-05-12 22:07:21 发布
阅读量1.1k 收藏 33
点赞数 25
分类专栏： # HTML 文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39236499/article/details/138767972
版权

文章目录

1、HTML5简介

HTML5 是新一代的HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定
官网地址：
https://www.w3.org/TR/html/index.html
https://whatwg-cn.github.io/html/multipage

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

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

2、新增语义化标签

2.1 布局标签

在这里插入图片描述

在这里插入图片描述

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_新增布局标签</title>
</head>
<body>
    <!-- 头部 -->
    <header class="page-header">
        <h1>尚品汇</h1>
    </header>
    <hr>
    <!-- 主导航 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">订单</a>
        <a href="#">购物车</a>
        <a href="#">我的</a>
    </nav>
    <!-- 主要内容 -->
    <div class="page-content">
        <!-- 侧边栏导航 -->
        <aside style="float: right;">
            <nav>
                <ul>
                    <li><a href="#">秒杀专区</a></li>
                    <li><a href="#">会员专区</a></li>
                    <li><a href="#">领取优惠券</a></li>
                    <li><a href="#">品牌专区</a></li>
                </ul>
            </nav>
        </aside>
        <!-- 文章 -->
        <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式：通过做梦</h3>
                <p>你要这么做梦：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第二种方式：通过买彩票</h3>
                <p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第三种方式：通过学习前端</h3>
                <p>你要来到尚硅谷学前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
        </article>
    </div>
    <hr>
    <footer>
        <nav>
            <a href="#">友情链接1</a>
            <a href="#">友情链接2</a>
            <a href="#">友情链接3</a>
            <a href="#">友情链接4</a>
        </nav>
    </footer>
</body>
</html>

在这里插入图片描述

2.2、状态标签

2.2.1 meter标签

语义：定义已知范围内的标量测量，也被称为gauge（尺度），双标签。例如：电量、磁盘用量等。
常用属性如下：
在这里插入图片描述

2.2.2 progress标签

语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签。例如：工作完成进度等。
常用属性：
在这里插入图片描述

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_新增状态标签</title>
    <style>
        progress {
            width: 50px;
        }
    </style>
</head>
<body>
    <span>手机电量：</span>
    <meter max="100" min="0" value="90" low="10" high="20" optimum="90"></meter>
    <br>
    <span>当前进度：</span>
    <progress max="100" value="20"></progress>
</body>
</html>

在这里插入图片描述

2.3 列表标签

在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_新增列表标签</title>
</head>
<body>
    <form action="#">
        <input type="text" list="mydata">
        <button>搜索</button>
    </form>
    <datalist id="mydata">
        <option value="周杰伦">周杰伦</option>
        <option value="周冬雨">周冬雨</option>
        <option value="马冬梅">马冬梅</option>
        <option value="温兆伦">温兆伦</option>
    </datalist>
    <hr>
    <details>
        <summary>如何一夜暴富？</summary>
        <p>来到尚硅谷学习前端</p>
    </details>
</body>
</html>

在这里插入图片描述

2.4 文本标签

2.4.1 文本注音

在这里插入图片描述

2.4.2 文本标记

在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_新增文本标签</title>
</head>
<body>
    <ruby>
        <span>魑魅魍魉</span>
        <rt>chī mèi wǎng liǎng </rt>
    </ruby>
    <hr>
    <div>
        <ruby>
            <span>魑</span>
            <rt>chī</rt>
        </ruby>
        <ruby>
            <span>魅</span>
            <rt>mèi</rt>
        </ruby>
    </div>
    <hr>
    <p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Laboriosam, nemo?</p>
</body>
</html>

在这里插入图片描述

3、新增表单功能

3.1 表单控件新增属性

在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_新增的表单控件属性</title>
</head>
<body>
    <form action="">
        账号：<input 
                type="text" 
                name="account" 
                placeholder="请输入账号" 
                required 
                autofocus 
                autocomplete="on"
                pattern="\w{6}"
              >
        <br>
        密码：<input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}">
        <br>
        性别：
            <input type="radio" value="male" name="gender" required>男
            <input type="radio" value="female" name="gender">女
        <br>
        爱好：
            <input type="checkbox" value="smoke" name="hobby">抽烟
            <input type="checkbox" value="drink" name="hobby" required>喝酒
            <input type="checkbox" value="perm" name="hobby">烫头
        <br>
        其他：<textarea name="other" placeholder="其他" required pattern="\w{6}"></textarea>
        <br>
        <button>提交</button>
    </form>
</body>
</html>

在这里插入图片描述

3.2 input新增属性值

在这里插入图片描述

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_input新增的type属性值</title>
</head>
<body>
    <form action="" novalidate>
        邮箱：<input type="email" required name="email"><br/>
        url：<input type="url" required name="url"><br/>
        数值：<input type="number" required name="number" step="2" max="80" min="20"><br/>
        搜索：<input type="search" required name="keyword"><br/>
        电话：<input type="tel" required name="phone"><br/>
        光照强度：<input type="range" name="range" max="80" min="20" value="22"><br/>
        颜色：<input type="color" name="color"><br/>
        日期：<input type="date" required name="date"><br/>
        月份：<input type="month" required name="month"><br/>
        周：<input type="week" required name="week"><br/>
        时间：<input type="time" required name="time"><br/>
        日期+时间：<input type="datetime-local" required name="time2"><br>

        <button>提交</button>
    </form>
</body>
</html>

在这里插入图片描述

3.3 form标签新增属性

在这里插入图片描述

4、新增多媒体标签

4.1 视频标签

<video>标签用来定义视频，它是双标签
在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_新增视频标签</title>
    <style>
        video {
            width: 600px;
        }
    </style>
</head>
<body>
    <video src="./小电影.mp4" controls muted loop poster="./封面.png" preload="auto"></video>
</body>
</html>

在这里插入图片描述

4.2 音频标签

<audio>标签用来定义音频，它是双标签
在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_新增音频标签</title>
    <style>
        audio {
            width: 600px;
            /* height: 500px; */
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <audio src="./小曲.mp3" controls loop preload="metadata"></audio>
</body>
</html>

在这里插入图片描述

5、新增全局属性

在这里插入图片描述
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新增的全局属性</title>
    <style>
        div {
            width: 600px;
            height: 200px;
            border: 1px solid black;
            font-size: 20px;
            margin-bottom: 10px;
        }
        .box1 {
            background-color: skyblue;
        }
        .box2 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1" spellcheck="true" contenteditable="true">Lorem ipsum dolor sit amet.</div>
    <div class="box2" draggable="true" hidden data-a="1" data-b="2" data-c="3">Lorem ipsum dolor sit amet.</div>
    <h1>hello</h1>
    
</body>
</html>

在这里插入图片描述

6、HTML5兼容性处理

  • 添加元信息，让浏览器处于最优渲染模式
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
  • 使用html5shiv让低版本浏览器认识H5的语义化标签
<!--[if lt ie 9]>
 <script src="../sources/js/html5shiv.js"></script>
 <![endif]-->

<!--[if IE 8]>仅IE8可见<![endif]--> 
<!--[if gt IE 8]>仅IE8以上可见<![endif]-->
<!--[if lt IE 8]>仅IE8以下可见<![endif]-->
<!--[if gte IE 8]>IE8及以上可见<![endif]-->
<!--[if lte IE 8]>IE8及以下可见<![endif]-->
<!--[if !IE 8]>非IE8的IE可见<![endif]-->

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>兼容性处理</title>
    <!-- 让IE浏览器处于一个最优的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
    <meta name="render" content="webkit">
    <!--[if lt ie 9]>
    <script src="./html5shiv.js"></script>
    <![endif]-->
    <style>
        header {
            background-color: orange;
        }
        footer {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header class="page-header">
        <h1>尚品汇</h1>
    </header>
    <hr>
    <!-- 主导航 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">订单</a>
        <a href="#">购物车</a>
        <a href="#">我的</a>
    </nav>
    <!-- 主要内容 -->
    <div class="page-content">
        <!-- 侧边栏导航 -->
        <aside style="float: right;">
            <nav>
                <ul>
                    <li><a href="#">秒杀专区</a></li>
                    <li><a href="#">会员专区</a></li>
                    <li><a href="#">领取优惠券</a></li>
                    <li><a href="#">品牌专区</a></li>
                </ul>
            </nav>
        </aside>
        <!-- 文章 -->
        <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式：通过做梦</h3>
                <p>你要这么做梦：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第二种方式：通过买彩票</h3>
                <p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第三种方式：通过学习前端</h3>
                <p>你要来到尚硅谷学前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
        </article>
    </div>
    <hr>
    <!-- 页脚 -->
    <footer>
        <nav>
            <a href="#">友情链接1</a>
            <a href="#">友情链接2</a>
            <a href="#">友情链接3</a>
            <a href="#">友情链接4</a>
        </nav>
    </footer>
</body>
</html>

在这里插入图片描述

zdb呀
关注
  • 25
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
HTML5官方文档中文版
07-18
HTML5官方文档中文版
HTML5快速参考
10-08
HTML5快速参考书，可作为一个工具书使用，别的不多说，请大家参考
HTML5指纹识别方法
10-25
HTML5指纹识别方法。HTML5指纹识别方法。HTML5指纹识别方法。
HTML5 二维码扫描
03-16
html5 二维码扫描源代码，javascript源码，jquery.min.js，reqrcode.js，test.html。
html5七天速成手册
12-21
html5七天速成手册
200行Html5+CSS3+JS代码实现动态圣诞树
知心宝贝的博客
12-20 7万+
一、前言 最近CSDN的热榜出现了很多用Python、C/C++等编程语言实现的圣诞树，这篇文章用前端三大杀手Html5、CSS、Js来实现动态圣诞树 二、
HTML5 实现动态爱心网页代码
weixin_57038822的博客
11-30 5万+
HTML5 实现动态爱心网页代码 表白女朋友找不到合适的方法？可以试一试动态爱心网页，带你升华感情，一步步走上人生巅峰。 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas爱心</title> <style> html, body { height: 100%; padding: 0; margin: 0; bac
HTML5介绍
weixin_62650212的博客
03-16 1万+
总之，HTML5提供了许多新特性，这些特性使得网页开发更加灵活、高效，并且可以更好地支持多媒体内容。同时，HTML5也提高了网页的语义化，使得搜索引擎可以更好地理解网页内容，这样就可以更容易地实现SEO优化。新的输入类型，例如email、url、tel等，可以使得用户输入更加方便。此外，HTML5还支持新的表单元素，例如日期选择器、颜色选择器等，使得开发者可以更加轻松地创建表单。相对于之前版本，HTML5提供了许多新特性，这些特性不仅使得网页设计更加灵活，同时还为网页开发者提供了更多的控制权和创造力。
一个简单的网页设计HTML5作业
好好读书
06-26 9万+
简单的html设计作业，初次学习，希望指正！
html5折叠表格
10-25
html5折叠表格
HTML5学习资料
03-25
包含了：HTML5 AND CSS3 SECOND EDITION.pdf、HTML5 in Action .pdf、HTML5与CSS3权威指南 .pdf、Mobile First Design with HTML5 and CSS3 .pdf、Moblile HTML5 .pdf
html5地图特效
04-02
html5地图特效,用到echar, jquery1.8，有源码简单易用。
仿京东分类Html5页面
03-05
仿京东分类Html5页面，左右分栏，可滑动，支持多层级扩展，CSS样式
html5css爱心照片墙.zip
01-26
一份送给女朋有爱心相册
html爱心特效代码
热门推荐
梦游星海的博客
10-26 44万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywor...
HTML5详细介绍及使用
小仙儿
12-03 2万+
HTML5详细介绍及使用 一、HTML5简介 1、HMTL5的定义 在W3C中的定义：HTML 5 是下一代的 HTML，设计HTML5最初目的是为了在移动设备上支持多媒体。HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。万维网不等同于互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网...
学习HTML5这一篇就够了
轻松的小希
11-25 8万+
目录第一章 HTML5概述1.1、什么是HTML1.2、什么是HTML51.3、本文重要说明1.4、浏览器的版本1.5、选择开发工具第二章 HTML5语法2.1、基本结构2.2、语法规范2.3、标签规范第三章 HTML5标签3.1、标题标签3.2、段落标签3.3、链接标签3.4、图像标签3.5、表格标签3.6、列表标签3.7、分组标签3.8、语义标签3.9、表单标签3.10、框架标签3.11、音频标签3.12、视频标签3.13、其它标签3.14、头部标签第四章 HTML5属性4.1、属性概述4.2、通用属性
单页HTML5网页源码
01-20
简单的单页网页源码，最新的HTML5网页源码，下载了只要修改一下需要修改的文字图片就可以了的
html和html5
最新发布
08-02
HTML和HTML5有什么区别？ 回答: HTML和HTML5是指代不同的东西。HTML是指超文本标记语言，是一种用于创建网页的标准标记语言。而HTML5是HTML的第五个版本，是对HTML进行了扩展和改进的新一代标准。[1] HTML5相比HTML4...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zdb呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值