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

详解HTML5语言

文章目录

  • 前言
    • 任务一 认识HTML5
      • 任务描述:
      • 知识一 HTML5基础知识
    • 任务二 HTML 5语义元素
      • 任务描述:
      • 知识一 HTML5新增结构元素
      • 知识二 HTML5文本语义元素
  • 总结


前言

HTML5是一个新的网络标准,现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用(RIA)对Flash、Silverlight、JavaFX等的依赖,并且提供更多能有效增强网络应用的API。HTML5应用越来越广泛,移动设备例如iPhone、android等提供了对HTML5的支持。

任务一 认识HTML5

任务描述:

开始用HTML5设计网页之前,首先要掌握HTML5基础知识,如HTML5定义、浏览器的支持情况、编辑工具和文档格式,同时,要厘清HTML5与之前版本文档结构方法的不同,为HTML5构建网站准备必要的知识。

知识一 HTML5基础知识

1.什么是HTML5
HTML5 是超文本标签语言 (Hypertext Markup Language, HTML) 的最新版本,也是迄今为止最为激进的版本。HTML5比较其引人注目的一些新功能:
用于音频和视频的内置多媒体标签
用于在浏览器中绘制内容的画布标签
灵活的形式,允许通过使用必要属性完成诸如认证之类的操作。
HTML5使用一组新的结构化标签改进了 HTML文档构建方法。新标签重点关注如何将一个 HTML文档分成几个逻辑部分,标签名称对计划包含的内容类型进行了描述。
2. 浏览器支持情况
HTML5是一组独立标准的组合,有些标准已经得到一些浏览器很好的支持,有些标准则没有得到支持,不过,近年来主流浏览器的最新版本支持度越来越高,以下浏览器支持HTML5的绝大部分标准。
谷歌Chrome8及更高版本
Firefox3.5及更高版本
Safari4及更高版本
Opera10.5及更高版本
IE9及更高版本
注意:智能手机中绝大多数的浏览器对HTML5标准有很好的支持,HTML5开发移动web更为高效便捷。
3. 编写HTML5的工具
编写HTML5可以使用HTML之前的工具,如记事本、Notepad和Editplus等文本编辑器,当然,使用可视化编辑工具Dreamweaver,可以快速建立HTML5文档模板,也是很好的选择。本教材主要使用SublimeText3编辑器,Sublime Text3是一款非常实用的码编辑器,是一个轻量、简洁、高效、跨平台的编辑器,界面设置非常人性化,左边是代码缩略图,右边是代码区域,可以在左边的代码缩略图区域轻松定位程序代码的位置,高亮色彩功能非常方便编程工作。SublimeText3编辑器界面如图2.1所示。
在这里插入图片描述
4. HTML5基本文档格式
HTML5文档模板文件主要代码如下:
下面展示一些 内联代码片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>……
</body>
</html>
其中第一行<!DOCTYPE html>为文档类型声明,<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
第二行HTML 的 lang 属性可用于网页或部分网页的语言,这对搜索引擎和浏览器是有帮助的。“en”表示英文,“zh”则表示中文。
第四行<meta charset="UTF-8">中设置字符编码为UTF-8,UTF-8是国际字符编码,也就是独立于任何一种语言,任何语言都可以使用。

任务二 HTML 5语义元素

任务描述:

HTML5与之前的版本一个最大不同,就是新增了语义和结构元素,因此,全面理解、掌握这些语义和结构元素,是构建HTML5网站的重要环节。部分元素有完整的示例代码,要亲自动手,编写代码,在浏览器中运行示例,最终掌握这些元素的具体用法。

知识一 HTML5新增结构元素

HTML5 通过提供一组标签更清晰地定义构成某个 HTML 文档的主要内容块。不管Web页面最终如何显示内容,大多数Web页面都是由常见页面和元素的不同组合构成的。
1.section元素

元素用来定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。 使用
元素进行页面文档结构的划分,示例代码如下所示。

<section><h1>1 HTML5构建网站</h1><section><h2>任务一 认识HTML文档结构</h2><section><h3>1.1 知识一 HTML4文档结构方法</h3>(1.1的正文)<h3>1.2 知识二 HTML5文档结构方法</h3>(1.2的正文)</section><h2>任务二  HTML 5结构元素与大纲</h2><section><h3>2.1 知识一 HTML5新增结构元素</h3>(2.1的正文)<h3>2.2 知识二 HTML5中的大纲</h3>(2.2的正文)</section></section>
</section>

注意: 当描述一件具体的事物的时候,通常鼓励使用article来代替section;当使用section时,仍然可以使用h1来作为标题,而不用担心它所处的位置,以及其它地方是否用到;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。
2. nav元素
nav元素代表页面的一个部分,是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。示例代码如下所示。

下面展示一些 内联代码片

<nav><ul><li>网络技术</li><li>多媒体设计</li><li>动漫设计</li></ul>
</nav>

3.aside元素
aside元素用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告、成组的链接、侧边栏等等。示例代码如下所示。

 <aside><h1>教材简介</h1><p>《HTML5+CSS3网页制作与实训》</p></aside>
4.header元素
元素定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。通常header元素至少包含(但不局限于)一个标题标记,还可以包括hgroup元素,还可以包括表格内容、标识、搜索表单、nav导航等。示例代码如下所示。 下面展示一些 `内联代码片`。
<header><hgroup><h1>网站标题</h1><h1>网站副标题</h1></hgroup>
</header>

5.footer元素
footer元素定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。作为页面的页脚时,一般包含了版权、相关文件和链接。它和header元素使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。示例代码如下所示。

 <footer>Copyright@张学义</footer>

6.hgroup元素
hgroup元素是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中有连续的h系列的标签元素,则可以用hgroup将它们括起来。示例代码如下所示。

 <hgroup><h1>这是一篇介绍HTML 5结构标签的文章</h1><h2>HTML 5的革新</h2></hgroup>

7.figure 元素
用于对元素进行组合。多用于图片与图片描述组合。示例代码如下所示。

 <figure><img src="img.gif" alt="figure元素" title="figure元素" /><figcaption>这儿是图片的描述信息</figcaption></figure>

知识二 HTML5文本语义元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素无需考虑内容如

和 标签元素;语义元素清楚的定义了它的内容如、、 标签元素。
1.time元素
time元素定义日期、时间文本。实例代码如下所示:

<!doctype html>
<html>
<head><title>time</title>
</head>
<body><p>我的生日和 <time datetime="1980-02-14">情人节</time> 是同一天 ①</p><p>我每天 <time>9:00</time> 上班	 ②</p><article><p>我是 article 的内容</p><footer>本 article 的发布日期是 <time datetime="2011-09-14" pubdate>昨天</time>								③								</footer></article><p>本html的发布日期是<time datetime="2011-09-15T12:46:46" pubdate>今天</time>								④</p><script type="text/javascript">// 目前无浏览器支持 valueAsDatealert(document.getElementsByTagName("time")[0].valueAsDate);  ⑤</script>
</body>
</html>

代码解释:
① time用来定义日期、时间文本。
② datetime 用来定义元素的日期时间,如果不设置此属性则必须在time元素的内容中设置日期时间。
③pubdate 属于bool (逻辑)类型,标识 time 是否是发布日期。在 article 中则代表当前 article 的发布日期,否则代表整个 html 的发布日期。
④datetime值中的“T”代表时间(“T”前面是日期,后面是时间)。
⑤valueAsDate 是只读属性,将 time 中的日期时间转换为 Date 对象,目前无浏览器支持。
time元素实例运行效果如图2.8所示。
在这里插入图片描述

2.em元素
定义被强调的文本(一般浏览器会渲染斜体)(em是emphasis的缩写)。实例代码如下所示:

<!doctype html>
<html>
<head><title>em</title>
</head>
<body><em>被强调的文本(一般浏览器会渲染斜体)</em>
</body>
</html>

em元素实例运行效果如图所示。
在这里插入图片描述

3.mark元素
定义一个标记文本,用于醒目显示。实例代码如下所示:

<!doctype html>
<html>
<head><title>mark</title>
</head>
<body><p>我觉得咖啡的味道像 <mark>感冒冲剂</mark> </p>
</body>
</html>
  1. s元素
    定义不再精确或不再相关的文本(s 是 strike 的缩写)。实例代码如下所示:
<!doctype html>
<html>
<head><title>s</title>
</head>
<body><p>windows 8 平板电脑</p><p><s>原价:5000元</s></p><p><strong>促销价:5元</strong></p>
</body>
</html>

效果如图所示。
在这里插入图片描述
5. strong元素
定义重要的文本(一般浏览器会渲染为粗体)。实例代码如下所示:

<!doctype html>
<html>
<head><title>strong</title>
</head>
<body><strong>重要的文本(一般浏览器会渲染为粗体)</strong>
</body>
</html>

strong元素实例运行效果如图所示。
在这里插入图片描述
6. small元素
定义小号文本。实例代码如下所示:

<!doctype html>
<html>
<head><title>small</title>
</head>
<body><small>小号文本</small>
</body>
</html>

small元素实例运行效果如图所示。
在这里插入图片描述

总结

本文讲解了HTML5的基本概念及结构网页的方法,然后讲解了HTML5的结构元素和文本语义元素,重点介绍了HTML5新元素,希望你对HTML5有一个全面的认识和掌握。

相关文章:

详解HTML5语言

文章目录 前言任务一 认识HTML5任务描述&#xff1a;知识一 HTML5基础知识 任务二 HTML 5语义元素任务描述&#xff1a;知识一 HTML5新增结构元素知识二 HTML5文本语义元素 总结 前言 HTML5是一个新的网络标准&#xff0c;现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHT…...

docker compose一键启动ES集群和kibana

集群启用了XPACK后&#xff0c;只有第一次可以启动成功。要是宕机了。就启动不了了。&#xff08;除非删除data目录所有数据&#xff09;生产环境 启用了后 建议配置 自定义证书。 services:es01:image: "docker.elastic.co/elasticsearch/elasticsearch:7.17.25"co…...

遗传算法与深度学习实战(25)——使用Keras构建卷积神经网络

遗传算法与深度学习实战&#xff08;25&#xff09;——使用Keras构建卷积神经网络 0. 前言1. 卷积神经网络基本概念1.1 卷积1.2 步幅1.3 填充1.4 激活函数1.5 池化 2. 使用 Keras 构建卷积神经网络3. CNN 层的问题4. 模型泛化小结系列链接 0. 前言 卷积神经网络 (Convolution…...

pytest+allure生成报告显示loading和404

pytestallure执行测试脚本后&#xff0c;通常会在电脑的磁盘上建立一个临时文件夹&#xff0c;里面存放allure测试报告&#xff0c;但是这个测试报告index.html文件单独去打开&#xff0c;却显示loading和404, 这个时候就要用一些办法来解决这个报告显示的问题了。 用命令产生…...

为何划分 Vue 项目结构组件?划分结构和组件解决了什么问题?为什么要这么做?

在一个大型 Vue 项目中,合理的目录结构和组件划分至关重要。良好的结构可以提高开发效率,减少维护成本,并使得团队合作更加顺畅。下面我将详细讲解如何在 Vue 项目中进行目录结构和组件划分,并结合实际项目代码示例进行说明。 1. 为什么要划分结构和组件? 1.1 提高可维护…...

springboot中使用mongodb完成评论功能

pom文件中引入 <!-- mongodb --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> yml中配置连接 data:mongodb:uri: mongodb://admin:1234561…...

Dubbo的RPC泛化调用

目录 一、RPC泛化调用的应用场景 二、Dubbo RPC泛化调用的实现原理 三、Dubbo RPC泛化调用的实现步骤 四、示例代码 五、泛化调用怎么发现提供该接口的服务及服务的IP和端口&#xff1f; Dubbo的RPC泛化调用是一种在调用方没有服务方提供的API的情况下&#xff0c;对服务方…...

【k8s深入理解之 Scheme】全面理解 Scheme 的注册机制、内外部版本、自动转换函数、默认填充函数、Options等机制

参考 【k8s基础篇】k8s scheme3 之序列化_基于schema进行序列化-CSDN博客【k8s基础篇】k8s scheme4 之资源数据结构与资源注册_kubernetes 的scheam-CSDN博客常见问题答疑 【k8s深入理解之 Scheme 补充-1】理解 Scheme 中资源的注册以及 GVK 和 go 结构体的映射-CSDN博客【k8s深…...

接口性能优化宝典:解决性能瓶颈的策略与实践

目录 一、直面索引 &#xff08;一&#xff09;索引优化的常见场景 &#xff08;二&#xff09;如何检查索引的使用情况 &#xff08;三&#xff09;如何避免索引失效 &#xff08;四&#xff09;强制选择索引 二、提升 SQL 执行效率 &#xff08;一&#xff09;避免不必…...

雨晨 Windows Server 2025 数据中心 极简 26311.5000

文件: 雨晨 Windows Server 2025 数据中心 极简 26311.5000 install.esd 大小: 1740910278 字节 修改时间: 2024年11月29日, 星期五, 19:00:20 MD5: 5B946B9DED569E04917E804B25A0F736 SHA1: E78BB430B3E0397F6ACFEB821CF85EA7CFB5A00F CRC32: B3F76BD7 常规制作旨在测试YCDIS…...

关于IDE的相关知识之三【插件安装、配置及推荐的意义】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于ide插件安装、配置及推荐意义的相关内容…...

JSP+Servlet实现列表分页功能

分享一种最简单的JSPServlet实现分页的方式&#xff01; 旧&#xff1a;无分页功能的查询列表功能&#xff0c;仅供参考&#xff01; Servlet try {Connection conn null;PreparedStatement ps null;ResultSet rs null;List<Dept> arrayList null;conn DBUtil.get…...

操作系统存储器相关习题

1 为什么要配置层次式存储器? 设置多个存储器可以使存储器两端的硬件能并行工作&#xff1b; 采用多级存储系统特别是Cache技术&#xff0c;是减轻存储器带宽对系统性能影响的最佳结构方案&#xff1b; 在微处理机内部设置各种缓冲存储器&#xff0c;减轻对存储器存取的压力。…...

QUICK 调试camera-xml解析

本文主要介绍如何在QUICK QCS6490使能相机模组。QCS6490的相机基于CameraX的框架&#xff0c;只需通过配置XML文件&#xff0c;设置相机模组的相关参数&#xff0c;就可以点亮相机。本文主要介绍Camera Sensor Module XML和Camera Sensor XML配置的解析&#xff0c;这中间需要c…...

【linux】shell脚本编写基础

shell 脚本关键字&#xff1a; 1、变量定义:前后不能空格 输入&#xff1a; zhao"Joe" echo ${zhao} echo "I am ${zhao}" 输出&#xff1a; yuxin I am Joe2、echo 输出 输入&#xff1a; echo "123" 输出&#xff1a; 1233、readonly 定义变…...

STM32 外设简介

STM32 外设简介 STM32 是由意法半导体 (STMicroelectronics) 开发的一系列基于 ARM Cortex 内核的微控制器&#xff0c;广泛应用于嵌入式系统中。STM32 系列的一个重要特点是其丰富而强大的外设模块&#xff0c;支持多种接口和功能&#xff0c;能满足工业控制、物联网、消费电…...

Django-Vue3-Admin - 现代化的前后端分离权限管理系统

项目介绍 Django-Vue3-Admin是一个基于RBAC&#xff08;Role-Based Access Control&#xff09;模型的综合性基础开发平台&#xff0c;专注于权限控制&#xff0c;支持列级别的细粒度权限管理。该项目采用前后端分离架构&#xff0c;技术栈包括: 后端: Django Django REST …...

Cesium K-means自动聚合点的原理

Cesium K-means自动聚合点的原理 Cesium 是一个开源的 JavaScript 库&#xff0c;用于在 Web 环境中创建 3D 地球和地图应用。它能够处理地理空间数据&#xff0c;并允许开发者对大规模的地理数据进行可视化展示。在一些应用中&#xff0c;尤其是当处理大量地理坐标点时&#…...

Vue 项目中如何解决组件之间的循环依赖

前言 在大型 Vue 项目中&#xff0c;组件之间的关系可能会变得非常复杂&#xff0c;甚至会出现循环依赖的问题。循环依赖是指两个或多个模块互相依赖&#xff0c;形成一个闭环。这类问题会导致项目无法正常编译或运行&#xff0c;甚至可能引发意想不到的错误。本文将通过通俗易…...

交通流量预测:基于交通流量数据建立模型

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

【PX4飞控】mavros gps相关话题分析,经纬度海拔获取方法,卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

关于 ffmpeg设置摄像头报错“Could not set video options” 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/148515355 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

可视化预警系统:如何实现生产风险的实时监控?

在生产环境中&#xff0c;风险无处不在&#xff0c;而传统的监控方式往往只能事后补救&#xff0c;难以做到提前预警。但如今&#xff0c;可视化预警系统正在改变这一切&#xff01;它能够实时收集和分析生产数据&#xff0c;通过直观的图表和警报&#xff0c;让管理者第一时间…...

2025-06-08-深度学习网络介绍(语义分割,实例分割,目标检测)

深度学习网络介绍(语义分割,实例分割,目标检测) 前言 在开始这篇文章之前&#xff0c;我们得首先弄明白&#xff0c;什么是图像分割&#xff1f; 我们知道一个图像只不过是许多像素的集合。图像分割分类是对图像中属于特定类别的像素进行分类的过程&#xff0c;即像素级别的…...