HTML笔记（标签）

Bqiuer

已于 2023-10-06 15:52:55 修改

阅读量402

点赞数 3

分类专栏： HTML 文章标签： html 笔记前端

于 2023-09-25 10:50:51 首次发布

本文链接：https://blog.csdn.net/weixin_46057095/article/details/133267319

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML是前端开发中非常重要的一部分，它是用来创建Web页面结构的语言

一、HTML基础标签

<!DOCTYPE>它是用来声明文档类型的，指定文档采用哪个HTML版本来解析。DOCTYPE声明应该始终位于HTML文档的开头，否则浏览器可能无法正确解析文档。
html：它是定义HTML文档的根元素，包含整个HTML文档的内容。

html标签上可以定义文档的显示语言：<html lang = "en">
head：它的内部是用来放置一些元数据的，一般用meta标签来标记一些头部信息，或者用title定义页面的标题。如：
- head、title：它们用于定义HTML文档的元数据，例如文档的标题、样式表和脚本等。例如：
```
<!DOCTYPE html>
<html lang='en'>
<head>
  <title>我的网页</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <h1>欢迎来到我的网页！</h1>
</body>
</html>
```
其中定义文档的标题，meta标签定义文档的字符集，<strong>link标签</strong>用于引入外部样式表，script标签用于引入外部脚本。
- base标签为页面上的所有链接规定默认地址或默认目标。
```
<head>
<base  target="_blank" href="http://www.w3school.com.cn/i/" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>
```
  通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
  
  使用标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
  
  base 标签必须位于 head 元素内部,只能规定一个。
  
  herf属性，规定页面中所有相对链接的基准 URL。
  
  target属性在何处打开页面中所有的链接。
- meta：它定义HTML文档的元数据，例如文档的字符集、关键词和描述等。例如：
  包含 name 和 content 两个用来描述网页文档的属性，比如网页的作者，网页描述，关键词等
  
  常见的meta标签：
  
  （1）charset 用来描述HTML文档的编码类型
  
  （2）keywords，页面关键词
  
  （3）description，页面描述
  
  （4）refresh，页面重定向和刷新
  
  （5）viewport，适配移动端，可以控制视口的大小和比例
```
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="这是一个演示文档。">
```
其中charset属性定义文档的字符集，name属性定义元数据的名称，content属性定义元数据的值。
- link：它用于引入外部资源，例如CSS样式表、图标和字体等。例如：
```
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
```
其中rel属性指定资源的类型，href属性指定资源的URL地址。
- script它用于定义客户端脚本，如JavaScript代码。例如：
```
<script>
  function sayHello() {
    alert('Hello World!');
  }
</script>
```
其中代码可以放在<script>标签中，也可以引用外部JavaScript文件。

字符编码

字符编码（Character Encoding）是指将字符集中的字符转换为二进制形式以便于计算机的存储和传输。由于不同的字符集所包含的字符数量不同，因此需要对字符进行编码。下面是一些关于字符编码的基础知识：

字符集
字符集（Character Set）是指一组字符的集合。常见的字符集有 ASCII、Unicode、GB2312(简体中文)、GIB5(繁体中文)、GBK、UTF-8 等。其中，ASCII 是最早的字符集，它包含 128 个字符，包括字母、数字和一些符号。后来出现了 Unicode 字符集，它包含了全世界的字符，目前已经包含了 13 万多个字符，因此被称为“超级字符集”。

字符编码
字符编码（Character Encoding）是指将字符集中的字符编码成计算机可以识别的二进制数据的过程。常见的字符编码方式有 ASCII、Unicode、UTF-8、UTF-16、GBK 等。
其中，ASCII 是最早的字符编码方式，它使用 7 位二进制来表示一个字符，因此只能表示 128 个字符。Unicode 是目前使用最广泛的字符编码方式，它使用 2 个字节（16 位二进制）来表示一个字符，因此可以表示 65536 个字符。UTF-8 和 UTF-16 是 Unicode 的一种实现方式，其中 UTF-8 使用 1~4 个字节来表示一个字符，而 UTF-16 使用 2 个或者 4 个字节来表示一个字符。GBK 是中文编码方式，它可以表示汉字和其他一些符号，使用 2 个字节来表示一个字符。

字符集和字符编码的关系
字符集和字符编码是密切相关的，字符集决定了可以使用哪些字符，而字符编码则决定了如何将这些字符转换成计算机可以识别的二进制数据。在实际应用中，常常将字符集和字符编码混淆使用，例如说“UTF-8 编码”实际上应该是“使用 UTF-8 编码的 Unicode 字符集”。
title：它定义文档的标题，是浏览器标题栏中显示的文本。它应该始终放在标签内，并且是标签内的第一个子元素。
body：它是页面的主要内容区域，包含所有的文本、图像、链接等。它应该始终放在标签内，并且是标签内的第二个子元素。

好的，我来一一详细讲解一下HTML标签以及与之相关联的知识点。

二、文本标签

p：它定义一个段落，通常用于对文本进行分段
h1~h6：它定义标题，大小逐渐递减。例如：<h1>一级标题</h1>，<h2>二级标题</h2>，以此类推。
em、i：它定义强调文本，通常用于斜体显示。例如：<em>这是一段强调文本。</em>。
strong、b：它定义更加强调的文本，通常用于加粗显示。例如：<strong>这是一段更加强调的文本。</strong>。
u、ins：它定义下划线文本，通常用于添加下划线。例如：<u>这是一段下划线文本。</u>。
del、s：它定义删除线文本，通常用于添加删除线。例如：<del>这是一段删除线文本。</del>。

上面的strong、em、ins、del的权重比b、i、 u、s、高

三、列表标签

ul：它定义一个无序列表，通常使用圆点作为列表项的标识。
ol：它定义一个有序列表，通常使用数字作为列表项的标识。
li：它定义一个列表项，通常作为<ul>或<ol>标签的子元素使用.
dl：它定义一个定义列表，通常用于描述名词和其对应的解释。

其中<dt>定义名词，<dd>定义解释。

四、链接标签

a：它定义一个超链接，可以链接到其他页面、相同页面的锚点或电子邮件地址。例如：

<a href="http://www.example.com">跳转到其他网页</a>
<a href="#section2">跳转到页面内的锚点</a>
<a href="mailto:example@example.com">发送邮件</a>

href 属性用于指定链接跳转目标：

外部链接

内部（本地）链接

空链接：<a href='#'></a>,可以跳转到页面的顶部

下载链接：herf当中压缩包地址

网页元素标签：文本、图像、音频

js占位符：<a herf='javascript:;'>

锚点链接：一款速定位到页面的某个位置
	<a href='#xxxx'></a> #跳转到锚点id属性所在网页位置
	<h3 id='xxxx'></h3>
target 属性窗口弹出方式，可取值有’_self(当前窗口）、__blank（新窗口）’

img：它定义一个图片，并且可以作为超链接的目标。

<a href="http://www.example.com">
    <img src="example.jpg" alt="替代文本" title='提示文本'>
</a>

src属性用于指定图片的URL地址,一般有两种路径表现方式：

绝对路径：‘http://bing.com/’ 、‘D:/user/’

相对路径：‘./’ 、‘…/’、‘/.jpg’

alt属性用于指定图片的替代文本，以便在无法显示图片时提供信息。

title属性用于提示文本，鼠标移入图片上显示

width | height定义宽度和高度

五、表格标签

table：它定义一个表格，包含多个行和列。例如：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

其中定义一行，定义一列。

th：它定义表格的表头单元格，通常加粗居中显示。例如：

<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
</table>

caption：它定义表格的标题，位于表格上方或下方。例如：

<table>
  <caption>表格标题</caption>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>

**thead、tbody、tfoot：**它们分别定义表格的表头、正文和页脚部分，用于将表格内容分组。例如：

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">表格页脚</td>
    </tr>
  </tfoot>
</table>

其中colspan属性指定单元格跨越的列数。

**col、colgroup：**它们定义表格列的属性，如宽度、颜色等。例如：

<table>
  <colgroup>
    <col style="background-color: #ccc;">
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </tbody>
</table>

其中定义一组列，定义每一列的属性。

六、表单标签

**form：**它定义一个表单，包含一组控件，用于向服务器提交数据。例如：

<form action="submit.php" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="提交">
</form>

其中action属性指定表单提交的URL地址，method属性指定提交方式，可以是post或get。

label：它定义一个表单控件的标签，通常与<input>、<textarea>等控件配合使用。例如：

<label for="name">姓名：</label>
<input type="text" id="name" name="name">

其中for属性指定控件的id属性，以便关联标签和控件。

input：它定义一个表单控件，例如文本框、复选框、单选按钮等。它的type属性用于指定控件类型，例如：

<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="gender">性别：</label>
<input type="radio" id="gender-male" name="gender" value="male"><label for="gender-male">男</label>
<input type="radio" id="gender-female" name="gender" value="female"><label for="gender-female">女</lbel>

**select、option：**它们定义一个下拉列表框控件，用户可以从列表中选择一个选项。例如：

<label for="fruit">喜欢的水果：</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

其中定义一个选项，value属性指定选项的值，如果没有指定则默认为选项的文本。

textarea：它定义一个多行文本输入框控件，用于输入多行文本。例如：

<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>

button：它定义一个按钮控件，用于触发脚本或提交表单。例如：

<button type="button" onclick="alert('Hello World!')">点击我</button>
<button type="submit">提交</button>

其中type属性指定按钮类型，可以是button、submit或reset。

七、多媒体标签

img：它定义一个图片，用于向HTML页面中添加图片。例如：

<img src="image.jpg" alt="图片">

其中src属性指定图片的URL地址，alt属性指定当图片无法显示时显示的替代文本。

audio、source：它们定义一个音频播放器，用户可以播放音频文件（mp3、war 、ogg)。例如：

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  您的浏览器不支持HTML5音频播放器。
</audio>

source定义音频文件

type属性指定文件类型

width和height属性指定视频播放器的宽度和高度。

其他属性：

autoplay : 值autoplay，自动播放（谷歌禁用）

loop ：值 loop 循环播放

controls ：值 controls 显示播放控件

muted :值muted,静音播放（解决谷歌不能自动播放）

preload ：两个可取纸auto(预加载)、none

video、source：它们定义一个视频播放器，用户可以播放视频文件。例如：

<video controls width="640" height="360" poster="/images/w3school.gif">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持HTML5视频播放器。
</video>

source定义视频文件

type属性指定文件类型

poster加载等待的画面

八、其他标签及注释

**div、span：**它们用于将HTML文档分成若干块或行，通常用于布局或样式控制。例如：

<div style="background-color: #ccc; width: 300px; height: 200px;">这是一个DIV</div>
<span style="color: red;">这是一个SPAN</span>

其中style属性用于指定样式，可以是CSS样式或内联样式。

br：换行标签
hr：水平线标签
引用标签

blickqoute:长引用,主要用于引用古诗词等段落形式。块元素

q：短引用，引号，行内元素
iframe：它定义一个内嵌框架，用于在HTML文档中显示另一个网页。例如：

<iframe src="http://www.example.com" width="600" height="400"></

其中src属性指定要显示的网页的URL地址，width和height属性指定框架的宽度和高度。

注释

<!--   xxxxxxx    -->    #注释一般快捷键为 ctrl+/

html特殊字符

&nbsp;  空格
&It;    小于
&gt;    大于
&copy;  版权符号（@）
"	&quot;
'	&apos;
&	&amp;

九、块级元素和行内元素（也叫内联元素）

块级元素，独占据一行，可设置宽高(不设继承父级）,可以设置padding、border、margin。

块级元素通常可以包含其他块级元素和行内元素。

div、p、h1-h6、ul、ol、li、table、form、header、nav、footer、header、nav、footer、section、article、aside
行内元素,宽高由元素撑开，不会独占一行，不可设置宽高，。

span、a、img、strong、em、br、input、select、textarea、

p标签是块元素，但不能包裹其他块元素

a是行内元素，但其可以包裹块元素（所以元素，不能再嵌套a标签）

img是行内元素，但是可以设置宽高

块级元素通常用于组织页面结构和排版，而行内元素通常用于文本样式化和表单控件的创建.行内元素设置宽度和高度，需要将其转换为块级元素