web前端基础入门教程之HTML5 新元素
随着HTML版本的更新迭代,有很多元素的使用也在不断的发生着变化,本节我们将介绍HTML5中的一些新的元素!
HTML5 新元素
自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者,等。
<canvas> 新元素
标签 | 描述 |
---|---|
<canvas> | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
新多媒体元素
标签 | 描述 |
---|---|
<audio> | 定义音频内容 |
<video> | 定义视频(video 或者 movie) |
<source> | 定义多媒体资源 <video> 和 <audio> |
<embed> | 定义嵌入的内容,比如插件。 |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新表单元素
标签 | 描述 |
---|---|
<datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<output> | 定义不同类型的输出,比如脚本的输出。 |
提示:你可以在本站的“HTML 表单”一节中查看完整的HTML使用的表单元素!
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮,比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框,比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释(中文注音或字符)。 |
<rt> | 定义字符(中文注音或字符)的解释或发音。 |
<rp> | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节(section、区段)。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
web前端基础入门教程之HTML5 新元素相关推荐
- Web前端开发入门教程,HTML5+CSS3+JS教程,达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
- web前端基础入门开发教程之HTML5 Web 存储
HTML5 Web 存储 在HTML5之前,主要是使用cookies存储,cookies的缺点有:需要在请求头上带着数据,存储大小不过,在4k之内.本节, HTML5 web 存储,一个比cookie ...
- html5基础入门教程之canvas绘制图形
moveTo(x,y) moveTo()方法用于定位绘画的位置,即将点移动到参数x,y所指定的坐标位置. canvas初始化或者调用了beginPath()方法时,绘画开始的位置即原点(0,0),使用 ...
- html前端学习基础入门教程之HTML代码的优化 关键词密度
与Google和MSN相比,Yahoo!对HTML代码的关注程度更高.很多测试表明,HTML文件中的错误,可能在Google或MSN中影响很小甚至几乎没有,不妨碍该页面出现在SERP的前端;但在Yah ...
- 【海码学院】web前端基础入门CSS之常见CSS兼容问题学习笔记
一.兼容性处理要点 1.DOCTYPE 影响 CSS 处理: 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important ...
- HTML及CSS基础入门:web前端基础,看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
- web前端基础与CSS入门
web前端基础 1.嵌套列表 注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
- 深圳Web培训:web应用安全培训教程之react
深圳Web培训:web应用安全培训教程之react react是一个用于构建用户界面的JavaScript库文件,react可以使构建交互UI的过程变得简单.对于你的应用里面的每个状态视图,当数据变化 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
最新文章
- 海量数据处理_国家重点研发计划“面向异构体系结构的高性能分布式数据处理技术与系统”简介...
- linux 校验文件生成,在Linux中了解如何使用MD5校验和生成和验证文件
- 通过Maven命令将本地jar打到本地Maven仓库
- 大剑无锋之new一个对象背后发生了什么?
- “非”天才女程序员的人生
- MariaDB杂记(2)
- 在别人网页上运行js脚本_初始JavaScript,世界上最流行的语言之一
- Netcore 读取body数据
- maven 项目 spring mvc + jdbc 配置文件
- SpeedFan 控制风扇转速
- linux下opendir的使用
- 无法定位程序输入点于动态链接库上的解决方法分享
- 通过Ubuntu16.04编译Android下的osip动态库
- P1972 [SDOI2009]HH的项链 区间查询
- Java必知必会的问题
- uniapp ui框架——uView 及其可视化搭建工具
- 企业微信怎么群发消息到群?企业微信客户群群发有什么限制?
- 学习记录573@双重签名与电子交易概述
- miui10.2.2 或以上的小米手机上照片旋转问题及解决
- 计算机毕业论文评阅,本科论文评阅教师评语
热门文章
- 地磁感应器逆时针90度
- Python实例20:三国演义词云分析
- 从现在开始也许还不晚
- 【Qt样式(qss)-2】使用小结(软件换肤,比如暗黑模式)
- 搜苹果ipad版_iPad抠图比PC更给力 iPad版PS的自动抠图神了-iPad,PS ——快科技(驱动之家旗下媒体)-...
- Docker portainer-ce 汉化版安装(基于centos)
- Dev-C++使用to_string()函数报错“[Error] ‘to_string‘ was not declared in this scope”原因及解决方案
- 基于RBF网络的信任值预测算法matlab仿真实现
- RobeiEDA 8位移位寄存器
- 李兴华java教学视频,李兴华Java核心经典视频教程(3G完整版)