html和css進階

相對地址與絕對地址

網頁上引入或連結到外部檔案，需要定義檔案的地址，常見引入或連結外部檔案包括以下幾種：

<!-- 引入外部圖片   -->

<img src="data:images/001.jpg" alt="圖片" />

<!-- 連結到另外一個網頁   -->

<a href="002.html">連結到網頁2</a>

<!-- 外鏈一個css檔案   -->

<link rel="stylesheet" type="text/css" href="css/main.css" />

<!-- 外鏈一個js檔案   -->

<script type="text/javascript" src="js/jquery.js"></script>

這些地址分為相對地址和絕對地址:

相對地址
相對於引用檔案本身去定位被引用的檔案地址，以上的例子都是相對地址，相對地址的定義技巧：

“ ./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images資料夾中的pic.jpg的圖片。

絕對地址
相對於磁碟的位置去定位檔案的地址，比如：<img src="C:\course5\03day\images\001.jpg" alt="圖片" /> 絕對地址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，相對地址就沒有這個問題。

列表標籤

列表一般應用在佈局中的新聞標題列表和文章標題列表以及選單，它是含有語義的，標籤結構如下：

<ul>

    <li>列表標題一</li>

    <li>列表標題二</li>

    <li>列表標題三</li>

</ul>

列表的內容一般是可以連結的，點選連結到新聞或者文章的具體內容，所以具體結構一般是這樣的：

<ul>

    <li><a href="#">列表標題一</a></li>

    <li><a href="#">列表標題二</a></li>

    <li><a href="#">列表標題三</a></li>

</ul>

列表相關樣式
list-style 去掉列表項的小圓點，比如：list-style:none

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .list{

            /* 去掉列表的小圓點 */

            list-style:none;

            /* 去掉預設的內邊距和外邊距 */

            padding:0px;

            margin:0px;

        }

        .list li{

            line-height:50px;

            border-bottom:1px solid black;

            /* 設定文字首行縮排兩個字，文字預設大小是16px */

            text-indent:32px

        }

        .indent{

            text-indent:32px;

        }

    </style>

</head>

<body>

    <!-- ul>li{列表文字}*8 -->

    <ul class="list">

        <li>列表文字</li>

        <li>列表文字</li>

        <li>列表文字</li>

        <li>列表文字</li>

        <li>列表文字</li>

        <li>列表文字</li>

        <li>列表文字</li>

        <li>列表文字</li>

    </ul>

    <!-- ul>(li>a{列表文字})*8 -->

    <ul>

        <li><a href="#">列表文字</a></li>

        <li><a href="#">列表文字</a></li>

        <li><a href="#">列表文字</a></li>

        <li><a href="#">列表文字</a></li>

        <li><a href="#">列表文字</a></li>

        <li><a href="#">列表文字</a></li>

        <li><a href="#">列表文字</a></li>

        <li><a href="#">列表文字</a></li>

    </ul>

</body>

</html>

列表表單

html表單

表單用於蒐集不同型別的使用者輸入，表單由不同型別的標籤組成，相關標籤及屬性用法如下：

1、<form>標籤定義整體的表單區域

action屬性 定義表單資料提交地址

method屬性 定義表單提交的方式，一般有“get”方式和“post”方式

2、<label>標籤為表單元素定義文字標註

3、<input>標籤定義通用的表單元素

type屬性

type="text" 定義單行文字輸入框

type="password" 定義密碼輸入框

type="radio" 定義單選框

type="checkbox" 定義複選框

type="file" 定義上傳檔案

type="submit" 定義提交按鈕

type="reset" 定義重置按鈕

type="button" 定義一個普通按鈕

value屬性 定義表單元素的值

name屬性 定義表單元素的名稱，此名稱是提交資料時的鍵名

4、<textarea>標籤定義多行文字輸入框

5、<select>標籤定義下拉表單元素

6、<option>標籤與<select>標籤配合，定義下拉表單元素中的選項

登錄檔單例項：

<form action="http://www..." method="get">

<p>

<label>姓名：</label><input type="text" name="username" />

</p>

<p>

<label>密碼：</label><input type="password" name="password" />

</p>

<p>

<label>性別：</label>

<input type="radio" name="gender" value="0" /> 男

<input type="radio" name="gender" value="1" /> 女

</p>

<p>

<label>愛好：</label>

<input type="checkbox" name="like" value="sing" /> 唱歌

<input type="checkbox" name="like" value="run" /> 跑步

<input type="checkbox" name="like" value="swiming" /> 游泳

</p>

<p>

<label>照片：</label>

<input type="file" name="person_pic">

</p>

<p>

<label>個人描述：</label>

<textarea name="about"></textarea>

</p>

<p>

<label>籍貫：</label>

<select name="site">

    <option value="0">北京</option>

    <option value="1">上海</option>

    <option value="2">廣州</option>

    <option value="3">深圳</option>

</select>

</p>

<p>

<input type="submit" name="" value="提交">

<input type="reset" name="" value="重置">

</p>

</form>

表單註冊

表單常用樣式、屬性及示例

outline 設定input框獲得焦點時，是否顯示凸顯的框線，一般設定為沒有,比如：outline:none;
placeholder 設定input輸入框的預設提示文字。

表單佈局例項

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .search_form{

           width:602px;

           height:42px;

           background:gold;

           margin:100px auto 0px;

        }

        .input_txt{

           width:500px;

           height:40px;

           border:1px solid #0fad10;

            /*清除輸入框預設的padding值  */

            padding:0px;

            /* 去掉輸入框獲得焦點時顯示的藍色的凸顯的框線 */

            outline:none;

            /* 設定文字縮排 */

            text-indent:10px;

            /* 通過浮動解決行內元素預設間距以及基線對齊的問題 */

            float: left;

        }

        .input_sub{

            width:100px;

            height:42px;

            background: #0fad10;

            /* 去到按鈕預設的邊框 */

            border:0px;

             /* 通過浮動解決行內元素預設間距以及基線對齊的問題 */

             float: left;

             color:#fff;

             font-size:18px;

             font-family:'Microsoft YaHei';

        }

    </style>

</head>

<body>

    <form class="search_form" action="https://www.baidu.com/s">

        <!-- 通過placeholder屬性來設定輸入框預設的提示文字 -->

        <input type="text" class="input_txt" placeholder="請輸入搜尋內容" name="wd">

        <input type="submit" value="搜 索" class="input_sub">

    </form>

</body>

</html>

搜尋

表格元素及相關樣式

1、<table>標籤：宣告一個表格

2、<tr>標籤：定義表格中的一行

3、<td>和<th>標籤：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格

表格相關樣式屬性

border-collapse 設定表格的邊線合併，如：border-collapse:collapse;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .tablestyle01{

            width:500px;

            height:300px;

            border:1px solid black;

            /* 表格水平居中 */

            margin:0px auto;

            /* 將表格的邊線合併成一條線 */

            border-collapse:collapse;

        }

        .tablestyle01 tr:hover{

            background:lightpink;

        }

        .tablestyle01 td{

            border:1px solid black;

            /* 設定文字的水平對齊方式 */

            text-align:center;

        }

        .tablestyle01 th{

            border:1px solid black;

            background:blue;

            color:white;

        }   

    </style>

</head>

<body>

    <!-- table>(tr>td*5)*4 -->

    <table class="tablestyle01">

        <tr>

            <th>id</th>

            <th>姓名</th>

            <th>性別</th>

            <th>年齡</th>

            <th>班級</th>

        </tr>

        <tr>

            <td>1</td>

            <td>張山</td>

            <td>男</td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td>2</td>

            <td>李思</td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td>3</td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td>4</td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

</body>

</html>

建立表格

css選擇器二

4、id選擇器

通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id名一般給程式使用，所以不推薦使用id作為選擇器。
舉例：

#box{color:red}

......

<p id="box">這是一個段落標籤</p>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->

<p>這是第二個段落標籤</p> <!-- 無法應用以上樣式，每個標籤只能有唯一的id名 -->

<p>這是第三個段落標籤</p> <!-- 無法應用以上樣式，每個標籤只能有唯一的id名  -->

5、組選擇器

多個選擇器，如果有同樣的樣式設定，可以使用組選擇器。舉例：

.box1,.box2,.box3{width:100px;height:100px}

.box1{background:red}

.box2{background:pink}

.box2{background:gold}

<div class="box1">....</div>

<div class="box2">....</div>

<div class="box3">....</div>

6、偽類選擇器

常用的偽類選擇器有hover，表示滑鼠懸浮在元素上時的狀態。

.box1{width:100px;height:100px;background:gold;}

.box1:hover{width:300px;}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{

            width:100px;

            height:100px;

            background:gold;

        }

        /* 定義偽類選擇器 */

        .box:hover{

            width:200px;

            height:200px;

            background:red;

        }

        .link01{

            color:black;

            text-decoration:none;

        }

        .link01:hover{

            color:red;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <br>

    <br>

    <br>

    <a href="#" class="link01">這是一個連結</a>

</body>

</html>

偽類選擇器

css顯示特性

display屬性是用來設定元素的型別及隱藏的，常用的屬性有：

1、none 元素隱藏且不佔位置

2、inline 元素以行內元素顯示

3、block 元素以塊元素顯示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{

            /* 將塊元素轉化為行內元素 */

            display:inline;

            background:gold;

            font-size:26px;

        }

        .link01{

            background:pink;

            /* 將行內元素轉化為塊元素 */

            display:block;

            width:200px;

            height:200px;

        }

        .box2{

            width:200px;

            height:200px;

            background:greenyellow;  

            /* 將元素隱藏起來 */

            display:none;

        }   

    </style>

</head>

<body>

    <div class="box2"></div>

    <div class="box">這是第一個div</div>

    <div class="box">這是第二個div</div>

    <a href="#" class="link01">這是第一個連結</a>

    <a href="#" class="link01">這是第二個連結</a>

</body>

</html>

顯示特徵

css元素溢位

當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式，設定的方法是通過overflow屬性來設定。

overflow的設定項：

1、visible 預設值。內容不會被修剪，會呈現在元素框之外。

2、hidden 內容會被修剪，並且其餘內容是不可見的。

3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。

4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .con{

            width: 300px;

            height: 300px;

            border:1px solid black;

            margin:50px auto 0px;

            /* 在父級上設定子元素溢位的部分如何顯示 */

            /*

                overflow:

                    visible  顯示溢位的部分

                    hidden   隱藏溢位的部分

                    scroll   不管是否超出，都顯示滾動條的背景框或者滾動條

                    auto     根據子元素的尺寸，動態顯示滾動條

             */

            overflow:auto;

        }

        .box{

            width:200px;

            height:500px;

            background:gold;

        }

    </style>

</head>

<body>

    <!-- .con>.box -->

    <div class="con">

        <div class="box">

            <div>文字內容</div>

            <br>

            <br>

            <br>

            <div>文字內容</div>

            <br>

            <br>

            <br>

            <div>文字內容</div>

        </div>

    </div>

</body>

</html>

html和css進階