HTML5基础语法与标签

一、 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.hqwc.cn/news/19262.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）

【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）

文章目录 写在前面涉及知识点效果展示1、Loading节点的创建2、部分效果的实现源码1&#xff09;三点加载动画Html代码CSS样式代码 2&#xff09;圆点矩阵加载特效Html代码CSS样式代码 3&#xff09;圆形轨迹加载动画Html代码Css样式代码 4&#xff09;栅栏式加载动画Html代码Cs…
阅读更多...
Linux--查看常驻进程：ps

Linux--查看常驻进程：ps

进程分为瞬时进程和常驻进程 瞬时进程&#xff1a;瞬间完成从加载到内存、显示在输出设备、退出过程 int main() {printf("hello world!\n");return 0; } 常驻进程&#xff1a;一直在内存中 int main() {while (1){printf("hello world!\n");sleep(1);…
阅读更多...
itheima苍穹外卖项目学习笔记--Day1：项目介绍与开发环境搭建

itheima苍穹外卖项目学习笔记--Day1：项目介绍与开发环境搭建

苍穹外卖 Day1:a. 项目概述b. 开发环境搭建(1). 前端环境搭建(2). 后端环境搭建(3). 前后端联调 c. 完善登录功能d. Swagger Day1: a. 项目概述 b. 开发环境搭建 (1). 前端环境搭建 前端工程基于 nginx 运行启动nginx&#xff1a;双击 nginx.exe 即可启动 nginx 服务&#x…
阅读更多...
亚马逊云科技推出的一项完全托管的生成式AI服务——Amazon Bedrock

亚马逊云科技推出的一项完全托管的生成式AI服务——Amazon Bedrock

在全球生成式AI浪潮兴起之际&#xff0c;以“智联世界&#xff0c;生成未来”为主题的2023世界人工智能大会&#xff08;WAIC 2023&#xff09;于7月6日在上海世博中心拉开帷幕。大会首日&#xff0c;亚马逊云科技携生成式AI产品Amazon Bedrock亮相大会现场&#xff0c;亚马逊云…
阅读更多...
蓝桥杯每日一练专栏导读2

蓝桥杯每日一练专栏导读2

之前一直更新的是C、C相关的题目&#xff0c;但作为一名前端工程师&#xff0c;还是对Js了解的更多一些&#xff0c;所以从此以后停止更新C/C相关内容&#xff0c;改为更新Js相关的练习题。 内容 更新的内容依旧是蓝桥杯大赛官网提供的习题。每一道题都会提供详细的解题思路&a…
阅读更多...
前端VUE

前端VUE

基础语法 安装VUE 入门Demo 定义的Vue只有id是app的才能使用他的变量值name&#xff0c;age&#xff0c;gender。 - 方法非id是app的也不可以调用。 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><!…
阅读更多...
0305kali linux配置运行-docker-macos aarm64

0305kali linux配置运行-docker-macos aarm64

文章目录 1 下载运行2 配置2.1 配置系统环境2.2 配置SSH服务2.3 安装工具 3 问题总结结语 1 下载运行 拉取kali linux镜像 docker pull kalilinux/kali-rolling该镜像为“纯净版”系统&#xff0c;没有任何工具&#xff0c;体积小。下面当我们运行起来之后&#xff0c;到容器中…
阅读更多...
华为云CodeArts DevSecOps系列插件——助力更高效的软件研发

华为云CodeArts DevSecOps系列插件——助力更高效的软件研发

HDC期间入驻华为云&#xff0c;可参与Toolkit插件抽奖活动&#xff0c;活动链接在文末 一、前言 DevOps的概念想必大家都不陌生&#xff0c;它是一组过程、方法与系统的统称&#xff0c;通过它可以对交付速率、协作效率、部署频率速率、质量、安全和可靠性等进行提升改善。相比…
阅读更多...
【算法与数据结构】150、LeetCode逆波兰表达式求值

【算法与数据结构】150、LeetCode逆波兰表达式求值

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;我们常看见的表达式是中缀表达式&#xff08;关于中缀表达式的定义可以参考前缀、中缀、后缀表达式&am…
阅读更多...
强化学习快速复习笔记--待更新

强化学习快速复习笔记--待更新

目录 蒙特卡洛方法动态规划算法策略迭代 时序差分方法Sarsa算法Q-learning算法如何区分在线学习和离线学习DQN深度强化Q学习概念介绍代码解析 DQN改进算法Double DQN网络 蒙特卡洛方法 求解价值函数和状态价值函数&#xff0c;可以使用蒙特卡洛方法和动态规划。首先介绍一下蒙…
阅读更多...
从零开始的前后端分离项目学习（前后端从零环境搭建）

从零开始的前后端分离项目学习（前后端从零环境搭建）

一、 前后端分离介绍&#xff1a; 前端独立编写客户端代码&#xff08;用户交互数据展示&#xff09;&#xff0c;后端独立编写服务端代码&#xff08;提供数据处理接口&#xff09;&#xff0c;并提供数据接口就行。 前端通过Ajax访问后端数据借口&#xff0c;将model展示到…
阅读更多...
数据结构05：树与二叉树[C++][哈夫曼树HuffmanTree]

数据结构05：树与二叉树[C++][哈夫曼树HuffmanTree]

图源&#xff1a;文心一言 小白友好、代码可跑&#xff0c;但是不一定适合考研~~&#x1f95d;&#x1f95d; 第1版&#xff1a;查资料、画导图、画配图~&#x1f9e9;&#x1f9e9; 参考用书&#xff1a;王道考研《2024年 数据结构考研复习指导》 参考用书配套视频&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023