html_css - 簡書

第一章前端介紹

第1節(jié) 什么是前端

前端即網(wǎng)站的前臺部分俭尖，運行在PC端低散，移動端等瀏覽器或者APP上诊县，展現(xiàn)給用戶瀏覽的網(wǎng)頁。

</center>

前端與后臺是相對的前端是展示給用戶并且和用戶進行交互的客戶端有app或者瀏覽器后臺又稱為服務器端進行數(shù)據(jù)處理检号，存儲腌歉，業(yè)務邏輯等.

第2節(jié) 前端的開發(fā)流程

</center>

第3節(jié) 頁面的組成結(jié)構(gòu)

結(jié)構(gòu)

HTML用于描述頁面的結(jié)構(gòu)

表現(xiàn)

CSS用于控制頁面中元素的樣式

行為

JavaScript用于響應用戶操作

第4節(jié) 頁面的描述

結(jié)構(gòu)

</center>

表現(xiàn)

</center>

行為

</center>

第二章 HTML標簽(結(jié)構(gòu))

第1節(jié) HTML簡介

HyperText Markup Language

超文本標記語言

Html通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件谨敛，通過在文本文件中添加標記符究履，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理滤否，畫面如何安排脸狸，圖片如何顯示等）

第2節(jié) 網(wǎng)頁的基本結(jié)構(gòu)

<!DOCTYPE html>

<html>

<head>

?? <meta charset="utf-8">

</head>

<body>

</body>

</html>

<!DOCTYPE html>: 版本的聲明,當前是html5版本

html標簽: 網(wǎng)頁的根標簽,所有其它的標簽都被html包含

head頭部標簽: 網(wǎng)頁的配置信息

為搜索引擎提供的關鍵字列表：各關鍵詞間用英文逗號","隔開

Description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容

第3節(jié) body標簽

主體標簽: 所有的顯示效果的標簽和內(nèi)容都被body包含

第4節(jié) HTML標簽基本結(jié)構(gòu)

<br/> <img src="123.jpg"/> 自閉和標簽

第5節(jié) 標簽的語法

標簽由英文尖括號<和>括起來藐俺，如<html>就是一個標簽

html中的標簽一般都是成對出現(xiàn)的炊甲，分開始標簽和結(jié)束標簽。結(jié)束標簽比開始標簽多了一個/

標簽與標簽之間是可以嵌套的欲芹，但先后順序必須保持一致卿啡，如：

<div>內(nèi)嵌套<p>，那么</p>必須放在</div>的前面

HTML標簽不區(qū)分大小寫

<h1>和<H1>是一樣的菱父，但建議小寫颈娜，因為大部分程序員都以小寫為準

第6節(jié) 語義化，讓你的網(wǎng)頁更好的被搜索引擎理解

標簽的用途:我們學習網(wǎng)頁制作時浙宜，常常會聽到一個詞官辽，"語義化"。那么什么叫做語義化呢粟瞬，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如同仆，網(wǎng)頁上的文章的標題就可以用標題標簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標題標簽裙品。文章中內(nèi)容的段落就得放在段落標簽中俗批，在文章中有想強調(diào)的文本，就可以使用 em 標簽表示強調(diào)等等市怎。

第7節(jié) 常用標簽

標題 h1~h6

段落 p

<p>這是一個段落</p>

強調(diào)/加強語氣? strong? 或 em

em:強調(diào)->默認是斜體? strong：更強烈的強調(diào) ->粗體

<strong>強烈的強調(diào)</strong>

換行 br

<br/>

分隔線 hr

<hr/>

聯(lián)系地址 address

添加一行代碼 code

添加一段代碼 pre

給文本增加樣式的標簽 span

短引用文本 q

<q>短引用文本</q>

長引用 blockquote

無序列表 ul + li

<ul>

? ?

無序列表1

? ?

無序列表2

? ?

無序列表3

? ?

無序列表4

</ul>

有序列表 ol + li

<ol>

? ?

有序列表1

? ?

有序列表2

? ?

有序列表3

? ?

有序列表4

</ol>

布局標簽 div

表格標簽 table

<table>

? ? ? ? ID

? ? ? ? 名字

? ? ? ? 年齡

? ? ? ? 1001

? ? ? ? 李雷

? ? ? ? 18

</table>

鏈接 a

圖片 img

表單標簽 form 輸入框 input

文本域 textarea

下拉列表 select + option

提交/重置按鈕/lable標簽

<form>

? ? 性別:

? ? 男

? ?

? ? 女

? ?

? ? 興趣:

? ? 籃球

? ? 足球

? ? 臺球

? ?

? ? 郵箱

? ?

? ? 描述

? ?

? ? 地址

? ?

? ? ? ? 北京

? ? ? ? 上海

? ? ? ? 天津

? ? ? ? 南京

? ?

</form>

第8節(jié) 轉(zhuǎn)義字符

</center>

第三章 CSS (表現(xiàn))

第1節(jié) CSS簡介

1.1 CSS全稱為“層疊樣式表”岁忘，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小区匠、顏色干像、字體加粗等

1.2 CSS的代碼語法

選擇器｛屬性：值;屬性:值….. ｝

</center>

第2節(jié) CSS基本知識

內(nèi)聯(lián)式CSS樣式:直接寫在html標簽中

嵌入式CSS樣式:寫在當前文件中

? ? p{

? ? ? ? color:red;

? ? }

</style>

外部式CSS樣式:寫一個單獨的文件中

第3節(jié) CSS的選擇器

什么是選擇器?

每一條css樣式聲明（定義）由兩部分組成

在{}之前的部分就是“選擇器”，“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素

選擇器的分類?

1蝠筑、標簽選擇器 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? p{}

2狞膘、類選擇器 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .claa{}

3、ID選擇器 (全局唯一) ? ? ? ? ? ? ? ? ? ?? #id{}

4什乙、子選擇器 > （表示第一代子元素） ? ? ? ?? #id>p{} 如果沒有>直接是空格的話就是后代所有的元素 ? #id p{}

5挽封、通用選擇器 * ? *{}

6、偽類選擇器 :hover ? ? ? ? ? ? ? ? ? ? ?? p:hover{}

7臣镣、分組選擇器 h1,h2,p ? ? ? ? ? ? ? ? ? ? ? h1,h2,p{} ?

第4節(jié) CSS的繼承辅愿、層疊和特殊性

繼承性

? ?

ppppp

</div>

權(quán)值

1、標簽的權(quán)值為1

2忆某、類選擇符的權(quán)值為10

3点待、ID選擇符的權(quán)值最高為100

如果樣式作用在一個標簽上,根據(jù)權(quán)值來應用使用哪個樣式(應用權(quán)值高的)

? ? p{color:red;}

? ? .first{color:green;}

</style>

<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩弃舒。</p>

層疊

當作用在同一個標簽上的樣式權(quán)值相同時,那么后面的樣式會生效

內(nèi)聯(lián)樣式表（標簽內(nèi)部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）

重要性? !important

我們在做網(wǎng)頁代碼的時癞埠，有些特殊的情況需要為某些樣式設置具有最高權(quán)值，怎么辦聋呢？這時候我們可以使用!important來解決

? ? p{color:red!important;}

? ? p{color:green;}

</style>

<p class="first">三年級時苗踪，我還是一個<span>膽小如鼠</span>的小女孩。</p>

第5節(jié) CSS樣式格式化排版

文字—字體: ?

?? font-family: "microsoft yahei";

?? font-family: "微軟雅黑";

文字—字號顏色: ? ?

?? font-size: 12px;

? ? color: #FF0000;

文字—粗體:

?? font-weight: bold;

文字—斜體:

?? font-style: italic;

文字-下劃線

?? text-decoration: underline;

文字-刪除線

?? text-decoration: line-through;

段落-縮進

?? text-indent: 2em;

段落-行間距(行高)

?? line-height: 1.5em;

段落-中文字間距削锰、字母間距

?? 1通铲、letter-spacing:50px; ?? 中文或者是英文字母之間的間距

?? 2、word-spacing:50px; ? ? 英文單詞之間的間距

段落-對齊

?? text-align: center;為內(nèi)聯(lián)元素中的文本或者圖片設置居中

第6節(jié) 元素分類

塊狀元素

內(nèi)聯(lián)元素

塊狀內(nèi)聯(lián)元素

第7節(jié) CSS盒模型

盒模型是CSS布局的基石减噪，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關系(用于前端布局)

</center>

第8節(jié) CSS的布局

布局模型

1短绸、流動模型（Flow）

流動模型车吹，流動（Flow）是默認的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認狀態(tài)下的 HTML網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的

流動模型的特點

1醋闭、塊狀元素獨占一行

2窄驹、內(nèi)聯(lián)元素不會獨占一行而是從左向右排列

2、浮動模型（Float）

正常情況下塊狀元素獨占一行,那么怎么能讓塊狀元素并排顯示呢?這時候就用到了浮動模型

實現(xiàn)浮動的css屬性

float:left|right

高度塌陷問題處理

clear：left | right | both;

</center>

3证逻、層模型（Layer）

層模型的三種形式?

1乐埠、絕對定位(position: absolute)

div{

? ? width: 200px;

? ? height: 200px;

? ? border: 2px red solid;

? ? position: absolute;

? ? left: 100px;

? ? top: 100px;

}

2、相對定位(position: relative)

div{

? ? width: 200px;

? ? height: 200px;

? ? border: 2px red solid;

? ? position: relative;

? ? left: 100px;

? ? top: 100px;

}

3囚企、固定定位(position: fixed)

div{

? ? width: 200px;

? ? height: 200px;

? ? border: 2px red solid;

? ? position: fixed;

? ? left: 100px;

? ? top: 100px;

}

4丈咐、Relative與Absolute組合使用

? ?

</div>

#box1{

? ? width: 200px;

? ? height: 200px;

? ? position: relative;

}

#box2{

? ? width: 100px;

? ? height: 100px;

? ? position: absolute;

? ? left: 20px;

? ? top: 20px;

}

第9節(jié) 單位和值

顏色值

1、英文命令顏色

?? p{color:red;}

2龙宏、RGB顏色

?? p{color:rgb(133,45,200);}

3棵逊、十六進制顏色

?? p{color:#00ffff;}

長度值 :長度單位總結(jié)一下，目前比較常用到px（像素）银酗、em辆影、% 百分比

1、像素 px

2花吟、em

就是本元素給定字體的 font-size 值秸歧，如果元素的 font-size 為 14px 厨姚，那么 1em = 14px衅澈；

如果 font-size 為 18px，那么 1em = 18px上面代碼就是可以實現(xiàn)段落首行縮進 24px（也就是兩個字體大小的距離）

</center>

第10節(jié) CSS樣式設置小技巧

水平居中設置-行內(nèi)元素

被設置元素為文本谬墙、圖片等行內(nèi)元素時今布，水平居中是通過給父元素設置 text-align:center 來實現(xiàn)的

水平居中設置-定寬塊狀元素

定寬塊狀元素,設置自身為 margin-left：auto；margin-right:auto

水平居中設置-不定寬塊狀元素

? ? .container{

? ? ? ? text-align: center;

? ? }

? ? .container>ul{

? ? ? ? display: inline;

? ? }

</style>

? ?

? ? ? ?

</div>

垂直居中-父元素高度確定的單行文本

父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的height和line-height 高度一致來實現(xiàn)的

? ? Hi 千鋒教育

</div>

? ? .container{

? ? ? ? background-color: red;

? ? ? ? height: 50px;

? ? ? ? line-height: 50px;

? ? }

</style>

垂直居中-父元素高度確定的多行文本

? ?

? ? ? ?

Hi 千鋒教育

? ? ? ?

Hi 千鋒教育

? ? ? ?

Hi 千鋒教育

? ? ? ?

Hi 千鋒教育

? ? ? ?

Hi 千鋒教育

</div>

.container{

? ? background-color: red;

? ? height: 500px;

? ? display: table-cell;

? ? vertical-align: middle;

}

隱性改變display類型

隱藏標簽 <p style="dispaly:none">PPPPPPPPP</p>

塊狀元素和非塊狀元素相互轉(zhuǎn)換

display: inline

第11節(jié) Flex彈性盒子模型布局

布局的傳統(tǒng)解決方案拭抬，基于盒狀模型部默，依賴? display? 屬性 +? position? 屬性 +? float? 屬性。它對有些特殊布局非常不方便.2009年造虎，W3C 提出了一種新的方案? Flex? 布局傅蹂，可以簡便、完整算凿、響應式地實現(xiàn)各種頁面布局份蝴。目前，它已經(jīng)得到了所有瀏覽器的支持氓轰，這意味著婚夫，現(xiàn)在就能很安全地使用這項功能。

① Flex布局是什么署鸡？

Flex 是 Flexible Box 的縮寫案糙，意為"彈性布局"限嫌，用來為盒狀模型提供最大的靈活性,任何一個容器都可以指定為 Flex 布局.

.box{

? display: flex;

}

Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴(這是兼容老版本瀏覽器的寫法)

.box{

? display: -webkit-flex; /* Safari,chrome */

? display: flex;

}

注意:?設為 Flex 布局以后时捌，子元素的float怒医、clear和vertical-align屬性將失效。

② 基本概念

采用Flex布局的元素奢讨，稱為Flex容器（flex container）裆熙，簡稱”容器”。它的所有子元素自動成為容器成員禽笑，稱為Flex項目（flex item）入录，簡稱”項目”。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）佳镜。主軸的開始位置（與邊框的交叉點）叫做main start僚稿，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start蟀伸，結(jié)束位置叫做cross end蚀同。

項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size啊掏，占據(jù)的交叉軸空間叫做cross size

③ 容器的屬性

以下6個屬性設置在容器上蠢络。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

[1] flex-direction屬性flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box {

? flex-direction: row | row-reverse | column | column-reverse;

}

它可能有4個值

row（默認值）：主軸為水平方向迟蜜，起點在左端刹孔。

row-reverse：主軸為水平方向，起點在右端娜睛。

column：主軸為垂直方向髓霞，起點在上沿。

column-reverse：主軸為垂直方向畦戒，起點在下沿方库。

[2] flex-wrap屬性默認情況下，項目都排在一條線（又稱”軸線”）上障斋。flex-wrap屬性定義纵潦，如果一條軸線排不下，如何換行.

.box{

? flex-wrap: nowrap | wrap | wrap-reverse;

}

它可能取三個值垃环。

nowrap（默認）：不換行邀层。

wrap：換行，第一行在上方晴裹。

wrap-reverse：換行被济，第一行在下方。

[3] flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式涧团，默認值為row nowrap只磷。

.box {

? flex-flow: <flex-direction> <flex-wrap>;

}

[4] justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式经磅。

.box {

? justify-content: flex-start | flex-end | center | space-between | space-around;

}

它可能取5個值，具體對齊方式與軸的方向有關钮追。下面假設主軸為從左到右预厌。

flex-start（默認值）：左對齊

flex-end：右對齊

center：居中

space-between：兩端對齊，項目之間的間隔都相等元媚。

space-around：每個項目兩側(cè)的間隔相等轧叽。所以，項目之間的間隔比項目與邊框的間隔大一倍刊棕。

[5] align-items屬性

align-items屬性定義項目在交叉軸上如何對齊炭晒。

.box {

? align-items: flex-start | flex-end | center | baseline | stretch;

}

它可能取5個值。具體的對齊方式與交叉軸的方向有關甥角，下面假設交叉軸從上到下网严。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊嗤无。

center：交叉軸的中點對齊震束。

baseline: 項目的第一行文字的基線對齊。

stretch（默認值）：如果項目未設置高度或設為auto当犯，將占滿整個容器的高度垢村。

[6] align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線嚎卫，該屬性不起作用

.box {

}

該屬性可能取6個值嘉栓。

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊驰凛。

center：與交叉軸的中點對齊胸懈。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布恰响。

space-around：每根軸線兩側(cè)的間隔都相等。所以涌献，軸線之間的間隔比軸線與邊框的間隔大一倍胚宦。

stretch（默認值）：軸線占滿整個交叉軸

第12節(jié) 前端布局

一列布局

二列布局

三列布局

混合布局

第13節(jié) 其他常用前端屬性介紹(小栗子練習)

設置圓角

border-radius: 3px;

取消a標簽的默認下劃線

text-decoration: none;

取消無序列表的點

list-style: none;

取消input的邊框以及焦點

outline: none;

border: none;

</center>

原型地址:

https://www.xiaopiu.com/web/byId?type=project&id=5d6a109262ad1e4d5efc56f6