CSS 列表欄(li)如何顯示豎線

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
}
ul{
width: 1200px;
height: 40px;
line-height: 40px;
margin: 50px auto;
}
ul>li{
float: left;
width: 120px;
height: 40px;
cursor: pointer;
text-align: center;
position: relative; /* 相對定位 */
}
ul>li:hover{
background-color: deepskyblue;
}
/* 豎線 */
li:after{
    content: '';
    width: 1px;
    height: 16px;
    display: inline-block;
    background-color: #000;
    position: absolute;
    right: 0;
    top: 12px;
}
li.last:after{
display: none;
}
</style>
</head>
<body>
<ul>
<li>首頁</li>
<li>
公司動態(tài)
</li>
<li>新聞中心
</li>
<li>企業(yè)風(fēng)采</li>
<li class="last">關(guān)于我們</li>
</ul>
</body>
</html>

用content: '';樣式實現(xiàn)

成	語言	描述
結(jié)構(gòu)	HTML	網(wǎng)頁元素和內(nèi)容
表現(xiàn)	CSS	網(wǎng)頁元素頁面樣式
行為	JavaScript	網(wǎng)頁交互

1 HTML概念

HTML，超文本標(biāo)記語言（Hyper Text Markup Language），是一門描述性語言。標(biāo)記，標(biāo)簽，元素，叫法不同，意思相同。HTML超文本標(biāo)記語言主要通過標(biāo)簽的方式，對網(wǎng)頁頁面的文本、圖片、音頻、視頻等內(nèi)容進(jìn)行描述。學(xué)習(xí)HTML，就是學(xué)習(xí)各種標(biāo)簽，來搭建網(wǎng)頁的結(jié)構(gòu)。

2 HTML結(jié)構(gòu)

結(jié)構(gòu)：!DOCTYPE

說明：作用是告訴瀏覽器用哪個文檔規(guī)范來解析文檔

標(biāo)簽：html

說明：用于搭建HTML網(wǎng)頁文檔結(jié)構(gòu)和網(wǎng)頁布局

?標(biāo)簽：head

說明：用于定義HTML網(wǎng)頁文檔的頭部,它是所有頭部元素的容器?

?標(biāo)簽：body

說明：用來定義HTML網(wǎng)頁文檔的主體區(qū)域?

?標(biāo)簽：meta

說明：用來描述HTML網(wǎng)頁文檔的屬性?

?標(biāo)簽：title

說明：用來放到HTML網(wǎng)頁文檔的頭部，是搜索引擎首要抓取的目標(biāo)代碼?

?2.1 標(biāo)簽

標(biāo)簽，也叫作標(biāo)記，是由一對尖括號<>，里面包含單詞組成

2.1.1 雙標(biāo)簽

<html></html>

2.1.2 單標(biāo)簽

<br>

2.1.3 標(biāo)簽關(guān)系

嵌套關(guān)系

<html>
    <head>
    </head>
</html>

并列關(guān)系

<head>
</head>
<body>    
</body>

3 注釋

注釋用來幫助程序員記錄程序設(shè)計方法，輔助程序閱讀

4 head標(biāo)簽

4.1 title標(biāo)簽

雙標(biāo)簽，定義網(wǎng)頁的標(biāo)題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta標(biāo)簽

是單標(biāo)簽，用來描述HTML網(wǎng)頁文檔的屬性

4.2.1 name屬性

屬性值	說明
keywords	網(wǎng)頁關(guān)鍵字，多個逗號隔開
description	網(wǎng)頁描述
author	作者
copyright	版權(quán)信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 網(wǎng)頁關(guān)鍵字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 網(wǎng)頁描述 -->
    <meta name="description" content="基礎(chǔ)前端知識">
    <!-- 網(wǎng)頁作者 -->
    <meta name="author" content="buddha">
    <!-- 網(wǎng)頁版權(quán)信息 -->
    <meta name="copyright" content="版權(quán)所有，翻版必究">
</head>
<body>

</body>
</html>

標(biāo)簽屬性：

1、標(biāo)簽的屬性寫在開始標(biāo)簽內(nèi)部

2、標(biāo)簽名與屬性之間要有空格隔開

3、一個標(biāo)簽可以同時存在多個屬性

4、屬性之間以空格隔開

5、屬性沒有先后順序之分

4.2.2 http-equiv屬性

屬性值	說明
Content-Type	定義網(wǎng)頁所使用編碼
refresh	定義網(wǎng)頁自動刷新跳轉(zhuǎn)

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 設(shè)置網(wǎng)頁編碼完整寫法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設(shè)置網(wǎng)頁編碼簡寫寫法 -->
    <meta charset="UTF-8">
    <!-- 網(wǎng)頁打開3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style標(biāo)簽

是雙標(biāo)簽，用來定義標(biāo)簽的css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css內(nèi)聯(lián)樣式寫這里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link標(biāo)簽

是單標(biāo)簽，是用來引入外部css樣式文件

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

4.5 script標(biāo)簽

是雙標(biāo)簽，是用來寫JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫JavaScript代碼 */
    </script>

</head>
<body>

</body>
</html>

4.6 base標(biāo)簽

是單標(biāo)簽，是用來設(shè)置整個網(wǎng)頁的基礎(chǔ)路徑。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

開發(fā)中很少用到，有人使用知道就行

上面所述標(biāo)簽是放在head標(biāo)簽里的，接下來接觸的標(biāo)簽都是放在body標(biāo)簽內(nèi)的

5 文本標(biāo)簽

5.1 標(biāo)題標(biāo)簽

是雙標(biāo)簽，h是header的縮寫

<h1>h1標(biāo)簽：一級標(biāo)題</h1>
<h2>h2標(biāo)簽：二級標(biāo)題</h2>
<h3>h3標(biāo)簽：三級標(biāo)題</h3>
<h4>h4標(biāo)簽：四級標(biāo)題</h4>
<h5>h5標(biāo)簽：五級標(biāo)題</h5>
<h6>h6標(biāo)簽：六級標(biāo)題</h6>

特點：

1、字體加粗

2、獨占一行

3、從h1到h6，字體逐漸減小

4、使用<h>標(biāo)簽的主要意義是告訴搜索引擎這是一段文字的標(biāo)題

5、<h1>在一個頁面最多只能有一個，不要用多個

5.2 段落標(biāo)簽

是雙標(biāo)簽，p是paragraph的縮寫

<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>

特點：

1、獨占一行

2、段落與段落之間，存在間隙

5.3 換行標(biāo)簽

是單標(biāo)簽，br是break的縮寫

<p>這是一段<br>文字</p>

特點：

1、強(qiáng)制換行

2、單標(biāo)簽

5.4 水平線標(biāo)簽

是單標(biāo)簽，hr是horizon地平線的縮寫

<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>

特點：

1、在頁面中顯示一條水平線

2、單標(biāo)簽

6 文本格式化標(biāo)簽

標(biāo)簽1	標(biāo)簽2	說明
b	strong	加粗
u	ins	下劃線
i	em	傾斜
s	del	刪除線

<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>

特點：

1、不會獨占一行

2、推薦使用標(biāo)簽2所在列標(biāo)簽

6.1 上標(biāo)標(biāo)簽

sup是superscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下標(biāo)標(biāo)簽

sub是subscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符實體

在網(wǎng)頁中展示特殊符號效果時，需要使用字符實體替代

顯示結(jié)果	描述	實體名稱
	空格
<	小于號	<
>	大于號	>
&	與	&
"	雙引號	"
x	乘號	×
÷	除號	÷
-	長破折號	—
\|	豎線	\|
‘	左單引號	‘
‘	右單引號	’
?	版權(quán)符	©
?	注冊商標(biāo)	®
?	商標(biāo)	™
°	度	°

7 媒體標(biāo)簽

7.1 圖片標(biāo)簽

<img src="./001.jpg" alt="">

img標(biāo)簽常見屬性：

屬性名	說明
src	圖片路徑（絕對路徑、相對路徑）
alt	圖片加載失敗時，顯示的文字
title	鼠標(biāo)懸停時，顯示的文字
width	圖片寬度
height	圖片高度

只設(shè)置寬或高，會自動等比縮放，寬高只需要數(shù)字，不需要'px'

<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">

絕對路徑：指目錄下的絕對位置，比如從根目錄開始的路徑，或完整的網(wǎng)絡(luò)地址
相對路徑：從當(dāng)前文件開始出發(fā)找目標(biāo)文件的過程

7.2 音頻標(biāo)簽

<audio src="music.mp3" controls autoplay loop></audio>

audio標(biāo)簽常見屬性：

屬性名	說明
src	音頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環(huán)播放

支持mp3、wav、ogg三種音頻格式

7.3 視頻標(biāo)簽

<video src="video.mp4" controls loop autoplay></video>

屬性名	說明
src	視頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環(huán)播放

支持mp4、webm、ogg三種視頻格式

7.4 超鏈接標(biāo)簽

超鏈接，是雙標(biāo)簽，實現(xiàn)各個獨立頁面之間進(jìn)行跳轉(zhuǎn)，可以跳去站外也可以在站內(nèi)之間跳轉(zhuǎn)

<a href="鏈接地址">文本或圖片</a>

站外跳轉(zhuǎn)，采用絕對路徑

<a href="http://www.baidu.com" target="_blank">百度</a>

站內(nèi)跳轉(zhuǎn)，采用相對路徑

<!-- a頁面 -->
<a href="b.html">跳去b頁面</a>

<!-- b頁面 -->
<p>b頁面</p>

頁面內(nèi)跳轉(zhuǎn)

<a href="#ms">美食</a>
<a href="#jd">景點</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個br標(biāo)簽 -->
<br>
<h3 id="jd">推薦景點</h3>

屬性名	說明
href	跳轉(zhuǎn)鏈接
target	鏈接打開方式

target屬性值

屬性值	說明
_self	默認(rèn)，原窗口打開鏈接
_blank	在新窗口打開鏈接
_parent	在父窗口打開鏈接
_top	在頂層窗口打開超鏈接

target屬性值一般使用_self（默認(rèn)）和_blank

8 列表標(biāo)簽

8.1 無序列表

<ul type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

解釋：

1、ul，unordered lists，無序列表，li，list item，列表項

2、ul標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽

3、li標(biāo)簽可以包含任意內(nèi)容

type屬性值

屬性值	說明
disc	默認(rèn)，實心圓
circle	空心圓
square	實心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

解釋：

1、ol，ordered lists，有序列表，li，list item，列表項

2、ol標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽

3、li標(biāo)簽可以包含任意內(nèi)容

type屬性值

屬性值	說明
1	默認(rèn)，阿拉伯?dāng)?shù)字，1,2,3......
a	小寫英文字母，a,b,c......
A	大寫英文字母，A,B,C......
i	小寫羅馬數(shù)字,i,ii,iii......
I	大寫羅馬數(shù)字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定義列表

<dl>
    <dt>名詞</dt>
    <dd>描述</dd>
    ……
</dl>

解釋：

1、dl，definition lists，自定義列表；dt，definition term，自定義列表組；dd，definition description，自定義列表描述

<dl>
    <dt>稱呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格標(biāo)簽

9.1 表格基本結(jié)構(gòu)

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td>
        <td>單元格4</td>
    </tr>
</table>

解釋：

1、tr，table row，表格行；td，table data cell，表行單元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格標(biāo)簽屬性

屬性名	屬性值	描述
border	數(shù)字	邊框?qū)挾?/span>
width	數(shù)字	表格寬度
height	數(shù)字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格標(biāo)題標(biāo)簽

<caption>標(biāo)題內(nèi)容</caption>，位于表格內(nèi)第一行

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表頭單元格標(biāo)簽

<th></th>，th，table header cell，表頭單元格

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <tr>
        <th>序號</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格語義化結(jié)構(gòu)標(biāo)簽

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <thead>
        <tr>
            <th>序號</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
        </tr>
    </tfoot>
</table>

9.6 合并單元格

屬性名	屬性值	說明
rowspan	合并單元格個數(shù)	合并行，單元格垂直合并
colspan	合并單元格個數(shù)	合并列，單元格水平合并

<td rowspan="跨越的行數(shù)"></td>

<td colspan="跨越的列數(shù)"></td>

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <thead>
        <tr>
            <th>序號</th>
            <th>金額</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表單標(biāo)簽

10.1 form標(biāo)簽

雙標(biāo)簽，包裹其它表單標(biāo)簽

<form>
    // 表單
</form>

form標(biāo)簽的常用屬性

屬性	說明
name	表單名稱
method	提交方式
action	提交地址
target	打開方式
enctype	編碼方式

name屬性

一個頁面中，表單可能不止一個。name屬性，用來區(qū)分不同的表單

<form name="myForm"></form>

method屬性

用來指定表單數(shù)據(jù)使用哪種提交方式給后端

屬性值	說明
get	get方式
post	post方式

<form method="get"></form>

action屬性

用來指定表單數(shù)據(jù)提交到哪個地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target屬性

該屬性跟a標(biāo)簽的target屬性一樣，其屬性值也是四個，一般情況只用到_blank屬性值，默認(rèn)也是這個值

<form target="_blank"></form>

enctype屬性

屬性值	說明
application/x-www-form-urlencoded	在發(fā)送前編碼所有字符（默認(rèn)）
multipart/form-data	不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值
text/plain	空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼

<form enctype="multipart/form-data"></form>

10.2 input標(biāo)簽

input是單標(biāo)簽

<input type="表單類型">

屬性值	說明
text	單行文本框
password	密碼文本框
radio	單選框
checkbox	多選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
file	文件上傳

單行文本框常用屬性

屬性	說明
value	設(shè)置文本框的默認(rèn)值
size	設(shè)置文本框的長度
maxlength	設(shè)置最多可輸入字符

<form>
    <input type="text" value="默認(rèn)值" size="長度" maxlength="可輸入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密碼文本框常用屬性

密碼文本框常用屬性和單行文本框常用屬性相同

<input type="password" value="默認(rèn)值" size="長度" maxlength="可輸入字符">

<form>
    <label>密碼：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

單選框

屬性	說明
name	組名，同組單選框，組名要相同，必要屬性
value	單選框選項取值，必要屬性
checked	默認(rèn)選中項，同組單選框，可以有一個默認(rèn)選中項

<input type="radio" name="組名" value="取值" checked="checked">

<form>
    性別：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

復(fù)選框

復(fù)選框和單選框的屬性都相同，區(qū)別復(fù)選框可以多選

<form>
    愛好：
    <input type="checkbox" name="hobby" value="籃球" checked>籃球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="臺球">臺球
</form>

普通按鈕

<input type="button" value="取值">

<form>
    <input type="button" value="普通按鈕">
</form>

<button>普通按鈕</button>

區(qū)別：

1、input是單標(biāo)簽，button是雙標(biāo)簽

2、button標(biāo)簽的信息除了文本，還可以是圖像、其它標(biāo)簽等

3、button有type屬性，屬性值可以是button、submit、reset等

提交按鈕

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把對應(yīng)表單數(shù)據(jù)提交給后端服務(wù)器

重置按鈕

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

點擊重置后，所在form表單里所有內(nèi)容被清空了

文件上傳

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名稱" cols="列數(shù)" rows="行數(shù)"></textarea>

<form>
    <textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>選項內(nèi)容</option>
    <option>選項內(nèi)容</option>
</select>

下拉列表標(biāo)簽是為了節(jié)省頁面空間

select標(biāo)簽屬性

屬性名	說明
name	數(shù)據(jù)提交后端所需字段
size	下拉選項顯示個數(shù)
multiple	默認(rèn)只允許選一個，選多個得加這個屬性
disabled	所有下拉選項禁止選中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18歲以下</option>
        <option>18-28歲</option>
        <option>28-38歲</option>
        <option>38歲以上</option>
    </select>
</form>

option標(biāo)簽屬性

屬性名	說明
selected	默認(rèn)選中
value	被選中，數(shù)據(jù)提交后端的值
disabled	該下拉選項禁止選中

<form>
    <select name="age" size="5">
        <option value="1">18歲以下</option>
        <option value="2" disabled="disabled">18-28歲</option>
        <option value="3" selected="selected">28-38歲</option>
        <option value="4">38歲以上</option>
    </select>
</form>

11 框架標(biāo)簽

<iframe src="URL" width="數(shù)值" height="數(shù)值"></iframe>

框架標(biāo)簽常用屬性

屬性名	說明
src	嵌入的文檔地址
width	標(biāo)簽寬度
height	標(biāo)簽高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文檔禁止被嵌入

12 標(biāo)簽類型

HTML標(biāo)簽分為三種，行內(nèi)標(biāo)簽、塊級標(biāo)簽和行內(nèi)塊級標(biāo)簽。

12.1 行內(nèi)標(biāo)簽

特點：

1、在頁面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間

2、沒有寬高，內(nèi)容多大就多大，行內(nèi)標(biāo)簽不能嵌套塊級標(biāo)簽（a標(biāo)簽除外）

3、行內(nèi)標(biāo)簽設(shè)置寬高無效，可以對行高line-height進(jìn)行設(shè)置

4、可以設(shè)置外邊距margin和內(nèi)邊距padding，但只對左右邊距有效果，上下無效

5、常見行內(nèi)標(biāo)簽span、a、strong、ins、del、br等

span標(biāo)簽

雙標(biāo)簽，行內(nèi)標(biāo)簽，本身沒有固定樣式

<p>我是<span>中國人</span></p>

12.2 塊級標(biāo)簽