HTML5概述、标签

最新推荐文章于 2024-07-10 16:57:46 发布

weixin_48846877

最新推荐文章于 2024-07-10 16:57:46 发布

阅读量1.3k

点赞数

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/weixin_48846877/article/details/107377562

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一. Html5简介

1.什么是html5

html5是html4的升级版
html5主要是移动端应用比较多
html5中的新标签语义化更明确

2.html5的改进

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

3.html5的标志

声明：

是html5的标志

4.html5的兼容性

现在的浏览器都支持html5，之前比较旧的浏览器还是不支持
可以使用书写格式语法，兼容性语法 csshack

二.Html5兼容性

强制兼容性处理

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--强制兼容处理-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <!--[if lt IE 6]>
    <script src="//misc.360buyimg.com/mtd/pc/index/home/ie6tip.min.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>

三.Html5标签

1.新元素

footer=div
canvas 标签绘图标签通过js在canvas上进行绘图
canvas cocos-2d引擎做网页游戏
keyqen 秘钥标签私有秘钥（在本地）公有秘钥（在服务器）
output 输出计算值结合-js

2.新增语义化标签

2.1header

定义头部

<header>头部</header>

在这里插入图片描述

2.2footer

定义页脚

<footer>页脚</footer>

在这里插入图片描述

2.3nav

相当于div定义导航的

<nav>定义导航的</nav>

在这里插入图片描述

2.4 article

定义相对页面独立的内容区域
下面展示一些内联代码片

<article>独立内容</article>

在这里插入图片描述

2.5section

=div 定义内容区域

<section>定义内容区域</section>

在这里插入图片描述

2.6aside

定义侧边栏

<aside>侧边栏</aside>

在这里插入图片描述

2.7bdi

文本突出类似span

<bdi>类似span</bdi>

在这里插入图片描述

2.8figure

图片表单代码

<figure>
    <img src="" alt=""/>
</figure>

2.9mark

文本的突出显示默认带黄色

2.10meter

定义进度条

<meter value="50" min="0" max="100"></meter>

在这里插入图片描述
progress定义进度条

<progress value="20" min="0" max="100"></progress>

在这里插入图片描述

2.11 time

写时间

<time>2020-05-01</time>

在这里插入图片描述

2.12 audio video

video 视频标签，一般格式为：MPEG4、ogg
audio 音频标签，一般格式为：mp3、ogg

src 视频的路径
autoplay 自动播放
controls 是控制器
source 是视频音频的资源文件
loop 循环播放通过js提供的api 来制作视频控制
muted 静音播放（解决谷歌不能自动播放问题）
poster 加载等待的画面图片
preload 规定是否预加载视频

3.表单属性

input表单属性	作用
type=“email”	限制用户输入必须为email类型
type=“url”	限制用户输入必须为url类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”/“week”	限制用户输入必须为月/周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“serch”	搜索框
type=“color”	生成一个颜色选择表单

required：必填，表单拥有该属性其内容不能为空
placeholder：表单的提示信息，存在默认值将不显示
autofocus：自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete：输入过的内容再次输入时会有提示，默认on打开。需要放在表单内同时加上name属性，同时成功提交过
multiple：可以多选文件提交

新的表单元素

datalist 提示列表和 input 连用
datalist

<input type="text" list="data"/>
<datalist id="data">
    <option >a</option>
    <option >ab</option>
    <option >abc</option>
    <option >abcd</option>
</datalist>

在这里插入图片描述

summary标签包含 details 元素的标题

<details>
    <summary>2020-0501 日志</summary>
    <p>
        今天学生们没有休息！
    </p>
</details>

在这里插入图片描述

weixin_48846877

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5概述、标签

Html5标签Html5笔记一. Html5简介1.什么是html52.html5的改进3.html5的标志4.html5的兼容性二.Html5兼容性三.Html5标签标签1.新元素2.新的寓意和结构元素Html5笔记一. Html5简介1.什么是html5html5是html4的升级版html5主要是移动端应用比较多html5中的新标签语义化更明确2.html5的改进新元素新属性完全支持 CSS3Video 和 Audio2D/3D 制图本地存储本地 SQL 数据Web
复制链接

扫一扫