前端學習-第一階段-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