企业官网建设流程全解析

1.文本标签

(1)用于包裹词汇、短语等。
(2)通常写在排版标签里。
(3)排版标签宏观，文本标签微观。
(4)文本标签通常是行内元素。
常用文本标签：
em：要着重阅读的内容
strong：十方重要的内容(语气比em强)
span：没有语义，用于包裹短语的通用容器。

不常用的文本标签：
cite：作品标题
dfn：特殊术语，或专属名词
del和ins：删除的文本【与】插入的文本
sub与sup：下标文字【与】上标文字
code：一段代码
samp：从正常的上下文中将某些内容提取出来
kbd：键盘文本，表示文本是通过键盘输入的
abbr：缩写，配合title属性
bdo：更改文本方向，要配合dir属性，可选值是ltr(默认)、rtl
var：标记变量，可以和code标签一起使用
small：附属细则
b：摘要中的关键字、评论中的产品名称
i：本意：人物的思想活动、所说的话，现在多用于呈现字体图片
u：与正常内容有反差文本(不常用)
q：短引用(不常用)
blockquote：长引用(不常用)
address：地址信息
2.图片标签

2.1 基本使用

标签名 标签语义 常用属性
img 图片 src：图片路径（又称：图片地址）——图片的具体位置

alt：图片描述

width：图片宽度，单位是像素

height：图片高度，单位是像素
总结
1. 像素（px）是一种单位，学到 CSS 时，我们会详细讲解。
2. 尽量不同时修改图片的宽和高，可能会造成比例失调。
3. 暂且认为 img 是行内元素（学到 CSS 时，会认识一个新的元素分类）。
4. alt 属性的作用：
- 搜索引擎通过 alt 属性，得知图片的内容。——最主要的作用。
- 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
- 盲人阅读器会朗读 alt 属性的值。

2.2 路径的分类

1.相对路径：以当前位置作为参考点，去建立路径

已有结构 符合 含义

文件 ./ 同级

/ 下一级

../ 上一级

2.绝对路径：以根位置作为参考点，去建立路径

(1)本地绝对路径： E：a/b/c/哦杰哥.jpg (很少用)
(2)网络绝对路径： https://ww.atguigu.com/images/index_new/logo.png

注意点：本地绝对路径如果更换设备处理起来很麻烦；

如果服务器开启了防盗链，就无法使用网络绝对路径。

2.3常见图片格式

1.jpg格式：

概述：扩展名为.jpg或.jpeg，是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)
特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图--该格式在网页里很常见。

2.png格式：

概述：扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。
特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
场景：:1想让图片有透明背景;2想更高质量的呈现图片;例如:公司logo图、重要配图等。

3.bmp格式:
概述:扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
场景:对图片细节要求极高的场景，例如:一些大型游戏中的图片。(网页中很少使用)

4.gif格式:
概述:扩展名为.gif，仅支持256种颜色，色彩呈现不是很完整。
特点:支持的颜色较少、支持简单透明背景、支持动态图。
场景:网页中的动态图片。

5.webp格式:
概述:扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
特点:具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
场景:网页中的各种图片。

6.base64格式
1.本质:一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2.原理:把图片进行base64编码，形成一串文本。
3.如何生成:靠一些工具或网站。
4.如何使用:直接作为img标签的src属性的值即可，并且不受文件位置的影响。
5.使用场景:一些较小的图片，或者需要和网页一起加载的图片。

3.超链接

主要作用:从当前页面进行跳转。

标签名：a

标签语义：超链接

常用属性：

·href：要跳转的具体位置。

·target :跳转时如何打开页面，常用值如下：

_self:在本页签中打开。

_blank:在新页签中打开。

3.1跳转到页面

<!--跳转其他网页-->
<a href="https://Ww.jd.com/" target="_blank">去京东</a>

<!--跳转本地网页-->
<a href="./10_HTML排版标签.html” target=”_self">去看排版标签</a>

注意点:
1.代码中的多个空格、多个回车，都会被浏览器解析成一个空格!
2.虽然a是行内元素，但a元素可以包裹除它自身外的任何元素!

3.2 跳转到文件

<!-- 浏览器能直接打开的文件-->
<a href=”./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href=”./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!--浏览器不能打开的文件，会自动触发下载-->
<a href="./resource/内部资源.zip">内部资源</a>
<!--强制触发下载-->
<a href="./resource/小电影.mp4"download="电影片段.mp4">下载电影</a>
注意1:若浏览器无法打开文件，则会引导用户下载。
注意2:若想强制触发下载，请使用download属性，属性值即为下载文件的名称。

3.3 跳转到锚点

锚点：网页中的一个标记点。

·第一步:设置锚点
<!--第一种方式:a标签配合name属性 -->
<a name="test1"></a>
<!--第二种方式:其他标签配合id属性 -->
<h2id="test2">我是一个位置</h2>

注意点:
1.具有href属性的a标签是超链接，具有name 属性的a标签是锚点。
2.name和id都是区分大小写的，且id最好别是数字开头。

·第二步:跳转锚点
<!--跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!--跳到本页面顶部-->
<a href="#">回到顶部</a>
<!--跳转到其他页面锚点-->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!--执行一段js,如果还不知道执行什么，可以留空，javascript:;-->
<a href="javascript:alert(1);">点我弹窗</a>

3.4唤起指定应用
通过a标签，可以唤起设备应用程序。
喷逊栏定应用png
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!--唤起设备发送邮件-->
<a href="mailto:10010@qq.com">邮件联系</a>
<!--唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>