前端学习-第一阶段-day02

一.学习内容

1.超链接的使用：

csdn首页

2.锚点的使用(快速跳转页面到锚点设置位置)

要配合id的使用,引用id前要加#键

<a href="#box">点我跳转到div</a>
<div id="box"></div>

3.列表系列

无序列表（可用ul>li*n快捷设置多行）

<ul type:square>
       <li>无序1</li>
       <li>无序2</li>
       <li>无序3</li>
</ul>

其中type设置文字前的符号：square正方形 /circle空心圆 /desc实心圆 /none没有。

有序列表（可用ol>li*n快捷设置多行）

<ol type="1" start="6">
       <li>有序1</li>
       <li>有序2</li>
       <li>有序3</li>
       <li>有序4</li>
       <li>有序5</li>
   </ol>

其中type设置排序方式，a/A/I/i,通过start用数字设置排序起始数目

3.表格结构

<table  border="1px" cellpadding="0"  cellspacing="0" style="border-collapse:collapse"
   
   align="center" ><tbody>
        <tr>
            <td>这里输入文字或图片</td>
            <td>这里输入文字或图片</td>
            <td>这里输入文字或图片</td>
        </tr>
    </tbody></table>
    <!-- 其中一对<tr></tr>表示一行，一对<td></td>表示一列 -->

其中border设置表格网格线的粗细，cellpadding设置单元格内部的文字与单元格的距离，cellspacing设置单元格与单元格之间的距离；

style="border-collapse:collapse"设置取消多个单元格距离设置为0后，使重复的双边框变单边框，table里的align设置的是表格的位置，写在td里则设置的是文字在单元格里的位置。

4.列表单元格的合并属性

跨行合并

上代码表示，把“你好”所在的单元格与下面的2个单元格合并，被合并的单元格需要删除，否则列表的样式会发生改变。

跨列合并

上代码表示，把“你好”所在的单元格与右面的3个单元格合并，被合并的单元格需要删除，否则列表的样式会发生改变。

5.css样式向html文档的三种引用方法

优先级为：行内引用>内部嵌用>外部引用

二.今日练习

练习图片

前端学习-第一阶段-day02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aqua{
            color: rgb(2, 190, 190);
            
        }
        .orange{
            color: orange;
        }
        .border{
            width: 10px;
            height: 10px;
            border-right: 1px solid rgba(0, 0, 0, 0.5);
            padding-right: 5px;
        }
    </style>
</head>
<body>
    <p>
        <span class="aqua">直辖市：</span> 
        <span class="border">北京</span> 
        <span class="orange border">上海</span>
        <span class="border">天津</span>
        <span>重庆</span>
    </p>
    <p>
        <span class="aqua">港澳台：</span>
        <span class="orange border">香港</span>
        <span class="border">澳门</span>
        <span class="border">台湾</span>
        <span class="border">台北</span>
        <span class="border">高雄</span>
        <span class="border">花莲</span>
        <span class="orange border">垦丁</span>
        <span class="border">高雄</span>
        <span class="border">花莲</span>
        <span>垦丁</span>
    </p>
    <p>
        <span class="aqua">云南：</span>
        <span class="border">香港</span>
        <span class="border">澳门</span>
        <span class="border">台湾</span>
        <span class="border">台北</span>
        <span class="orange border">高雄</span>
        <span class="border">花莲</span>
        <span class="border">垦丁</span>
        <span class="orange border">高雄</span>
        <span class="border">花莲</span>
        <span class="border">垦丁</span>
        <span class="border">花莲</span>
        <span>垦丁</span>
    </p>
</body>
</html>

前端学习-第一阶段-day02

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>豆瓣音乐人</h2>
    <h4>热门音乐人</h4>
    <table cellpadding="10px" cellspacing="10px">
        <tbody>
            <tr>
                <td><img src="./img/img04.png">
                    <div>你好</div>
                </td>
                <td><img src="./img/img04.png">
                    <div>你好</div>
                </td>
                <td><img src="./img/img04.png">
                    <div>你好</div>
                </td>
                <td><img src="./img/img04.png">
                    <div>你好</div>
                </td>
                <td><img src="./img/img04.png">
                    <div>你好</div>
                </td>
            </tr>
            <tr>
                <td><img src="./img/img04.png">
                    <div>你好</div< /td>
                <td><img src="./img/img04.png">
                    <div>你好</div< /td>
                <td><img src="./img/img04.png">
                    <div>你好</div< /td>
                <td><img src="./img/img04.png">
                    <div>你好</div< /td>
                <td><img src="./img/img04.png">
                    <div>你好</div< /td>
            </tr>
        </tbody>
    </table>


</body>

</html>

三.练习过程出现的问题及解决方法

第二个图片里“你好”的字样，我一开始是新建了一行td，放在里面的，后来发现，“你好”与上下的间距是居中的，不能贴近上面的图片，后来把“你好”放在了div的盒子里才解决

前端学习-第一阶段-day02