html+css 02基础语法（包含注释方法）

我会带着你远行 2023-08-17 15:38 135阅读 0赞

# html语法： #

### 1.标签对换行和空格不敏感： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70]  
在编辑html的时候，标签之间对换行空格不敏感。对标签之间的嵌套敏感，为了保证我们代码的可读性，需要对标签进行合理的缩进  
![在这里插入图片描述][20190926222024598.jpg]

### 2.空白折叠现象： ###

在普通文本内部：如果有空格、缩进、换行，讲这些空白区域折叠成一个空格显示在浏览器里。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 1]

//表示一个空格

# 3.html标签： #

标签：也叫标记。  
**01.标签必须写在一对<>里**  
**02.双标签必须成对出现**  
**04.结束标签必须写关闭符号/**  
**05.标签分类：**  
**容器级：内部还可以放置嵌套任意类型的标签，甚至是容器级标签。（div h系列）**  
**文本级：只能放文字、图片、表单元素、废弃文字修饰标签等。不能放容器级标签。（p标签）**

# 4.标签属性： #

**01.每一个标签都有自己特定的属性。  
属性都有属性值，属性名k(key)，属性值v（value），键值对写法。  
001.属性书写在标签的起始标签内部，与标签名之间用空格隔开，属性与属性之间也需要用空格隔开。**  
**002.键值对书写格式：k=“v”（中间不能有空格）**

**003.属性值必须用双引号包裹，xhtml严格要求使用双引号。**  
**004.标签属性可以有一个或者多个，多个属性值之间用空格隔开即可。全部必须在引号内部。**

# html标签： #

headline，标题的缩写。容器级标签

### h系列标签分为六个等级，表示一到六级标题语意 ###

语意：给文本添加一到六级标题语意（级别依次降低，重要程度依次降低）  
约定俗称，一般一个页面里面h1标签的权重是最高的，最便于搜索引擎搜索的。一个页面只写一个h1标签，一般将这个标签给logo

\+ 所有的h系类标签虽然是容器级，他们之间并没有嵌套关系

### p标签： ###

paragraph，段落的意思。文本级标签。  
给文本添加一个段落的语意。  
注意：一个p标签只能作用于一个段落。多个段落要用多个标签分别标记。  
内部只能放文字、图片、表单元素、废弃文字修饰标签等

### img标签： ###

image 图片的意思。表示引入一张图片，本身相当于一个特殊的文本。  
img标签是一个单标签：`<img />`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 2]

##### 其中最重要的是source属性表示图片来源或路径： #####

## 相对路径： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 4]

##### **…/…/photo/1.png** #####

### 注意：相对路径不能跨盘符进行查找 ###

## 绝对路径： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 5]

# html注释方法： #

**常用：相对路径和网址形式的绝对路径。**

### width属性：宽度，单位是像素px。可以省略单位。单独设置宽度高度会等比例变化。 ###

### height属性：高度，和宽度一样。 ###

同时设置宽高可以对任意图片变形

### title：设置提示文本，属性值就是提示的具体文本。 ###

![在这里插入图片描述][20191009173156701.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 6]

### alt属性：设置图片没有找到时候的替换文本； ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70]: /images/20230810/c047edbe8342413cbf604cae6c55ab11.png
[20190926222024598.jpg]: /images/20230810/ccbcc2aa26b74aeda0b41adf84253860.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 1]: /images/20230810/482264f07bc84cd4a598dce2cd698f53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 2]: /images/20230810/753bbde0c719485db113c9f4720efcdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 3]: /images/20230810/74afce05b4ad49b79856d144e6f92f07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 4]: /images/20230810/f2ff3b6308364ff2beb20a6a08660798.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 5]: /images/20230810/ae5b24b1660a483ba32b27397a71c29a.png
[20191009173156701.png]: /images/20230810/c0f4a2414b004dbb99911c2045e1d288.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 6]: /images/20230810/d47404bd4bdd477b8a64752f80484f71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 7]: /images/20230810/75ec53b98d90454fb07208504f4e4c6c.png