HTML笔记（标签、）-CFANZ编程社区

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。
- meta：它定义HTML文档的元数据，例如文档的字符集、关键词和描述等。例如：
```
<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）是指将字符集中的字符转换为二进制形式以便于计算机的存储和传输。由于不同的字符集所包含的字符数量不同，因此需要对字符进行编码。下面是一些关于字符编码的基础知识：
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>。

三、列表标签

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>

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

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

五、表格标签

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>

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>

八、其他标签及注释

**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。

块级元素通常可以包含其他块级元素和行内元素。
行内元素,宽高由元素撑开，不会独占一行，不可设置宽高，。

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

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

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

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