HTML5

一、新增标签

1.结构标签

header  表示页面中一个内容区块或者整体内容的标题

nav    表示链接导航部分

footer   表示整个页面或者页面中一个内容区块的脚注 一般来说 他会包含创作作者的姓名 文章创作的日期以及创作者的联系信息

section  定义文档或应用程序的一区段  如文章章节 页眉 也叫或者文件的其他部分

article  文档中的一块独立的内容  写文章

aside  侧边栏  制作滚动广告的内容

2. 对话标签

dialog  定义对话  配合 dt dd 使用

dt 定义定义列表中题目标签

dd 定义列表中定义条目的解析部分标签

3.  标记标签

mark  标记的意思

默认背景颜色是黄色 你可以通过样式表修改成你想要的样式

4. 表示日期和时间

time 语义标签  他是给搜索引擎来使用的 用来将你的页面进行分类的

5.进度条

meter 进度条 不是所有浏览器都兼容 IE不兼容

属性:

min 最小值

max 最大值

value 默认值

6.进度标签

progress          IE 不兼容

属性:

min 最小值

max 最大值

value 默认值

二、多媒体标签

1、video  用于视频播放(ogg,mepg-4,webm)

属性:

src  资源地址

controls 显示控制

autoplay  自动播放

loop 循环播放

source  为媒介标签

作用 :如果第一个不存在 会自动查找到下一个 直到你的文件存在未知 用来做备用资源

属性

src

type

2、audio  用来播放音频(ogg,mp3,wav)

属性

src  资源地址

controls 显示控制

autoplay  自动播放

loop 循环播放

source  为媒介标签

作用 :如果第一个不存在 会自动查找到下一个 直到你的文件存在未知 用来做备用资源

属性

src

type

三、表单标签

1. input

type

email  匹配邮箱地址

url    网络地址(匹配的就是http://)

number 输入值必须是数字

属性

min 最小值

max 最大值

step  指定跳跃范围(步长)

value  默认值

range  取值范围 拉动条

属性

min 最小值

max 最大值

step  指定跳跃范围(步长)

value  默认值

search 搜索框   效果和text一样

tel     电话号  在pc端没有效果 在移动端会直接弹出数字键盘

color  调用取色面板

2.时间相关内容表单属性 火狐不兼容

date   选取 日 月 年

month 选取 月 年

week  选取 周和年

time   选择时间  小时和分钟

datetime    选择utc时间,日月年

datetime-local 选取本地时间 日月年

四、属性

placeholder  提示文字 有别于value

五、iframe  标签

可以构成一个特殊的框架结构 被称为浮动的框架 他是在浏览器窗口中嵌套另外一个网页文件

属性

src  默认显示页面

name 用于 target跳转

align 相对于周边元素的对齐方式  |left |right|top|middle|bottom

width 宽度

height 设置高度

scrolling 滚动条  yes no auto

frameborder  0 1  规定是否显示框架周围的边框

参考资料:https://www.w3cschool.cn/html5/

时间: 2024-10-17 04:28:43

HTML5的相关文章

HTML5新增Canvas标签及对应属性、API详解(基础一)

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

HTML5介绍

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. HTML5没有那么难,他是一个非常简单的标记. 三个知识点:THML5/JS/CSS3. 之后是网页框架 C/S 客户端/服务器 B/S 浏览器/服务器 C/S构架的优缺点: C/S架构的模型: C/S架构一旦发生更新,那么成千上万个客户机都要进行更新,如果更新内容比较多,客户机不更新完毕,就无法运行. B/S架构工作原理: B/S架构优缺点: 移动公司都是

Web程序员们,你准备好迎接HTML5了吗?

HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash.QuickTime.Silverlight等插件,也简化了原来需要大量JS才能达到的效果.虽然HTML5还在讨论过程中,但是其优越的特性已经得到了大家的认可,各大浏览器厂商,一些知名的内容发布网站也都是积极地推动, 尤其是即将发布的IE9会完全支持HTML5.作为Web开发人员的我们,需要做的是:如何把HTML5转化为各种Web应用,如何做到现有的Web应用过渡到HTML

了解HTML5大纲算法

实战前的准备工作:了解HTML5大纲算法 在html5中有一个很重要的概念,叫做html5大纲算法(HTML5 Outliner),它的用途为用户提供一份页面的信息结构目录.合理的使用HTML5元素标签,可以生成一个非常清晰的文档大纲. HTML5大纲算法 我们可以通过各种工具去查看当前页面,这里推荐使用一个测试工具:HTML5 Outliner,网址如下:https://gsnedders.html5.org/outliner/ 1. 了解一个 section 和 div 的区别 ①div元素

HTML5 &lt;ruby&gt;注释标签

今天学了HTML5的ruby标签,觉得挺有趣的,来记录一下. ruby可以作注释标签,内部有rp和rt标签. <ruby>  标记定义注释或音标. <rp>    告诉那些不支持ruby元素的浏览器该如何显示. <rt>      标记定义对ruby注释的内容文本. 学完这个标签的第一反应就是,我有方法给那些不会读的日语单词做假名注释啦!!! 代码如下,来给一句日语做个小注释: <!DOCTYPE html> <html lang="en&q

HTML5之新增的元素

今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大赛的初赛>.我被我们老师拉去做了义工-----计时员.看了所有老师的比赛,虽然都特别好,但是让我印象深刻的还是一个HTMl5+CSS3的课程.看到那种炫酷的效果,我瞬间都被吸引住了.所以忙完了手头上的作业,就从别人那里要到了HTML5的教程,开始了我的学习HTML5之路.虽然看了6节课了,还是没有学到老

java springmvc +spring+ mybaits 模块化开发框架 HTML5+css3.0+bootstrap响应式开发界面

需要源码,请加QQ:858-048-581 系统模块 1.   权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限. 按钮权限: 给角色分配按钮权限. 2.   按钮管理:自定义按钮管理,维护按钮权限标识等 3.   菜单管理:无限级别自定义菜单,自定义菜单图标,业务菜单和系统菜单分离,菜单状态显示隐藏(递归处理) 4.   数据字典:无限级别,支持多级别无限分类.内设编号,排序等 5.   组织机构:无限级别,

HTML5移动开发中的meta与link

meta HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放 1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> UTF-8编码 1

HTML5学习之离线存储

STORAGE(存储) Cookie 在HTML5技术以前我们会使用 cookie,在浏览器端缓存一些数据,例如:登录用户信息,历史搜索信息等等.但是cookie所支持的容量仅仅只有 4k ,也没有专门的api来操作,只能依赖一些开源的库, 这里使用 cookies.js 存储和获取cookie信息 // 这是一个cookie值 Cookies.set('key', 'value'); // 链式调用 Cookies.set('key', 'value').set('hello', 'world

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开