HTML5文档

目录

  • HTML5文档结构
    • 1.HTML5页面结构
    • 2.HTML5新增结构元素
  • HTML5新增页面元素
    • 1.hgroup标记
    • 2.figure标记与figcaption标记
    • 3.mark标记与time标记
    • 4.details标记与summary标记
    • 5.progress标记与meter标记
    • 6.input标记与datalist标记

HTML5文档结构

HTML5文档结构同样是由头部和主体两部分组成，只是新增了一些结构元素，如header、nav、article、section、aside、footer 六个结构元素，这些元素都是块级元素。

元素说明
header页面或页面中某一个区块的页眉，通常是一些引导和导航信息
nav可以作为页面导航的链接组
section页面中的一个内容区块，通常由内容及其标题组成
article代表一个独立的、完整的相关内容块，可独立于页面其他内容使用
aside非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容
footer页面或页面中某一个区块的脚

1.HTML5页面结构

HTML4.01之前，通常使用 DIV+CSS 来进行页面布局，采用 DIV 分割页面，采用 CSS定义 DIV 的样式。HTML5 中采用页眉、页脚、导航、文章内容等结构元素来进行页面布局，显得十分方便，

HTML5页面结构元素语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5文档结构</title>
	</head>
	<body>
		<header style="background-color: aqua; text-align: center;">
			header
			<nav style="background-color: blue; text-align: center;">nav</nav>
		</header>
		<article style="background-color: aquamarine;text-align: center;">
			article
			<section style="background-color: blueviolet; text-align: center;">section</section>
		</article>
		<aside style="background-color: brown;text-align: center;">aside</aside>
		<footer style="background-color: crimson; text-align: center;">footer</footer>
	</body>
</html>

2.HTML5新增结构元素

1.header标记
header 标记定义文档和区域的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常<header>标记至少包含(但不局限于) 一个标题标记(h1~h6)，也可以包括hgroup (标题组合)标记、表格标识、搜索表单、导航等。

	<header>
		<hgroup>
			<h1>HTML5</h1>
			<h3>什么是HTML5？</h3>
			<h5>HTML5标准</h5>
		</hgroup>
	</header>

样式展示
在这里插入图片描述

2.nav标记
nav标记代表页面的一个部分，是一个可以作为页面导航的链接组。建议不要在footer元素中使用 nav元素，否则易造成页面显示不正确。配置相应的CSS代码可以实现水平导航。

	<header>
		<nav>
			<ul>
				<li><a href="#">HTML参考手册</a></li>
				<li><a href="#">HTML 示例</a></li>
				<li><a href="#">HTML 测验</a></li>
			</ul>
		</nav>
	</header>

代码样式
在这里插入图片描述

3.article标记

article标记是一个特殊的section标记，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其他内容使用。例如论坛帖子、博客文章、新闻故事、评论等。一般来说,article会有标题部分，通常包含在header内,有时也会包含footer。article标记可以嵌套，内层的 article对外层的article标记有隶属关系。例如一篇博客的文章可以用article显示，然后后续的一些评论可以用article的形式嵌入其中。

<article>
	<header>
		<hgroup>
			<h1>HTML5</h1>
			<h2>什么是HTML5？</h2>
		</hgroup>
		<time datetime="2017-04-28">2017-04-28</time>
		<p>HTML5 引入了许多新标签，包括几个用于更好地描述文本结构的标签
				。在本文中，我们将了解这些 HTML5 
				引入的新的结构化标签以及如何使用它们将一个文档划分成几个内容块。</p>
	</header>
</article>

样式展示
在这里插入图片描述

4.section标记
section标记定义文档中的节。例如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一不新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。section元素不是一个普通的容器元素,它表示一段专题性的内容可以带有标题。如果描述一件具体的事物,建议使用article来代替section;如果使用section,仍可以使用h1作为标题，而不用担心它所处的位置。如果一个容器需要定义样式或定义行为，建议用div元素。

<section>
	<h1>section标记</h1>
	<p>用来定义文档中的节{section,区段}.比如章节,页眉,页脚,或文档中的其他部分</p>
</section>
<section>
	<h1>article标记</h1>
	<p>article标记标识了web页中的主要内容。
	以博客为例，每篇帖子都构成一个重要内容</p>
</section>

在这里插入图片描述

5.aside标记
aside(侧栏，也称为旁注)标记用来说明其所包含的内容与页面主要内容相关，但不是该页面的一部分，类似于使用括号对正文进行注释(就像这样)。括号中的内容提供关于该元素的一些附加信息，例如广告、成组的链接、侧栏等。

<header>我的博客</header>
<section>
	<article>
		<p>这是页面上的重要内容部分，也许是博客文章。带aside元素</p>
		<aside style="float: right;width: 100px;height: 100px;background: #EEFFCC; ">
			<p>这是第一篇博客文章</p>
		</aside>
	</article>
	<article>
		<p>这是页面上的重要内容部分。也许是博客文章。不带aside元素</p>
	</article>
</section>

在这里插入图片描述

6.footer标记
footer标记定义section或文档的页脚，包含了与页面、文章或部分内容有关的信息，例如文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它与页眉header标记用法相同，在一个页面中可以多次使用，若在一个区段的最后使用footer标记，那么它就相当于该区段的页脚。

<footer>
	<div style="text-align: center;">
		<section>
			<a href="#" target="_blank">CAICT中国信通院</a>
			<a href="#" target="_blank">W3C</a>
			<a href="#" target="_blank">DCloud</a>
		</section>
		<span style="padding: 2px 5px;">京ICP备12046007号-5</span>
		<span style="padding: 2px 5px;">HTML5中国产业联盟版权所有</span>
	</div>
</footer>

在这里插入图片描述

HTML5新增页面元素

HIML5除了新增的结构元素header、nav、article、aside、section、footer 外，还增加了新的内联元素(time、meter 及progress等)、新的内元素 (video和audio)、新的交互元素 (details、datagrid和command等)及其他页面元素。

1.hgroup标记

标题组合hgroup标记是对网页或区段section的标题元素 (hl~h6) 进行组合。例如在某一区段中需要连续设置多个标题标记，可以使用hgroup标记来组合。

<hgroup>
	<h1>JSDoc+规范</h1>
	<h2 style="color: red;">介绍</h2>
</hgroup>
<p style="text-indent: 2em;">
	编写JSDo是为了增强代码的可读性
	，以及方使导出API文档。它的规范可参考JSDoc 3。
	对于代码规范要求高的工程师和JS框架的开发者，
	熟悉JSDoc是必需的技能。
</p>

在这里插入图片描述

2.figure标记与figcaption标记

figure标记用于对元素进行组合，常用于图像与图像描述组合。figcaption (图题)标记用于定义figure元素的标题 (caption)，可以给一组图像标记定义标题，但figcaption标记不是必需的。如果包含了figcaption元素，那么它必须放置在figure元素的第一个或最后一个子元素的位置上。

<figure>
	<p>HTML5具有语义、离线与存储、设备访问等八个新特性，其对应的logo如下图所示</p>
	<img src="img/123.png" width="150px" alt="语义" title="语义"/>
	<img src="img/google.jpg" width="150px" alt="离线" title="离线"/>
	<img src="img/google.jpg" width="150px" alt="离线" title="离线"/>
	<figcaption>HTML5新logo(图题)</figcaption>
</figure>

在这里插入图片描述

3.mark标记与time标记

记号mark标记用来定义带有记号的文本。在需要突出显示文本时可以使用mark标记此标记对关键字做高亮处理(黄底色标注)，突出显示，标注重点，在搜索方面可以应用。时间time标记用来定义公历的时间(24 小时制) 或日期，时间和时区偏移是可选的该标记能够以机器可读的方式对日期和时间进行编码。该标记不会在任何浏览器中呈现任何特殊效果。

1.基本语法

<mark>重点标注的内容</mark>
<time>9:00</time> <!-- 定义时间 -->
<time datetime="2017-05-01"pubdate="pubdate">国际劳动节</time><!-定义日期 -->

2.属性说明

time标记的pubdate属性: 指示该标记中的日期/时间是文档(或最近的article 标记)的发布日期。
time标记的datetime属性: 规定日期/时间。否则，由元素的内容给定日期/时间。

<article>
	<header>
		<h1>五一国际劳动节</h1>
	</header>
	<p style="text-indent: 2em;">
		国际劳动节又称"<mark>五一国际劳动节
		14</mark>、"<mark>国际示威游行日</mark>”
		(International workersDay或者May Day).
		是世界上80多个国家的全国性节日。定在每年的五月一。
		它是全世界劳动人民共同拥有的节日。188会议通过决议，年7月，由恩格斯领导的第二国际在巴黎举行代表大会。
		规定<time datetime="1890-05-01">1890-05-01</time>国际劳动者举行游行，并决定把5月1日这一天定为国际劳动节。
		中央人民政府政务院于1949年12月作出决定，将5月1日确定为劳动节。
		1989年后，国条院基本上每5年表彰一次全国劳动模范和先进工作者，每次表彰3000人左石。
	</p>
</article>

在这里插入图片描述

4.details标记与summary标记

细节details标记是一个开关式、交互式控件，用来定义用户可见的或者隐藏的需求补充细节，任何形式的内容都能被放在该标记中。该元素的内容对用户是不可见的，除非设置了open属性。与摘要summary标记配合使用可以为details定义标题，summary元素应该是details元素的第一个子元素。标题是可见的，用户单击标题时，会显示出details。只有Chrome、Safari6以上支持summary标记。

1.基本语法

<details open>
	<summary>details的标题</summary>
	details的详细内容。
</details>

应用

<details open>
	<summary>details的标题</summary>
	details的详细内容。<br />
	<p>okk段落</p>
	<h3>标题</h3>
</details>

结果：
在这里插入图片描述
在这里插入图片描述

5.progress标记与meter标记

进度progress标记用来定义运行中的任务进度(进程)。该标记有两个属性:max表示规定需要完成的值;value规定进程的当前值。
度量meter标记定义已知范围或分数值内的标量测量，也被称为gauge(尺度)。如磁盘用量、CPU 使用率等、meter标记属性如表。

属性值说明
formform_id规定 meter 元素所属的表单
highnumber规定被界定为高值的范围
lownumber规定被界定为低值的范围
maxnumber规定范围的最大值
minnumber规定范围的最小值
optimumnumber规定度量的最优值
valuenumber必需。规定度量的当前值

示例代码

<!-- 显示上传进度 -->
<progress id="upload-progress" max="100" value="75" style="width: 300px;"></progress>
<br />
<!-- 表示文件下载量 -->
<meter id="file-download" value="25" min="0" max="100" optimum="50" high="80" low="10">
  25% (25MB / 100MB)
</meter>

在这里插入图片描述

6.input标记与datalist标记

input标记用于搜集用户信息。input标记的list属性与datalist标记的id属性进行关联，即将此两个属性的值设置为相同的值，通过datalist标记列出所有合法的输入值列表。
选项列表datalist标记用来定义input标记可能的选项列表。一般与input标记配合使用，主要用来定义input可能的值，提供“自动完成”的功能，方便用户输入。datalist标记及其选项不会被显示出来，只有当用户鼠标盘旋在input 标记域时，才能看到“▼”，然后单击“▼”弹出一个下拉列表，提供用户选择作为用户的输入数据。

<input list="courese" placeholder="请选择课程"/>
<datalist id="courese">
	<option value="C++/C程序设计"></option>
	<option value=".NET应用开发"></option>
	<option value="JAVAEE应用开发"></option>
	<option value="PHP+MySql应用开发"></option>
</datalist>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/264336.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Postman报：400 Bad Request

Postman报：400 Bad Request

● 使用Postman发送Post请求报400&#xff0c;入参为JSON&#xff1b; 二、分析 1、Postman请求并没有请求到后台Api&#xff08;由于语法错误&#xff0c;服务器无法理解请求&#xff09;&#xff1b; 2、入参出错范围&#xff1a;cookie、header、body、form-data、x-www-f…
阅读更多...
3.[BUU]warmup_csaw_20161

3.[BUU]warmup_csaw_20161

1.checksec 检查文件类型 ELF-64-little &#xff0c;无其他限权&#xff0c;直接用ida检查代码。 2.IDA进行反编译&#xff0c;进行代码审计 查看各个名称的内容&#xff1a; 了解基本攻击思路&#xff1a; 攻击思路&#xff1a;gets输入垃圾数据覆盖v5内容&#xff0c;再将s…
阅读更多...
FPGA-Xilinx ZYNQ PS端实现SD卡文件数据读取－完整代码

FPGA-Xilinx ZYNQ PS端实现SD卡文件数据读取－完整代码

FPGA-Xilinx ZYNQ PS端实现SD卡文件数据读取 本章节记录Xilinx ZYNQ PS端实现SD卡txt文件的数据读取。 踩坑记录&#xff0c;本章节主要内容参考原子哥 板子&#xff1a;xilinx zynq 7010 文章目录 FPGA-Xilinx ZYNQ PS端实现SD卡文件数据读取一、开发板引脚配置二、PS端导入F…
阅读更多...
嵌入式科普(5)ARM GNU Toolchain相关概念和逻辑

嵌入式科普(5)ARM GNU Toolchain相关概念和逻辑

一、目的/概述 二、资料来源 三、逻辑和包含关系 四、Arm GNU Toolchain最常用的命令 嵌入式科普(5)ARM GNU Toolchain相关概念和逻辑 一、目的/概述 对比高集成度的IDE(MDK、IAR等)&#xff0c;Linux开发需要自己写Makefile等多种脚本。eclipse、Visual Studio等需要了解预处…
阅读更多...
高德地图逆地理编码踩坑日志

高德地图逆地理编码踩坑日志

本人是一枚Java小白&#xff0c;公司项目中用到根据经纬度反查该地址中文信息的场景&#xff0c;因为一开始调用的经纬度是能反查出区域编码的&#xff0c;以为towncode都是String返回结果&#xff0c;如下图&#xff1a; 没想到当没有名字任何一个城市区域的时候&#xff0c;…
阅读更多...
在Linux安装卸载文件

在Linux安装卸载文件

目录 一、Linux系统应用程序 1.典型的应用程序的目录结构 2、常见的软件包封装类型 二、RPM软件包管理 1、RPM是什么&#xff1f; 2、rpm一般命名格式 3、RPM安装包从何而来&#xff1f;如何挂载&#xff1f; 4、挂载的注意事项: 5、目的&#xff1a;提供安装包 6、查…
阅读更多...
MyBatis——MyBatis的延迟加载

MyBatis——MyBatis的延迟加载

MyBatis的延迟加载&#xff08;一对多查询案例&#xff09; 1.什么是延迟加载&#xff1f; 开启延迟加载后&#xff0c;在真正使用数据的时候才发起级联查询&#xff0c;不用的时候不查询。 2.pojo User类&#xff1a; package com.wt.pojo;import java.io.Serializable; …
阅读更多...
【华为鸿蒙系统学习】- HarmonyOS4.0之App项目开发|自学篇

【华为鸿蒙系统学习】- HarmonyOS4.0之App项目开发|自学篇

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 创建鸿蒙第一个App项目 项目创建 工程目录区 预览区 运行Hello World 基本工程目录 ws:工…
阅读更多...
SpringBoot+vue实现评论区分页效果

SpringBoot+vue实现评论区分页效果

当评论区含大量数据时&#xff0c;一次性查询速度很慢&#xff0c;所以使用分页&#xff0c;实现分页效果。 前端&#xff1a; <h3>评论</h3><div><div style"font-size:14px;padding:10px;" v-for"r in form.remark"><!-- …
阅读更多...
【Matlab in VSCode】在VSCode中编辑MATLAB文件

【Matlab in VSCode】在VSCode中编辑MATLAB文件

【Matlab in VSCode】在VSCode中编辑MATLAB文件 1.安装插件 插件&#xff1a;在vscode拓展商店下载 MATLABMatlab in VSCode 其他&#xff1a;Windows环境MATLAB2019bpython3.7.9 2.插件配置 MATLAB插件下载后不用配置。 Matlab in VSCode需要进行相应的配置。 Windows…
阅读更多...
Ubuntu 常用命令之 ping 命令用法介绍

Ubuntu 常用命令之 ping 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 ping命令是一种网络诊断工具&#xff0c;用于测试主机之间网络的连通性。它发送ICMP Echo Request消息到指定的网络主机&#xff0c;并等待接收ICMP Echo Reply。通过这种方式&#xff0c;我们可以知道两台主机之间的网络是否畅通…
阅读更多...
elementUI CDN引入本地文件报错，刷新页面报错

elementUI CDN引入本地文件报错，刷新页面报错

报错原因&#xff1a;vue.config.js的externals 配置中有外部cdn引入配置&#xff0c;而当前场景我的element是直接下载放在本地的&#xff0c;这时就需要将配置注释或者删除 webpack 中的 externals 配置项用于指定在打包时需要排除掉的模块&#xff0c;这些模块会被视为外部依…
阅读更多...
bugku-misc-这是一张单纯的图片

bugku-misc-这是一张单纯的图片

附件&#xff1a;图片 1、查看属性 2、010 whex打开看看 可以看到html编码&#xff0c;将文件后缀&#xff0c;改成html&#xff0c;打开 即可
阅读更多...
蓝牙物联网与嵌入式开发如何结合？

蓝牙物联网与嵌入式开发如何结合？

蓝牙物联网与嵌入式开发可以紧密结合&#xff0c;以实现更高效、更智能的物联网应用。以下是一些结合的方式&#xff1a; 嵌入式开发为蓝牙设备提供硬件基础设施和控制逻辑&#xff1a;嵌入式系统可以利用微处理器和各种外设组成的系统&#xff0c;为蓝牙设备提供硬件基础设施和…
阅读更多...
FastGPT+ChatGLM3-6b搭建知识库

FastGPT+ChatGLM3-6b搭建知识库

前言&#xff1a;我用fastgpt直接连接chatglm3&#xff0c;没有使用oneai&#xff0c;不是很复杂&#xff0c;只需要对chatglm3项目代码做少量修改就能支持使用embeddings&#xff0c;向量模型用的m3e&#xff0c;效果还可以 我的配置&#xff1a; 处理器&#xff1a;i5-13500 …
阅读更多...
web前端html笔记2

web前端html笔记2

新增状态标签<meter><progress> <meter> 属性 值 描述 high 数值 规定高值 low 数值 规定低值 max 数值 规定最大值 min 数值 规定最小值 optimum 数值 规定最优值 value 数值 规定当前值 <body> <meter high"50" …
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput输入框组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput输入框组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之TextInput输入框组件 一、操作环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、TextInput 接口 TextInput(value?:{placeholder?: ResourceStr, tex…
阅读更多...
NIO的实战教程（简单且高效）

NIO的实战教程（简单且高效）

1. 参考 建议按顺序阅读以下三篇文章 为什么NIO被称为同步非阻塞&#xff1f; Java IO 与 NIO&#xff1a;高效的输入输出操作探究 【Java.NIO】Selector&#xff0c;及SelectionKey 2. 实战 我们将模拟一个简单的HTTP服务器&#xff0c;它将响应客户端请求并返回一个固定的…
阅读更多...
【EI会议征稿】2024年光电信息与光学工程国际学术会议（OIOE 2024）

【EI会议征稿】2024年光电信息与光学工程国际学术会议（OIOE 2024）

2024年光电信息与光学工程国际学术会议&#xff08;OIOE 2024&#xff09; 2024 International Conference on Optoelectronic Information and Optical Engineering 光电信息技术和光学工程技术广泛应用于国民经济和国防建设的各行各业。近年来&#xff0c;随着相关产业的迅…
阅读更多...
AcWing算法提高课-1.4.2股票买卖 IV

AcWing算法提高课-1.4.2股票买卖 IV

算法提高课整理 CSDN个人主页&#xff1a;更好的阅读体验 原题链接 题目描述 给定一个长度为 n n n 的数组&#xff0c;数组中的第 i i i 个数字表示一个给定股票在第 i i i 天的价格。 设计一个算法来计算你所能获取的最大利润&#xff0c;你最多可以完成 k k k 笔交易…
阅读更多...
最新文章

Copyright @ 2022~2023