HTML —— 简单知识点2

HTML —— 简单知识点2

 

目录

HTML —— 简单知识点2

一、HTML常用标签（接上部分）

1. 文本格式化标签

2. 标签

3. 图像标签

4. 超链接标签

5. 注释和特殊字符

二、路径

1. 目录文件夹和根目录

2. 路径

#END（部分图源b站pink老师视频）

---

一、HTML常用标签（接上部分）

https://blog.csdn.net/Sokoooo/article/details/113391164

1. 文本格式化标签

1.1 标签语义：突出其重要性；

1.2 文本格式化标签：包含设置粗体、斜体、下划线、删除线等效果；

1.3

 

1.4 代码：

<strong> 加粗 </strong> <b> 加粗 </b>
<em> 倾斜 </em>         <i> 倾斜 </i>
<del> 删除线 </del>     <s> 删除线 </s>
<ins> 下划线 </ins>     <u> 下划线 </u>

 

2. <div>和<span>标签

2.1 <div>标签和<span>标签没有语义，相当于一个盒子，用来装内容；

上图就是一个盒子（布局我们的网页），用来装了内容；

2.2 <div>标签：分割、分区；

① 用来布局；

② 一行只能有一个<div>标签（单独占一行），相当于一个超大的盒子；

<div>文字</div>

2.3 <span>标签：跨度，跨距； 

① 用来布局；

② 一行可以有多个<span>标签，相当于小盒子；

<span>文字</span>

 

3. 图像标签

 3.1 图像标签：在HTML标签中，<img>标签（单标签）用来定义HTML页面中的图像；

3.2 代码格式：

<img src="图像路径" />

3.3 图像属性：

3.4 具体解释：

① src：标签中的必须属性，用于指定图像文件的路径和文件名；

② alt：替换文本，当图像显示不出来的时候，用文字替代；

<img src="1.1.jpg" alt="suhunの照片"/>

 

③ title：提示文本，把鼠标放在图像上，提示的文字就会显示；

<img src="1.1.jpg" title="suhunの照片"/>

④ width：给图像设定宽度；

<p><img src="1.1.jpg" title="suhunの照片"/></p>
<p><img src="1.1.jpg" title="suhunの照片" width="500" /></p>

 

⑤ height：给图像设定高度；（一般height和width只使用一个）

<p><img src="1.1.jpg" title="suhunの照片"/></p>
<p><img src="1.1.jpg" title="suhunの照片" height="300" /></p>

⑥ border：设置图像边框粗细；

<p><img src="1.1.jpg"  border="20"/></p>

 

3.5 图像属性注意点：

 

4. 超链接标签

4.1 超链接标签：<a>标签用于定义超链接，使页面可以链接到另一个页面；

4.2 超链接的语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

4.3 链接分类：

 

5. 注释和特殊字符

5.1 注释：添加一些便于阅读和理解，且不会显示在页面中；

5.2 代码格式：

<!-- 注释 -->

5.3 特殊字符

 

二、路径

1. 目录文件夹和根目录

1.1 目录文件夹：一个普通的文件夹，但是里面存放了我们做页面所需要的相关素材；

1.2 根目录：目录文件夹的第一层；

 

2. 路径

2.1相对路径：以引用文件所在位置为参考基础，而建立出的目录路径；（图片相对于HTML页面的位置）

2.2 绝对路径：指目录下的绝对位置，直接到达目标图像位置；（图片在电脑的哪个位置或者网站）

 

 

 

#END（部分图源b站pink老师视频）