HTML详解连载（1）

ゝ一世哀愁。 2023-10-14 17:45 7阅读 0赞

#### HTML详解连载（1） ####

*   *  HTML
     *   *  定义
         *  HTML 超文本标记语言
         *  标签语法
         *  注意
         *  拓展
     *  HTML基本骨架
     *   *  解释
         *  VS Code 快速生成骨架：
         *  标签的关系
         *   *  父子关系（嵌套关系）
             *  兄弟关系（并列关系）
         *  代码格式
         *  注释
     *  标题标签
     *  标签名:h1-h6(双标签)
     *   *  经验：
     *  段落标签
     *   *  标签名：p(双标签)
         *  显示特点：独占一行、段落之间存在间隙
     *  换行和水平线标签
     *  文本格式化标签
     *   *  作用：
     *  图像标签-基本使用
     *   *  强调
         *  图像标签-属性
         *  属性名=“属性值”
     *  路径
     *   *  路径分类：
         *   *  相对路径
             *   *  强调
             *  绝对路径
     *  注释

### HTML ###

#### 定义 ####

Hyper TextMarkup Language。  
![在这里插入图片描述][d1dbfcfedb5347b7aa0111eb4fe07232.png]

#### HTML 超文本标记语言 ####

超文本是链接  
标记也叫标签，带尖括号的文本

#### 标签语法 ####

<strong> 需要加粗的文字 </strong>
    <strong>--开始标签
    </strong>--结束标签

#### 注意 ####

标签成对出现，中间包裹内容  
<>里面放英文字母(标签名)  
结束标签比开始标签多/

#### 拓展 ####

双标签：成对出现的标签
    单标签：只有开始标签，没有结束标签
    <br>:换行
    <hr>:水平线

### HTML基本骨架 ###

<html>
    	  <head>
    	<title>网页标题</title>	
    	</head>
    	  <body>
    	   		网页主体内容
          </body>
    	</html>

![在这里插入图片描述][98192cd371da4423989bc0e0612c2ab7.png]

#### 解释 ####

html:整个网页  
head:网页头部，用来存放给浏览器看的信息，例如CSS  
title:网页标题  
body:网页主体，用来存放给用户看的信息，例如图片，文字

#### VS Code 快速生成骨架： ####

在HTML文件(.html)中，!(英文)配合Enter/Tab

#### 标签的关系 ####

作用：明确标签的书写位置，让代码格式更整齐

##### 父子关系（嵌套关系） #####

##### 兄弟关系（并列关系） #####

#### 代码格式 ####

父子关系：子集标签换行且缩进  
兄弟关系：兄弟标签换行要对齐

#### 注释 ####

注释中...是注释内容

快捷键: Ctrl + /

![在这里插入图片描述][d6e63819498d41a499931f314f5e904e.png]

### 标题标签 ###

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

### 标签名:h1-h6(双标签) ###

显示特点：文字加粗、字号逐渐减小、独占一行（换行）

#### 经验： ####

h1标签再一个网页中只能用一次，用来放新闻标题或者网页的logo  
h2-h6没有使用的限制

### 段落标签 ###

一般用在新闻段落，文章段落，产品描述信息等。

#### 标签名：p(双标签) ####

#### 显示特点：独占一行、段落之间存在间隙 ####

### 换行和水平线标签 ###

换行<br>(单标签)
      水平线<hr>(单标签)

### 文本格式化标签 ###

#### 作用： ####

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删 除线等

效果		标签名1		标签名2
      加粗		strong		b
      倾斜		em			i
      下划线	ins			u
      删除线	del			s

strong em ins del标签自带强调含义（语义）。  
![在这里插入图片描述][e259945a6c8c4eb2b8efe2050709a6a2.png]

### 图像标签-基本使用 ###

作用：在网页中插入图片

#### 强调 ####

src用于指定图像的位置和名称，是的必须属性。

#### 图像标签-属性 ####

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="right">作用</th> 
   <th align="right">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">alt</td> 
   <td align="right">替换文本</td> 
   <td align="right">图片无法显示的时候显示文字，可以不影响图片浏览</td> 
  </tr> 
  <tr> 
   <td align="center">title</td> 
   <td align="right">提示文本</td> 
   <td align="right">鼠标悬停再图片上的时候显示的文字</td> 
  </tr> 
  <tr> 
   <td align="center">width</td> 
   <td align="right">图片的宽度</td> 
   <td align="right">值为数字，没有单位 默认等比缩放</td> 
  </tr> 
  <tr> 
   <td align="center">height</td> 
   <td align="right">图片的高度</td> 
   <td align="right">值为数字，没有单位</td> 
  </tr> 
 </tbody> 
</table>

#### 属性名=“属性值” ####

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

### 路径 ###

路径值得是查找文件是，从起点到终点经历的路线。

#### 路径分类： ####

##### 相对路径 #####

从当前文件位置出发查找目标文件

###### 强调 ######

/表示进入莫格文件夹里面  
.表示当前文件所在文件夹  
…表示当前文件的上一个文件夹

##### 绝对路径 #####

从盘符出发查找目标文件  
Windows默认是\\，其他系统是/

### 注释 ###

自己通过黑马课程并通过自己整合其他资料总结的笔记，希望能帮助大家。

[d1dbfcfedb5347b7aa0111eb4fe07232.png]: https://img-blog.csdnimg.cn/d1dbfcfedb5347b7aa0111eb4fe07232.png
[98192cd371da4423989bc0e0612c2ab7.png]: https://img-blog.csdnimg.cn/98192cd371da4423989bc0e0612c2ab7.png
[d6e63819498d41a499931f314f5e904e.png]: https://img-blog.csdnimg.cn/d6e63819498d41a499931f314f5e904e.png
[e259945a6c8c4eb2b8efe2050709a6a2.png]: https://img-blog.csdnimg.cn/e259945a6c8c4eb2b8efe2050709a6a2.png