【day02】

a标签的补充

  1.基础语法结构

 <a href="http://www.baidu.com" title="百度一下,你就知道" target="_blank">百度</a>

     title: 鼠标悬浮显示的文字        blank  在新窗口打开       self   在当前窗口打开

2.给超链接添加返回顶部效果

<a href="#">返回顶部</a>

3.空连接（暂时占位，不跳转）

< a href="#">返回顶部</a>

4.在a标签中添加js代码

<a href="javascript:alter('123');">返回顶部</a>

   alter  提示框

5.拨打电话（移动端使用）

<a href="tel:"电话号码">拨打电话</a>

6.发送邮件

<a href="mailto:邮箱">发送邮件</a>

锚点链接

  创建锚点

<a name ="锚点名称"></a>

链接到锚点同一页面

< a href="锚点名称"></a>

链接到锚点不同页面

< a href="目标文档URL（路径）#锚点名称"></a>

作用：可以直接跳转到该锚点链接，无需不停地滚动来寻找

热点地图

 <a href="http://www.baidu.com" >
        <img src="./img/R-C.jfif" alt="衣服4" usemap="#only">
        <map name="only" id="only" >
            <area shape="rect" coords="279,21,552,374" href="http://www.baidu.com" alt="上衣" target="blank">
            <area shape="circle" coords="306,749,60" href="http://jd.com" alt="鞋子" target="blank">
            <area shape="poly" coords="297,393,504,398,518,672,468,658,401,443,351,653,301,659,297,393" href="http://taobao.com" alt="裤子" target="blank">
        </map>
    </a>

rect  矩形 取两个顶点，定点延伸的交点就是矩形的范围

circle 圆形  取圆心，圆心到另一边的距离运算得到半径

poly  多边形   取多边形的每个顶点环绕一周回到起点

列表标签

有序列表

 <ul type="disc|square|circle">
        <li>谷歌</li>
        <li>天猫</li>
        <li>京东</li>
        <li>淘宝</li>
        <li>唯品会</li>
    </ul>

disc  实心圆        square    实心矩形          circle    空心圆

无序列表

 <ol type="a|A|i|I" start="num">
        <li>谷歌</li>
        <li>天猫</li>
        <li>京东</li>
        <li>淘宝</li>
        <li>唯品会</li>
   </ol>

a,A,i,I指的是类型，a是a~z,A是A~Z,i和I是罗马数字大写和小写之分，num 指的是第几个数字，

start ="num"指的是从第几个数字开始

自定义列表

<dl>
    <dd></dd>
    <dt></dt>
</dl>

字符实体

• 在 HTML 中，某些字符是预留的，比如HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签

• 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，比如<用 < 或< 表示

• 字符实体由三部分组成：

  • 以&开始

  • 中间为实体名或实体编号

  • 以 ; 结束

• 实体名称便于记忆而实体编号的浏览器兼容性更好

图文并茂

<figure>
    <figcaption>文字</figcaption>
    <img src="1.png" width="200">
</figure>

figure 插图元素 
figcaption 表示插图的标题内容