前端自学复习总结（三）

陈奕迅雷不及掩耳之势

已于 2022-05-14 14:14:57 修改

阅读量438

点赞数

分类专栏： Javaweb 文章标签：前端 html html5

于 2022-05-14 14:11:25 首次发布

本文链接：https://blog.csdn.net/qq_53474111/article/details/124766837

版权

Javaweb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

4.1文本简介

1、网页组成元素

大部分静态页面是由以下四种元素构成：文本、图片、超链接、音频和视频，不是“会动”的页面就叫动态页面，静态与动态页面的区别在于：是否与服务器进行数据交互。

2、HTML文本

包含众多标签：标题标签、段落标签、换行标签、文本标签、水平线标签、特殊符号

4.2HTML常用标签

1、标签语义

记住每个标签的语义，即这个标签是用来干嘛的

2、标题标签<h1>-<h6>

HTML提供6个等级的网页标题，即<h1>-<h6>，h是head的缩写，意为头部、标题à<h1>我是一级标题</h1>，h1标签重要性最高，h6标签重要性最低。

标题的特点：

(1)加了标题的文字会变的加粗，字号也会依次变大

(2)一个标题独占一行

3、段落和换行标签

(1)<p>标签用于定义段落，可以将整个网页分为若干个段落。文本在一个段落中会根据浏览器窗口的大小自动换行，而且段落之间保有一定的空隙。

(2)一般一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端才自动换行，若希望某段文本强制换行显示，就要在文字后使用换行标签<br />,是一个单标签，作用仅仅是另起一行。

4、文本格式化标签

在网页中，有时需要将文字设置成粗体、斜体或下划线等效果，这时就得使用文本格式化标签，使文字以特殊的方式显示。

(1)加粗：<strong></strong>或<b></b>

(2)倾斜：<em><em/>或<i></i>或<cite></cite>

(3)删除线：<del><del/>或<s></s>

(4)下划线：<ins></ins>或<u></u>

(5)上标签：<sup></sup>比如写二的三次方时可以使用

(6)下标签：<sub></sub>比如写二氧化碳的化学表达式时可以使用

(7)大字号：<big></big>

(8)小字号：<small></small>

一般使用前面的标签，语义更强烈

5、水平线标签

在HTML中，我们可以使用<hr/>标签来实现一条水平线

6、<div><span>标签

<div>和<span>是没有语义的，它们是一个盒子，用来装内容、布局的。<div></div><span></span>.其中div是division的缩写，表示分割、分区，span意为跨度、跨距。

特点：

(1)<div>标签用来布局，但是现在一行只能放一个<div>，大盒子

(2)<span>标签用来布局，一行上可以多个<span>，小盒子

7、自闭和标签

有些标签之间是可以插入其他标签或文字的，但是有些标签中是不能插入其他标签或文字的。

在HTML中，标签分为两种：一般标签和自闭合标签。

特点：

(1) 一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。

(2) 自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

4.3块元素和行内元素

1、块元素

块元素在浏览器显示效果下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。比如：h1~h6、p、div、hr…

块元素特点：

(1)块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行

(2)块元素内部可以容纳其他块元素和行内元素

2、行元素

行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。比如：strong、em、span……

行内元素特点：

(1)行内元素可以与其他行内元素位于同一行

(2)行内元素内部可以容纳其他行内元素，但不可容纳块元素

4.4特殊符号

1、网页中的“空格”

默认情况下，p标签的段落文字“首行”是不会缩进的，在HTML中，空格也是需要用代码来实现的，空格的代码是 &nbsp；。（其中，一个汉字约等于3个&nbsp；，因此如果想要往p标签内加入两个空格，就得往p标签中加入6个 ）

2、网页中的“特殊符号”

在HTML中，如果想要显示一个特殊符号，需要特殊的代码形式来实现。

特殊符号	说明	代码
"	双引号（英文）	"
'	左单引号	‘
'	右单引号	’
×	乘号	×
÷	除号	÷
>	大于号	>
<	小于号	<
&	“与”符号	&
—	长破折号	—
\|	竖线	\|

实际上，空格也是一个特殊符号。

5.1图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像

语法格式：

<img src=”” alt=”” title=”” / >,img为image的缩写，意为图像

包括三个属性：src，alt，title

1、src属性

src用于指定这个图像文件所在的路径和文件名，这个路径可以是相对路径，也可以是绝对路径，src是<img>标签的必须属性。（放入网页的前提条件，图片和网页文件放一起）

2、alt属性和title属性

alt和title都是用于指定图片的提示文字。一般情况下，alt和title的值是相同的。不过两者也有很大的不同。

alt：

当我们把路径去掉，网页中图片将无法显示，此时可以看到浏览器会显示alt的提示文字。在img标签中，alt属性的内容是提供给搜索引擎看的

title：

当把鼠标移到图片上时，就会显示title中的提示文字

3、其他属性

属性	属性值	说明
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意点：

1、图像标签可以拥有多个属性，必须写在标签名的后面

2、属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

3、属性采取键值对的格式，即属性=“属性值”的格式—key=“value”

5.2图像路径

1、路径

目录文件夹和根目录：实际工作中，我们的文件不能随便乱放，否则用起来很难快速找到他们，目录文件夹就是普通的文件夹，里面只不过是存放了我们做网页所需要的相关素材，比如html文件、图片等。根目录就是打开目录文件夹的第一层。

2、相对路径

所谓的相对路径，以引用文件所在位置为参考基础，而建立出的目录路径，可以说是图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像位于HTML文件同一级如<img src=”baidu.gif” />
下一级路径	/	图像位于HTML文件下一级 <img src=”images/baidu.gif” />
上一级路径	../	图像位于HTML文件同一级如<img src=”../baidu.gif” />