Web頁面制作基礎(chǔ)，輔助你更好的學(xué)習(xí)

時(shí)間：2023-07-20 21:00:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-20 21:00:02 來源：網(wǎng)站運(yùn)營(yíng)

Web頁面制作基礎(chǔ)，輔助你更好的學(xué)習(xí)：

說明：僅作為學(xué)習(xí)輔助

那么Web頁面制作基礎(chǔ)，能讓你掌握什么呢？

第一節(jié)掌握Web基礎(chǔ)知識(shí)。

第二節(jié)掌握HTML基礎(chǔ)知識(shí)。

第三節(jié)掌握CSS基礎(chǔ)知識(shí)。

web開發(fā)背景

1. 計(jì)算機(jī)語言的概念
2. 解釋和編譯
3. Sublime的介紹
4. 開發(fā)者工具介紹
5. 命名規(guī)范

命名規(guī)范

• 英文命名
• 數(shù)字不能打頭
• 駝峰命名法

學(xué)習(xí)前端接觸的web基礎(chǔ)語言，HTML，CSS，JavaScript

Web基礎(chǔ)知識(shí)

每次15分鐘朗讀：

1. Internet，中文為因特網(wǎng)，國(guó)際互聯(lián)網(wǎng)。
2. 它是由所有使用公用語言互相通信的計(jì)算機(jī)連接而組成的全球網(wǎng)絡(luò)。
3. WWW是World Wide Web的縮寫，中文名萬維網(wǎng)。
4. WWW是Internet的最核心部分。
5. 它是Internet上那些支持WWW服務(wù)和HTTP協(xié)議的服務(wù)器集合。
6. WWW在使用上分為Web客戶端和Web服務(wù)端。
7. 用戶可以使用Web客戶端訪問Web服務(wù)器上的頁面。
8. Website，中文名為網(wǎng)站，是指在Internet上根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。
9. URL，是Uniform Resource Locator的縮寫，中文名為統(tǒng)一資源定位符，俗稱網(wǎng)址，它是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。

URL的一般格式：

協(xié)議://主機(jī)地址（ip地址)+目錄路徑+參數(shù)常見的協(xié)議有：

a. ftp：File Transfer Protocol，文件傳輸協(xié)議，可以通過FTP訪問服務(wù)器上的文件。通常使用時(shí)在主機(jī)地址前面加上“用戶名：密碼@”。

示例：

url: ftp://admin:12345@113.129.xxx/html.pdf b. file：主要訪問本地計(jì)算機(jī)中的文件。
c. telent：允許用戶通過一個(gè)協(xié)商過程與一個(gè)遠(yuǎn)程設(shè)備進(jìn)行通信。
d. http：Hyper Text Transfer Protocol，超文本傳輸協(xié)議，是用于從萬維網(wǎng)服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議。

1. Web Standard（Web標(biāo)準(zhǔn))是Web應(yīng)用開發(fā)需要遵守的標(biāo)準(zhǔn)。
2. 網(wǎng)頁主要由三部分組成：結(jié)構(gòu)標(biāo)準(zhǔn)，表現(xiàn)標(biāo)準(zhǔn)，行為標(biāo)準(zhǔn)。

網(wǎng)站訪問過程

url統(tǒng)一資源定位符
互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址，可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法。
組成部分：協(xié)議，服務(wù)器地址，資源路徑。

1. Web Browser，中文名為網(wǎng)頁瀏覽器，是一個(gè)顯示網(wǎng)頁服務(wù)器或者檔案系統(tǒng)內(nèi)的HTML文件，并讓用戶與這些文件互動(dòng)的軟件。
2. Web Server，中文名為網(wǎng)頁服務(wù)器，WEB服務(wù)器，主要是提供網(wǎng)上信息瀏覽服務(wù)。

Web服務(wù)器可以解析HTTP協(xié)議，當(dāng)Web服務(wù)器接收到一個(gè)HTTP請(qǐng)求時(shí)，會(huì)返回一個(gè)HTTP響應(yīng)，客戶端就可以從服務(wù)器上獲取網(wǎng)頁html，包括css，js,視頻，音頻等。

1. web開發(fā)主要分前端和后端兩部分。
2. 前端是指直接與用戶接觸的網(wǎng)頁，網(wǎng)頁上通常有html,js,css等。
3. 后端是指程序，數(shù)據(jù)庫和服務(wù)器層面的

web系統(tǒng)開發(fā)過程

項(xiàng)目提出，需求分析，（設(shè)計(jì)，ui設(shè)計(jì)，系統(tǒng)設(shè)計(jì)），（開發(fā)，前端開發(fā)，后臺(tái)開發(fā)），系統(tǒng)測(cè)試，開發(fā)與維護(hù)。

HTML基礎(chǔ)知識(shí)

1. HTML的歷史：HTML，XHTML
2. HTML的全局屬性：全局標(biāo)準(zhǔn)屬性，全局事件屬性
3. HTML的元素：

4.標(biāo)記語言，是一種將文本以及與文本相關(guān)的其他信息結(jié)合起來，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。

5.HTML，為超文本標(biāo)記語言。

6.XHTML是可擴(kuò)展超文本標(biāo)記語言，是一種更純潔，更嚴(yán)格，更規(guī)范的html代碼。

7.html文件由文件頭和文件體兩部分組成。

8.標(biāo)簽的分類：雙標(biāo)簽，單標(biāo)簽。

雙標(biāo)簽：由“開始標(biāo)簽”和“結(jié)束標(biāo)簽”兩部分構(gòu)成，必須成對(duì)使用，且必須合理嵌套。
單標(biāo)簽：在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）。

HTML的全局標(biāo)準(zhǔn)屬性

在HTML中，規(guī)定了8個(gè)全局標(biāo)準(zhǔn)屬性。

1. class用于定義元素的類名。
2. id用于指定元素的唯一id。
3. style用于指定元素的行內(nèi)樣式。
4. title用于指定元素的額外信息。
5. accesskey用于指定激活某個(gè)元素的快捷鍵。

支持accesskey屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

1. tabindex用于指定元素在tab鍵下的次序。

支持tabindex屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

1. dir用于指定元素中內(nèi)容的文本方向。

dir的屬性值只有ltr和rtl兩種，分別是left to right和right to left。

1. lang用于指定元素內(nèi)容的語言。

HTML的全局事件屬性

Window窗口事件

1. onload，在頁面加載結(jié)束后觸發(fā)。
2. onunload，在用戶從頁面離開時(shí)觸發(fā)，如單擊跳轉(zhuǎn)，頁面重載，關(guān)閉瀏覽器窗口等。

Form表單事件

1. onblur，當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。
2. onchange，在元素的元素值被改變時(shí)觸發(fā)。
3. onfocus，在元素獲得焦點(diǎn)時(shí)觸發(fā)。
4. onreset，當(dāng)表單中的重載按鈕被點(diǎn)擊時(shí)觸發(fā)。
5. onselect，在元素中文本被選中后觸發(fā)。
6. onsubmit，在提交表單時(shí)觸發(fā)。

Keyboard鍵盤事件

1. onkeydown，在用戶按下按鍵時(shí)觸發(fā)。
2. onkeypress，在用戶按下按鍵后，按著按鍵時(shí)觸發(fā)。

該屬性不會(huì)對(duì)所有按鍵生效，不生效按鍵如：alt，ctrl，shift，esc。

3.onkeyup，當(dāng)用戶釋放按鍵時(shí)觸發(fā)。

Mouse鼠標(biāo)事件

1. onclick，當(dāng)在元素上單擊鼠標(biāo)時(shí)觸發(fā)。
2. ondblclick，當(dāng)在元素上雙擊鼠標(biāo)時(shí)觸發(fā)。
3. onmousedown，當(dāng)在元素上按下鼠標(biāo)按鈕時(shí)觸發(fā)。
4. onmousemove，事件會(huì)在鼠標(biāo)指針移動(dòng)時(shí)發(fā)生。
5. onmouseout，當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)。
6. onmouseover，事件會(huì)在鼠標(biāo)指針移動(dòng)到指定的元素上時(shí)發(fā)生。
7. onmouseup，當(dāng)在元素上釋放鼠標(biāo)按鈕時(shí)觸發(fā)。

Media媒體事件

1. onabort，當(dāng)退出媒體播放器時(shí)觸發(fā)。
2. onwaiting，當(dāng)媒體已停止播放但打算繼續(xù)播放時(shí)觸發(fā)。

HTML元素

一個(gè)HTML文檔包含的標(biāo)簽

1. <!DOCTYPE>，聲明文檔類型。
2. <html>，HTML元素真正的根元素。
3. <head>，定義html文檔的文檔頭。

head中包含的元素title，定義HTML文檔的標(biāo)題base，為頁面上的所有鏈接規(guī)定默認(rèn)地址或者默認(rèn)目標(biāo)link，用于定義文檔與外部資源之間的關(guān)系meta，提供關(guān)于HTML的元數(shù)據(jù)style，用于為HTML文檔定義樣式信息script，用于定義客戶端腳本

1. body，定義html文檔的文檔體。
2. content-Type，用于設(shè)定網(wǎng)頁的字符集，便于瀏覽器解析與渲染頁面。

代碼：

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">

1. cache-control，用于告訴瀏覽器如何緩存某個(gè)響應(yīng)及緩存多長(zhǎng)時(shí)間。

參數(shù)：

no-cache，發(fā)送請(qǐng)求，與服務(wù)器確認(rèn)該資源是否被更改，如果沒有，則使用緩存no-store，允許緩存，每次都要去服務(wù)器上下載完整的響應(yīng)public，緩存所有響應(yīng)private，只為單個(gè)用戶緩存max-age，表示當(dāng)前請(qǐng)求開始，相應(yīng)響應(yīng)在多久內(nèi)能被緩存和重用，不去服務(wù)器重新請(qǐng)求，max-age=60表示響應(yīng)可以再緩存和重用60秒<meta http-equiv=cache-control" content="no-cache">

1. expires，用于設(shè)定網(wǎng)頁的到期時(shí)間，過期后重新到服務(wù)器上重新傳輸。
2. refresh，網(wǎng)頁將在設(shè)定的時(shí)間內(nèi)，自動(dòng)刷新并轉(zhuǎn)向設(shè)定的網(wǎng)址
3. Set-Cookie，用于設(shè)置網(wǎng)頁過期。
4. 無語義元素：<span>,<div>，<span>是內(nèi)聯(lián)標(biāo)簽，用在一行文本中，<div>是塊級(jí)標(biāo)簽。

DIV+CSS

div用于存放需要顯示的數(shù)據(jù)，css用于指定如何顯示數(shù)據(jù)樣式，做到結(jié)構(gòu)與樣式相互分離。

查看div+css樣式HTML:點(diǎn)擊下方鏈接跳轉(zhuǎn)，可查看源碼：

div-css.html

格式化元素

1. 普通文本

• <b>，定義粗體文本
• <big>，定義大號(hào)字
• <em>，定義著重文字
• <i>，定義斜體字
• <small>，定義小號(hào)字
• <strong>，定義加重語氣
• <sub>，定義下標(biāo)字
• <sup>，定義上標(biāo)字
• <ins>，定義插入字
• <del>，定義刪除字

2.計(jì)算機(jī)輸出

• <code>，定義計(jì)算機(jī)代碼
• <kbd>，定義鍵盤輸出樣式
• <samp>，定義計(jì)算機(jī)代碼樣本
• <tt>，定義打字機(jī)輸入樣式
• <pre>，定義預(yù)格式文本

3.術(shù)語

• <abbr>，定義縮寫
• <acronym>，定義首字母縮寫
• <address>，定義地址
• <bdo>，定義文字方向
• <blockquote>定義長(zhǎng)的引用
• <q>，定義短的引用語
• <cite>，定義引用，引證
• <dfn>，定義一個(gè)概念，項(xiàng)目

圖片元素

<img src="圖片的url" alt = "圖像的替代文本">

超鏈接元素

1. <a>標(biāo)簽的target屬性，默認(rèn)值為_self。

值	說明
_self	在超鏈接所在框架或窗口中打開目標(biāo)頁面
_blank	在新瀏覽器窗口中打開目標(biāo)頁面
_parent	將目標(biāo)頁面載入含有該鏈接框架的父框架集或父窗口中
_top	在當(dāng)前的整個(gè)瀏覽器窗口中打開目標(biāo)頁面，因此會(huì)刪除所有框架

1. 文本鏈接是<a></a>標(biāo)簽之間的元素內(nèi)容為文本內(nèi)容。
2. 錨點(diǎn)鏈接是用#+對(duì)應(yīng)的錨點(diǎn)，錨點(diǎn)通常用唯一屬性值id設(shè)定。

圖像熱區(qū)鏈接

圖像熱區(qū)鏈接，是什么呢？當(dāng)你在看一些購(gòu)物網(wǎng)頁的時(shí)候，一張圖片上，可以在不同的地方鏈接到不同的目標(biāo)位置，點(diǎn)擊不同的地方可以跳轉(zhuǎn)到不同的網(wǎng)頁，這也是做商城項(xiàng)目一般要用到的技術(shù)。

這個(gè)時(shí)候不是<a>標(biāo)簽元素了，而是<area>元素。

<area>元素的屬性有兩個(gè)shape，cords屬性。

shape 屬性	說明	cords 屬性	說明
circle	圓形	x,y,r	(x,y)為圓心坐標(biāo)，r為半徑
rect	矩形	x1,y1; x2,y2	(x1,y1)為左上角坐標(biāo)，(x2,y2)為右下角坐標(biāo)
poly	多邊形	x1,y1;x2,y2;x3,y3;...	分別是各個(gè)點(diǎn)的點(diǎn)坐標(biāo)

<area>的坐標(biāo)系，原點(diǎn)為圖片的左上角,x軸正方向向右，y軸正方向向下

我畫個(gè)圖哈，反映<area>的坐標(biāo)系：

圖像熱區(qū)鏈接的使用，<map>標(biāo)簽定義一個(gè)image-map，可以含一個(gè)以上的熱區(qū)<area>，每個(gè)熱區(qū)都有獨(dú)立的鏈接。

要為<map>標(biāo)簽賦予name屬性。

將<img>標(biāo)簽的usemap屬性與<map>標(biāo)簽的name屬性相關(guān)聯(lián)。

為了證明我學(xué)會(huì)了，我寫一個(gè)html頁面。

map -> name="image_link"img -> usemap="#image_link"點(diǎn)擊跳轉(zhuǎn)：imgmap.html

e-mail鏈接

e-mail鏈接主要是看到有很多官方網(wǎng)頁需要做的一個(gè)打開一封新的電子郵件。

點(diǎn)擊下方鏈接即可看到效果：

聯(lián)系我們

代碼：

<a href="mailto:xxxxxx@qq.com">聯(lián)系我們</a>

javascript鏈接

點(diǎn)擊JavaScript鏈接：

點(diǎn)擊彈窗

代碼：

<a href="javascript:alert('哈哈，你點(diǎn)擊了！');">點(diǎn)擊彈窗</a>

空鏈接

1. 空鏈接是指未指派目標(biāo)地址的超鏈接。

空鏈接的代碼：

javascript: void(0)<a href=""></a><a href="#"></a><a href="javascript:void(0)"></a>列表元素
整合列表html網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：ul-ol.html

1. 無序列表，<ul>定義無序列表，<li>定義列表項(xiàng)。

<ul>的type屬性值：disc點(diǎn)，square方塊，circle圓，none無.

1. 有序列表，<ol>定義有序列表，<li>定義列表項(xiàng)。

<ol>的type屬性值：數(shù)字，大寫字母，大寫羅馬數(shù)字，小寫字母，小寫羅馬數(shù)字。
start屬性定義序號(hào)的開始位置。

1. 定義列表<dl>，定義列表內(nèi)部可以有多個(gè)列表項(xiàng)標(biāo)題，每個(gè)列表項(xiàng)標(biāo)題用<dt>標(biāo)簽定義，列表項(xiàng)標(biāo)題內(nèi)部又可以有多個(gè)列表項(xiàng)描述，用<dd>標(biāo)簽定義。

表格

整合表格html網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：table.html

1. <table>定義表格
2. <caption>定義表格標(biāo)題
3. <tr>定義若干行
4. <td>定義若干單元格
5. <th>定義表頭
6. 表格分頭部，主體，底部：<thead>,<tbody>,<tfoot>三個(gè)標(biāo)簽。

屬性	說明
border	設(shè)置表格的邊框?qū)挾?/td>
width	設(shè)置表格的寬
height	表格的高
cellpadding	設(shè)置內(nèi)邊距
cellspacing	設(shè)置外邊距

1. <td>的兩個(gè)屬性：colspan用于定義單元格跨行，rowspan用于定義單元格跨列
2. <tbody>,<thead>,<tfoot>標(biāo)簽通常用于對(duì)表格內(nèi)容進(jìn)行分組。
3. 表單由<form>標(biāo)簽定義，action屬性定義了表單提交的地址，method屬性定義表單提交的方式。

代碼：

<input type="text"><input type="password"><input type="radio"><input type="checkbox"><input type="submit"><input type="reset"><input type="button"><input type="image"><input type="file"><input type="hidden">


<select><option>size屬性用來設(shè)置選擇欄的高度，multiple屬性用來決定是多選列表，還是單選selected="selected"

表單控件，用于輸入更多的文本

<textarea>元素

<textarea>標(biāo)簽具有name,cols,rows3個(gè)屬性。

1. name用于提交參數(shù)
2. value用于輸入文本內(nèi)容
3. cols和rows分別用于文本框的列數(shù)和行數(shù)，寬度和高度。

效果：

自我評(píng)價(jià)：

代碼：

<form action="web" method="post"> 自我評(píng)價(jià)：<br/> <textarea rows="10" cols="50" name="introduce"> </textarea> <br/> <input type="submit" id="" name=""></form>frameset

1. <frameset>定義一個(gè)框架集，用于組織多個(gè)窗口，每個(gè)框架存有獨(dú)立的html文檔
2. <frameset>不能與<body>共同使用，除非有<noframe>元素
3. <frame>用于定義<frameset>中一個(gè)特定的窗口?？赵?code><frame/>

frame屬性

屬性	說明
src	需要顯示的html文檔
frameborder	定義框架的外邊框，屬性值為0或者1
scrolling	定義是否顯示滾動(dòng)條,有3個(gè)值：yes,no,auto
noresize="noresize"	定義該框架無法調(diào)整大小，默認(rèn)是可以調(diào)整的
marginheight和marginwidth屬性	定義上下左右的邊距

1. <noframe>，用于為那些不支持框架集的瀏覽器顯示文本
2. <iframe>，與<frame>元素相同，iframe有frame的屬性，還加了height和width

代碼：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>frameset</title> </head> <frameset cols="25%,50%,25%"> <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame> <frame src="https://juejin.im/user/1451011081249175" ></frame> <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame> </frameset> <noframes> <body>您的瀏覽器無法處理框架，請(qǐng)更換瀏覽器打開</body> </noframes></html>

預(yù)留字符

HTML 中的預(yù)留字符必須被替換為字符實(shí)體。

CSS基礎(chǔ)知識(shí)

1. css，英文Cascading Style Sheets，中文名：級(jí)聯(lián)樣式表。層疊樣式表。
2. css是一種表現(xiàn)語言，是對(duì)網(wǎng)頁語言的補(bǔ)充。
3. css用于網(wǎng)頁的風(fēng)格設(shè)計(jì)，包括字體，顏色，位置等。
4. css使用的4中方式：引入外部樣式文件，導(dǎo)入外部樣式文件，使用內(nèi)部樣式定義，使用內(nèi)聯(lián)樣式定義。

引入外部樣式文件：

<link type="text/css" rel="stylesheet" href="css樣式文件的url"/>導(dǎo)入外部樣式文件:

<style type="text/css"> @import "css樣式文件的url";</style>使用內(nèi)部樣式定義：

<style type="text/css"> div { background-color: #ffffff; width: 300px; height: 300px; }</style>使用內(nèi)聯(lián)樣式定義：

<div style="background-color: #ffffff; width: 100px; height: 100px;"></div>復(fù)制代碼

css的兩個(gè)特性：層疊，繼承

層疊：層疊樣式生效的優(yōu)先級(jí)：

內(nèi)聯(lián)樣式->內(nèi)部樣式->外部樣式->瀏覽器默認(rèn)效果。

繼承，就是css屬性可以從父元素向下傳遞到子元素。

css的選擇器

1. 元素選擇器，是最簡(jiǎn)單的選擇器。
2. 通配符選擇器，用"*"表示，表示對(duì)任意元素都有效。
3. 屬性選擇器

格式：

E[attribute]{property1:value1; property2:value2;...}派生選擇器

1. 派生選擇器根據(jù)元素在其位置的上下文關(guān)系定義樣式
   
2. 派生選擇器分3種：后代選擇器，子元素選擇器，相鄰兄弟選擇器
   
3. 后代選擇器是某元素后代的所有元素。
   
4. 子元素選擇器是相對(duì)于父元素的第一級(jí)子元素符合條件。
   
5. 相鄰兄弟選擇器，針對(duì)的元素是同級(jí)元素，擁有相同的父元素，且兩個(gè)元素是相鄰的。
   
6. id選擇器，以特定id值的HTML元素指定樣式。
   
7. 類選擇器，以指定class的HTML元素指定樣式。
   
8. 偽類選擇器

偽類選擇器：偽類選擇器和偽元素選擇器

偽類以冒號(hào)(:)開頭，元素選擇符和冒號(hào)之間不能有空格，偽類名中間也不能有空格。

css中常用的偽類如下表所示：

偽元素選擇器

css中常用的偽元素如下表所示：

css背景

css背景屬性如下：

background

1. background-color用于設(shè)置背景顏色，初始值為transparent透明色。
2. 顏色取值3種如：顏色名，十六進(jìn)制顏色，rgb函數(shù)。
3. background-image用于設(shè)置元素的背景圖片，默認(rèn)值為none。
4. background-repeat控制圖像的平鋪。

background-repeat默認(rèn)值為repeat，即圖像沿著x軸和y軸平鋪，還可以指定沿著x軸平鋪rpeat-x，沿著y軸平鋪repeat-y，或者不平鋪no-repeat，繼承父元素該屬性設(shè)置inherit。

background-attachment用于設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。默認(rèn)值為：scroll，表示可以隨著頁面其余部分的滾動(dòng)而滾動(dòng)。設(shè)置fixed，表示當(dāng)頁面其余部分滾動(dòng)時(shí)，背景圖片不會(huì)滾動(dòng)，設(shè)置inherit，繼承父元素。

background-position用于設(shè)置背景圖像圓點(diǎn)的位置。

background可以將background-color，background-position，background-attachment，background-repeat，background-image全部設(shè)置。

css字體屬性

css常用字體屬性表

1. font-family用于設(shè)置元素的字體，該元素屬性值一般可以設(shè)置多個(gè)字體。
2. font-size用于設(shè)置字體的尺寸。
3. font-style用于設(shè)置字體是否是斜體，默認(rèn)值為normal，當(dāng)設(shè)置為italic，顯示為一個(gè)斜體的樣式，當(dāng)設(shè)置為oblique，顯示為一個(gè)傾斜的樣式。
4. font-variant用于設(shè)置字體使用小寫字體，默認(rèn)為normal，一旦設(shè)置為small-caps，將所有小寫字母變?yōu)榇髮憽?/li>
5. font-weight用于設(shè)置字體的粗細(xì)，normal值等于400，bold的值等于700。
6. font，可以設(shè)置font-family,font-size,font-style,font-variant,font-weight。

css文本屬性表：

css尺寸屬性表：

css列表屬性表：

list-style-type

css表格屬性表：

盒模型

1. css盒模型，包含元素內(nèi)容content，內(nèi)邊距padding，邊框border，外部距margin。

css內(nèi)邊距屬性，元素的內(nèi)邊距在邊框和內(nèi)容之間。

css內(nèi)邊距的屬性：

設(shè)置順序?yàn)樯嫌蚁伦笠来芜M(jìn)行。

padding: 10px 10px 10px 10px;css外邊距的屬性：

css邊框的屬性：

邊框的樣式

1. none，無邊框效果
2. hidden，與none相同
3. dotted，點(diǎn)線邊框效果
4. dashed，虛線邊框效果
5. double，雙線邊框效果
6. solid，實(shí)線邊框效果
7. groove，3D凹槽邊框效果
8. ridge，3D凸槽邊框效果

css輪廓是繪制在元素周圍的一條線，位于邊框邊緣的外圍，起到突出元素的作用。

布局屬性

1. 布局屬性是文檔中元素排列顯示的規(guī)則
2. 布局方式3種：普通文檔流，浮動(dòng)，定位

css浮動(dòng)涉及到的屬性

css定位的屬性

z-index用于設(shè)置目標(biāo)對(duì)象的定位層序，數(shù)值越大，所在層級(jí)越高。該屬性只在position:absolute時(shí)有效。

??感謝大家

1.如果本文對(duì)你有幫助，就支持下吧。

作者：魔王哪吒
鏈接：https://juejin.im/post/6844904104712470535
來源：掘金