🌱博客主页：大寄一场.
🌱系列专栏：前端🌱前期回顾：HTML+CSS+JS 学习笔记（一）———HTML(上)
😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注
目录
字符实体
段落
段落标签
段落的换行标签
段落的原格式标签
水平线
水平线标签
编辑 水平线标签的宽度
图像和超链接
图像的基本格式
1.GIF 格式
2.JPEG 格式
3、PNG格式
图像元素
超链元素
在 HTML 中添加图像
设置图像属性
图像大小与边框
图像间距与对齐方式
替换文本与提示文字
链接标签
1.文本链接
2.书签链接
图像热区链接
字符实体
思考： 学习了上一讲的知识我们了解到<body>标签内的内容会被渲染在页面上。现在我们想将这段话作为文本渲染在页面上会出 现什么样的效果:
<body>
<!-- 我们发现htm1将本来需要以文本形式渲染的 body 识别成了标签造成了错误-->
<body>标签内的内容会被渲染在页面上
</body>解释：造成上面问题的原因是在 HTML 中，某些字符是预留的（有特殊含义的如：> <）。如果想要解决上面的问题就需要使用字符实体替换预留字符。
常用实体字符：
| 符号 | 属性值 | 含 义 |
| " | " | 引号 |
|
< |
&It; | 左尖括号 |
| > | > | 右尖括号 |
| × | × | 乘号 |
| © | § | 小节符号 |
| 空格 | | 空格占位符 |
段落
在实际的文本编码中，在输入一段文字后，按下键盘上的 Enter 键就生成了一个段落但是在 HTML5 中需要通过标签来实现段落效果，下面具体介绍和段落相关的一些标签
段落标签
在 HTML5 中，段落效果是通过 <p> 标签来实现的。<p> 标签会自动在其前后创建些空白，浏览器会自动添加这些空间。
<p> 标签的语法格式如下:
<p> 段落文字</p>
其中，可以使用成对的<p> 标签来包含段落，也可以使用单独的 <p> 标签来划分段落
段落的换行标签
段落与段落之间是隔行换行的，这样会导致文字的行间距过大，这时可以使用换行标
签来完成文字的紧凑换行显示。
换行标签的语法格式如下:
<p>
一段文字 <br/>一段文字
</p>
其中，<br/> 标签代表换行，如果要多次换行，则可以连续使用多个换行标签。
段落的原格式标签
在网页制作中，一般是通过各种标签对文字进行排版的。但在实际应用中，往往需要些特殊的排版效果，此时使用标签控制会非常麻烦。原始排版标签 <pre> 就可以解决这个问题。
<pre>标签的语法格式如下:
<pre>
文本内容
</pre>
水平线
水平线用于段落与段落之间的分隔，使文档结构清晰明了、文字的编排更整齐。水平线自身具有很多属性，如宽度、高度、颜色、排列对齐等。在HTML5中经常会用到水平线,合理使用水平线可以获取非常好的网页装饰效果。一篇内容繁杂的文档，如果合理放置几条水平线，就会变得层次分明、便于阅读。
水平线标签
在HTMLS中使用>标签创建一条水平线。水平线可以在视觉上将文档分割成几部分。在网页中输入一个<h> 标签，就添加了一条默认样式的水平线。
<hr>标签的语法格式如下:
<hr>
水平线标签的宽度
在默认情况下，网页中添加的水平线是 100% 的宽度，而在实际创建网页时，可以对水平线的宽度进行设置，具体语法格式如下:
<hr width="水平线宽度">
在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口宽度值的百分比。
图像和超链接
万维网与其他网络类型(如FTP) 最大的不同就在于它在网页上可星现丰富的色彩及图像。用户可以在网页中放入自己的照片、公司的商标，还可以把图像作为一个按钮链按另一个网页，使网页更加丰富多彩。
图像的基本格式
如今的网页越来越丰富多彩，是因为添加了各种各样的图像，对网页进行了美化。当前万维网上流行的图像格式以 GIF 和JPEG 为主，另外，PNG格式的图像文件也越来越多地被应用于网络中。下面分别对这 3 种图像格式进行介绍。
1.GIF 格式
GIF 格式采用 LZW 压缩，是以压缩相同颜色的色块来减小图像文件大小的。由于LZW压缩不会造成任何品质上的损失，而且压缩效率高，再加上GIF 在各种平台上都可以使用，所以很适合在互联网上使用，但 GIF 只能处理 256色。
GIF 格式适用于商标、新闻式的标题或其他小于 256 色的图像。想要将图像以 GIF 的格式存储，可以使用 LZW 压缩方法。
LZW压缩是一种能将数据中重复字符串进行编码从而制作成数据流的一种压缩方法通常应用于 GIF 格式的图像文件.
2.JPEG 格式
对于照片之类全彩的图像，通常都是以JPEG格式来进行压缩的，也可以说，JIPEG格式是通常用来保存超过 256色的图像格式。JPEG的压缩过程会造成一些图像数据的损失(剔除了一些视觉上不容易觉察的部分)。如果剔除适当，那么不但在视觉上能够接受图像的压缩效率也会提高:反之，如果剔除太多的图像数据，则会造成图像过度失真。
3、PNG格式
PNG格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。PNG 格式不仅具备 GIF 格式的大部分优点，还支持 48bit 的色彩，具有更快的交错显示、跨平台的图像亮度控制、更多层的透明度设置等功能。
图像元素
介绍: 在 HTML 中，图像由 <img> 标签定义
<img> 是一个单一型标签。要在页面上显示图像，你需要设置img元素的src (source,数据源)属性。源属性的值是图像的 URL
地址。
格式:
<img src="URI">
元素支持的属性：
| 属性名称 | 属性值 | 说 明 |
| src | URL | 图片的路径 |
| alt | 文本内容 | 给图片做注解 |
| width | 像素/百分比 | 宽 |
| height | 像素/百分比 | 高 |
alt属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。
超链元素
介绍:HTML 提供了 <a> 标签(Anchor，点)通过href属性指定URL地址可以创建通向其他网页、文件、同一页面内的位置电子邮件地址或任何其他 URL 的超链接。
格式:
<a href="http://www.baidu.com">跳转至网站</a>但是如果未设置 href 属性，则只是超链接的占位符.
在 HTML 中添加图像
有了图像文件之后，就可以使用 <img> 标签将图像插入网页中，从而达到美化网的目的，其语法格式如下:
<img src=”图像文件的地址“>
src 用来设置图像文件所在的地址，这一路径可以是相对地址，也可以是绝对地址绝对地址就是主页上的文件或目录在硬盘上的真正路径，如路径 D:\mr\5\5-1.jpg使用绝对地址定位链接目标文件比较清晰，但是有两个缺点:一是需要输入更多的内容.二是如果该文件被移动了，就需要重新设置所有的相关链接。例如，在本地测试网页时，错接全部可用，但是到了网上，链接就不可用了。
相对地址最适合网站的内部文件引用。只要属于同一网站(即使不在同一目录下)相对地址就非常适用。只要是处于站点文件夹之内，相对地址就可以自由地在文件之间构建链接。这种地址形式利用的是，构建链接的两个文件之间的相对关系不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是.当站点文件夹所在服务器地址发生改变时，文件夹的所有内部文件地址都不会出现问题，
相对地址的使用方法如下。
(1)如果要引用的文件位于该文件的同一目录下，则只需输入要链接文档的名称即可如 5-1.jpg。
(2) 如果要引用的文件位于该文件的下一级目录中，则只需首先输入目录名，然后加
“/”，最后输入文件名即可，如mr/5-2.jpg
(3)如果要引用的文件位于该文件的上一级目录中，则需先输入“..”，再输入目录名文件名，如./../mr/5-2.jpge
设置图像属性
图像大小与边框
在网页中直接插入图片时，图像的大小和原图的大小是相同的，而在实际应用时，则可以通过对各种图像属性进行设置来调整图像的大小、边框等。
- 调整图像大小
在 <img> 标签中，通过 height 属性和 width 属性可以设置图像的高度和宽度，其语法格式如下:
<img src="图像文件的地址" height= width=n“>
其中,height用于设置图像的高度,单位是像素，可以省略: width用于设置图像的宽度单位是像素，也可以省略。
ps：在设置图像大小时，如果只设置了高度或宽度，则另一个参数会按照相同比例进行调整。如果同时设置两个属性，且在缩放比例不同的情况下，那么图像很可能变形
图像间距与对齐方式
HTML 不仅可以在网页中添加图像，还可以调整图像在网页中的间距和对齐方式，从而改变图像的位置。
- 调整图像间距
如果不使用<br>标签或<p> 标签进行换行显示，那么添加的图像会紧跟在文字之后。可以通过 hspace 和 vspace 属性来调整图像与文字之间的距离，使图像与文字的排版更加协调，其语法格式如下:
<img src="图像文件的地址"hspace=" vspace="“>其中，hspace 用于设置图像的水平间距，单位是像素，可以省略;vspace 用于设置图像的垂直间距，单位是像素，也可以省略。
2.设置图像相对于文字基准线的对齐方式
图像和文字之间的排列通过 align 参数来调整，其对齐方式可分为两类，即绝对对齐方式和相对文字对齐方式。绝对对齐方式包括左对齐、右对齐和居中对齐 3 种，相对文字对齐方式是指图像与一行文字的相对位置。相对文字对齐方式的语法格式如下:
<img src=”图像文件的地址 ” align=”相对文字的对齐方式“>
在该语法中，align 的取值及含义如下表所示：
| align 的取值 | 表示的含义 |
| top | 把图像的顶部和同行的最高部对齐(可能是文本的顶部，也可能是图像的顶部) |
| middle | 把图像的中部和行的中部对齐通常是文本行的基线，并不是实际的行的中部) |
| bottom | 把图像的底部和同行文本的底部对齐 |
| texttop | 把图像的底路和同行文本的顶端对齐 |
| absmiddle | 把图像的中部和同行中最大项的中部对齐 |
| baseline | 把图像的底部和文本的基线对齐 |
| absbottom | 把图像的底部和同行中的最低项对齐 |
| left | 使图像和左边界对齐(文本环绕图像) |
| right | 使图像和右边界对齐(文本环绕图像) |
替换文本与提示文字
在HTML中，可以通过为图像设置替换文本和提示文字来添加提示信息，其中，提示文字是当鼠标悬停在图像上时显示;替换文本是在图像无法正常显示时显示，用以告知用户这是一张什么图片。
1、添加图像的提示文字--title
通过 title 属性可以为图像设置提示文字。当浏览网页时，如果图像下载完成，那么当将鼠标指针放在该图像上时，鼠标指针旁边会出现提示文字。也就是说，当鼠标指针指向图像上方时，可以出现图像的提示文字，用于说明或描述图像，其语法格式如下:
<img src=”图像文件的地址” title=">
其中，title 后面的双引号中的内容为图像的提示文字。
2，添加图像的替换文本-alt
在图像由于下载或路径问题无法显示时，可以通过 alt 属性在图像的位置显示定义的替换文本，其语法格式如下:
<img src=”图像文件的地址”alt='' ">
其中，alt后面的双引号中的内容为图像的替换文本
ps:提示文字和替换文本的内容可以是中文，也可以是英文
链接标签
链接的全称为超文本链接，也称超链接，是HTML 的一个很强大且非常有价值的
功能。链接可以实现将文档中的文字或图像与另一个文档、文档的一部分或一幅图像链接在一起。一个网站是由多个网页组成的，网页之间依据链接确定相互的导航关系。当在浏览器中单击这些对象时，浏览器可以根据指示载入一个新的网页，或者转到网页的其他位置。常用的链接分为文本链接和书签链接。下面具体介绍这两种链接的使用方法。
1.文本链接
在网页中，文本链接是最常见的。文本链接通过网页中的文件和其他文件进行链接其语法格式如下:
<a href="" target="">链接文字 </a>
其中，href为链接地址，是 Hypertext Reference 的缩写;target 为打开新窗口的方式target 属性主要有以下4个属性值。
(1)blank:新建一个窗口打开。
(2)_parent: 在上一级窗口打开，常在分帧的框架网页中使用
(3) self: 在同一窗口打开，默认值。
(4)top:在浏览器的整个窗口打开，将忽略所有框架结构
ps：在上述语法中，链接地址可以是绝对地址，也可以是相对地址。
在填写链接地址时，为了简化代码，并避免文件位置改变而导致链接出错，一般使用相对地址。
2.书签链接
在浏览网页时，如果网页的内客较多、网页过长，那么需要不断拖动滚动条，很不方便(如果要寻找特定的内容，那么将更加不方便)。这时如果在该网页或另外一个网页上建立目录，那么浏览者只要单击目录上的项目就能自动跳转到网页相应的位置进行阅读，这样无疑是方便的，并且还可以在网页中设定诸如“返回页首”之类的链接。这就称为书签链接。
建立书签链接分为两步:一是建立书签，二是为书签制作链接。
图像热区链接
除了对整个图像进行链接的设置，还可以将图像划分成不同的区域进行链接设置。而包含热区的图像也可以称为映射图像。
在为图像设置热区链接时，大致需要经过以下两步。
(1)首先需要在图像文件中设置晚射图像的名称。在添加图像的<img>标签中使用usemap 属性添加图像要引用的映射图像的名称，语法格式如下：
<imgsrce”图像地址”usemap=“映射图像名称“>
(2)然后需要定义热区图像和热区的链接，语法格式如下:
<map name=”映射图像名称“>
<area shape="热区形状”coords="热区坐标”href=”链接地址” />
</map>
在该语法中，要先定义映射图像的名称，再引用这个映射图像。在 <area> 标签中义热区的位置和链接，其中，shape 用来定义热区形状，取值可以为rect (矩形区域)circle(圆形区域)、poly (多边形区域);coords 用来设置热区坐标，对于不同的形状coords 设置的方式也不同。
1.对于矩形区域rect，coords 包含4 个参数，分别为left、top、right 和 bottom，可以将这4 个参数看作矩形两个对角的点坐标。
2.对于圆形区域 circle，coords 包含3 个参数，分别为 center-x、center-y 和 tadius可以将这3 个参数看作圆形的圆心坐标 (x，y) 与半径。
3 对于多边形区域 poly，设置坐标(与多边形的形状息息相关) 参数比较复杂coords 需要按照顺序 (可以是逆时针，也可以是顺时针) 取各个点的x、y坐标值。由定义坐标比较复杂而且难以控制,所以一般情况下都使用可视化软件对这种参数进行设置
评论(0)