Web頁面製作基礎

魔王哪吒發表於2020-03-27

Web

網站同步更新：www.dadaqianduan.cn/#/前端覆盤課/Web…

Web頁面製作基礎

說明：僅作為學習輔助

那麼Web頁面製作基礎，能讓你掌握什麼呢？

第一節掌握Web基礎知識。

第二節掌握HTML基礎知識。

第三節掌握CSS基礎知識。

web開發背景

計算機語言的概念
解釋和編譯
Sublime的介紹
開發者工具介紹
命名規範

命名規範

英文命名
數字不能打頭
駝峰命名法

學習前端接觸的web基礎語言，HTML，CSS，JavaScript

Web基礎知識

每次15分鐘朗讀：

Internet，中文為因特網，國際網際網路。
它是由所有使用公用語言互相通訊的計算機連線而組成的全球網路。
WWW是World Wide Web的縮寫，中文名全球資訊網。
WWW是Internet的最核心部分。
它是Internet上那些支援WWW服務和HTTP協議的伺服器集合。
WWW在使用上分為Web客戶端和Web服務端。
使用者可以使用Web客戶端訪問Web伺服器上的頁面。
Website，中文名為網站，是指在Internet上根據一定的規則，使用HTML等工具製作的用於展示特定內容相關網頁的集合。
URL，是Uniform Resource Locator的縮寫，中文名為統一資源定位符，俗稱網址，它是對可以從網際網路上得到的資源的位置和訪問方法的一種簡潔的表示，是網際網路上標準資源的地址。

URL的一般格式：

協議://主機地址（ip地址)+目錄路徑+引數
複製程式碼

常見的協議有：

a. ftp：File Transfer Protocol，檔案傳輸協議，可以通過FTP訪問伺服器上的檔案。通常使用時在主機地址前面加上“使用者名稱：密碼@”。

示例：

url: ftp://admin:12345@113.129.xxx/html.pdf
複製程式碼

b. file：主要訪問本地計算機中的檔案。

c. telent：允許使用者通過一個協商過程與一個遠端裝置進行通訊。

d. http：Hyper Text Transfer Protocol，超文字傳輸協議，是用於從全球資訊網伺服器傳輸超文字到本地瀏覽器的傳輸協議。

Web Standard（Web標準)是Web應用開發需要遵守的標準。
網頁主要由三部分組成：結構標準，表現標準，行為標準。

網站訪問過程

url統一資源定位符

網際網路上標準資源的地址，可以從網際網路上得到的資源的位置和訪問方法。

組成部分：協議，伺服器地址，資源路徑。

Web Browser，中文名為網頁瀏覽器，是一個顯示網頁伺服器或者檔案系統內的HTML檔案，並讓使用者與這些檔案互動的軟體。
Web Server，中文名為網頁伺服器，WEB伺服器，主要是提供網上資訊瀏覽服務。

Web伺服器可以解析HTTP協議，當Web伺服器接收到一個HTTP請求時，會返回一個HTTP響應，客戶端就可以從伺服器上獲取網頁html，包括css，js,視訊，音訊等。

web開發主要分前端和後端兩部分。
前端是指直接與使用者接觸的網頁，網頁上通常有html,js,css等。
後端是指程式，資料庫和伺服器層面的

web系統開發過程

專案提出，需求分析，（設計，ui設計，系統設計），（開發，前端開發，後臺開發），系統測試，開發與維護。

HTML基礎知識

HTML的歷史：HTML，XHTML
HTML的全域性屬性：全域性標準屬性，全域性事件屬性
HTML的元素：

標記語言，是一種將文字以及與文字相關的其他資訊結合起來，展現出關於文件結構和資料處理細節的電腦文字編碼。
HTML，為超文字標記語言。
XHTML是可擴充套件超文字標記語言，是一種更純潔，更嚴格，更規範的html程式碼。
html檔案由檔案頭和檔案體兩部分組成。
標籤的分類：雙標籤，單標籤。

雙標籤：由“開始標籤”和“結束標籤”兩部分構成，必須成對使用，且必須合理巢狀。

單標籤：在開始標籤中進行關閉（以開始標籤的結束而結束）。

HTML的全域性標準屬性

在HTML中，規定了8個全域性標準屬性。

class用於定義元素的類名。
id用於指定元素的唯一id。
style用於指定元素的行內樣式。
title用於指定元素的額外資訊。
accesskey用於指定啟用某個元素的快捷鍵。

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

tabindex用於指定元素在tab鍵下的次序。

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

dir用於指定元素中內容的文字方向。

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

lang用於指定元素內容的語言。

HTML的全域性事件屬性

`Window`視窗事件

onload，在頁面載入結束後觸發。
onunload，在使用者從頁面離開時觸發，如單擊跳轉，頁面過載，關閉瀏覽器視窗等。

`Form`表單事件

onblur，當元素失去焦點時觸發。
onchange，在元素的元素值被改變時觸發。
onfocus，在元素獲得焦點時觸發。
onreset，當表單中的過載按鈕被點選時觸發。
onselect，在元素中文字被選中後觸發。
onsubmit，在提交表單時觸發。

`Keyboard`鍵盤事件

onkeydown，在使用者按下按鍵時觸發。
onkeypress，在使用者按下按鍵後，按著按鍵時觸發。

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

onkeyup，當使用者釋放按鍵時觸發。

`Mouse`滑鼠事件

onclick，當在元素上單擊滑鼠時觸發。
ondblclick，當在元素上雙擊滑鼠時觸發。
onmousedown，當在元素上按下滑鼠按鈕時觸發。
onmousemove，事件會在滑鼠指標移動時發生。
onmouseout，當滑鼠指標移出元素時觸發。
onmouseover，事件會在滑鼠指標移動到指定的元素上時發生。
onmouseup，當在元素上釋放滑鼠按鈕時觸發。

Media媒體事件

onabort，當退出媒體播放器時觸發。
onwaiting，當媒體已停止播放但打算繼續播放時觸發。

HTML元素

一個HTML文件包含的標籤

<!DOCTYPE>，宣告文件型別。
<html>，HTML元素真正的根元素。
<head>，定義html文件的文件頭。

head中包含的元素

title，定義HTML文件的標題
base，為頁面上的所有連結規定預設地址或者預設目標
link，用於定義文件與外部資源之間的關係
meta，提供關於HTML的後設資料
style，用於為HTML文件定義樣式資訊
script，用於定義客戶端指令碼
複製程式碼

body，定義html文件的文件體。
content-Type，用於設定網頁的字符集，便於瀏覽器解析與渲染頁面。

程式碼：

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">
複製程式碼

cache-control，用於告訴瀏覽器如何快取某個響應及快取多長時間。

引數：

no-cache，傳送請求，與伺服器確認該資源是否被更改，如果沒有，則使用快取

no-store，允許快取，每次都要去伺服器上下載完整的響應

public，快取所有響應

private，只為單個使用者快取

max-age，表示當前請求開始，相應響應在多久內能被快取和重用，不去伺服器重新請求，max-age=60表示響應可以再快取和重用60秒

<meta http-equiv=cache-control" content="no-cache">
複製程式碼

expires，用於設定網頁的到期時間，過期後重新到伺服器上重新傳輸。
refresh，網頁將在設定的時間內，自動重新整理並轉向設定的網址
Set-Cookie，用於設定網頁過期。
無語義元素：<span>,<div>，<span>是內聯標籤，用在一行文字中，<div>是塊級標籤。

DIV+CSS

div用於存放需要顯示的資料，css用於指定如何顯示資料樣式，做到結構與樣式相互分離。

檢視div+css樣式HTML:點選下方連結跳轉，可檢視原始碼：

div-css.html

格式化元素

普通文字

<b>，定義粗體文字
<big>，定義大號字
<em>，定義著重文字
<i>，定義斜體字
<small>，定義小號字
<strong>，定義加重語氣
<sub>，定義下標字
<sup>，定義上標字
<ins>，定義插入字
<del>，定義刪除字

計算機輸出

<code>，定義計算機程式碼
<kbd>，定義鍵盤輸出樣式
<samp>，定義計算機程式碼樣本
<tt>，定義打字機輸入樣式
<pre>，定義預格式文字

術語

<abbr>，定義縮寫
<acronym>，定義首字母縮寫
<address>，定義地址
<bdo>，定義文字方向
<blockquote>定義長的引用
<q>，定義短的引用語
<cite>，定義引用，引證
<dfn>，定義一個概念，專案

圖片元素

<img src="圖片的url" alt = "影像的替代文字">
複製程式碼

超連結元素

<a>標籤的target屬性，預設值為_self。

值	說明
`_self`	在超連結所在框架或視窗中開啟目標頁面
`_blank`	在新瀏覽器視窗中開啟目標頁面
`_parent`	將目標頁面載入含有該連結框架的父框架集或父視窗中
`_top`	在當前的整個瀏覽器視窗中開啟目標頁面，因此會刪除所有框架

文字連結是<a></a>標籤之間的元素內容為文字內容。
錨點連結是用#+對應的錨點，錨點通常用唯一屬性值id設定。

影像熱區連結

影像熱區連結，是什麼呢？當你在看一些購物網頁的時候，一張圖片上，可以在不同的地方連結到不同的目標位置，點選不同的地方可以跳轉到不同的網頁，這也是做商城專案一般要用到的技術。

這個時候不是<a>標籤元素了，而是<area>元素。

<area>元素的屬性有兩個shape，cords屬性。

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

<area>的座標系，原點為圖片的左上角,x軸正方向向右，y軸正方向向下

我畫個圖哈，反映<area>的座標系：

影像熱區連結的使用，<map>標籤定義一個image-map，可以含一個以上的熱區<area>，每個熱區都有獨立的連結。

要為<map>標籤賦予name屬性。

將<img>標籤的usemap屬性與<map>標籤的name屬性相關聯。

為了證明我學會了，我寫一個html頁面。

map -> name="image_link"

img -> usemap="#image_link"
複製程式碼

點選跳轉：imgmap.html

e-mail連結

e-mail連結主要是看到有很多官方網頁需要做的一個開啟一封新的電子郵件。

點選下方連結即可看到效果：

聯絡我們

程式碼：

<a href="mailto:xxxxxx@qq.com">聯絡我們</a>
複製程式碼

javascript連結

點選JavaScript連結：

點選彈窗

程式碼：

<a href="javascript:alert('哈哈，你點選了！');">點選彈窗</a>
複製程式碼

空連結

空連結是指未指派目標地址的超連結。

空連結的程式碼：

javascript: void(0)

<a href=""></a>

<a href="#"></a>

<a href="javascript:void(0)"></a>
複製程式碼

列表元素

整合列表html網頁，點選跳轉：ul-ol.html

無序列表，<ul>定義無序列表，<li>定義列表項。

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

有序列表，<ol>定義有序列表，<li>定義列表項。

<ol>的type屬性值：數字，大寫字母，大寫羅馬數字，小寫字母，小寫羅馬數字。

start屬性定義序號的開始位置。

定義列表<dl>，定義列表內部可以有多個列表項標題，每個列表項標題用<dt>標籤定義，列表項標題內部又可以有多個列表項描述，用<dd>標籤定義。

表格

整合表格html網頁，點選跳轉：table.html

<table>定義表格
<caption>定義表格標題
<tr>定義若干行
<td>定義若干單元格
<th>定義表頭
表格分頭部，主體，底部：<thead>,<tbody>,<tfoot>三個標籤。

屬性	說明
`border`	設定表格的邊框寬度
`width`	設定表格的寬
`height`	設定表格的高
`cellpadding`	設定內邊距
`cellspacing`	設定外邊距

<td>的兩個屬性：colspan用於定義單元格跨行，rowspan用於定義單元格跨列
<tbody>,<thead>,<tfoot>標籤通常用於對錶格內容進行分組。
表單由<form>標籤定義，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屬性用來設定選擇欄的高度，multiple屬性用來決定是多選列表，還是單選

selected="selected"
複製程式碼

表單控制元件，用於輸入更多的文字

<textarea>元素

<textarea>標籤具有name,cols,rows3個屬性。

name用於提交引數
value用於輸入文字內容
cols和rows分別用於文字框的列數和行數，寬度和高度。

效果：

程式碼：

<form action="web" method="post">
 自我評價：<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>
複製程式碼

frameset

<frameset>定義一個框架集，用於組織多個視窗，每個框架存有獨立的html文件
<frameset>不能與<body>共同使用，除非有<noframe>元素
<frame>用於定義<frameset>中一個特定的視窗。空元素<frame/>

frame屬性

屬性	說明
`src`	需要顯示的`html`文件
`frameborder`	定義框架的外邊框，屬性值為0或者1
`scrolling`	定義是否顯示滾動條,有3個值：yes,no,auto
`noresize="noresize"`	定義該框架無法調整大小，預設是可以調整的
`marginheight`和`marginwidth`屬性	定義上下左右的邊距

<noframe>，用於為那些不支援框架集的瀏覽器顯示文字
<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/5e477d7ce51d4526c550a27d" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的瀏覽器無法處理框架，請更換瀏覽器開啟</body>
    </noframes>
</html>
複製程式碼

預留字元

HTML 中的預留字元必須被替換為字元實體。

顯示結果	描述	實體名稱	實體編號
	空格	` `	` `
<	小於號	`<`	`<`
>	大於號	`>`	`>`
&	和號	`&`	`&`
"	引號	`"`	`"`
'	撇號	`'` (IE不支援)	`'`
￠	分（cent）	`¢`	`¢`
£	鎊（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	歐元（euro）	`€`	`€`
§	小節	`§`	`§`
©	版權（copyright）	`©`	`©`
®	註冊商標	`®`	`®`
™	商標	`™`	`™`
×	乘號	`×`	`×`
÷	除號	`÷`	`÷`

CSS基礎知識

css，英文Cascading Style Sheets，中文名：級聯樣式表。層疊樣式表。
css是一種表現語言，是對網頁語言的補充。
css用於網頁的風格設計，包括字型，顏色，位置等。
css使用的4中方式：引入外部樣式檔案，匯入外部樣式檔案，使用內部樣式定義，使用內聯樣式定義。

引入外部樣式檔案：

<link type="text/css" rel="stylesheet" href="css樣式檔案的url"/>
複製程式碼

匯入外部樣式檔案:

<style type="text/css">
 @import "css樣式檔案的url";
</style>
複製程式碼

使用內部樣式定義：

<style type="text/css">
 div {
     background-color: #ffffff;
     width: 300px;
     height: 300px;
 }
</style>
複製程式碼

使用內聯樣式定義：

<div style="background-color: #ffffff; width: 100px; height: 100px;">
</div>
複製程式碼

css的兩個特性：層疊，繼承

層疊：層疊樣式生效的優先順序：

內聯樣式->內部樣式->外部樣式->瀏覽器預設效果。

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

`css`的選擇器

元素選擇器，是最簡單的選擇器。
萬用字元選擇器，用"*"表示，表示對任意元素都有效。
屬性選擇器

格式：

E[attribute]{property1:value1; property2:value2;...}
複製程式碼

語法	說明
`E[attribute]`	用於選取帶有指定屬性的元素
`E[attribute=value]`	用於選取帶有指定屬性和指定值的元素
`E[attribute~=value]`	用於選取屬性值包含指定值的元素，該值必須是整個單詞，可以前後有空格
`E[attribute\\|=value]`	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞或者後面跟著連字元“-”

派生選擇器

派生選擇器根據元素在其位置的上下文關係定義樣式
派生選擇器分3種：後代選擇器，子元素選擇器，相鄰兄弟選擇器
後代選擇器是某元素後代的所有元素。
子元素選擇器是相對於父元素的第一級子元素符合條件。
相鄰兄弟選擇器，針對的元素是同級元素，擁有相同的父元素，且兩個元素是相鄰的。
id選擇器，以特定id值的HTML元素指定樣式。
類選擇器，以指定class的HTML元素指定樣式。
偽類選擇器

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

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

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

偽類名	說明
`:active`	向被啟用的元素新增樣式
`:focus`	向擁有輸入焦點的元素新增樣式
`:hover`	向滑鼠懸停在上方的元素新增樣式
`:link`	向未被訪問的連結新增樣式
`:visited`	向已被訪問的連結新增樣式
`:first-child`	向元素新增樣式，且該元素是它的父元素的第一個子元素
`:lang`	向帶有指定`lang`屬性的元素新增樣式

偽元素選擇器

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

偽元素名	說明
`:first-letter`	向文字的第一個字母新增樣式
`:first-line`	向文字的第一行新增樣式
`:after`	在元素之後新增內容
`:before`	在元素之前新增內容

css背景

css背景屬性如下：

屬性	說明
`background-color`	定義背景顏色
`background-image`	定義背景圖片
`background-repeat`	定義背景圖片是否重複以及其重複方式
`background-attachment`	定義背景圖片是否跟隨內容滾動
`background-position`	定義背景圖片的水平位置和垂直位置
`background`	可以用一條樣式定義各種背景屬性

background

background-color用於設定背景顏色，初始值為transparent透明色。
顏色取值3種如：顏色名，十六進位制顏色，rgb函式。
background-image用於設定元素的背景圖片，預設值為none。
background-repeat控制影像的平鋪。

background-repeat預設值為repeat，即影像沿著x軸和y軸平鋪，還可以指定沿著x軸平鋪rpeat-x，沿著y軸平鋪repeat-y，或者不平鋪no-repeat，繼承父元素該屬性設定inherit。

background-attachment用於設定背景影像是否固定或者隨著頁面的其餘部分滾動。預設值為：scroll，表示可以隨著頁面其餘部分的滾動而滾動。設定fixed，表示當頁面其餘部分滾動時，背景圖片不會滾動，設定inherit，繼承父元素。
background-position用於設定背景影像圓點的位置。

background可以將background-color，background-position，background-attachment，background-repeat，background-image全部設定。

css字型屬性

css常用字型屬性表：

屬性	說明
`font-family`	定義文字的字型系列
`font-size`	定義文字的字型尺寸
`font-variant`	定義是否以小型大寫字母的字型顯示文字
`font-style`	定義文字的字型是否是斜體
`font-weight`	定義字型的粗細
`font`	可以一條樣式定義各種字型屬性

font-family用於設定元素的字型，該元素屬性值一般可以設定多個字型。
font-size用於設定字型的尺寸。
font-style用於設定字型是否是斜體，預設值為normal，當設定為italic，顯示為一個斜體的樣式，當設定為oblique，顯示為一個傾斜的樣式。
font-variant用於設定字型使用小寫字型，預設為normal，一旦設定為small-caps，將所有小寫字母變為大寫。
font-weight用於設定字型的粗細，normal值等於400，bold的值等於700。
font，可以設定font-family,font-size,font-style,font-variant,font-weight。

css文字屬性表：

屬性	說明
`color`	文字顏色
`direction`	文字方向或者書寫方向
`letter-spacing`	字元的間距
`line-height`	文字的行高
`text-align`	文字的水平對齊方式屬性,設定元素中文字的水平方式，值有`left，right，center，inherit`。
`text-decoration`	給文字新增修飾效果，值有`underline為新增下畫線，overline新增上畫線，line-through新增刪除線，blink新增閃爍的效果,none無如何修飾,inherit`。
`text-indent`	定義文字的首行縮排方式，預設值為0
`text-shadow`	為文字新增陰影效果
`text-transform`	切換文字的大小寫
`white-space`	設定如何處理元素內的空白
`word-spacing`	定義單詞之間的距離

css尺寸屬性表：

屬性	說明
`width`	設定元素的寬度
`min-width`	設定元素的最小寬度
`max-width`	設定元素的最大寬度
`height`	設定元素的高度
`min-height`	設定元素的最小高度
`max-height`	設定元素的最大高度

css列表屬性表：

屬性	說明
`list-style-image`	設定列表項標記樣式為影像，`none/inherit/url`
`list-style-position`	設定列表項標記的位置，`inside/outside/inherit`
`list-style-type`	設定列表項標記的型別
`list-style`	可以用一條樣式定義各種列表屬性

list-style-type

值	說明
`disc`	實心圓
`circle`	空心圓
`square`	方塊
`decimal`	數字
`low-roman`	小寫羅馬數字
`upper-roman`	大寫羅馬數字
`low-alpha`	小寫字母
`upper-alpha`	大寫字母
`none`	無標記
`inherit`	繼承父元素的該設定

css表格屬性表：

屬性	說明
`border-collapse`	設定是否合併表格邊框
`border-spacing`	設定相鄰單元格邊框之間的距離
`caption-side`	設定表格標題的位置
`empty-cells`	設定是否顯示錶格中空單元格上的邊框和背景
`table-layout`	設定用於表格單元格列寬的設定方式

盒模型

css盒模型，包含元素內容content，內邊距padding，邊框border，外部距margin。

css內邊距屬性，元素的內邊距在邊框和內容之間。

css內邊距的屬性：

屬性	說明
`padding-top`	元素的上內邊距
`padding-right`	元素的右內邊距
`padding-bottom`	元素的下內邊距
`padding-left`	元素的左內邊距
`padding`	用一個宣告定義所有內邊距屬性

設定順序為上右下左依次進行。

padding: 10px 10px 10px 10px;
複製程式碼

css外邊距的屬性：

屬性	說明
`margin-top`	定義元素的上外邊距
`margin-right`	定義元素的右外邊距
`margin-bottom`	定義元素的下外邊距
`margin-left`	定義元素的左外邊距
`margin`	用一個宣告定義所有外邊距屬性

css邊框的屬性：

屬性	說明
`border-top-style`	上邊框的樣式屬性
`border-right-style`	右邊框的樣式屬性
`border-bottom-style`	下邊框的樣式屬性
`border-left-style`	左邊框的樣式屬性
`border-style`	設定4條邊框的樣式屬性
`border-top-width`	設定上邊框的寬度屬性
`border-right-width`	設定右邊框的寬度屬性
`border-bottom-width`	設定下邊框的寬度屬性
`border-left-width`	設定下邊框的寬度屬性
`border-width`	設定4條邊框的寬度屬性
`border-top-color`	設定上邊框的顏色屬性
`border-right-color`	設定右邊框的顏色屬性
`border-bottom-color`	設定下邊框的顏色屬性
`border-left-color`	設定左邊框的顏色屬性
`border-color`	設定4條邊框的顏色屬性
`border-top`	用一條宣告定義所有上邊框的屬性
`border-right`	用一條宣告定義所有右邊框的屬性
`border-bottom`	用一條宣告定義所有下邊框的屬性
`border-left`	用一條宣告定義所有左邊框的屬性
`border`	用一條宣告定義所有邊框的屬性
`border-width`	一次定義4條邊框的寬度
`border-color`	一次定義4條邊框的顏色

邊框的樣式

none，無邊框效果
hidden，與none相同
dotted，點線邊框效果
dashed，虛線邊框效果
double，雙線邊框效果
solid，實線邊框效果
groove，3D凹槽邊框效果
ridge，3D凸槽邊框效果

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

屬性	說明
`outline-style`	定義輪廓的樣式屬性
`outline-color`	定義輪廓的顏色屬性
`outline-width`	定義輪廓的寬度屬性
`outline`	同一個宣告中定義所有的輪廓屬性

佈局屬性

佈局屬性是文件中元素排列顯示的規則
佈局方式3種：普通文件流，浮動，定位

css浮動涉及到的屬性

屬性	說明
`float`	設定框是否需要浮動以及浮動方向
`clear`	設定元素的哪一側不允許出現其他浮動元素
`clip`	裁剪絕對定位元素，該元素必須是絕對定位，上右下左原則
`overflow`	設定內容溢位元素框時的處理方式，值：`visible,auto,hidden,scroll`
`display`	設定元素如何顯示，值`none,block,inline,inline-block,inherit`
`visibility`	定義元素是否可見，`visibility`設定為隱藏，元素佔用的空間依然會保留，但`display:none`不保留佔用空間，值：`visible,hidden`

css定位的屬性

屬性	說明
`position`	元素的定位型別，值`static`,`absolute`絕對，`relative`相對
`top`	元素上外邊距
`right`	元素右外邊距
`bottom`	元素下外邊距
`left`	元素的左外邊距
`z-index`	元素的堆疊順序

z-index用於設定目標物件的定位層序，數值越大，所在層級越高。該屬性只在position:absolute時有效。

?，? coding✨ Love wife ?，love kids ?，love life ?，love code ? .

❤️感謝大家

1.如果本文對你有幫助，就點個贊支援下吧，你的「贊」是我創作的動力。

2.新增微信【xiaoda0423】，拉你進技術交流群一起學習。

如何製作基礎認證釣魚頁面？
2017-09-12
零基礎創作專業wordpress網站10-製作聯絡頁面
2018-07-08
網站
零基礎創作專業wordpress網站09-製作服務頁面
2018-07-08
網站
零基礎創作專業wordpress網站08-製作關於頁面
2018-07-08
網站
沒想到，Python 還可以製作 Web 視覺化頁面！
2021-07-13
PythonWeb視覺化
如何製作H5頁面？分享簡單實用H5頁面製作教程
2021-10-18
H5
網站404頁面怎麼做 404頁面製作步驟
2022-04-16
網站
純CSS製作單頁Web應用
2017-06-16
CSSWeb
web頁面
2020-12-28
Web
零基礎創作專業wordpress網站11-製作頁尾（Footer）
2018-07-08
網站
3個Web入門小遊戲，製作只需基礎三劍客
2016-08-25
Web遊戲
android使用html+javascript來製作頁面
2013-12-04
AndroidHTMLJavaScript
零基礎創作專業wordpress網站06-製作主頁（elementor）
2018-07-08
網站
web頁面測試
2018-05-11
Web
Web效能優化系列（2）：剖析頁面繪製時間
2015-04-15
Web優化
零基礎創作專業wordpress網站05-將主頁面設定為主頁
2018-07-08
網站
058、Vue3+TypeScript基礎，頁面通訊之父頁面使用$parent的用法
2024-08-25
VueTypeScript
零基礎創作專業wordpress網站03-為網站新增頁面
2018-07-08
網站
python django整理（三）頁面基礎（仿BBS)
2021-09-09
PythonDjango
頁面效能的基礎因素 - 《Designing for Performance》
2016-03-07
ORM
直播平臺製作，禁止頁面滾動 / 滾動事件穿透
2023-02-24
事件穿透
web頁面效能測試
2013-09-29
Web
《HTMLCSSJavaScript網頁製作從入門到精通第3版》——第01章　HTML基礎
2017-05-02
HTMLCSSJavaScript網頁
java web 之網頁前端開發基礎（1）
2018-08-02
JavaWeb網頁前端
全棧 - 20 Web 基礎網頁的血肉 CSS
2017-04-25
全棧Web網頁CSS
全棧 - 19 Web 基礎網頁的骨骼 HTML
2017-04-17
全棧Web網頁HTML
pdf expert使用教程：製作PDF的基礎教程
2021-07-08
Web前端開發入門之網頁製作三要素
2019-06-18
Web前端網頁
Web前端開發入門之網頁製作三要素！
2021-05-26
Web前端網頁
html&css基礎_頁面常見文字設定
2017-12-27
HTMLCSS
web基礎
2018-01-24
Web
VS2005入門之製作第一個頁面
2008-03-04
android專案點餐app1：基礎功能：閃屏頁、登入頁面、註冊頁面
2020-11-23
AndroidAPP
web 前端圖示製作
2018-01-25
Web前端
網頁外掛製作
2010-08-24
網頁
網頁橫幅製作
2010-04-05
網頁
網頁製作小技巧
2009-07-02
網頁
web頁面錄屏實現
2019-02-10
Web

顯示結果	描述	實體名稱	實體編號
	空格	` `	` `
<	小於號	`<`	`<`
>	大於號	`>`	`>`
&	和號	`&`	`&`
"	引號	`"`	`"`
'	撇號	`'` (IE不支援)	`'`
￠	分（cent）	`¢`	`¢`
£	鎊（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	歐元（euro）	`€`	`€`
§	小節	`§`	`§`
©	版權（copyright）	`©`	`©`
®	註冊商標	`®`	`®`
™	商標	`™`	`™`
×	乘號	`×`	`×`
÷	除號	`÷`	`÷`

顯示結果	描述	實體名稱	實體編號
	空格	` `	` `
<	小於號	`<`	`<`
>	大於號	`>`	`>`
&	和號	`&`	`&`
"	引號	`"`	`"`
'	撇號	`'` (IE不支援)	`'`
￠	分（cent）	`¢`	`¢`
£	鎊（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	歐元（euro）	`€`	`€`
§	小節	`§`	`§`
©	版權（copyright）	`©`	`©`
®	註冊商標	`®`	`®`
™	商標	`™`	`™`
×	乘號	`×`	`×`
÷	除號	`÷`	`÷`

Web頁面製作基礎