首页 前端知识 HTML5基础语法与标签

HTML5基础语法与标签

2024-03-03 11:03:54 前端知识 前端哥 886 296 我要收藏

一、 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">

与图像相关的属性:

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

  • 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属性用于显示视频控制器。
widthheight属性可设置视频的显示宽度和高度(以像素为单位)。

如果想要支持不同浏览器之间的多种媒体格式,可以使用<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> 属性 ,这个属性用于定义单元格横跨的列数。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3123.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!