HTML基础标签

快来打我* 2024-03-22 11:16 85阅读 0赞

#### \[html基础标签\] ####

--------------------

#### 文章目录 ####

*   *   *  \[html基础标签\]
 *  1.文档结构
 *   *   *   *  \`<html>\`标签
             *  \`<head>\`标签
             *  \`<body>\`标签
             *  \`<title>\`标签
             *  \`<meta>\`
             *  \`icon\`
             *  \`\`
 *  2.文本标签
 *   *   *   *  \`<div>\`标签
             *  \`<span>\`标签
             *  \`<h1> - <h6>\`标签
             *  \`<p>\`标签
             *  \`<pre>\`标签
             *  \`<br>\`标签
             *  \`<hr>\`标签
             *  \`<i>\`标签
             *  \`<b>\`标签
             *  \`<del>\`标签
             *  \`<ins>\`标签
 *  3.图片
 *   *   *   *  \`src\`属性
             *  \`alt\`属性
             *  \`height\`属性
             *  \`width\`属性
             *  资源
 *  4.音频与视频
 *   *   *   *  \`<audio>\`标签
             *  资源
             *  \`<video>\`标签
             *  资源
 *  5.超链接
 *   *   *   *  常用选项
 *  6.表单
 *   *   *   *  \`<form>\`标签
             *  \`<input>\`标签
             *  \`<textarea>\`标签
             *  \`<select>\`与\`<option>\`标签
             *  \`<button>\`标签
 *  7.列表
 *   *   *   *  \`<ul>\`与\`<li>\`标签
             *  \`<ol>\`与\`<li>\`标签
             *  \`<dl>\`、\`<dt>\`与\`<dd>\`标签
 *  8.表格
 *   *   *   *  \`<table>\`标签
             *  \`<thead>\`标签
             *  \`<tbody>\`标签
             *  \`<tr>\`标签
             *  \`<th>\`标签
             *  \`<td>\`标签
             *  \`<caption>\`标签
             *  示例
 *  9.语义标签
 *   *   *   *  \`<header>\`
             *  \`<nav>\`
             *  \`<section>\`
             *  \`<figure>\`
             *  \`<figcaption>\`
             *  \`<article>\`
             *  \`<aside>\`
             *  \`<footer>\`
 *  10.特殊符号
 *   *  应用示例

## 1.文档结构 ##

html的所有标签为树形结构，例如：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Web应用课</title>
    </head>
    <body>
        <h1>第一讲</h1>
    </body>
    </html>

--------------------

##### `<html>`标签 #####

HTML `<html>` 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

--------------------

##### `<head>`标签 #####

HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

--------------------

##### `<body>`标签 #####

HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

--------------------

##### `<title>`标签 #####

HTML `<title>` 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

--------------------

##### `<meta>` #####

HTML `<meta>` 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(`<base>`、`<link>`, `<script>`、`<style>` 或 `<title>`）之一表示的任何元数据信息。

常见属性：

*  `charset`：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的"utf-8"。
 *  `name`：name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。

--------------------

##### `icon` #####

资源地址：

*  [acapp.png][]

--------------------

##### `` #####

示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

--------------------

## 2.文本标签 ##

文本标签虽然很多，但大部分可看成是预定好样式的`<div>`和`<span>`。

##### `<div>`标签 #####

`<div>`元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。  
其他块级标签例如：`<h1>`, `<p>`, `<pre>`, `<ul>`, `<ol>`, `<table>`。

--------------------

##### `<span>`标签 #####

`<span>` 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。`<span>` 与 `<div>` 元素很相似，但 `<div>` 是一个 块元素 而 `<span>` 则是 行内元素  
其他内联标签例如：`<i>`, `<b>`, `<del>`, `<ins>`, `<td>`, `<a>`。

--------------------

##### `<h1> - <h6>`标签 #####

HTML `<h1>–<h6>` 标题 (Heading) 元素呈现了六个不同的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低。

--------------------

##### `<p>`标签 #####

HTML `<p>`元素（或者说 HTML 段落元素）表示文本的一个`**段落**`。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，`<p>` 是块级元素。

--------------------

##### </ #####

[acapp.png]: https://cdn.acwing.com/media/article/image/2021/12/17/1_be4c11ce5f-acapp.png