HTML5

最新推荐文章于 2024-06-13 14:55:33 发布
最新推荐文章于 2024-06-13 14:55:33 发布
阅读量86 收藏
点赞数
文章标签： html5 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76892837/article/details/129584481
版权

 HTML5

            HTML5:HTML的第五个版本

            HTML5新增内容（面试题）

                1、语意化标签

                    主要给开发人员使用，不需要给标签起类名

                2、智能表单

                    提前做好验证

                3、视频、音频

                    替代flash

                4、canvas、svg

                    主要用来绘图

                5、离线存储、本地存储

                    主要用来存储数据

                6、相关API

                    封装好的函数，只需要会使用

                以上内容在多数浏览器中，已经得到了很好的兼容

            常用浏览器：

                IE----------------微软

                chrome------------谷歌

                firefox-----------火狐

                safari------------苹果

                opera-------------欧朋

            HTML5语法：

                1、文件后缀名不变，依然是.html或者.htm

                2、指定编码格式为utf-8

                3、不区分大小写

                4、属性值的引号单引号，双引号均可

                5、部分标签可以省略

                    1）单标签省略后面的/

                        <br/>==========<br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是文本内容
        <li>我是文本内容
        <li>我是文本内容
        <li>我是文本内容
    </ul>
</body>
</html>

                    2)双标签可以当成单标签来使用

                        p、li、dt

                    3)完全省略掉的标签

                        html、head、body、tbody

<!DOCTYPE html>
<style>
    div{
        background-color: pink;
    }
</style>
<div>我是div标签</div>

            语意化标签：

                header----------------页面头

                section---------------页面主体

                footer----------------页面尾部

                main------------------主要内容

                nav-------------------导航

                aside-----------------侧边栏

                article---------------文章区域

                figure----------------独立文档流区域

                figcaption------------独立文档流标题

                video-----------------视频

                audio-----------------音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header{
            height:50px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
        }
        nav{
            width:1200px;
            line-height:100px;
            margin:0 auto;
            text-align: center;
            background-color: yellowgreen;
        }
        section{
            width:1200px;
            height:800px;
            margin:0 auto;
            font-size: 50px;;
            text-align: center;
            background-color: plum;
        }
        main{
            width:500px;
            height:300px;
            background-color: yellow;
        }
        footer{
            line-height:100px;
            text-align: center;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <header>页面头部</header>
    <nav>导航</nav>
    <section>页面主体
        <main>主要内容</main>
    </section>
    <footer>页面尾部</footer>
</body>
</html>

            视频与音频

                <video src="" ></video>

                标签中的属性

                    src---------------视频路径

                    controls----------控件属性（添加此属性视频才显示播放按钮，进度条，音量等）

                    autoplay----------自动播放（单独使用不生效）

                        需要配合金银属性一起使用

                    muted-------------静音

                    loop--------------循环播放

                    poster------------视频播放前的加载封面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="img/loveYou.mp4" controls poster="img/duigou.jpg"></video>
</body>
</html>

                <audio src="" ></audio>

                标签中的属性：

                    src---------------视频路径

                    controls----------控件属性（添加此属性视频才显示播放按钮，进度条，音量等）

                    autoplay----------自动播放（单独使用不生效）

                        需要配合金银属性一起使用

                    muted-------------静音

                        注意：autoplay与muted一起使用在谷歌浏览器中不能实现自动播放效果，可以在火狐浏览器中实现自动播放

                    loop--------------循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="img/andrew spacey,tommy ice - Rear View.mp3" controls autoplay muted></audio>
</body>
</html>

            智能表单：

                input    type属性取值

                1、color

                    颜色拾取器

                2、tel

                    拨号键盘

                3、search

                    搜索框:输入内容后会显示叉号，用来清空输入框

                4、range

                    滑块

                    属性：

                        value：表示滑块默认显示位置

                        min：设置滑块最小值（默认值：0）

                        max：设置滑块最大值（默认值：100）

                        step：表示每托动一下滑块更改的数值

                5、email

                    邮箱输入框

                    如果内容为空，验证通过，可以提交表单

                    如果内容不为空，格式错误，会有提示弹窗，表单不能提交

                    如果内容正确，验证通过，表单可以提交

                6、number

                    数值类型输入框

                    属性：

                        value：表示默认显示值

                        min：设置最小值

                        max：设置最大值

                        step：表示点击一下更改的数值

                7、url

                    地址输入框

                    如果内容为空，验证通过，可以提交表单

                    如果内容不为空，格式错误，会有提示弹窗，表单不能提交

                    如果内容正确，验证通过，表单可以提交

                8、date

                    日期（包含年月日）

                9、month

                    月份（包含年月）

                10、week

                    周期（包含年周）

                11、time

                    时间

                12、datetime-local

                    本地时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com">
        颜色拾取器: <input type="color"> <br>
        拨号键盘： <input type="tel"> <br>
        搜索框: <input type="search"> <br>
        滑块：<input type="range" value="40" min="20" max="80" step="10"> <br>
        邮箱：<input type="email"> <br>
        数值：<input type="number" value="20" min="10" max="40" step="5"> <br>
        地址输入框: <input type="url"> <br>
        日期：<input type="date"> <br>
        月份：<input type="month"> <br>
        周期：<input type="week"> <br>
        时间：<input type="time"> <br>
        本地时间：<input type="datetime-local"> <br>
        <input type="submit">
    </form>
</body>
</html>

            新增表单属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com">
        用户名: <input type="text" placeholder="请输入用户名" value="张三" autofocus> <br>
        昵称: <input type="text" placeholder="请输入昵称" name="user" autocomplete="on"> <br>
        密码 <input type="password" placeholder="请输入密码" pattern="[0-9][A-Z]{3}"> <br>
        邮箱：<input type="email" required multiple> <br>
        <input type="submit">
    </form>
</body>
</html>

                1、数值与滑块中属性

                    min------最小值

                    max------最大值

                    step-----每操作一次更改的数值

                2、必填属性（邮箱、地址输入框）

                    required

                3、上传多个值

                    multiple

                    应用在邮箱输入框中，多个值之间用逗号分隔

                4、提示信息

                    placeholder（内容用户不能编辑，只起到提示的作用）

                5、自动获取光标

                    autofocus（一个页面只能有一个元素自动获取光标）

                6、正则表达式验证

                    pattern

                    pattern="[0-9][A-Z]{3}"----------表示一个数字三个大写字母

                7、自动提示文本

                    autocomplete

                    注意：一定要给标签添加name属性一起使用

                8、模拟下拉列表（实现模糊搜索功能）

                    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" list="car">
    <datalist id="car">
        <option value="宝马">宝马</option>
        <option value="奥迪">奥迪</option>
        <option value="奔驰">奔驰</option>
        <option value="宝骏">宝骏</option>
        <option value="宝莱">宝莱</option>
        <option value="蔚来">蔚来</option>
        <option value="保时捷">保时捷</option>
        <option value="奥特曼">奥特曼</option>
    </datalist>
</body>
</html>

2301_740097890
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
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官方文档中文版
07-18
HTML5官方文档中文版
html5折叠表格
10-25
html5折叠表格
HTML5快速参考
10-08
HTML5快速参考书，可作为一个工具书使用，别的不多说，请大家参考
html5七天速成手册
12-21
html5七天速成手册
HTML5指纹识别方法
10-25
HTML5指纹识别方法。HTML5指纹识别方法。HTML5指纹识别方法。
利用 HTML5 Canvas 实现在线签字功能
weixin_74268571的博客
06-11 424
HTML5 的 canvas 元素是一种强大的图形渲染工具,它可以实现各种动画效果，给大家展示的是签字功能的演示实现
移动端适配和响应式页面中的常用单位
Keep trying, keep going
06-10 417
百分比单位是相对于父元素的大小计算的。它可以用于设置宽度、高度、字体大小等属性，使得元素能够随着父元素的大小自动调整。单位也可以用于移动端适配和响应式页面，但由于它是相对于当前元素的字体大小计算的，这可能导致嵌套元素的大小计算变得复杂。这样，当我们需要调整整个页面的大小时，只需修改根元素的字体大小即可。）的字体大小计算的。在实际项目中，我们通常会根据不同的需求和场景，灵活地使用这些单位来实现移动端适配和响应式页面。视口单位在移动端适配和响应式页面中非常实用，因为它们能够使元素随着视口大小自动调整。
HTML5 新元素
csbysj2020的博客
06-12 253
HTML5是最新版本的HTML，引入了许多新元素和功能，以更好地满足现代网页设计的需要。这些新元素不仅增强了网页的表现力，还提高了代码的可读性和可维护性。本文将详细介绍HTML5中的新元素，包括它们的功能和用法。
html5新增的标签有哪些
ggq53219的博客
06-12 174
这些新增的标签为HTML5提供了更多语义化的元素，使得网页结构更清晰，更易于理解和维护。同时，多媒体和表单相关的新增标签也为网页提供了更多的交互性和多媒体内容的支持。
HTML5 Web 存储：简化数据存储的利器
艾恩小灰灰的博客
06-13 171
HTML5 Web存储为前端开发者提供了强大而灵活的数据存储方案，无论是需要长期保存的用户配置，还是仅限当前会话的临时数据，localStorage和sessionStorage都能轻松应对。掌握这些技术，无疑将使你的Web应用更加丰富、互动性更强。记得在实际应用中，合理选择存储方式，并注意数据的安全性和兼容性问题，以提供最佳的用户体验。
【html5的video标签在移动端的使用】
最新发布
Min_Fox的博客
06-13 210
在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。
html实现粘贴excel数据，在页面表格中复制
weixin_43805439的博客
06-13 341
Html table 实现Excel多格粘贴
HTML跨年烟花
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
HTML 颜色名
xyq2024的博客
06-12 398
HTML 颜色名是一组预定义的颜色，可以在 HTML 和 CSS 中使用。这些颜色名易于记忆，方便开发者快速选择和使用。本文将详细介绍 HTML 颜色名，包括它们的用途、优点以及如何在网页设计中使用它们。
html和html5
08-02
HTML和HTML5有什么区别？ 回答: HTML和HTML5是指代不同的东西。HTML是指超文本标记语言，是一种用于创建网页的标准标记语言。而HTML5是HTML的第五个版本，是对HTML进行了扩展和改进的新一代标准。[1] HTML5相比HTML4...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值