html学习笔记2

路径的分类

1. 相对路径：
   • ./：同级 /：下一级 …/：上一级
   • 相对路径的./可以省略不写
   • 相对路径依赖当前位置，调整了文件位置，路径也要相应修改
2. 绝对路径：
   • 绝对路径分为本地绝对路径和网络绝对路径
   • 网络绝对路径，比较方便，但要注意：若服务器开启了防盗链，会造成图片引入失败

超链接

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

标签：a 属性：href：跳转的位置 target：_self（默认，本页面） _blank：（新标签）

注意点:

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

跳转到文件

• 浏览器能直接打开的文件

<a href="./自拍.jpg">看自拍</a>

• 浏览器不能打开的文件，会自动触发下载

<a href="./内部资源.zip">内部资源</a>

• 强制触发下载

<a href="./自拍.jpg" download="看自拍">看自拍</a>

注意：

1. 若浏览器无法打开文件，则会引导用户下载。
2. 若想强制触发下载，请使用download属性，属性值即为下载文件的名称。

跳转到锚点

什么是锚点？–网页中的一个标记点

具体使用方式：

• 第一步：设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">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 -->
<a href="javascript:alert(1)">点我弹窗</a>

超链接唤起指定应用

通过a标签，可以唤起设备应用程序。

<!-- 唤起设备拨号 -->
<a href="tel:10086">电话联系</a>

<!-- 唤起设备发送邮件 -->
<a href="mailto:123@qq.com">邮件联系</a>

<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

超文本

是一种组织信息的方式，通过超链接将不同空间的文字、图片、等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）。

列表

1.有序列表

概念：有顺序或侧重顺序的列表

<ol>
     <li>a</li>
     <li>b</li>
     <li>c</li>
 </ol>

2.无序列表

概念：无顺序或不侧重顺序的列表

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ul>

3.列表嵌套

概念：列表中的某项内容，又包含一个列表（注意：嵌套时，务必请把结构写完整）。

<ol>
     <li>a
         <ul>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>
     </li>
     <li>b</li>
     <li>c</li>
 </ol>

4.自定义列表

1. 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
2. 一个dl就是一个自定义列表，一个dt就是一个属于名称，一个dd就是术语描述（可以有多个）。

<dl>
    <dt>A</dt>
    <dd>peter</dd>
    <dt>B</dt>
    <dd>faker</dd>
    <dt>C</dt>
    <dd>gala</dd>
</dl>