企业官网建设流程全解析

1.相对路径与绝对路径

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

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

2.常见的图片格式

jpg格式

png格式

bmp格式

gif格式

webp格式

base64格式

3.超链接

主要作用：进行页面跳转
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。

• 跳转页面

<!-- 跳转其他网页 --> <a href="https://www.jd.com/" target="_blank">去京东</a> <!-- 跳转本地网页 --> <a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

注意点：

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

• 跳转文件

<!-- 浏览器能直接打开的文件 --> <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 属性，属性值即为下载文件的名称。

• 跳转到锚点
  1.设置锚点

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

注意点：

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

<!-- 跳转到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>

• 唤起指定应用

<!-- 唤起设备拨号 --> <a href="tel:10010">电话联系</a> <!-- 唤起设备发送邮件 --> <a href="mailto:10010@qq.com">邮件联系</a> <!-- 唤起设备发送短信 --> <a href="sms:10086">短信联系</a>

列表

1.有序列表

2.无序列表

3.列表嵌套



4.自定义列表

表格

• 基本结构

1. 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
2. 表格涉及到的标签：
   
   

• 常用属性
  
  
• 跨行跨列

1. rowspan ：指定要跨的行数。
2. colspan ：指定要跨的列数。

常用标签补充