重学html5

最新推荐文章于 2022-01-19 13:16:57 发布

weixin_43756060

最新推荐文章于 2022-01-19 13:16:57 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/weixin_43756060/article/details/105985918

版权

重学前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOCTYPE声明

不是html的标签，它是在告诉浏览器，页面要使用哪个HTML版本进行编写的指令

<!DOCTYPE html>

新增的标签

结构标签–有意义的div

article 标记定义一篇文章
header 定义一个页面或一个区域的头部
nav 定义导航链接
section 定义一个区域
aside 定义页面内容部分的侧边栏
hgroup 定义文件中一个区块的相关信息
figure 定义一组媒体内容以及他们的标题
figcaption 定义figure元素的标题
footer 定义一个页面或区域的底部
dialog 定义一个对话框(会话框)类似微信

多媒体标签

video 视频
audio 音频内容
source 媒体资源
canvas 定义图片
embed 定义外部的可交互的内容或插件，比如flash

audio

<video src="../music.mp3" autoplay="autoplay" controls="controls" loop="-1">您的浏览器不支持</video>
<video  autoplay="autoplay">
    <source src="../music.mp3" type="audio/mpeg"/>
</video>

video

<video src="../video.mp4" autoplay="autoplay" controls="controls"></video>

<!--引入多种格式的视频文件  -->
<video autoplay="autoplay" controls="controls">
   <source src="../video.mp4" type="video/mp4"/>
</video>

embed

<embed src="引入的flash文件路径" width="100px" height="50px">

状态标签

meter 状态标签（实时状态显示：气压、气温）
progress 状态标签（任务过程：安装、加载）

列表标签

datalist 为input标记定义一个下拉列表，配合optipn
progress 定义一个元素的详细内容，配合summary

<input type="text" placeholder="亲选择你喜欢的水果" list="furirlist"/>
<datalist id="furirlist">
   <option value="苹果"></option>
   <option value="香蕉"></option>
   <option value="梨"></option>
</datalist>

<detail open="open">
   <summary>内容折叠起来显示的文字</summary>
   <p>被折叠起来的文字</p>
</detail>

注释标签

ruby 定义注释或音标
rt 定义对ruby的注释内容文本
rp 浏览器不支持显示的注释内容
mark 定义有标记的文本(黄色选中状态）
output 定义一些输出类型，计算表单结果配合oninput事件
oninput 事件可以实时监听文本框的输入变化

<p>我们来<ruby>贶<rt>kuang</rt></ruby>一个话题</p>

属性变化

input type属性新增值

email
url 只针对苹果手机有用
tel
number
Date Pickers Input type类型
date 选取日、月、年
month 选取月、年
week 选取周和年
time 选取时间（小时和分钟）
datetime 选取时间、日、月、年（UTC时间）有兼容性问题
datetime-local 选取时间、日、月、年（本地时间）

pc端
range
search
color

表单新增属性

autocomplete

也可以用在input标签上，设置为on后，输入框下面就会出现以前输入的内容的下拉列表记录，设置为off则会不显示

<form autocomplete="on/off"></form>

autofocus

规定在页面加载时，域自动地获得焦点
适用于所有input标签的类型

multiple

输入域可选择多个值
适用于email和file类型的input

placeholder 提示文字
required 必填

链接属性

size

<link rel="icon" href="icon.gif" type="image/gif" size="16*16">

script属性

defer: 规定当页面已完成加载后，才执行脚本

<script defer src="url"></script>

async: 规定一旦脚本可用，则会异步执行

<script async src="url"></script>

ol增加的属性

start 起始值
reversed 倒叙排列

<ol start="10" reversed>
   <li>1</li>
   <li>2</li>
    <li>3</li>
</ol>

处理新标签的兼容性

head,nav,section,article,footer{
  display:block;
}

weixin_43756060

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
重学html5

DOCTYPE声明不是html的标签，它是在告诉浏览器，页面要使用哪个HTML版本进行编写的指令<!DOCTYPE html>新增的标签结构标签–有意义的divarticle 标记定义一篇文章header 定义一个页面或一个区域的头部nav 定义导航链接section 定义一个区域aside 定义页面内容部分的侧边栏hgroup 定义文件中一个区块的相关信...
复制链接

扫一扫

专栏目录