HTML5新增结构和网页元素

最新推荐文章于 2023-08-21 16:45:48 发布

原创最新推荐文章于 2023-08-21 16:45:48 发布 · 190 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了HTML5中新增的语义化标签，如header、footer、main等，并展示了如何利用这些标签来实现全屏布局。同时提到了新增的网页元素video、audio和canvas，其中video和audio元素的controls、autoplay、loop和muted属性也进行了说明。

1、新增语义化标签

如header、footer、main、nav、aside、article、section(内容和标题组成)

例题

例子中，为了让页面占据整个屏幕的高度，不算滚动条的高度，在article和article属性中分别加入了line-height:calc（100vh - 90px）。宽度表示vw：viewport-width

calc是用css用来计算的方法

即用整个屏幕的高度（100vh）- header的高度 - nav的高度 -footer的高度

在用减法的时候左右必须都有空格

2.新增网页元素

video、audio、canvas（JS再学）

controls表显示控制台 autoplay表自动播放 loop表循环播放 muted表静音播放

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

webshady

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Html5新增元素详解.pptx

11-15

Html5 中的新增结构元素包括： * section 元素：表示页面或应用程序中的一个区块。 * article 元素：表示页面中的一块独立的内容。 * header 元素：表示页面中一个内容区块或整个页面的标题。 * nav 元素：表示页面...

浅谈HTML5新增及移除的元素

09-28

HTML5还引入了一系列新的语义和结构元素，使网页内容更加有组织和易于理解。例如，标签定义页面独立的内容区域，标签定义页面的侧边栏内容，而标签允许文本脱离其父元素的文本方向设置。其他新增元素如定义命令...

参与评论您还未登录，请先登录后发表或查看评论

新增的h5页面元素

wings的博客

02-22

746

element 学习 function detail_onclick(detail) { var p = document.getElementById("p"); if (detail.open) { p.style.visibility = "hidden"; } else { p.style.visibility = "visible

Html5（2）新增的结构元素及新增页面元素

puppyand123的博客

08-10

768

新增的主体结构元素①article 元素 //描述独立完整的文档，如博客、帖子、评论；可以嵌套使用；可以作为插件使用 ②section 元素 //用来划分区域，常由标题和内容构成；不同于div，如果需要被脚本操作，通常选择div而非section ③nav 元素 //传统导航、侧边导航、页内导航、翻页导航 ④aside 元素 //附属信息部分，如侧边栏、广告等等与主内容分开的部分 ⑤

HTML5新增元素

karry_yuan的博客

03-30

1876

HTML5的新增元素

Web前端开发--第三章：HTML5新增页面元素

专科三年的修炼的博客

11-09

895

第三章：HTML5新增页面元素一.预习笔记二.课堂笔记三.课后回顾 –仰望星空,脚踏实地;以梦为马,不负韶华

HTML5的文档结构和新增标签完全解析

09-28

HTML5是超文本标记语言（HTML）的最新版本，它对网页的开发和构建提供了更多新的功能和改进。本文将详细介绍HTML5的文档结构以及新增的标签，并结合实例解析其用法。 1. HTML5文档结构 HTML5文档的构成主要包括...

HTML5 网页结构.pdf

最新发布

07-05

### HTML5 网页结构知识点详解 #### 1. HTML5新增元素及属性概览 - **新增元素特点**：HTML5引入了一系列新元素，显著提升了...这不仅让开发者能够更高效地组织和展示内容，同时也提高了用户体验和网页的可访问性。

自定义html标记替换html5新增元素

09-28

HTML5是Web开发的一个重大进步，它引入了许多新的元素，以更好地结构化和语义化网页内容。在标题中提到的“自定义html标记替换html5新增元素”，主要是指在遇到不支持HTML5新元素的老版本浏览器（如早期的Internet ...

HTML5 新增元素

蓝朽的小世界

05-02

1722

html5新增元素的学习

html 网页元素位置_如何添加HTML 网页元素

08-18

486

html 网页元素位置How To Build a Website With HTML 如何使用HTML构建网站This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language use...

新建html页面

gyueh的博客

01-19

1996

新建一个后缀名为html的文件输入！点击tab键----生成一个html页面输入h 用箭头符号选中html:5 点击tab键----生成一个html页面

HTML5新增页面元素

m0_56713342的博客

08-21

441

HTML5中新增了几个结构元素（和），这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加具有语义化和更具有现代风格。结构元素1、header元素header页面头标签：Header元素通常来放置整个页面或页面内的一个内容区块的标题，它可以包含页面标题、logo图片，搜索表单等he2、 nav元素nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。

HTML新增的常用元素

最好的一天

11-22

837

1.新增的常用语义性元素 make：突出显示文本 progress：显示进程 time：表示时间日期值 details：定义用户可见或者需要隐藏的补充细节说明 datalist：定义选项列表 2.新增的input输入类型 email：输入email地址的字段 url：输入URL的字段 number：输入数字的字段 range：用于精确值不重要的输入数字...

HTML及新增

qq_44930306的博客

03-25

932

目录一、HTML简介（1）代码编写工具（2）路径（3）标签的嵌套（4）快捷键整理（5）特殊符号 1.[文本格式化] 2.[表格Table]--记忆：C列R行 3.[图片Images] 4.[链接Links] 5.[列表]---记忆：无U有O (1)无序列表（2）有序列表（3）自定义列表 6.[表单Forms] 一、HTML简介行业介绍：全栈(即覆盖前端又覆盖后端）>WEB前端≈HTML5=H5（编写网页） H5：在互联网环境...

html5 新增的页面元素

weixin_30326741的博客

09-03

168

figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> &...

html页面主详新增,HTML5 新增元素详解

weixin_28716181的博客

06-10

553

一、HTML5新增结构元素之前，我们只能用万能的div标签，并为其设置不同的id如header, footer, sidebar等来分别表达头部，底部或者侧栏等。而现在代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构：section: 这可以表达书本的一部分或一章，或者一章内的一节header: 页面主体上的头部。并...

HTML的元素1

m0_65504942的博客

08-14

338

1.根元素：文档根元素。

HTML5文档结构与新增标签详解

"HTML5的文档结构和新增标签完全解析" ...HTML5的文档结构和新增标签是现代Web开发的重要组成部分，它们为网页设计提供了更强的表达力和更好的用户体验。理解和熟练运用这些元素是每个前端开发者的必备技能。