8.6 课堂笔记

1.a 标签 超链接延伸 

<!--a标签 超链接延伸  1.回到顶部 -->
    <a href="#">回到顶部</a>
    <!-- 2.空连接（暂时占位 不跳转） -->
    <a href="##"></a>
    <!-- 3.在a标签中添加js代码 -->
    <a href="javascript:alert('123');">回到顶部</a>
    <!-- 4.拨打电话 [移动端使用的]-->
    <a href="tel:19838039671">拨打电话</a>
    <!-- 5.发送邮件 -->
    <a href="mailto:3265660267@qq.com">发送邮件</a>
    <!-- 锚点连接 -->
    <!-- 创建锚点 -->
    <a name="锚点名称"></a>
    <!-- 链接到锚点 同一页面 : -->
    <a href="#锚点名称"></a>
    <!-- 不同页面 : -->
    <a href="目标文档URL# 锚点名称"></a>

2.路径

<!-- 相对路径： -->

./ 同级目录

../ 上级目录

/ 根目录 服务器环境下(在vscode中,把哪个目录拖拽到软键中,哪个目录就是项目根目录)

<!-- -- 绝对路径： -->

D://.......http://www.baidu.com/img/a.png

3.文本标签

字体标签 <font color="" face="" size="1~7"></font>

    粗体标签 <b></b><strong></strong>

    斜体标签 <i></i><em></em>

    下划线标签 <u></u><ins></ins>

    删除线标签 <del></del>

    上标标签 <sup></sup>

    下标标签 <sub></sub>

4.热点地图

<img src="./img/1.png" alt="" usemap="#s">
    <map name="s" id="s">
        <area shape="rect" coords="326,47,505,204" href="https://uland.taobao.com/" alt="" title="淘宝">
        <area shape="circle" coords="415,413,110" href="https://www.jd.com/" alt="" title="京东">
        <area shape="poly" coords="17,251,122,188,219,184,305,260,257,325,249,523,169,492,76,512,56,336" href="https://www.tmall.com/" alt="" title="天猫">
    </map>

5.列表标签

5.1有序列表

<ol>
        <li>1998-2004 金伯利私立小学</li>
        <li>2004-2007 金伯利私立初中</li>
        <li>2007-2010 金伯利私立高中</li>
        <li>2010-2014 杜克大学</li>

5.2无序列表

<ul>
        <li>熟练掌握Java基本语法熟悉面向对象程序设计思想</li>
        <li>熟悉常用的数据结构与算法</li>
        <li>熟悉操作系统中的典型概念熟悉掌握并发编程</li>
        <li>熟练掌握S0L,能够进行基础的增删改查,熟感寒引和事务等机制</li>
        </ul>

6.图文并茂

<figure>
    <figcaption>这是一张图</figcaption>
    <img src="1.png" width="200">
</figure>
<!-- 
figure 插图元素
figcaption 表示插图的标题内容 说明
-->

<figure>
        <h2>春天</h2>
        <img src="./img/spring.png" width="200">
        <figcaption><a href="https://baike.so.com/doc/604678-32333774.html">进入春天</a></figcaption>