网站建设 手机app/网站查询是否安全
html5文档基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文档标题</title>
</head>
<body>文档正文部分
</body>
</html>
html文档可分为文档头和文档体两部分,文档头包括网页语言、关键字、字符集的定义等信息,文档体当中的内容就是页面里面要显示的信息
html文档的基本结构由三对标签负责,这三对标签分别是<html>,<head>,<body>
title的内容会显示在导航栏里
标签分为单标签与多标签
元素可分为三类:元信息元素、语义元素和无语义元素——元信息元素用来描述文档自身信息,meta元素定义元信息,其常用属性如下:
- charset:定义文档的字符编码,常用UTF-8
- content:定义name和http-equiv相关的元信息
- name:关联content的名称(常用的有keywords关键字、author作者名、description页面描述)
其中,name的参数格式:
例子:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="这是一个关于HTML和前端开发的教程页面。"><meta name="keywords" content="HTML, CSS, JavaScript, 前端开发"><meta name="author" content="Kimi"><meta name="robots" content="index, follow"><title>前端开发教程</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>欢迎来到前端开发教程</h1><p>这里将介绍HTML、CSS和JavaScript的基础知识。</p>
</body>
</html>
语义元素又可分为块级元素、行内(内联)元素、行内块元素等等..
块级元素指的是本身属性为display:block的元素。通常用于:大结构布局的搭建。
特点:
1.独占一行
2.可以直接控制相关元素
3.在不设置宽度的情况下,其宽度为其父级宽度
4.在不设置高度的情况下,其高度为其本身的内容高度
行内元素也称内联元素,是指本身属性为display:inline元素行内元素可以与相邻的行内元素在同一行,对宽、高属性不生效,通常使用块级元素来进行文字、小图标(小结构)的搭建。
1.与其他内联元素从左到右在同一行显示
2.无法控制竖直的margin和padding
3.行内元素的行高,由本身内容(文字、图片)的大小决定
4.不能在行内嵌套块级元素
常见的css有:
display:block—块级元素
display:inline—内联元素
display:inline-block—内联块元素,表现为同行显示并且可以修改宽、高、内外边距等属性
行内块元素:(就是内联块元素)
HTML5新增结构语义元素
HTML5引入了许多新的语义结构元素,这些元素的主要作用是为网页的结构提供更清晰、更明确的语义化标记。语义化标记不仅有助于开发者更好地理解代码结构,还能提升网页的可访问性、搜索引擎优化(SEO)以及维护性。以下是HTML5新增的一些主要语义结构元素及其用途:
1. <header>
• 用途:表示页面或文章的头部区域,通常包含网站的标志、导航栏、标题等内容。
• 示例:
<header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav>
</header>
• 优点:明确标识页面的头部区域,便于屏幕阅读器识别,提升可访问性。
2. <nav>
• 用途:表示页面的导航链接部分,通常用于网站的菜单栏或导航栏。
• 示例:
<nav><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">支持</a></li><li><a href="#">联系我们</a></li></ul>
</nav>
• 优点:明确标识导航区域,便于搜索引擎识别导航结构,提升SEO效果。
3. <main>
• 用途:表示页面的主要内容区域,一个页面中只能有一个<main>元素。
• 示例:
<main><article><h2>文章标题</h2><p>文章内容...</p></article><aside><h3>相关文章</h3><ul><li><a href="#">相关文章1</a></li><li><a href="#">相关文章2</a></li></ul></aside>
</main>
• 优点:明确标识页面的核心内容,便于屏幕阅读器和搜索引擎识别主要内容区域。
4. <article>
• 用途:表示一个独立的、可独立分发的内容单元,如博客文章、新闻报道、论坛帖子等。
• 示例:
<article><header><h2>文章标题</h2><p>作者:张三</p></header><section><h3>引言</h3><p>文章引言部分...</p></section><section><h3>正文</h3><p>文章正文内容...</p></section>
</article>
• 优点:明确标识独立的内容单元,便于内容的复用和分发。
5. <section>
• 用途:表示文档中的一个独立的章节或逻辑部分,通常包含标题。
• 示例:
<section><h2>章节标题</h2><p>章节内容...</p>
</section>
• 优点:将内容划分为逻辑部分,便于结构化阅读和搜索引擎索引。
6. <aside>
• 用途:表示与页面主要内容相关的辅助信息,如侧边栏、广告、相关链接等。
• 示例:
<aside><h3>广告</h3><p>广告内容...</p>
</aside>
• 优点:明确标识辅助信息,便于区分主要内容和辅助内容。
7. <footer>
• 用途:表示页面或文章的底部区域,通常包含版权信息、联系方式、网站地图等。
• 示例:
<footer><p>© 2025 版权所有</p><address><a href="mailto:example@example.com">联系我们</a></address>
</footer>
• 优点:明确标识页面的底部区域,便于屏幕阅读器识别。
8. <figure> 和 <figcaption>
• 用途:<figure>用于包含图像、图表、代码片段等独立内容,<figcaption>用于为<figure>提供标题或说明。
• 示例:
<figure><img src="image.jpg" alt="图片描述"><figcaption>图片标题</figcaption>
</figure>
• 优点:明确标识图像和其他媒体内容及其说明,便于语义化标记。
9. <details> 和 <summary>
• 用途:<details>用于创建可折叠的内容区域,<summary>用于提供折叠区域的标题。
• 示例:
<details><summary>点击展开</summary><p>这里是隐藏的内容。</p>
</details>
• 优点:提供交互式内容区域,增强用户体验。
总结
HTML5新增的语义结构元素的主要作用是:
1. 提高可读性和可维护性:通过语义化的标记,代码结构更清晰,便于开发者阅读和维护。
2. 提升可访问性:屏幕阅读器可以更好地理解页面结构,帮助视障用户更好地访问网页内容。
3. 优化搜索引擎排名(SEO):搜索引擎可以更准确地识别页面的主要内容和结构,从而提高网页的搜索排名。
4. 增强用户体验:通过语义化的标记,可以更好地利用CSS和JavaScript实现更丰富的交互效果。
总之,语义结构元素是HTML5的重要进步,它们不仅让代码更加规范,还为网页的可访问性和SEO带来了显著的提升。
无语义元素
确实,无语义元素(如<div>和<span>)和语义元素都可以用来包裹内容,从功能上来说,它们都可以实现布局和展示内容的目的。然而,它们之间存在本质的区别,主要体现在语义化和可访问性上,而不仅仅是功能实现。
1. 功能实现的相似性
从功能上来说,无语义元素和语义元素都可以用来包裹内容,并且可以通过CSS和JavaScript进行样式和行为的控制。例如:
使用<div>(无语义元素)
<div><h1>标题</h1><p>这是一个段落。</p>
</div>
使用<section>(语义元素)
<section><h1>标题</h1><p>这是一个段落。</p>
</section>
在上面的两个例子中,<div>和<section>都可以包裹内容,并且可以通过CSS进行样式控制。从功能上来说,它们确实可以实现相同的效果。
2. 语义化的重要性
尽管功能上相似,但语义元素和无语义元素在语义化和可访问性上有本质的区别。
(1)语义化
• 语义元素:语义元素(如<header>、<nav>、<main>、<section>等)自带语义含义,能够明确表达其内容的性质和用途。例如:
• <header>表示页面的头部区域。
• <nav>表示导航链接部分。
• <main>表示页面的主要内容区域。
• <section>表示文档中的一个独立章节。
• <article>表示一个独立的内容单元,如博客文章。
• <aside>表示与主要内容相关的辅助信息。
• <footer>表示页面的底部区域。
• 无语义元素:无语义元素(如<div>和<span>)本身没有语义含义,它们只是通用的容器,用于布局和样式控制。例如:
• <div>是一个块级容器,用于包裹内容。
• <span>是一个行内容器,用于对文本进行样式控制。
(2)可访问性
• 语义元素:语义元素能够被屏幕阅读器等辅助工具更好地理解,从而为视障用户和其他有特殊需求的用户提供更友好的体验。例如,屏幕阅读器可以识别<header>、<nav>、<main>等元素,帮助用户快速导航到页面的不同部分。
• 无语义元素:无语义元素(如<div>和<span>)本身没有语义含义,屏幕阅读器无法理解其内容的结构和层次,只能逐个元素读取内容。这会导致视障用户难以理解页面的结构和内容。
3. 搜索引擎优化(SEO)
• 语义元素:搜索引擎(如Google、Bing等)能够更好地理解页面的结构和内容,从而提高页面的搜索排名。例如,搜索引擎可以识别<header>、<main>、<footer>等元素,从而更准确地提取页面的主要内容和结构。
• 无语义元素:搜索引擎无法准确理解页面的结构和内容,可能导致搜索排名下降。
4. 代码的可读性和可维护性
• 语义元素:使用语义元素的代码结构更清晰,易于理解。开发者可以快速定位和修改代码,提高开发效率。例如:
<header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav>
</header>
<main><article><header><h2>文章标题</h2><p>作者:张三</p></header><section><h3>引言</h3><p>文章引言部分...</p></section><section><h3>正文</h3><p>文章正文内容...</p></section></article><aside><h3>相关文章</h3><ul><li><a href="#">相关文章1</a></li><li><a href="#">相关文章2</a></li></ul></aside>
</main>
<footer><p>© 2025 版权所有</p><address><a href="mailto:example@example.com">联系我们</a></address>
</footer>
这种方式更直观,易于理解和维护。
• 无语义元素:使用无语义元素的代码结构较为模糊,需要通过类名或ID来理解代码的结构和用途。例如:
<div class="header"><h1>网站标题</h1><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></div>
</div>
<div class="main"><div class="article"><div class="header"><h2>文章标题</h2><p>作者:张三</p></div><div class="section"><h3>引言</h3><p>文章引言部分...</p></div><div class="section"><h3>正文</h3><p>文章正文内容...</p></div></div><div class="aside"><h3>相关文章</h3><ul><li><a href="#">相关文章1</a></li><li><a href="#">相关文章2</a></li></ul></div>
</div>
<div class="footer"><p>© 2025 版权所有</p><div class="address"><a href="mailto:example@example.com">联系我们</a></div>
</div>
这种方式需要开发者查看类名来理解代码的结构,增加了理解和维护的难度。
总结
虽然无语义元素和语义元素都可以用来包裹内容并实现布局,但它们在语义化、可访问性、搜索引擎优化(SEO)以及代码的可读性和可维护性上有本质的区别。语义元素通过明确的语义含义,帮助开发者、辅助工具和搜索引擎更好地理解页面结构和内容,从而实现更高效、更友好的用户体验。因此,建议在开发中优先使用语义元素,以提升网页的整体质量和用户体验。
相关文章:

html基本结构和常见元素
html5文档基本结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>文档标题</title> </head> <body>文档正文部分 </body> </html> html文档可分为文档头和文档体…...

JAVAweb学习日记(十) Mybatis入门操作
一、介绍 二、快速入门程序 三、入门-数据库连接池 四、入门-lombok工具包...

从Transformer到世界模型:AGI核心架构演进
文章目录 引言:架构革命推动AGI进化一、Transformer:重新定义序列建模1.1 注意力机制的革命性突破1.2 从NLP到跨模态演进1.3 规模扩展的黄金定律 二、通向世界模型的关键跃迁2.1 从语言模型到认知架构2.2 世界模型的核心特征2.3 混合架构的突破 三、构建…...

Rk3588芯片介绍(含数据手册)
芯片介绍:RK3588是一款低功耗,高性能的处理器,适用于基于arm的PC和边缘计算设备,个人移动互联网设备和其他数字多媒体应用,集成了四核Cortex-A76和四核Cortex-A55以及单独的NEON协处理器 视频处理方面:提供…...

java开发面试自我介绍模板_java面试自我介绍3篇
java 面试自我介绍 3 篇 java 面试自我介绍篇一: 我叫赵,我的同学更都喜欢称呼我的英文名字,叫,六月的 意思,是君的谐音。我来自安徽的市,在 21 年我以市全市第一名 的成绩考上了大学,…...

w193基于Spring Boot的秒杀系统设计与实现
🙊作者简介:多年一线开发工作经验,原创团队,分享技术代码帮助学生学习,独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文…...

chrome浏览器chromedriver下载
chromedriver 下载地址 https://googlechromelabs.github.io/chrome-for-testing/ 上面的链接有和当前发布的chrome浏览器版本相近的chromedriver 实际使用感受 chrome浏览器会自动更新,可以去下载最新的chromedriver使用,自动化中使用新的chromedr…...

【HTML入门】Sublime Text 4与 Phpstorm
文章目录 前言一、环境基础1.Sublime Text 42.Phpstorm(1)安装(2)启动Phpstorm(3)“启动”码 二、HTML1.HTML简介(1)什么是HTML(2)HTML版本及历史(3)HTML基本结构 2.HTML简单语法(1)HTML标签语法(2)HTML常用标签(3)表格(4)特殊字符 总结 前言 在当今的软件开发领域,…...

Python----Python高级(并发编程:进程Process,多进程,进程间通信,进程同步,进程池)
一、进程Process 拥有自己独立的堆和栈,既不共享堆,也不共享栈,进程由操作系统调度;进程切换需要的资源很最大,效率低。 对于操作系统来说,一个任务就是一个进程(Process)ÿ…...

汽车自动驾驶AI
汽车自动驾驶AI是当前汽车技术领域的前沿方向,以下是关于汽车自动驾驶AI的详细介绍: 技术原理 感知系统:自动驾驶汽车通过多种传感器(如激光雷达、摄像头、雷达、超声波传感器等)收集周围环境的信息。AI算法对这些传感…...

Linux之安装MySQL
1、查看系统当前版本是多少位的 getconf LONG_BIT2.去官网下载对应的MYSQL安装包 这里下载的是8版本的,位数对应之前的64位 官网地址:https://downloads.mysql.com/archives/community/ 3.上传压缩包 4.到对应目录下解压 tar -xvf mysql-8.0.26-lin…...

说说Redis的内存淘汰策略?
大家好,我是锋哥。今天分享关于【说说Redis的内存淘汰策略?】面试题。希望对大家有帮助; 说说Redis的内存淘汰策略? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 提供了多种内存淘汰策略,用于在内存达到限制时决定如何…...

SQL范式与反范式_优化数据库性能
1. 引言 什么是SQL范式 SQL范式是指数据库设计中的一系列规则和标准,旨在减少数据冗余、提高数据完整性和一致性。常见的范式包括第一范式(1NF)、第二范式(2NF)、第三范式(3NF)和BCNF(Boyce-Codd范式)。 什么是SQL反范式 SQL反范式是指在满足范式要求的基础上,有…...

从BIO到NIO:Java IO的进化之路
引言 在 Java 编程的世界里,输入输出(I/O)操作是基石般的存在,从文件的读取写入,到网络通信的数据传输,I/O 操作贯穿于各种应用程序的核心。BIO(Blocking I/O,阻塞式 I/O࿰…...

Mysql:数据库
Mysql 一、数据库概念?二、MySQL架构三、SQL语句分类四、数据库操作4.1 数据库创建4.2 数据库字符集和校验规则4.3 数据库修改4.4 数据库删除4.4 数据库备份和恢复其他 五、表操作5.1 创建表5.2 修改表5.3 删除表 六、表的增删改查6.1 Create(创建):数据新增1&#…...

深度学习系列--01.入门
一.深度学习概念 深度学习(Deep Learning)是机器学习的分支,是指使用多层的神经网络进行机器学习的一种手法抖音百科。它学习样本数据的内在规律和表示层次,最终目标是让机器能够像人一样具有分析学习能力,能够识别文字…...

【Elasticsearch】`auto_date_histogram`聚合功能详解
1.功能概述 auto_date_histogram是 Elasticsearch 提供的一种时间分桶聚合功能,它可以根据数据分布自动调整分桶的间隔,以生成指定数量的分桶。与传统的date_histogram不同,auto_date_histogram不需要用户手动指定时间间隔,而是根…...

php7.3安装php7.3-gmp扩展踩坑总结
环境: 容器里面为php7.3.3版本 服务器也为php7.3.3-14版本,但是因为业务量太大需要在服务器里面跑脚本 容器里面为 alpine 系统,安装各种扩展 服务器里面开发服为 ubuntu 16.04.7 LTS (Xenial Xerus) 系统 服务器线上为 ubuntu 20.04.6 LTS (…...

7. k8s二进制集群之Kube ApiServer部署
创建kube工作目录(仅在主节点上创建即可)同样在我们的部署主机上创建apiserver证书请求文件根据证书文件生成apiserver证书仅接着创建TLS所需要的TOKEN创建apiserver服务的配置文件(仅在主节点上创建即可)创建apiserver服务管理配置文件对所有master节点分发证书 & TOK…...

QT笔记——多语言翻译
文章目录 1、概要2、多语言切换2.1、结果展示2.2、创建项目2.2、绘制UI2.2、生成“.st”文件2.4、生成“.qm”文件2.5、工程demo 1、概要 借助QT自带的翻译功能,实现实际应用用进行 “多语言切换” 2、多语言切换 2.1、结果展示 多语言切换 2.2、创建项目 1、文件…...

【2025】camunda API接口介绍以及REST接口使用(3)
前言 在前面的两篇文章我们介绍了Camunda的web端和camunda-modeler的使用。这篇文章主要介绍camunda结合springboot进行使用,以及相关api介绍。 该专栏主要为介绍camunda的学习和使用 🍅【2024】Camunda常用功能基本详细介绍和使用-下(1&…...

js面试some和every的区别
1.基础使用 some和every 都是数组的一个方法let num [1,2,3,4,5,6] let flag1 num.some((item,index,array)> item > 2)let flag2 num.every((item,index, array)> item > 2)1.some 遍历判断中是符合条件的值 一旦找到则不会继续迭代下去 直接返回 2.every 遍历…...

Vue 中如何嵌入可浮动的第三方网页窗口(附Demo)
目录 前言1. 思路Demo2. 实战Demo 前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF 1. 思路Demo 以下Demo提供思路参考,需要结合实际自身应用代码 下述URL的链接使用百度替代! 方式 1…...

【大数据技术】词频统计样例(hadoop+mapreduce+yarn)
词频统计(hadoop+mapreduce+yarn) 搭建完全分布式高可用大数据集群(VMware+CentOS+FinalShell) 搭建完全分布式高可用大数据集群(Hadoop+MapReduce+Yarn) 在阅读本文前,请确保已经阅读过以上两篇文章,成功搭建了Hadoop+MapReduce+Yarn的大数据集群环境。 写在前面 Wo…...

java进阶知识点
java回收机制 浅谈java中的反射 依赖注入的简单理解 通过接口的引用和构造方法的表达,将一些事情整好了反过来传给需要用到的地方~ 这样做得好处:做到了单一职责,并且提高了复用性,解耦了之后,任你如何实现…...

深度学习系列--02.损失函数
一.定义 损失函数(Loss Function)是机器学习和深度学习中用于衡量模型预测结果与真实标签之间差异的函数,它在模型训练和评估过程中起着至关重要的作用 二.作用 1.指导模型训练 提供优化方向:在训练模型时,我们的目…...

构建一个数据分析Agent:提升分析效率的实践
在上一篇文章中,我们讨论了如何构建一个智能客服Agent。今天,我想分享另一个实际项目:如何构建一个数据分析Agent。这个项目源于我们一个金融客户的真实需求 - 提升数据分析效率,加快决策速度。 从分析师的痛点说起 记得和分析师团队交流时的场景: 小张ÿ…...

在K8S中,如何把某个worker节点设置为不可调度?
在Kubernetes中,如果你想要把一个worker节点设置为不可调度,意味着你不想让Kubernetes调度器在这个节点上调度新的Pod。这通常用于维护或升级节点,或者当节点遇到硬件故障或性能问题时,要将某个worker节点设置为不可调度。 方法1…...

硬件电路基础
目录 1. 电学基础 1.1 原子 1.2 电压 1.3 电流 1.电流方向: 正极->负极,正电荷定向移动方向为电流方向,与电子定向移动方向相反。 2.电荷(这里表示负电荷)运动方向: 与电流方向相反 1.4 测电压的时候 2. 地线…...

5 前端系统开发:Vue2、Vue3框架(上):Vue入门式开发和Ajax技术
文章目录 前言一、Vue框架(简化DOM操作的一个前端框架):基础入门1 Vue基本概念2 快速入门:创建Vue实例,初始化渲染(1)创建一个入门Vue实例(2)插值表达式:{{表…...