整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、空标签概念：
没有与之对应的结束标签的标签
2、常见的空标签：
3、注意事项：
虽然HTML中对空标签是否需要加结束符号“ / ”进行强制规定，但是在XHTML（XML规范的HTML版本）或XML中，对空标签进行强制要求，指出空标签必须使用结束标志，大多数人推荐使用规范的编写格式，并且在未来将会对空标签的结束符号进行强制要求。
在html中，在空标签上使用闭标签是无效的，例如：</br>。这样的情况是无效的HTML。
标
突出一篇文章的重点区域，快速修饰文本内容的样式，避免全篇文章都是白纸黑字，引起视觉疲劳。
修饰过后的文章
作用：文字倾斜
标签：i、em
区别：em是会被搜索引擎收录
<i>我是倾斜标签i</i> <em>我是倾斜标签em</em>
倾斜效果
作用：文字加粗
标签：b、strong
区别：strong是会被搜索引擎收录
<b>我是加粗标签b</b> <strong>我是加粗标签strong</strong>
加粗效果
作用：对文本进行补充说明
标签：sup上标sub下标
上下标运用
上下标效果
作用：对文本增强注意
标签：ins下划线del删除线
划线标运用
划线标效果
作用：对文本进行高亮显示
标签：mark
显示标运用
显示标效果
作用：对文本进行缩小显示
标签：small
缩小标运用
修饰标签
更多前端教程，敬请关注微信公众号：前端旺
1.图片尺寸不能变
使用<area>标签定义图片区域链接时的coords属性值只能是数字！
这就意味着一旦改变使用<map><area/></map>定义区域链接的图片尺寸发生改变，之前定义的区域也就不能覆盖在正确的画面位置了。
在网页制作中，如果我们把<img/>标签的"width"或“height”设为百分数，随着浏览器视域范围的改变，图片区域链接将会发生错误。
我们来演示一下，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>图片区域链接</title>
<meta charset="utf-8">
</head>
<body>
<div style="width:100%;">
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="poly" coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"/>
</map>
</div>
</body>
</html>这时，图片尺寸和区域链接是匹配的。
如果我们修改<img/>中的width属性，情况就会发生变化，如下：
<img width="100%" src="img/image1.jpg" usemap="#map"/>效果如图：
图片放大后，区域链接位置不再正确匹配。
如果同时修改<img/>以及外部的<div>的“width”，也会发生类似情况，如下
<div style="width:25%;">
<img width="100%" src="img/image1.jpg" usemap="#map"/>效果如图：
超出图片尺寸范围后，点击时，区域链接的外边框也不会显示出来。
我们当然不希望这种情况的发生，有解决办法吗？
当然有，一种是“笨”方法，一种是“聪明”方法。
先说“聪明”方法：就是使用JavaScript，设置触发事件，调取视窗宽度，算出视窗高宽变化比例，然后为coords属性值乘以这个比例，就可以实时随图片变化改变区域链接范围了。不过目前我们还不能写出JavaScript脚本。
“笨”方法就是尽量不在代码中改变图片尺寸，而是针对页面布局的尺寸去添加一张尺寸相符的图片。
也就是直接改变图片尺寸后替换原图片，或输出为一张新图片在页面中使用。
这就要介绍一下如何使用Gimp去改变图片尺寸。
2.预先计算图片尺寸的方法
在改变图片尺寸之前要预先计算图片恰当的尺寸。
例如我做了一个居中显示的页面，但是图片尺寸太大，不能正常显示，如图：
正常的话我们会使用<img/>的width属性来设置，但是因为有区域链接，所以还是要修改图片的真实尺寸。
这个页面中内容都是写在一个<div>中，它的宽度是600px，我们只要让图片的宽度等于600px就可以正常显示了。
我使用Gimp修改长宽后，输出了一张叫做“image1.jpg”的图片。
我们看下效果。如图:
我们来看一下操作过程吧。
3.使用Gimp软件修改图片尺寸
第一步，打开软件，导入大尺寸图片，如图：
大家观察一下F20.jpg尺寸。
第二步，在菜单栏中找到“图像”按钮，点击后，找到“缩放图像”，如图:
第三步，修改图像尺寸，首先确定等比例缩放是否激活。如图：
红框中的图标就是等比例锁定的图标。
将“宽度”数值修改为600。然后，点击红框中的等比例图标。如图：
变成这样：如图：
然后点击“缩放”。如图：
最后一步就是输出为“image1.jpg”了。如图：
export as就是“输出为”的意思，点击后选择存储路径和格式，如图：
这里我们选择jpg，如图
点击导出后就可以了。
完整操作过程见视频：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
最后我们在html中修改<img/>中的路径与名称就可以正常显示了。
今天的内容结束了。
使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
HTML中的图片区域链接方法详解——零基础自学网页制作
用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作
用HTML制作一个简单页面(详解)——零基础自学网页制作（完结篇）
*请认真填写需求信息，我们会在24小时内与您取得联系。
