二、 HTML开发(标签)

深碍√TFBOYSˉ_ 2022-11-10 14:26 101阅读 0赞

### 文章目录 ###

*  二、HTML的开发
 *   *  2.1 HTML 文件的骨架
     *  2. 2 HTML 的 IDE 工具
     *  2.3 标签的分类
     *  2.4 常用基本标签
     *   *  2.4.1 标题标签 (h1——h6)
         *  2.4.2 字体标签(font)
         *  2.4.3 段落标签(P)
         *  2.4.4 换行标签(br)
         *  2.4.5 水平线标签(hr)
         *  2.4.6 图片标签(img)
         *  2.4.7 背景音乐(audio)
         *  2.4.8 视频( video )
         *  2.4.9 图片标签(img)
         *  2.4.10 列表标签
         *   *  (1)有序列表
             *  (2)无序列表
             *  (3) 自定义列表
         *  2.4.11 marquee 标签
         *  2.4.12 文本设置标签
         *  2.4.13 其他基本标签

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

# 二、HTML的开发 #

## 2.1 HTML 文件的骨架 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]  
Head 标签：其中可以对网页进行整体设置  
Body 标签：是 HTML 的正文标签,我们在网页上能看到的内容都写在该标签中

## 2. 2 HTML 的 IDE 工具 ##

(1) DW  
(2) HBuilder  
(3) Subline  
(4) MyEclipse  
(5) 记事本

## 2.3 标签的分类 ##

1.带有标签体的标签，这种标签成对出现;有开始标签也有单独的结束标签,如: ![,,][20210318212436136.png]

2.没有标签体的标签（空标签，自结束标签）,开始和结束在同一个标签中，如;![在这里插入图片描述][20210318212804561.png]

## 2.4 常用基本标签 ##

### 2.4.1 标题标签 (h1——h6) ###

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

### 2.4.2 字体标签(font) ###

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

### 2.4.3 段落标签§ ###

![在这里插入图片描述][202103182135214.png]  
主要用于将一段内容包裹起来，便于后期的统一设置，p 标签本身没有效果,标签内的内容与标签外的内容空一行（自动换行）

### 2.4.4 换行标签(br) ###

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

### 2.4.5 水平线标签(hr) ###

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

### 2.4.6 图片标签(img) ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]

### 2.4.7 背景音乐(audio) ###

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

### 2.4.8 视频( video ) ###

在 H5 之前大多数视频使用 flash 插件实现的，但 flash 插件加载速度较慢，在 H5 之后专门提供了一个视频的标签;

### 2.4.9 图片标签(img) ###

用法 1：超链接:主要用于将多个页面关联到一起，使用超链接可以直接访问另一个页面;  
![在这里插入图片描述][20210318214516490.png]  
通过 base 标签统一设置页面超链接的显示目标

用法 2：用于锚记页面中的某个位置或其他页面中的某个位置  
![在这里插入图片描述][20210318214613433.png]  
![在这里插入图片描述][20210318214620605.png]

### 2.4.10 列表标签 ###

#### (1)有序列表 ####

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

#### (2)无序列表 ####

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

#### (3) 自定义列表 ####

dl:外围标签  
dt：列表的标题标签  
dd:设置列表的具体列表项  
![在这里插入图片描述][20210318214845811.png]

### 2.4.11 marquee 标签 ###

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

### 2.4.12 文本设置标签 ###

字体加粗
 设置斜体
 设置文本下划线
 <s></s>在文本上设置一个删除线

### 2.4.13 其他基本标签 ###

2n：设置上标
 log1010:设置下标

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: /images/20221022/4d3dd5491c9a40458dd87ec33c1dd369.png
[20210318212436136.png]: https://img-blog.csdnimg.cn/20210318212436136.png
[20210318212804561.png]: https://img-blog.csdnimg.cn/20210318212804561.png
[20210318212930207.png]: https://img-blog.csdnimg.cn/20210318212930207.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210318213035480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[202103182135214.png]: https://img-blog.csdnimg.cn/202103182135214.png
[20210318213736897.png]: https://img-blog.csdnimg.cn/20210318213736897.png
[20210318213813535.png]: https://img-blog.csdnimg.cn/20210318213813535.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210318214124552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[2021031821433883.png]: https://img-blog.csdnimg.cn/2021031821433883.png
[20210318214516490.png]: https://img-blog.csdnimg.cn/20210318214516490.png
[20210318214613433.png]: https://img-blog.csdnimg.cn/20210318214613433.png
[20210318214620605.png]: https://img-blog.csdnimg.cn/20210318214620605.png
[20210318214748897.png]: https://img-blog.csdnimg.cn/20210318214748897.png
[20210318214815792.png]: https://img-blog.csdnimg.cn/20210318214815792.png
[20210318214845811.png]: https://img-blog.csdnimg.cn/20210318214845811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210318214906670.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210318214914150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[20210318215056444.png]: https://img-blog.csdnimg.cn/20210318215056444.png