当前位置： 首页 > news >正文

HTML5中的重要元素详解

news 2026/4/5 5:53:57

第3章 HTML5中的重要元素

3.1 html根元素

HTML文档中，元素html代表了文档的根，其他所有元素都是在该元素的基础上进行延伸或拓展的，该元素也是HTML文档的最外层元素，因此也称为根元素。

html元素的常用属性：

  • manifest：URL，指向描述文档缓存信息的地址
  • xmlns：http://www.w3.org/1999/xhtml，设置XML namespace的属性
1.功能描述

新建页面中显示“内容部分。。。”几个字符。

2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html根元素的使用</title><style>body {font-size: 10pt;}</style>
</head><body>内容部分。。。
</body></html>
3.页面效果

3.2 文档元素

一个HTML文档通常包含两个部分，一个头部分，由head元素包含，一个为主体部分，由body元素包含。由于说明文档经常用到head,title,base,link,meta,style等元素，因此也称为文档元素。

  • head：所有头部元素载体，包含base,link,meta,script,style,title.
  • base：可以设置页面中url为空时的值。href(当页面为空时的链接)，target(打开页面链接的方式_blank,_self,_parent等)，新窗口，当前窗口，父窗口打开。
  • meta：设置页面的文档信息，针对搜索引擎的关键字等，content="HTML5,UI,Web前端开发",charset="utf-8"
1.功能描述

新建页面中，head元素加入所包含的各类标签，并定义超级链接的样式。当单击请点击我标签时，将展示相应的样式效果并进入base设置的默认地址。base和title只能使用一次。

2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文档元素的使用</title><base href="http://www.baidu.com/" target="_blank" /><meta name="keywords" content="HTML5,CSS,JavaScript" /><meta name="description" content="用于检测页面的文档元素" /><style>a {padding: 8px;font-size: 13px;text-decoration: none;}a:hover {border: 1px solid #ccc;}</style>
</head><body><a href="index.html">请点击我</a>
</body></html>
3.页面效果

3.3 脚本

为了增加页面的互动性，需要对文档编写客户端脚本，常用语言是JavaScript.

script的属性：

  • async：true/false，是否异步执行脚本，H5新增
  • charset：charset，设置脚本中使用的字符编码，H5不在支持
  • language：JavaScript等，定义脚本语言类型，H5不再支持
  • xml:space：不再支持

async是新增属性，当取值为true时，脚本在页面中执行是异步的，当false时，脚本立即执行，页面也会等脚本执行完成后，继续解析。

示例：元素script与noscript的使用
1.功能描述

新建页面，增加文本框“txtContent”和按钮，请点击我；当单击按钮时，通过页面中加入JavaScript脚本代码，获取文本框中的内容，并且显示在页面中。

2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>脚本元素的使用</title><style>body {font-size: 12px;}.inputbtn {border: 1px solid #ccc;background-color: #eee;line-height: 18px;font-size: 12px;}.divShow {display: none;width: 196px;padding: 5px;margin-top: 5px;border: 1px solid #666;background-color: #eee;}</style><script type="text/javascript" async>function btnClick() {var strTxt = document.getElementById("txtContent").value;var strDiv = document.getElementById("divShow");strDiv.style.display = "block";strDiv.innerHTML = "您输入的字符是：" + strTxt;}</script><noscript>您浏览器不支持JavaScript!</noscript>
</head><body><input type="text" id="txtContent" /><input type="button" value="请点击我" class="inputbtn" onclick="btnClick();" /><div id="divShow" class="divShow"></div>
</body></html>
3.页面效果

async为true时，可以很大程度上缓解页面解析的压力，加速页面加载的速度。

3.4 节点

H5中，新增许多标志性节点元素，section,nav等，这些元素可以用于页面内容的分段或分区。接下来详细介绍这些节点使用方法。

3.4.1 section元素

section是H5新增的元素，该元素用于标记区段或段落，例如文章中的章节、页眉，页脚设置。

section常用属性：

  • cite：URL，section元素内容来源于Web的地址。
  • hidden：true/false，显示或隐藏元素
  • draggable：true/false，是否可以拖动

3.4.2 nav元素

页面导航元素，将具有导航性质的链接归纳在一块区域中，使页面更有语义性，同时，方便对屏幕阅读器设备的支持。例如nav里面有多个a.

3.4.3 hgroup元素

用于页面的标题进行分组，形成一个群组，常常与figcaption结合使用。

3.4.4 address元素

用于定义文档作者或者所有者相关联系方式，常用于article元素外部。内部表示文章作者的联系方式，通常是斜体，解析该元素时会换行。还有article,aside,header,footer都是节点元素，不在赘述。

3.5 分组内容

原有分组内容，ul,ol,dl.改良后。

3.5.1 ul元素

表示无序列表，通常与li一起用。

3.5.1 ol元素

表示有序列表，新增两个属性start(列表项开始的编号)和reversed(列表项反向排序),

1.功能描述

ol中创建各类图书销量排名列表，添加三个选项，计算机，社科，文艺作为列表的内容。

增加一个文本框，设置开始值，一个确定按钮，输入一个值，点击确定按钮，以文本框中的值为开始值

2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ol列表元素的使用</title><script type="text/javascript" async>function btnClick() {var strNum = document.getElementById("txtOrderNum").value;var strOl = document.getElementById("olList");strOl.setAttribute("start", strNum);}</script>
</head><body><h5>各类图书销量排行</h5><ol id="olList"><li>计算机</li><li>社科</li><li>文艺</li></ol><h5>设置开始值</h5><input type="text" id="txtOrderNum" class="inputtxt" style="width:60px" /><input type="button" value="确定" class="inputbtn" onclick="btnClick()" />
</body></html>
3.页面效果

3.5.3 dl元素

dl元素用于创建一个术语列表，允许dl表中跟多个带名字的术语dt，每个dt后面可以跟多个dd，dt,dd不允许重复。

3.6 文本层次语义

3.6.1 time元素

定义时间或日期，代表24小时中某一时刻，只需将datetime设为时间或日期即可。

可选属性，pubdate，布尔值。

3.6.2 mark元素

高亮显示某个或某几个字符，引起用户特别注意。类似于em和strong

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>mark元素的使用</title></head><body><h5>优秀的开发人员的<mark>素质</mark></h5><p>一个优秀的Web页面开发人员，必须具有<mark>过硬</mark><mark>务实</mark>的专业精神</p></body>
</html>

3.6.3 cite元素

创建一个引用标记，用于文档中参考文献的引用说明。如书名和文章名称，被标记的内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

3.7 嵌入内容

img,iframe(不再支持)，object元素(原有属性不支持)。

3.8 公共属性

draggable,hidden,spellcheck,contenteditable属性，可以拖动，可隐藏，检测输入拼音或语法是否错误，可以直接对显示在页面中的文字进行编辑(可用于表格编辑).

共同的案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>公共属性draggable,hidden,spellcheck,contenteditable</title><style>hr {clear: both;}#d1,#d4,#d5 {float: left;width: 100px;height: 100px;border: 1px solid red;}#d2 {float: left;width: 100px;height: 100px;border: 1px solid red;}</style><script>function show() {var d2 = document.getElementById("d2");d2.hidden = !d2.hidden;}</script>
</head><body><div id="d1" draggable="true">可拖动</div><hr /><div id="d2" hidden>hidden属性</div><button onclick="show();">交替显示</button><hr /><textarea spellcheck="true" cols="15" rows="5">有拼写检查</textarea><textarea spellcheck="true" cols="15" rows="5">无拼写检查</textarea><hr /><div id="d4" contenteditable="true">可编辑</div><div id="d5" contenteditable="true">可编辑</div>
</body></html>

提示：拼写检查可能不生效。

相关文章：

HTML5中的重要元素详解

第3章 HTML5中的重要元素 3.1 html根元素 HTML文档中&#xff0c;元素html代表了文档的根&#xff0c;其他所有元素都是在该元素的基础上进行延伸或拓展的&#xff0c;该元素也是HTML文档的最外层元素&#xff0c;因此也称为根元素。 html元素的常用属性&#xff1a; manif…...

编程日记 2024/9/16 21:31:35

八股文知识汇总（常考）

八股文知识汇总&#xff08;常考&#xff09; 语言特性相关 JAVA知识 - JDK动态代理为什么只能代理有接口的类&#xff1f; 说一下对象创建的过程&#xff1f;ThreadLocal是什么&#xff1f;他的实现原理是什么&#xff1f;ThreadLocal会出现内存泄露吗&#xff1f;String、…...

编程日记 2024/9/16 21:29:33

unity 图片置灰shader

我和chatgpt真强&#xff01; 在 Unity 编辑器中&#xff0c;右键点击 Assets 文件夹&#xff0c;选择 Create -> Shader -> Unlit Shader。shader代码如下&#xff0c;尽管我看的不是很懂&#xff0c;但确实有用 Shader "Custom/GrayScaleShader" {Properti…...

编程日记 2024/9/16 21:28:31

【C语言】（指针系列2）指针运算+指针与数组的关系+二级指针+指针数组+《剑指offer面试题》

前言&#xff1a;开始之前先感谢一位大佬&#xff0c;清风~徐~来-CSDN博客&#xff0c;由于是时间久远&#xff0c;博主指针的系列忘的差不多了&#xff0c;所以有些部分借鉴了该播主的&#xff0c;有些地方如果解释的不到位&#xff0c;请翻看这位大佬的&#xff0c;感谢大家&…...

编程日记 2024/9/16 21:27:30

探索信号处理：使用傅里叶小波变换分析和恢复信号

在现代信号处理领域&#xff0c;傅里叶变换是分析和处理信号的一种基本工具。然而&#xff0c;传统的傅里叶变换在处理非平稳信号时存在局限性&#xff0c;因为它无法同时提供时间和频率的信息。为了克服这一挑战&#xff0c;傅里叶小波变换&#xff08;FSWT&#xff09;应运而…...

编程日记 2024/9/16 21:26:29

俄罗斯方块——C语言实践(Dev-Cpp)

目录 1、创建项目(尽量不使用中文路径) 2、项目复制 3、项目配置 ​1、调整编译器 2、在配置窗口选择参数标签 3、添加头文件路径和库文件路径 4、代码实现 4.1、main.c 4.2、draw.h 4.3、draw.c 4.4、shape.h 4.5、shape.c 4.6、board.h 4.7、board.c 4.8、cont…...

编程日记 2024/9/16 21:24:27

关于wp网站出现的问题

问题1 问题1&#xff1a;如果出现这个界面的问题 说明是根目录的index.php编码出了问题&#xff0c;用备份的源文件退换一下即可。 问题2 问题2&#xff1a;如果出现页面错位现象&#xff0c;可能是某个WP插件引起的问题&#xff0c;这里需要逐步排查插件&#xff0c;或者你刚…...

编程日记 2024/9/16 21:22:25

为什么H.266未能普及？EasyCVR视频编码技术如何填补市场空白

H.266&#xff0c;也被称为Versatile Video Coding&#xff08;VVC&#xff09;&#xff0c;是近年来由MPEG&#xff08;Moving Picture Experts Group&#xff09;和ITU&#xff08;International Telecommunication Union&#xff09;联合开发并发布的新一代国际视频编码标准…...

编程日记 2024/9/16 21:21:24

最全 高质量 大模型 -评估基准数据集（不定期更新）

评估基准是推动人工智能领域技术进步和应用落地的关键工具&#xff0c;通过这些基准&#xff0c;我们可以更全面地理解LLMs的能力&#xff0c;并指导未来的研究和实践。 评估基准&#xff0c;是一套衡量标准&#xff0c;就像老师用考试来检查学生学得怎么样。在大模型的世界里…...

编程日记 2024/9/16 21:20:23

react 中， navigate 跳转链接 2种写法

react 中&#xff0c; navigate 下面2种写法&#xff0c; 有什么区别, import { useNavigate } from "react-router-dom"; const navigate useNavigate(""); onClick{() > navigate("/signup")}import { Navigate } from "react-route…...

编程日记 2024/9/16 21:15:19

k8s Service 服务

文章目录 一、为什么需要 Service二、Kubernetes 中的服务发现与负载均衡 -- Service三、用例解读1、Service 语法2、创建和查看 Service 四、Headless Service五、集群内访问 Service六、向集群外暴露 Service七、操作示例1、获取集群状态信息2、创建 Service、Deployment3、创…...

编程日记 2024/9/16 21:11:15

安全建设当中的冷门知识

今天说点有趣的话题&#xff0c;也是因为在安全建设过程中&#xff0c;安全员也不太可能都按照最理想的状态去工作&#xff0c;有资源的问题&#xff0c;有管理惰性问题&#xff0c;当然也有管理者本身决策的问题。 安全行业起步较晚&#xff0c;16年才施行网络安全法&#xff…...

编程日记 2024/9/16 21:09:13

python画图|极坐标下的3D surface

前述学习过程中&#xff0c;我们已经掌握了3D surface的基本绘制技巧&#xff0c;详见链接&#xff1a; python画图|3D surface基础教程-CSDN博客 基础教程中的3D surface绘制位于笛卡尔坐标系&#xff0c;但有时候会用到极坐标绘图。虽然我们已经学过简单的极坐标绘图技巧&a…...

编程日记 2024/9/16 21:05:09

html+css+js网页设计 旅游 大理旅游7个页面

htmlcssjs网页设计 旅游 大理旅游7个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…...

编程日记 2024/9/16 21:04:08

Day 29~42 JavaWeb

Java Web 1、基本概念 1.1、前言 web开发&#xff1a; web&#xff0c;网页的意思&#xff0c;www.baidu.com静态web html&#xff0c;css 提供给所有人看的数据始终不会发生变化动态web 淘宝&#xff0c;几乎是所有的网站 提供给所有人看的数据始终会发生变…...

编程日记 2024/9/16 21:01:05

小程序开发设计-第一个小程序：创建小程序项目④

上一篇文章导航&#xff1a; 小程序开发设计-第一个小程序&#xff1a;安装开发者工具③-CSDN博客https://blog.csdn.net/qq_60872637/article/details/142219152?spm1001.2014.3001.5501 须知&#xff1a;注&#xff1a;不同版本选项有所不同&#xff0c;并无大碍。 一、创…...

编程日记 2024/9/16 20:59:03

C++设计模式——Mediator中介者模式

一&#xff0c;中介者模式的定义 中介者模式是一种行为型设计模式。它通过一个中介者对象将多个对象之间的交互关系进行封装&#xff0c;使得对象之间的交互需要通过中介者对象来完成。该设计模式的结构很容易理解&#xff0c;以中介者为中心。 中介者模式的设计思想侧重于在…...

编程日记 2024/9/16 20:56:01

微服务之间远程调用实现思路

项目使用的Spring Cloud Alibaba框架&#xff0c;微服务之间远程调用使用OpenFeign&#xff0c;具体实现步骤如下&#xff1a; &#xff08;1&#xff09;在api工程定义OpenFeign接口&#xff0c;使用FeignClient注解进行定义。 &#xff08;2&#xff09;服务提供方定义Open…...

编程日记 2024/9/16 20:53:58

获取STM32 MCU的唯一ID

STM32每个系列都会有唯一的一个芯片序列号&#xff08;96位bit&#xff09; STM32F10X 的起始地址是 0x1FFFF7E8 STM32F20X 的起始地址是 0x1FFF7A10 STM32F30X 的起始地址是 0x1FFFF7AC STM32F40X 的起始地址是 0x1FFF7A10 STM32L0XX 的起始地址是 0x1FF80050 STM32L1XX 的起…...

编程日记 2024/9/16 20:50:55

Debian项目实战——环境搭建篇

Debian系统安装 准备工作 1、系统镜像&#xff1a;根据自己的需要选择合适的版本格式&#xff1a;x86 / arm 架构 | 最好下载离线安装版本 | 清华镜像源 2、制作工具&#xff1a;balenaEtcher 3、系统媒介&#xff1a;16G以上U盘最佳 烧录镜像 打开balenaEtcher进行烧录&am…...

编程日记 2024/9/16 20:49:54

Phi-3-mini-4k-instruct-gguf效果展示：中文古诗续写、技术术语解释、冷知识问答

Phi-3-mini-4k-instruct-gguf效果展示&#xff1a;中文古诗续写、技术术语解释、冷知识问答 1. 模型能力概览 Phi-3-mini-4k-instruct-gguf作为微软Phi-3系列的轻量级文本生成模型&#xff0c;在中文处理方面展现出令人惊喜的能力。经过实际测试&#xff0c;这款模型特别擅长…...

编程新知 2026/4/5 5:53:39

OpenClaw+gemma-3-12b-it：个人财务数据自动整理与分析

OpenClawgemma-3-12b-it&#xff1a;个人财务数据自动整理与分析 1. 为什么需要本地化财务自动化 上个月整理信用卡账单时&#xff0c;我对着十几页PDF和五个不同银行的Excel表格发呆了两小时。手动分类餐饮、交通、购物支出的过程不仅枯燥&#xff0c;还容易出错。更麻烦的是…...

编程新知 2026/4/5 4:58:30

lift off工艺中电子束蒸发镀膜的优势与磁控溅射的局限性对比

1. 电子束蒸发与磁控溅射的基本原理对比 在半导体制造领域&#xff0c;lift off工艺是一种常用的图形化金属层制备方法。简单来说&#xff0c;就是先在晶圆表面涂覆光刻胶并曝光显影形成图案&#xff0c;然后沉积金属薄膜&#xff0c;最后通过化学溶剂剥离光刻胶及附着在其上的…...

编程新知 2026/4/5 4:48:24

Rocky Linux 9下用清华源5分钟搞定GitLab-CE安装（附防火墙配置）

Rocky Linux 9下用清华源5分钟搞定GitLab-CE安装&#xff08;附防火墙配置&#xff09; 在当今的软件开发协作中&#xff0c;GitLab已经成为团队不可或缺的代码管理和持续集成平台。对于国内开发者而言&#xff0c;如何在Rocky Linux 9系统上快速部署GitLab-CE&#xff0c;同时…...

编程新知 2026/4/5 3:29:27

5分钟搞定！用WebRTC将ESP32-CAM视频流嵌入网页（附完整代码）

5分钟实现ESP32-CAM网页视频监控&#xff1a;WebRTC零基础实战指南 当你想在厨房查看烤箱状态&#xff0c;或是在办公室监控工作室3D打印进度时&#xff0c;基于浏览器的实时视频方案无疑是最便捷的选择。ESP32-CAM搭配WebRTC技术&#xff0c;能让你用最少的代码量构建低延迟监…...

编程新知 2026/4/5 2:26:37

OpenClaw多模态实践：Qwen3-4B结合截图识别的表单处理

OpenClaw多模态实践&#xff1a;Qwen3-4B结合截图识别的表单处理 1. 为什么需要截图识别与表单处理 在日常办公中&#xff0c;我们经常遇到这样的场景&#xff1a;收到一张包含表格数据的截图&#xff0c;需要手动将数据录入到Excel或数据库中。这个过程不仅耗时耗力&#xf…...

编程新知 2026/4/5 2:24:37

三维重建“贪吃蛇”算法揭秘：Advancing Front如何像拼图一样构建表面？

三维重建中的“贪吃蛇”算法&#xff1a;Advancing Front如何像拼图一样构建表面&#xff1f; 想象一下玩拼图游戏时&#xff0c;你总是从边缘开始&#xff0c;逐步向中心推进。Advancing Front算法正是以这种动态边界扩展的方式&#xff0c;将散乱的点云数据转化为连续的三维表…...

编程新知 2026/4/5 2:10:10

避坑指南：ERA5数据GRIB转Hysplit/MeteInfo格式，这些细节错了白算一周

ERA5气象数据格式转换实战&#xff1a;从GRIB到Hysplit/MeteInfo的高效避坑手册 当你在深夜盯着屏幕前运行了72小时的后向轨迹计算突然报错终止&#xff0c;或是发现转换后的数据维度与模型要求完全不匹配时&#xff0c;那种绝望感每个气象科研人员都深有体会。本文源自三个实验…...

编程新知 2026/4/5 2:06:02

3步突破语言壁垒：Translumo让屏幕内容即时转译

3步突破语言壁垒&#xff1a;Translumo让屏幕内容即时转译 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors/tr/Translumo 当你沉浸在一款…...

编程新知 2026/4/5 0:42:22

LLMLingua未来展望：AI推理加速技术的终极发展趋势

LLMLingua未来展望&#xff1a;AI推理加速技术的终极发展趋势 【免费下载链接】LLMLingua [EMNLP23, ACL24] To speed up LLMs inference and enhance LLMs perceive of key information, compress the prompt and KV-Cache, which achieves up to 20x compression with minima…...

编程新知 2026/4/4 23:53:39