day02

标签

1、标题标题

在网页中生成标题的，一般是字体变大，加粗 一共有六个标题

<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

特点：一级标题到六级标题，字体逐渐变小，颜色变浅

2、段落标签

就是文章中生成段落的

<p>段落标签，段与段之间空一行，行与行之间紧紧挨着，不会空一行</p>

3、图片标签

单标签，使用的是< img >，有属性src，代表的是图片的一个路径

注意：在站点内，存放图片的文件夹可以起名叫 images 或者叫img（推荐使用），也可以使用汉语拼音 tupian（太low），但是不能使用中文或者特殊字符(# % …… && )

<!-- 属性：属性就是在开始标签内，使用空格隔开的一个补充描述   -->
<!-- src:在引号内是图片的存放路径 -->
<img src="img/1.jpeg" alt="">

<!-- ./: 提示符 提示当前目录下的所有的文件-->
<img src="./img/1.jpeg" alt="">

相对路径： 在站点内，相对于某个文件夹，按照某种路线，找到图片

绝对路径：就是超出站点的范围，到站点文件夹的外面去找图片，比如有磁盘名或者有http/https协议的

<img src="https://pics5.baidu.com/feed/0bd162d9f2d3572cd2883c85787abe2e63d0c3f1.jpeg?token=58c721d29770ea1da81e9181a68e07c6" alt="">

属性的使用

<!--  
alt：文本提示，当图片因为路径错误，不显示图片的时候，使用文字代替图片 如果图片正常显示，文字是看不见的 
title：鼠标在图片上停下的时候，会显示title提示语
-->
<img src="img/1.jpeg" alt="冬奥会两个男人差点亲上了"  title="提示语">

超链接 – 跳转标签

使用的是 ，有属性href，是超链接的跳转路径

<!-- 相对路径 -->
<a href="./3-图片标签.html">跳转到第三个页面</a>

<!-- 绝对路径  -->
<a href="http://www.baidu.com">百度</a>

<!-- 给图片添加跳转地址  -->
<a href="https://haokan.baidu.com/v?vid=13676224844592589707&sfrom=baidu-feed">
    <img src="./img/1.jpeg" alt="">
</a>

无序列表

是带有默认样式(一个小黑点)的ul标签，有子元素 li

一个网页中可以有无数个ul标签 一个ul下面，可以有无数个li标签

• 111

• 222

<ul>
    <li></li>
.......
</ul>

有序列表

前面带有数字，表示顺序

1. 1
2. 22
3. 333

<ol>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
</ol>

自定义列表

段落前无任何标记符号或文字

<!--  一个dl下面有多个dt  
一个dt可以对应多个dd -->
<dl>
    <dt>购物指南</dt>
        <dd>购物流程</dd>
        <dd>购物流程</dd>
        <dd>购物流程</dd>
        <dd>购物流程</dd>
        <dd>购物流程</dd>
    <dt>配送方式</dt>
        <dd>上门自取</dd>
        <dd>海外配送</dd>
        <dd>上门自取</dd>
        <dd>海外配送</dd>
</dl>