HTML5新增标签以及功能
来源:互联网 发布:手机任意显示软件 编辑:程序博客网 时间:2024/05/17 08:59
语义标签:
<article>定义文章</article>
<aside>定义文章侧边栏</aside>
<figure>定义一组媒体对象以及文字内容</figure>
<figcaption>定义figure的标题</figcaption>
布局页面时用的语义标签:
<nav>定义导航</nav>
<header>头部</header>
<section>定义文档中的区段 区域</section>
<footer>尾部</footer>
input其他的类型:
1. text 文本输入框
2. password 密码
3. button 按钮
4. checkbox 复选
5. radio 单选
6. submit 提交
7. reset 重置
8. file 文件
9. email 输入邮箱地址 检测@
10. url URL地址
11. number 只能输入数字 还有e
12. range 范围 默认0~100
required 必须填写
placeholder 占位符
功能标签:
<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>
<audio src="">定义音频</audio>
<mark>标记</mark>
<iframe src="" frameborder="0">内嵌网页框架</iframe>
<canvas>定义图形提供画布</canvas>
2.流式布局
即百分比布局。(宽度, 高度,边距,rem,定位值)
尺寸百分比 = 目标元素的宽度(高度)/ 父级的宽高
定位值百分比 = 目标元素的定位值 / 父级的宽高
margin和padding / 父级的宽度
em rem
em: 针对父级来设置自身
rem: 针对html
3.媒体查询
可以根据不同屏幕尺寸,动态的修改网页布局以及样式,是响应式网站不可缺少的一部分
only 可以省略 多个条件用and相连
@media only screen and (min-width:500px) and (max-width:700px){......}
link:
<link rel="stylesheet" href="" media="screen and (min-width:500px) and (max-width:700px)">
响应式网站:由两种办法完成响应式网站, 流式布局和媒体查询,通常情况下相辅相成共同完成响应式网站。
4.前缀
腾讯:国内唯一有自己内核的公司,X5。(X5的浏览器内核是基于早起的webkit内核开发出来的,而后自己优化。QQ浏览器 微信)
-webkit-: 谷歌前缀,谷歌内核(猎豹 360 safari)
-o-: 欧朋 (已经摒弃自己的内核,转战谷歌的阵营)
-ms-: 微软 ie 斯巴达
-moz-: 火狐 ff
- HTML5新增标签以及功能
- HTML5新增的标签及其功能说明
- HTML5新增标签以及扩展属性
- html5新增的语义标签和表单验证功能
- html5 中新添加的标签以及新增表单类型
- HTML5新增标签
- HTML5新增标签简介
- Html5 新增常用标签
- HTML5新增标签
- HTML5新增主体标签
- html5新增语义标签
- html5新增标签
- HTML5部分新增标签
- html5常用新增标签
- HTML5新增标签1
- H5 - HTML5新增标签
- HTML5新增结构标签
- HTML5新增结构标签
- 毕业后,你折腾了多久做了多少努力才找到正确的方向或者道路?
- 仿苹果按钮
- String intern() method in Java. Why we use it?
- Ubuntu下安装OpenCV
- 为什么onActivityResult会提前执行
- HTML5新增标签以及功能
- Android
- app自动更新安装完毕并打开
- RequireJS实例教程及命名冲突解决
- 运行Eclipse出错:Failed to load the JNI shared library
- 练习2-3 编写函数 htoi(s),把由十六进制数字组成的字符串(包含可选的前缀0x 或0X)转换为与之等价的整型值。字符串中允许包含的数字包括:0~9、a~f以及A~F。
- MYSQL大小写及校验集有关的一些知识整理
- Oracle 数据库创建
- 1016: [JSOI2008]最小生成树计数