前端小知識，前端了解
1、什麼是前端
1、什麼是前端
前端即網站的前臺的部分，執行在PC端，移動端等瀏覽器上展現給 使用者瀏覽的網頁。
2、前端開發概述
前端開發也叫做web前端開發，是為B/S架構的軟體提供介面解決方案的。
3、核心技術
前端的開發中，在頁面佈局時，HTML講元素進行定義，CSS對展示的元素進行定位，在通過JavaScript實現相應的效果和互動。
HTML
指的是超文字標記語言（Hyper Text Markup Language) ,這個也是我們網頁最常用普通的語言了，現在有了5.0版本，即HTML5.
Css
級聯樣式表簡稱“CSS"，通常又稱為“風格樣式表（style sheet）”，他是用來進行網頁風格設計的。比如，如果想讓連結字未點選時是藍色的，當滑鼠移上去後字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HTML中各標誌的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及建立特殊效果的能力。
JavaScript
JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
二、HTML
1、瞭解HTML
我們可以通過檢視原始碼的形式, 看到製作出來的網頁
通過仔細觀察網頁原始碼我們可以知道: 製作網頁的語言是用 “<” “>” 括起來的. 有些是成對出現,有些不是 -----> 我們一般稱這樣用尖括號括起來的語言為 HTML
HTML 是 Hyper Text Markup Language 的首字母簡寫, 意思是超文字標記語言, 超文字指的是超連結, 標記指的是標籤, 是一種用來製作網頁的語言, 這種語言由一個個的標籤組成, 用這種語言製作的檔案儲存的是一個文字檔案, 檔案的副檔名為 .html 或者 .htm
2、HTML文件的基本結構
HTML檔案的基本結構為：
注意：
HTML語言中註釋的寫法：
快捷鍵：ctrl + /
取消註釋：ctrl + /
說明：
- 基本上所有的html檔案都是按照這樣的格式作為模板進行開發.
- head標籤的主要作用:
- 網頁的設定
- 資源的引用
- head標籤中的內容一般不會顯示在網頁上.
- body中的內容通常用於網頁顯示
3、快速建立HTML文件
我們可以新建一個.html檔案, 在檔案中快速建立基本標籤:
快速建立的方法是: 在檔案中敲一個 " ! " 然後按 tab 鍵 即可:
我們可以看到,這樣就可以快速的建立一個基本的html文件了, 我們可以在這個文件中快速的編寫程式碼
說明：
- lang=“en”: 宣告這個網頁的語言是英文, 如果是中文則為: lang=“zh-CN”, 主要是做統計使用, 國內網頁一般不關心這個值.
- 第五行的主要作用是: 讓網頁在移動端觀看時, 網頁不縮放.
- 第六行的主要作用是: 如果網頁在 IE 瀏覽器上觀看, 讓 IE 以最高版本顯示網頁
4、HTML標籤
1、認識標籤：
在HTML語言中，用尖括號括起來的部分，我們稱為標籤。
2、標籤的瞭解：
- 成對的標籤
- 單個的標籤
無論是成對的標籤還是單個的標籤,都需要用 " < > " 括起來
例如：
由以上圖我們可以知道：
-
<html> <head> <body> <title> <ul> <li> <a>這樣的標籤是成對的 -
<meta> <hr> <img> 這樣的標籤是單個的
同時: 由上面的程式碼我們也可以獲取到:
標籤是可以巢狀的: 例如 上面的程式碼中 html 標籤, 嵌套了 head 標籤和 body 標籤.
body 標籤又嵌套了 ul 標籤, ul 標籤嵌套了 li , li 嵌套了 a標籤等等.
類似於這樣標籤中新增標籤的寫法,我們稱之為標籤的巢狀.
3、標籤的屬性
有些標籤內部這樣設定
-
<img src="../day001/image.png" alt=""> -
<div class="box"></div>
其中 src=" " 和 alt=" " 這部分內容, 我們稱之為當前標籤的屬性.
說明：
- 有些標籤的屬性是相同的, 有些標籤的屬性是不同的.
- 通過標籤的屬性,我們可以給當前的標籤設定不同的內容.
總結：
- 我們只需要知道標籤的尖括號內部新增的設定是屬性即可
4、標籤分類
注意: 在前端中, 元素指的就是標籤, 所以我們有時候說: xx元素, 即指的是 xx標籤
標籤按照顯示的不同, 可以分為兩類:
- 塊元素 (行元素)
- 內聯元素 (行內元素)
塊元素特點：
-
單個塊元素在瀏覽器中預設獨佔一行
-
兩個塊元素不能夠在一行顯示，他們會自動換成兩行顯示
-
塊元素可以設定寬高等屬性
內聯元素：
- 多個內聯元素可以再一行顯示
- 內聯不能夠設定寬高，設定了也沒用，不會有效果
- 內聯元素的寬高有他們本身內容多少來支撐，內容多，寬高自動增加
常用塊元素標籤：
1、標題標籤
表示文件的標題, 除了具有塊元素基本特徵之外, 還含有預設的外邊距和字型大小
-
<h1>一級標題</h1> -
<h2>二級標題</h2> -
<h3>三級標題</h3> -
<h4>四級標題</h4> -
<h5>五級標題</h5> -
<h6>六級標題</h6>
2.段落標籤:
表示文件中的一個文欄位落, 除了具有塊元素基本特徵, 還含有預設的外邊距
-
<p> 既然你誠心誠意的問了， 我們就大發慈悲的告訴你！ 為了防止世界被破壞， 為了守護世界的和平； 貫徹愛與真實的邪惡， 可愛又迷人的反派角色~~ 武藏！ 小次郎！ 我們是穿梭在銀河的火箭隊！白洞，白色的明天在等著我們！！ 就是這樣~喵~~~~ </p> 段落標籤中如果想要強制換行,需要使用<br>標籤, 這個標籤是個單個標籤,所以只有一個. 另外在html中, 如果想要寫大於號, 小於號, 或者空格等, 需要使用程式碼來實現, 這樣更加優雅~ 程式碼實現大於號: > 程式碼實現小於號: < 程式碼實現空格:
3、通用塊容器標籤div
表示文件中一塊內容, 具 有塊元素基本特性, 沒有其他預設樣式
<div>這是一個div元素</div>
<div>這是第二個div元素</div>
<div>
<h3>自我介紹</h3>
<p>
姑娘貌美一枝花，才學素養人品佳。
活潑開朗不八卦，頭腦敏銳有想法。
踏實奮進不做假，樂於求知肯深挖。
舞文弄墨擅策劃，慧心妙舌喜表達。
交友廣泛愛分享，微博日日落不下。
四年深造象牙塔，學習實踐兩手抓。
只待應屆招聘季，我花開後百花殺。
</p>
</div>
常用內聯元素標籤
1、超連結標籤 a
連結到另外一個網頁, 具有內聯元素基本特徵, 預設文字藍色, 有下劃線
<a href="02.html">第二個網頁</a>
<a href="http://www.baidu.com">百度網站</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<a href="#">預設連結</a>
<a href="http://www.itcast.cn">原來的視窗開啟介面</a>
<a href="www.baidu.com" target="_blank">新視窗開啟介面</a>
說明：
-
a 標籤的 href 屬性可以新增 # 號, 這個是預設連結地址:
-
不確定地址時, 我們可以臨時使用 # 來佔位,確定後替換即可
-
如果想要跳轉到當前頁面的最上方時, 可以使用 #
-
a 標籤有 target 屬性
- 如果不設定該屬性, 在當前頁面開啟新頁面
- 如果設定該屬性, 則會在新視窗中開啟新頁面
2、通用內聯容器標籤 span
具有內聯元素基本特性, 沒有其他預設樣式
我們一般在文欄位落的中間部分強調某一部分的時候呼叫span,新增樣式,從而改變強調的部分的樣式:
例如: 這是一段文字,其中梅總需要強調,所以我們可以使用span來完成強調的操作.
<p>這是一個段落文字, 段落文字中有<span>特殊標誌或者樣式</span>的文字</p>
3、圖片標籤 img
在網頁中插入圖片, 具有內聯元素基本特性, 但是它支援寬高設定
<img src="images/pic.png" alt="圖片">
說明：
- src屬性主要是新增要展示的圖片地址
- alt屬性的作用:
- 圖片載入失敗時, 顯示的提示資訊
- 搜尋引擎在收錄圖片時, 根據這個屬性值來收錄圖片
- 製作無障礙網頁, 方便盲人的讀屏軟體讀取.
總結:
- HTML 整體是由標籤組成的, 各個標籤的功能很多都是重複的
- 同學們學習標籤用法的時候多多練習即可
- 標籤整體分為: 塊級標籤 和 行內標籤
- 塊級標籤可以設定寬高值, 獨佔一行
- 行內標籤自動設定寬高值, 一行內可以有多個
- 一般來說, 塊級元素可以包含行內元素,行內元素不能包含塊級元素.
- 特殊情況, 需要記住: p 標籤不能巢狀 div
- a 標籤用於跳轉(超連結) [跳轉網頁, 跳轉頁面, 跳轉檔案等]
- 標題標籤用於設定標題, 共有6級
- div就是一個無色透明的容器,看不見,摸不到
- img標籤主要用於設定圖片
- p 標籤就是paragraph(段落) 通常用於包裹段落
- span是一個行內元素通常用於p標籤內部,個別文字設定時使用.
CSS介紹
1.CSS基本語法
CSS使用格式:
選擇器 {
屬性 : 值; 屬性 : 值;
…
}
說明:
-
選擇器是將樣式和頁面元素關聯起來的名稱
-
屬性名是希望設定的樣式屬性, 每個屬性有一個或者多個值
-
屬性和值之間用冒號隔開
-
一個屬性和值與下一個屬性和值之間用分號, 最後一個分號可以省略.
例如:
div {
width: 100px;
height: 100px;
background: gold;
}
2.CSS引入方法
1、內聯式：
通過標籤的 style 屬性, 在標籤上直接寫樣式.
<div style="width:100px;height:100px;
background:red;">
這是個div標籤
</div>
2.1嵌入式
通過 style 標籤, 在網頁上建立嵌入的樣式表.
<head>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
3、外聯式
<link rel="stylesheet" type="text/css" href="css/樣式檔名.css">
3、CSS選擇器
CSS選擇器: 幫助我們找尋標籤, 找到之後 新增樣式
CSS 的四種基本選擇器:
- 通用選擇器 ( * )
- 標籤選擇器 ( 標籤名 )
- 類選擇器 ( class )
- id 選擇器 ( id )
CSS 組合選擇器:
- 多元素選擇器
- 後代選擇器(層級)
- 子元素選擇器
- 兄弟選擇器
CSS 屬性選擇器:
- 屬性選擇器
3、1基礎選擇器：
1. 通用選擇器
使用格式:
* {
屬性名: 值;
屬性名: 值;
...
}
例如：
* {
margin: 0px;
padding: 0px;
}
有些標籤自動會增加一些內邊距和外邊距等樣式, 我們可以使用這個選擇器把預設的都給去掉
2、標籤選擇器：
標籤選擇器, 此種選擇器影響範圍大, 一般用來做一些通用設定, 或用在層級選擇器中.
通用格式:
標籤名 {
屬性名: 值;
...
}
例如：
CSS部分:
<style>
div {
color: red;
}
p {
font-size: 18px;
}
</style>
HTML部分:
<div>這裡是html部分</div>
<p>html區域的p標籤</p>
一旦使用標籤選擇器,則當前頁面上的所有該標籤全部都有該樣式. 這一點需要注意
3、類選擇器
通過類名來選擇元素, 一個類可應用於多個元素, 一個元素上也可以使用多個類
應用靈活, 可複用, 是css中應用最多的一種選擇器
常見格式:
.類名 {
屬性名: 值;
...
}
舉例：
CSS部分:
<style>
.blue {
color: blue;
}
.header {
font-size: 19px;
}
.box {
color:orange;
}
/* 這是CSS註釋的寫法,可以作為單行註釋,也可以作為多行註釋 */
/* 針對下面的程式碼, 如果我們想單獨選中div, 則可以這樣寫: */
div.blue {
/*文字變為斜體*/
font-style: italic;
}
</style>
HTML部分:
<div>這是div標籤</div>
<div class="blue">這個標籤的字型顏色會變成藍色,是因為class選擇器</div>
<p class="blue">這是div下面的p標籤,也會變成藍色,因為用的是同樣的選擇器,名字也一樣</p>
<h3 class="blue header box">這個標籤有好多個class類名, 則都會載入不同類名下面的樣式, 形成重疊效果</h3>
<p class="header">這個標籤的類名和上面的有一樣的,所以上面的header樣式也會載入在這個標籤上</p>
4.ID選擇器
通過 id 名來選擇元素，元素的 id 名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id 名一般給程式使用，所以不推薦使用id作為選擇器。
使用格式:
#ID名 {
屬性名: 值
}
舉例：
CSS部分:
<style>
#box {
color:red
}
#box1 {
background:blue;
}
</style>
HTML部分:
<p id="box">這是第一個段落標籤</p>
<p id="box1">這是第二個段落標籤</p>
<p>這是第三個段落標籤</p>
多元素選擇器
1、後代選擇器
主要應用在標籤巢狀的結構中,層級選擇器, 是結合上面兩種選擇器來寫的選擇器, 它可與標籤選擇器結合使用,減少命名,同時也可以通過層級, 限制樣式的作用範圍
使用方式:
E F {
屬性名: 值;
屬性名: 值;
...
}
2、多元素選擇器
同時匹配所有 E元素 和 F元素, E和F之間用逗號分隔:
使用格式:
E,F {
屬性名: 值;
屬性名: 值;
...
}
例如：
CSS部分:
<style>
.box,p {
color: red;
}
</style>
HTML部分:
<div class="box">這是一個美麗的div</div>
<p>美麗div下面的段落標籤p</p>
3、子代選擇器
E > F 匹配所有 E元素的 子元素F
使用格式:
E > F {
屬性名: 值;
屬性名: 值;
...
}
例如：
CSS部分:
<style>
div>p {
color: red;
}
div>div{
font-size:30px;
}
/* 選中了a標籤, 但是div內部的內容是沒有改變的,說明可以確切的選中某一個 */
.box>a {
background: pink;
}
</style>
HTML部分:
<div class="con">
<p>這是div元素的子集p元素</p>
<div class="box">
div標籤的內容部分
<a href="#">第二個div的子集:a元素</a>
</div>
</div>
4、毗鄰選擇器
匹配所有緊隨 E元素 之後的同級元素F (向下尋找)
使用格式:
E + F {
屬性名: 值;
屬性名: 值;
...
}
例如：
CSS部分:
HTML部分:
<div>第一個div,啦啦啦~</div>
<div class="box">第二個div,啦啦啦~</div>
<div>第三個div,啦啦啦~</div>
3.3屬性選擇器
1. 第一種屬性選擇器的使用
使用方法:
[attr] {
屬性名: 值;
屬性名: 值;
...
}
[title] {
}
例如：
CSS部分:
<style>
[name] {
color: red;
}
</style>
HTML部分:
<div> hello1 </div>
<div name="peter"> hello1 </div>
<div title="haha"> hello1 </div>
<div> hello1 </div>
4、CSS進階
佈局常用樣式
屬性 作用 舉例
width 設定元素(標籤)的寬度 width: 200px;
height 設定元素(標籤)的高度 height: 200px;
background 設定元素背景色或者背景圖片(詳看下面) background: pink;
border 設定元素四周的邊框 border: 1px solid pink;
border-top 設定元素頂部邊框 border-top: 1px solid/ dashed pink;
border-left 設定元素左邊邊框 border-left: 1px solid pink;
border-right 設定元素右邊邊框 border-right: 1px solid pink;
border-bottom 設定元素底部邊框 border-bottom: 1px solid pink;
文字常用樣式屬性
