HTML5基础语法与标签

news2025/10/31 21:06:28

一、 HTML5介绍

  • HTML5是什么？

HTML5是超文本标记语言（HTML）的第五个主要版本，用于描述网页结构和呈现内容。它是到目前为止最新且最强大的HTML版本。

  • HTML5语法约定

1.标签是HTML语法中的基本单位，由尖括号 ​<>​ 包围，每个标签通常有一个起始标签（opening tag）和一个结束标签（closing tag），二者以斜杠 ​/​ 分隔​。
2.HTML文档必须以 ​​ 声明开始，这指明文档类型为HTML5。
3.布局和结构应使用适当的标签，如 ​​标签用于定义HTML文档的根元素，​​标签用于包含网页头部信息，而 ​​ 标签则用于包含页面主体内容。
4.除特殊情况外，标签通常以嵌套的方式使用，以说明标签之间的层次结构。

  • HTML5基础结构

  1. <!DOCTYPE html>文档类型（Document Type Declaration，简称DTD）： DTD是位于HTML文档顶部的声明，用于指定HTML的版本和DTD规范。它向浏览器和验证工具表明文档所使用的标记语言，并帮助浏览器正确解析和渲染网页。

  2. <html>标签： <html>标签是HTML文档的根元素，它将整个文档内容包含在内。它是所有其他HTML元素的父元素。通常情况下，一个HTML文档应该以<html>标签开始并以</html>标签结束。

  3. <head>标签： <head>标签是HTML文档的头部部分，用于包含一些元数据和其他重要配置信息，不会在页面中直接显示给用户。一些常见的<head>标签内容包括：

  • <meta charset="UTF-8">：设置字符编码为UTF-8，确保页面正常显示汉字和特殊字符。
  • <title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
  • 链接外部CSS和JavaScript文件：可以使用<link>标签来引入外部样式表（CSS文件），以及使用<script>标签引入外部的JavaScript文件。
  • 其他元信息，如<meta name="description" content="网页描述">和<meta name="keywords" content="关键词1, 关键词2">等用于搜索引擎优化（SEO）的信息。
  1. <body>标签： <body>标签是HTML文档的主体内容区域，它包含了实际显示给用户的所有内容，如文本、图片、链接、音频、视频等。在<body>标签内编写网页的可见内容，这些内容将会在浏览器中呈现给用户。
    注释：使用<!-- -->可以添加注释，注释不会显示在页面上，而是用于描述HTML代码。
  • HTML5基础标签

  1. <h1> 到 <h6>：用于创建标题，h1是最高级标题，依次类推。

  2. <p>：用于创建段落。

  3. <a>：创建链接，可以使用href属性指定链接的URL地址。

  4. <img>：用于插入图像，在src属性中指定图像的URL地址。

  5. <ul> 和 <li>：分别用于定义无序列表和列表项。

  6. <ol> 和 <li>：分别用于定义有序列表和列表项。

  7. <div>：用于创建块级容器，用于组织和样式化页面结构。

  8. <span>：用于创建行内容器，用于设置样式和包装文本片段。

  9. <form>：用于创建表单，收集用户输入的数据。

  10. <input>：用于在表单中创建输入字段，可以包括文本输入框、单选按钮、复选框等。

  11. <button>：创建按钮，用于触发特定的操作。

  12. <table>、<tr>、<td>：分别用于定义表格、表格行和表格单元格。

  13. <video>：用于在页面上播放视频，通过src属性指定视频的URL。

  14. <audio>：用于在页面上播放音频，通过src属性指定音频的URL。

二、 列表标签

  • <ul>, <ol>, 和 <dl> 是HTML中用于创建列表的三种不同类型的标签。它们在不同的场合下使用：
  1. <ul> (unordered list - 无序列表)：
    • 使用无特定顺序的项目列表时，像一组相关的项目、选项或简单的列表等。
    • 常见的应用场景包括导航菜单、任务列表和项目清单。

示例：

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>
  1. <ol> (ordered list - 有序列表)：
    • 使用有特定顺序的项目列表、需要按顺序编号/计数的元素或顺序排列的信息等。
    • 常见的应用场景包括步骤指南、教程说明、排行榜等。

示例：

<ol>
  <li>步骤1</li>
  <li>步骤2</li>
  <li>步骤3</li>
</ol>
  1. <dl> (description list - 描述列表)：
    • 使用于一组描述术语和其对应的定义/描述之间的关系，表示术语及其解释或说明等。
    • 常见的应用场景包括词汇表、定义术语的页面、技术文档中的参数描述等。

示例：

<dl>
  <dt>术语1：</dt>
  <dd>描述1</dd>
  <dt>术语2：</dt>
  <dd>描述2</dd>
</dl>
  • <ul> 和 <li> 标签嵌套使用的规则：
  1. <li>只能作为<ul>或<ol>标签的直接子元素：<li>标签只能作为无序列表(<ul>)或有序列表(<ol>)的直接子元素出现。不能将<li>标签放在其他元素（如段落<p>）内部作为子元素。

示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>
  1. 可嵌套列表项：<li>标签允许嵌套另一个列表结构，无论是有序列表(<ol>)还是无序列表(<ul>)，即在<li>内部再次使用<ul>或<ol>。

示例：

<ul>
  <li>列表项1</li>
  <li>
    列表项2
    <ul>
      <li>嵌套列表项1</li>
      <li>嵌套列表项2</li>
    </ul>
  </li>
</ul>
  • ul和ol的常见属性有：
  1. type：指定有序列表(<ol>)的计数器样式，在无序列表(<ul>)上没有用。常用的值有：
    • "1"：阿拉伯数字（默认值）。
    • "a"：小写英文字母。
    • "A"：大写英文字母。
    • "i"：小写罗马数字。
    • "I"：大写罗马数字。

示例：

<ol type="A">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>
  1. start：指定有序列表(<ol>)起始项的值，可设置一个开始的整数值。默认情况下，从"1"开始。适用于重新开始编号的列表情况。

示例：

<ol start="3">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>
  1. reversed：为有序列表(<ol>)启用反向计数，即列表按降序进行计数。默认情况下，值为"false"。

示例：

<ol reversed>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

三、 多媒体标签

  • 如何正确地在网页中插入图片，它有哪些常见属性？
    要在网页中插入图片，使用<img>标签。
<img src="imageURL" alt="description">

  1. src属性：用于指定图片的URL地址。它可以引用外部图片资源（绝对或相对URL）或者内嵌的Base64编码数据。

  2. alt属性（可选）：用于提供图片的替代文本。当图片无法加载时，或为了让屏幕阅读器用户了解图像的内容时，替代文本会显示出来。

示例：

<img src="https://example.com/image.jpg" alt="Beautiful scenery">

与图像相关的属性：

  • width 和 height属性：用于指定图像的显示宽度和高度。可以使用固定的像素值，也可以使用百分比等单位。

  • title属性：提供一个鼠标悬停在图像上时显示的标题文本。当鼠标悬停在图片上时，浏览器通常会显示一个工具提示框来展示该标题信息。

  • loading属性：指定图像载入的行为。有值"lazy"时，图像将以延迟加载的方式载入，可以提高页面加载性能。有值"eager"时，图像会立即开始载入。

  • decoding属性：指定浏览器解码图像的行为。有值"async"时，图像将以异步方式解码，可以加快页面加载速度。

  • sizes属性：用于指定图像在不同屏幕尺寸和布局上显示时该采用的大小。它通常与断点容器（<picture>）一起使用。

- 如何在网页上插入音频和视频？
在网页上插入音频和视频，使用<audio>和<video>标签

  1. 插入音频：
<audio src="audio.mp3" controls></audio>

src属性指定音频文件的URL地址，它可以是一个相对或绝对的URL。
controls属性用于显示音频控制器，这样用户就可以播放、暂停、调整音量等。

  1. 插入视频：
<video src="video.mp4" controls width="640" height="480"></video>

src属性指定视频文件的URL地址，可以使用相对或绝对的URL。
controls属性用于显示视频控制器。
width和height属性可设置视频的显示宽度和高度（以像素为单位）。

如果想要支持不同浏览器之间的多种媒体格式，可以使用<source>标签在<audio>或<video>元素内指定多种媒体源示例：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- 可以添加更多媒体源 -->
</video>

- 相对路径和绝对路径是什么意思？

在Web开发中，相对路径和绝对路径是用来引用文件或资源的两种不同方式。

  1. 相对路径：相对路径是一个相对于当前文档所在位置的路径。它描述了目标资源到当前文档的相对位置关系。相对路径可以使用以下方式来表示：

    • ../：父级目录。
    • ./ 或省略：当前目录。
    • 文件名：目标文件所在的相对路径。

示例：

  • <img src="../images/example.jpg">：引用当前文档上一级目录下的images文件夹中的example.jpg图像。
  • <link href="./styles.css" rel="stylesheet">：引用与当前文档相同目录下的styles.css样式表文件。
  1. 绝对路径：绝对路径是指完整的文件或资源引用路径，从根目录（通常是网站主目录）开始的定位方式。没有相对路径的变动，始终从相同的起点出发。

绝对路径一般包含完整的URL，如https://example.com/images/example.jpg或服务器本地的物理路径（如/var/www/html/images/example.jpg）等。

选择相对路径还是绝对路径取决于具体情况和需求：

  • 相对路径适合用于文件内部资源引用，尤其是在访问使用相对路径的网站时，无论是调试、开发还是迁移部署，都能保持正确的引用关系。

  • 绝对路径通常用于引用其他域名或不同服务器上的资源，但在迁移部署时可能需要更新路径。

四、语义化标签

HTML5引入了一些语义化标签，用于更清晰地描述网页的结构和内容的含义，提高页面的可读性、可访问性以及搜索引擎优化。

  1. <header>：定义文档或节的页眉。常用于放置标题、导航栏和引导元素。

  2. <nav>：定义页面的导航部分，通常包含链接、菜单或导航功能。

  3. <main>：定义文档或节的主要内容，一个页面只能拥有一个<main>标签。它用于标识网页的首要内容区域。

  4. <article>：定义独立的、完整的文章或单独的内容块。常用于博客帖子、新闻文章和独立内容的组织。

  5. <section>：定义文档的独立部分或特定的内容区块。它可以是一组相关的内容的容器。

  6. <aside>：定义页面的附属内容区域，通常放置在主要内容之旁边，用作补充说明或其他次要信息。

  7. <footer>：定义文档或节的页脚。通常用于存放版权信息、联系方式或相关链接等。

  8. <figure>：定义自包含的独立媒体元素，通常用于包装图片、插图、图表或类似对象。

  9. <figcaption>：定义与<figure>元素相关联的标题或说明。

  10. <time>：定义日期或时间。常用于表示发布日期、事件时间等具有时间语义的内容。

语义化标签布局

五、 表单标签

HTML5引入了一些新的表单标签，以及增强了现有标签的功能。以下是HTML5中常见的表单标签：

  1. <input>：用于创建多种输入字段。

    • type属性的新值：
      • email：指定输入为电子邮件地址。
      • date：指定输入为日期。
      • url：指定输入为URL地址。
      • tel：指定输入为电话号码。
      • number：指定输入为数值。
      • search：指定输入为搜索。
      • color：指定输入为颜色选择器。
      • range：指定输入为范围选择器。
      • file：用于上传文件等。

  2. <textarea>：用于创建多行文本输入字段，允许用户输入多行文本。

  3. <select>：创建下拉选择列表。

    • <option>：在<select>标签内使用，定义下拉选择列表的选项。

  4. <datalist>：定义预定义选项列表，与输入字段联动。

    • <option>：在<datalist>标签内使用，定义预定义选项。

  5. <output>：用于显示计算或脚本输出的结果。

    • for属性：关联到与之相关的表单字段。

  6. <progress>：表示任务的完成进度。

    • value属性：表示已完成的进度值。
    • max属性：表示总进度的最大值。

  7. <meter>：表示某种标准度量的值。

    • value属性：表示度量值。
    • min属性：表示最小值。
    • max属性：表示最大值。

还有一些新增的表单属性用于增强和完善表单的功能，例如：

  • required：表单字段为必填字段。
  • placeholder：作为输入字段的提示文本。
  • autocomplete：启用或禁用表单字段的自动填充功能。

六、表格标签

HTML5提供了一些新的表格标签，以增强和语义化网页中表格的结构。以下是HTML5中常见的表格标签：

  1. <table>：用于创建表格。

    • 可以包含多个 <tr> 元素来表示行。
    • 可以在行内包含 <th> (表头单元格)或 <td> (数据单元格) 元素。

  2. <thead>：用于定义表格的标头部分。

    • 包含一个或多个 <tr> 元素。

  3. <tbody>：用于定义表格的主体部分。

    • 包含一个或多个 <tr> 元素。

  4. <tfoot>：用于定义表格的页脚部分。

    • 包含一个或多个 <tr> 元素。

  5. <th>：用于定义表格的表头单元格。

    • 通常出现在 <thead> 或 <tfoot> 区域中。
    • 用于标识一个列或多列的标题。

  6. <td>：用于定义表格的数据单元格。

    • 出现在 <tr> 中。
    • 包含实际数据或其他内容。

示例代码如下所示：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总人数：2</td>
    </tr>
  </tfoot>
</table>

上述示例展示了一个简单的表格结构，其中包含了表头、数据行以及页脚。注意<colspan> 属性 ，这个属性用于定义单元格横跨的列数。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QT分屏按钮

QT分屏按钮

效果&#xff1a;按钮弹出分屏选择 // gridpopwidget.h #ifndef GRIDPOPWIDGET_H #define GRIDPOPWIDGET_H#include <QWidget> #include <QMouseEvent>class GridPopWidget : public QWidget {Q_OBJECT public:explicit GridPopWidget(QWidget *parent nullptr);~…
阅读更多...
MySQL第二天

MySQL第二天

MySQL第二天 文章目录 MySQL第二天一、第一题 题目二、第二题题目 一、第一题 题目 1、先创建该customers表 create table customers ( c_num int primary key auto_increment, c_name varchar(50), c_contact varchar(50), c_city varchar(50),c_birth datetime not null);2、…
阅读更多...
java IO流(一) File类

java IO流(一) File类

File对象只能对文件进行操作&#xff0c;不能操作文件中的内容。 1 File对象的创建 要注意的是&#xff1a;路径中"“要写成”\“进行转义&#xff0c; 路径中”/"可以直接用&#xff0c;但是最好的是使用File.separator&#xff0c;它会根据系统的不同进行转化&a…
阅读更多...
ROS：分布式通信

ROS：分布式通信

目录 一、前言二、方案2.1准备2.2配置文件修改2.3配置主机IP2.4配置从机IP2.5测试 一、前言 ROS是一个分布式计算环境。一个运行中的ROS系统可以包含分布在多台计算机上多个节点。根据系统的配置方式&#xff0c;任何节点可能随时需要与任何其他节点进行通信。 因此&#xff…
阅读更多...
小白开酒吧前要做好的三件事

小白开酒吧前要做好的三件事

一、进行市场调研当你有开酒吧的想法时&#xff0c;首先要做的第一步就是市场调研&#xff0c;进行市场调研可以让你了解到该地区酒吧市场是否良好&#xff0c;对未来的经营&#xff0c;有着决定成败的帮助&#xff0c;同时市场调研也可以让你了解到周边什么类型酒吧最受欢迎&a…
阅读更多...
PMP证书有什么用，考试条件是什么？

PMP证书有什么用，考试条件是什么？

很多关注项目经理岗位的朋友都知道&#xff0c;一些企业的招聘信息经常会发布&#xff0c;很多招聘项目经理岗/PMO岗的岗位要求中都会有一条&#xff1a;持有PMP/软考等证书的优先。 其实面试的时候&#xff0c;可能两个候选人的经历、经验、期望薪资都差不多&#xff0c;那么…
阅读更多...
ESP32（掌控板） 图片显示与幻灯片

ESP32（掌控板） 图片显示与幻灯片

ESP32&#xff08;掌控板&#xff09; 图片显示与幻灯片 本程序通过按键改变变量的值&#xff0c;从而切换4组图片&#xff0c;通过触摸按键切换每组图片中的不同图片&#xff0c;同时按下两个按键开启幻灯片功能。 图形化程序如下 Arduino代码如下 /*!* MindPlus* mpython**…
阅读更多...
sqoop笔记——一次从Hive到PostgreSql的数据迁移

sqoop笔记——一次从Hive到PostgreSql的数据迁移

写在开头 sqoop&#xff0c;想必进来围观的小伙伴们已经很熟悉了&#xff0c;笔者想把一些在实际使用sqoop过程中遇到的问题和注意事项记录并分析给大家&#xff0c;希望能帮助有需要的同学。随着对sqoop不断深入的了解&#xff0c;笔者会不断的以文章的形式记录并分析给大家&…
阅读更多...
2023年05月份青少年软件编程Scratch图形化等级考试试卷二级真题(含答案)

2023年05月份青少年软件编程Scratch图形化等级考试试卷二级真题(含答案)

2023-05 Scratch二级真题 题数&#xff1a;37 分数&#xff1a;100 测试时长&#xff1a;60min 一、单选题(共25题&#xff0c;共50分) 1.运行下列哪段程序&#xff0c;可以让狗狗走到木屋门口&#xff1f;&#xff08; &#xff09;(2分) A. B. C. D. 2.下列哪个选项…
阅读更多...
陪诊软件源码|医院陪诊软件开发|陪诊师接单APP定制

陪诊软件源码|医院陪诊软件开发|陪诊师接单APP定制

陪诊小程序具有以下功能优势&#xff1a; 　　预约挂号&#xff1a;陪诊小程序可以提供在线预约挂号功能&#xff0c;患者可以通过小程序选择就诊时间、医生和科室&#xff0c;避免排队和等待时间&#xff0c;提高就医效率。 　　陪诊服务&#xff1a;陪诊小程序可以提供陪诊服…
阅读更多...
SDN实训报告-基于SDN的Qos差分服务

SDN实训报告-基于SDN的Qos差分服务

1 实训概述 本次为期一周的实训旨在通过基于SDN架构的实现差分服务需求来提升我们的技能。我们在实训中广泛运用了一些重要的技术手段&#xff0c;包括Django、QOS、OpenDaylight和OpenvSwitch等。 在实训过程中&#xff0c;我们将重点放在SDN的基本操作上&#xff0c;通过实际…
阅读更多...
Introduction to linear optimization exercise 第二章课后题答案 6-10

Introduction to linear optimization exercise 第二章课后题答案 6-10

文章目录 2.62.7 2.6 解答&#xff1a; (a) 设 y y y 是 C C C 中的一点&#xff0c;多面体 Λ { ( λ 1 , … , λ n ) ∈ R n ∣ ∑ i 1 n λ i A i y , λ 1 , … , λ n ≥ 0 } \Lambda\left\{(\lambda_1, \dots, \lambda_n)\in R^n\mid \sum_{i1}^n \lambda_i\textb…
阅读更多...
【企业架构设计模式】MITRE 设计模式

【企业架构设计模式】MITRE 设计模式

定义&#xff1a; 软件中的设计模式&#xff08;通常&#xff09;是简短的描述&#xff0c;用于捕捉过去证明是成功的实践。它们不是具体的软件&#xff0c;而是在某些情况下应用的一种模板。它们通常不是规定性的&#xff0c;而是建议性的&#xff0c;并且包括关于何时最适合使…
阅读更多...
Vue组件库Element-常见组件-对话框

Vue组件库Element-常见组件-对话框

Dialog 对话框 在保留当前页面信息的状态下&#xff0c;直接弹出对话框&#xff0c;告知用户并承载相关操作 具体代码关键如下&#xff1a; <template><div><el-row><!-- button 按钮 --><el-button>默认按钮</el-button><el-button…
阅读更多...
Windows下编译安装VTK

Windows下编译安装VTK

本文旨在记录在Windows下编译安装VTK的流程。 零、环境 操作系统Windows 10编译器Visual Studio 2019 CommunityCMake3.24.2 一、下载代码 git clone https://github.com/Kitware/VTK.git cd ./VTK/ git checkout -b v9.0.0 v9.0.0 二、编译安装 Where is the source cod…
阅读更多...
Redis【实战篇】---- 用户签到

Redis【实战篇】---- 用户签到

Redis【实战篇】---- 用户签到 1. 用户签到 - BitMap功能演示2. 用户签到 - 实现签到功能3. 用户签到 - 签到统计4. 额外加餐 - 关于使用BitMap来解决缓存穿透的方案 1. 用户签到 - BitMap功能演示 我们针对签到功能完全可以通过mysql来完成&#xff0c;比如说以下这张表 用户…
阅读更多...
1.数据类型

1.数据类型

1、课后作业 1.给同桌讲讲交换两个变量的值 算法&#xff08;不管他愿不愿听&#xff09; 2.依次咨询问并获取用户的姓名、年龄、性别&#xff0c;并打印用户信息 可以先自己写一下&#xff0c;在参考一下我的代码&#xff1a; <!DOCTYPE html> <html lang"en&q…
阅读更多...
【SLAM14讲】05 李群与李代数

【SLAM14讲】05 李群与李代数

在 SLAM 中位姿是未知的&#xff0c;而我们需要解决什么样的相机位姿最符合当前观测数据这样的问题。 一种典型的方式是把它构建成一个优化问题&#xff0c;求解最优的 R, t&#xff0c;使得误差最小化。 旋转矩阵自身是带有约束的&#xff08;正交且行列式为 1&#xff09;。它…
阅读更多...
Zhong__Linux系统磁盘空间扩容和转移

Zhong__Linux系统磁盘空间扩容和转移

时间&#xff1a;2023.07.07 环境&#xff1a;Ubuntu/Centos 目的&#xff1a;分配闲置空间到指定分区/将分区空间转移到指定分区 说明&#xff1a; 作者&#xff1a;Zhong QQ交流群&#xff1a;121160124 欢迎加入&#xff01; 在安装Ubuntu/Centos/Stream等系统时 有时对…
阅读更多...
测试3年经验不到，来面试开口要25K，面完连10K都不想给···

测试3年经验不到，来面试开口要25K，面完连10K都不想给···

前言 近期公司发展的不错&#xff0c;打算扩招&#xff0c;也面试了不少人&#xff0c;由于公司不是很大所以公司大部分的人员都是我面试的。 前两天来了一个测试工作才3年不到的小伙儿面试&#xff0c;前面问了一点测试基础的东西&#xff0c;还是能答上来的&#xff0c;不过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023