这篇文章给大家介绍的内容是关于html5页面结构的变化以及增加和删除标签的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

页面结构

传统页面结构

html5页面结构

eg

新增标签

1.结构标签

section标签:section表示页面中的一个内容区块,比如章节、页眉、页脚等,也可以和hn(h1、h2...)等一起使用,表示出文档的结构;

article标签:article元素表示页面中的一块与上下文不相关的独立内容,比如一篇文章;

aside标签:aside元素表示article元素内容之外的,和article标签内容相关的辅助信息;

header标签:header元素表示页面中的一个内容区块或者整个页面的标题;

hgroup标签:表示对整个页面或页面中的一个内容区块的标题进行组合;

footer标签:footer元素表示整个页面或者页面中一个内容区块的脚注。一般来说包含创作者的姓名、创作日期及联系信息;

nav标签:表示页面中导航链接的部分;

figure标签:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption标签为figure标签组添加标题。

2.表单标签

email:必须输入email;

url:必须输入url地址;

number:必须输入数值;

range:必须输入一定范围内数值;

Date Pickers:日期选择器;

search:用于搜索域,域显示为常规的文本域;

color

3.媒体标签

video标签:定义视频,像电影片段或其他视频流。eg: video标签

audio标签:定义音频,像音乐或其他音频流。eg: audio标签

embed标签:用来嵌入内容(包括各种媒体),格式可以是Midi、Wav、AIFF、AU、MP3、flash等。eg:

4.其他功能标签

mark:标注,呈现不一样的颜色;

progress:进度条;

time:标注时间;

ruby:对某个字进行注释;

rt:

wbr:软换行,当一行显示不下就换行;

canvas

command:命令;

details:展开详情;

datalist:提示内容;

keygen:加密;

output:计算表单结果并给出输出值;

source

menu:菜单。

删除标签

1.可以用css代替的标签

2.不再使用frame

frameset

frame

noframes

3.只有个别浏览器支持的标签

4.其他不常用的标签

相关文章推荐:

HTML和CSS3中的2D、3D结合实现动画效果

html5自定义属性:如何获取自定义属性值(附代码)

html新增和删除行,html5页面结构的变化以及增加和删除标签的总结相关推荐

  1. html5 页面结构_HTML5页面结构基础

    html5 页面结构 The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Editi ...

  2. html5页面结构标签,HTML5 article标签元素

    HTML5 教程篇 - - article是HTML5新增的元素标签. 一.html article简介与语法结构 article英文翻译:文章.物品.报道.条文等意义. html5 表现页面中的一块 ...

  3. html5页面结构案例,前端学习笔记(五)HTML+CSS静态页面实战案例:幸福西饼首页和百度首页...

    按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作 首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...

  4. HTML5 Canvas 绘制库存变化折线 增加超储告罄线

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  5. jre是否支持html5,html5的结构

    目录 一.新增的主体结构元素 1.1.article元素 1.2.section元素 1.3.nav元素 1.4.aside元素 1.5.time元素 1.6.pubdate元素 二.新增的非主体结构 ...

  6. 前端:HTML5/36/HTML5简介,文档类型定义,网页字符集,页面结构标记,文章相关的标记,其它标记,音频标记,视频标记,表单中新增的属性,表单input元素type属性的值

    HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...

  7. [HTML/HTML5]3 页面结构

    在HTML5之前,主要的容器元素是div元素,但在HTML5中提供了数种其它容器元素供我们使用. 因此,当组织Web页面结构时,首先使用HTML将内容分成多部分,然后在对其使用CSS应用样式和格式. ...

  8. html5基本页面结构,HTML 5 基础教程

    HTML 5 基础教程 编辑 锁定 讨论 上传视频 <HTML5基础教程>是2018年1月由北京逐日传媒总策划,柳炳祥等主编,兵器工业出版社出版的艺术类图书教材. 书    名 HTML ...

  9. html5页面整体布局,HTML5页面布局 网页的基本结构

    这篇HTML5页面布局我们来学习组成HTML5网页的基本结构都包含了哪些内容,首先先来看下源代码. 欢迎关注头条号/自学编程 hello world 以上就是一个HTML5网页的最基本结构. 下面我们 ...

最新文章

  1. Sqlserver 2012 导入 DBF文件
  2. Xilinx PLL IP核功能仿真
  3. 贴吧备份到本地浏览html,获取贴吧对应页html及写入文件
  4. 消控中心人员配置_电气火灾监控系统在石药集团新药制剂配套特色原料药FDA生产中心项目...
  5. oracle安装gcc报错,记录oracle 9i for linux安装过程中几个错误
  6. tensorrt之tensorrtx编译:遇到的错误提示
  7. c++绝对值函数_Python自带自定义高阶函数实战
  8. 王建林的一个亿,靠打工能实现么?
  9. shapefile(.shp)空间数据格式详细说明
  10. 制作纯净版WinPE2.0
  11. 《计算机应用基础》第04章在线测试,《计算机应用基础》在线测试.doc
  12. IMU:姿态解算算法集合
  13. js jquery新窗口打开的几种方式
  14. 阿里云网盘,开放申请啦!非会员下载 10MB/s!
  15. 春节荐书 | 2019年我读过的十本好书
  16. C++中memset函数详解
  17. 飞天云动,站在下一个商业时代的门口
  18. 按键精灵大漠插件自动寻路自动打怪代码片段
  19. 食住玩3dmax|室内设计师如何用CORONA设置成品效果图出大图的渲染参数?
  20. Android(三十九):Gestures 手势

热门文章

  1. 【PMP】核对单和核查表的区别
  2. 智能音箱里小度、小爱、天猫精灵哪个更加好?(上)
  3. 使用QVE视频转换器制作gif动图
  4. 中国没有真正意义上的海滩比基尼(图)
  5. 传智播客C语言视频第二季(第一季基础上增加诸多C语言案例讲解,有效下载期为10.5-10.10关闭)
  6. Latex002 | 详细教程:LaTeX 编译器哪个好?——如何在 Visual Studio Code 中全流程编写 LaTeX(上篇)
  7. Matlab曲线拟合(2)(自用笔记)
  8. 华为HCIA-datacom 学习笔记18——SDN与NFV概述
  9. 什么是大数据?2022大数据时代
  10. LeetCode 24.两两交换链表中的节点 C语言