web前端技術(一)

第一章 web前端基礎

web前端技術(一)
前言
一、前端技術的基礎是什么
二、前端基礎學習
- 1.HTML
- - 1.1HTML檔案的創建
  - 1.2HTML檔案的結構
  - 1.3HTML標簽
  - 1.4常用標簽
  - 1.5表單
  - 1.6 a標簽
  - 1.7圖片標簽
  - 1.8 串列
  - 1.9 多視窗框架 frameset 4.0 版本 H5版本
  - 1.10 常用標簽特殊意義的標簽
  - 1.11 視頻和音頻
- 2 XHTML
- 3.css(層疊樣式表)
- - 3.1 什么是CSS (層疊樣式表)
  - 3.2、為什么使用CSS
  - 3.3、CSS作用
  - 3.4 CSS的基本結構
  - 3.5選擇符
  - - 1.標簽選擇符
    - 2. id選擇符
    - 3.類選擇符
    - 4.通配符選擇器
    - 5.包含選擇符
    - 6.選擇符分組
    - 7.標簽指定式選擇符
    - 8.8．組合選擇選擇符
  - 3.6 css 的引入方式
  - - 1.行內樣式
    - 2.內嵌樣式
    - 3.外鏈樣式
    - 4.匯入樣式
  - 3.7 CSS樣式的特點
  - - 1、繼承：
    - 2、層疊：
  - 3.8 偽類

前言

在大眾的眼中前端就是做做網頁，做做界面，麻煩但是沒有什么難度，涉及到的知識也不過只有HTML，CSS，JAVAScript等沒有什么難度的知識，但事實并不是這樣，前端涉及到的知識遠不如此，前端要需要的互動問題所以各種網路協議如 Http UDP TCP 等也就必須要掌握，在前端與后端的互動上的流暢你也必須要掌握一門應用級語言如Java Python 等資料結構和演算法是一系列互動與運行的基礎，所以學習前端技術不僅只是學習設計網頁的html語言，也必須要懂得前后臺互動的相關知識，

一、前端技術的基礎是什么

HTML+CSS+JAVASCRIPT
HTML又被稱為超文本語言html5—XHTML HTML4.0版本等，在制作web網頁時HTML語言常被用來制作網頁的結構
CSS 層疊樣式表一般用于一個界面的布局表現
JAVAscript 腳本語言用來決定一個網頁有哪些互動行為
如果把一個web網頁分解成三層那么可以分為
結構層：HTML 超文本語言
表現層：CSS 層疊樣式表
行為層：javascript 腳本語言

以上三種語言可以算是web前端的基礎

二、前端基礎學習

1.HTML

1.1HTML檔案的創建

1.首先我們用到的Sublime Text 3的編程工具，在創建檔案之前應該做好準備，從一開始養成一個良好的習慣我們會一生受益，首先在已知的目錄下面創建自己的工程專案檔案夾，然后在檔案夾中創建圖片檔案夾（image）視頻檔案夾（video）層疊樣式表檔案夾（css）腳本語言檔案加（js），正式學習之前的準備作業就做好了，
2.創建HTML檔案保存時后綴加上.html如：book.html
3.創建好HTML檔案之后，在代碼欄輸入！再按下tab鍵就得到了

<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
		</head>
		<body>
			
		</body>
		</html>

1.2HTML檔案的結構

!DOCTYPE 宣告

表示宣告檔案的型別為htm- ---MIME型別l，

網路上有很多不同的檔案，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網頁內容，
在HTML 4.01 中，<!DOCTYPE> 宣告需參考 DTD （檔案型別宣告），因為 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 標準通用標記語言），
HTML 4.01 規定了三種不同的 <!DOCTYPE> 宣告，分別是：Strict、Transitional 和 Frameset，
HTML5 不是基于 SGML，因此不要求參考 DTD，
（MIME型別：所有的檔案在網路上用于顯示還是用于下載都存在自己回應的型別）

<!DOCTYPE html>
		<html lang="en"> <!--  lang=語言  en=英語  -->
		<head>
			<meta charset="UTF-8"><!--  源 編碼字符集  為全求通用字符集UTF-8  -->
			<title>Document</title><!--  網頁的標題  -->
		</head>
		<body>
			<!--  這里就寫html的主體正文部分  -->
		</body>
		</html>

1.3HTML標簽

html的標簽型別大致分為兩種：單標簽，雙標簽，
單標簽如：<meta charset=”utf-8”> <br/>換行等；
雙標簽如：<p></p><a></a>等；
Tag -----標簽
Meta -----源 metadata 源資料
<html> 元素節點
Lang=“utf-8” 屬性節點
<body>文本</body> 文本節點
亂碼一般出現原因：字符集不統一
當我們在國內打開的瀏覽器的默認的編碼格式都是GBK 需要把原有的GBK的格式修改成全球統一的格式 —UTF-8

1.4常用標簽

標題
HTML 標題（Heading）是通過<h1 - h6> 標簽來定義的.

<hn> 標題</hn>

n=1-6

標尺線

<hr>

段落
行的控制

<p>內容< /p>

align 屬性節點
3個值 left center right

區域劃分

<div> 內容</div>

等

在html中表示顏色的三種方式：

rgb(255,255,255) 0-255 r-red g-green b- blue
#000000~#ffffff 以十六進制的方式去表示顏色
使用顏色的單詞英文如：pink orange yellow black white gold

Body 屬性
text 用于表示正文的文本顏色
bgcolor 用于表示背景顏色
background 用于表示檔案的背景影像一般不會使用圖片作為頁面的背景
相對路徑時 ./ 當前路徑 …/ 當前路徑的父路徑

1.5表單

表單是一個包含表單元素的區域，

表單元素是允許用戶在創建的表單中輸入內容,比如：文本(textarea)、下拉串列、單選框(radio-buttons)、復選框(checkboxes)等等，（常用來如：登錄，注冊界面等；）

表單使用表單標簽來設定:

<form action="" method="">
<!----  action -----表單提交路徑 --跳轉的功能
        method -----提交的方式 ---->

<input>
</form>

在表單中的常用input型別
Text ----文本框
Password ----密碼框
Checkbox —多選框
Radio ----單選框
Submit ----提交按鈕
Reset ----重置按鈕
File -----檔案上傳

Method
Method的提交方式來源于HTTP協議
一共可以大致分為9種
1.get　　　　請求指定頁面的資訊，并回傳物體主體（冪等）

2.post　　　向指定資源提交資料進行處理請求，資料存在請求體（非冪等）

3.head　　類似get，但不回傳具體內容，用于獲取報頭（冪等）

4.put 　　完整替換更新指定資源資料，沒有就新增（冪等）

5.delete　　洗掉指定資源的資料（冪等）

6.patch　　部分更新指定資源的資料（非冪等）

7.options　允許客戶端查看服務器的支持的http請求方法

8.connect　預留給能將連接改為管道的代理服務器

9.trace　　追蹤服務器收到的請求，用于測驗或診斷

常用的方式只有get與post兩種請求方式
1.Get請求和post請求有什么區別？面試題
安全：默認為get方式
Post請求提交時路徑上沒有屬性的資訊相對安全
Get 請求提交路徑上存在屬性的資訊不安全

   因為get請求在路徑的地址上存在屬性值 url的地址是有限制的

最大為64kb

2.什么時候使用get請求什么時候使用post請求？
要根據資料性質 — 熱資料安全度不重要的資料使用get和post都可以

如果資料的性質需要安全性比較高時那么一定要使用post
在寫檔案上傳的功能時請求必須是post的提交方式

1.6 a標簽

html頁面跳轉：

a標簽進行頁面跳轉屬于get請求方式

超鏈接標簽，一般用于網頁之間的跳轉

使用a標簽進行外部跳轉 ----外鏈接
使用a標簽跳轉到網頁的內部 ----錨點

<a src=" 網頁地址" >可點擊的顯示文本</a>

Body中有三個關于a標簽的另外三個屬性
alink 活動鏈接（當滑鼠點擊時）
link 未訪問鏈接（當臺pc未訪問過的鏈接）
vlink 訪問鏈接（當臺pc已訪問過的鏈接）

1.7圖片標簽

<img src=" 圖片地址" width="寬"  height=" 高">

用于頁面中圖片的匯入
在圖形標簽中
usemap 用于做位圖 map ----映射
map 位圖
area 規定位圖區域

<img src="./image/1.jpeg" alt="圖片" usemap="#first" border="1px">

	<map id="first" name="first">

	 <area 
	 shape="circle"
	 coords="230,280,50"
	 href="http://www.baidu.com/">
	 </area>
	</map>

1.8 串列

HTML無序串列
無序串列是一個專案的串列，此列專案使用粗體圓點（典型的小黑圓圈）進行標記，
無序串列使用

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序串列
同樣，有序串列也是一列專案，串列專案使用數字進行標記，
如；

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定義串列

<dl>  表示定義串列
<dt>  定義的專案
<dd>  定義專案的描述

reversed 降序
start 起始計數
type 數字字母A-Z 羅馬字符I II III IV V VI VII VIII

1.9 多視窗框架 frameset 4.0 版本 H5版本

<iframe src="URL"></iframe>

<frameset> 多視窗的框架標簽里面的每一個視窗都是一個單獨的frame
注意：<frameset>標簽不能和body標簽連用

1.10 常用標簽特殊意義的標簽

<address> 用于描述地址默認斜體
<article> 用于描述文章的標題
<header><footer> <nav> 等
為了讓程式員能夠通過代碼看清楚代碼的含義
并沒有什么實際的含義
類似于這樣的標簽他們的作用和div是相似的提高代碼的閱讀能力

行內元素 <span> <a>
塊狀元素 <div> <p>
<span> 行內元素
通常用于修飾文本默認不具有任何樣式可以通過css來添加樣式

1.11 視頻和音頻

<video> 視頻
<audio> 音頻
用法類似于img標簽

<video src="地址" controls="controls"></video>
<！---- controls是添加控制單元 ---->
<audio src="地址"
	controls="controls"></audio>

2 XHTML

XHTML 它是html4.01版本后出現的一個更嚴謹語法更純粹的一個版本
從語法上對html進行更嚴謹的規范，

html 也可以存在任意的單詞的標簽
默認把他們當成文本標簽
DTD的命名規范規范了標簽的內容

xml 標簽可以用任意單詞來進行定義的

3.css(層疊樣式表)

3.1 什么是CSS (層疊樣式表)

CSS：全名Cascading Style Sheet 又被稱為層疊樣式表

是一組樣式設定的規則，用于控制頁面的外觀樣式

3.2、為什么使用CSS

在制作網頁時可以實作內容與樣式的分離，便于團隊開發

樣式復用，減少代碼量，便于網站的后期維護

頁面樣式的精確控制，讓頁面更精美

3.3、CSS作用

頁面外觀美化

布局和定位

3.4 CSS的基本結構

在style標簽中定義你需要的樣式

<style type="text/css">  樣式</style>

3.5選擇符

1.標簽選擇符

標簽選擇符：以標簽命名的選擇符

p{
	  	color:gold;
	  }

定義所有p標簽的樣式

2. id選擇符

id選擇符: 通常用于描述一個標簽具有唯一的樣式
標識是 #

#first{
	  	color:green;
	  }

定義id為first的所有便簽
注意#后為自己定義無固定

3.類選擇符

類選擇符也叫class選擇符

類選擇符：通常用于修飾一組或者一系列具有相同樣式的標簽
標識是 .

.class{
	color:green;
}

<p class="one">blue</p>
<p class="one">yellow</p>

中p屬于one類，定義所有屬于類one的標簽

選擇符的優先級：行內 > Id > class>標簽

4.通配符選擇器

*{ color:red;}

對頁面中所有的標簽都起作用
一般情況下在css頁面剛開始的時候描述通用屬性

5.包含選擇符

語法

e1  e2{屬性：值}

e1 是e2的父節點標簽
標識：空格

6.選擇符分組

標識： , 逗號
用它可以替代通配符選擇符

body,h1,div,ul,li{
	    color:red;
	    }

7.標簽指定式選擇符

標簽指定式選擇符：如果既想使用id或class，也想同時使用標簽選擇符

8.8．組合選擇選擇符

前面的1-7種組合性使用

h1.p1,h1#content{}

3.6 css 的引入方式

1.行內樣式

在標簽中寫入style屬性
如：

<h1 style="color:red">我只要你</h1>

不需要其他定義

2.內嵌樣式

<style type="text/css">
	  p{
	  	color:gold;
	  }
	  #first{
	  	color:green;
	  }
	  .blue{
	  	color:blue;
	  }
	</style>

寫在html檔案中

3.外鏈樣式

用link標簽把；另外的css格式的檔案鏈接起來

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

4.匯入樣式

是內嵌樣式和外鏈的樣式的混合（不太常用）

<style type="text/css">
     @import url(./css/1.css);

	</style>

優先級：在運用四種樣式時的優先級是不固定的，采取就近原則以哪種方式舉例修飾的目標最近，那么誰的優先級就越高

3.7 CSS樣式的特點

1、繼承：

網頁中子元素，將繼承父元素的樣式
例如：要控制段落p中的文字大小，可以直接給body標記加樣式，

2、層疊：

網頁中子元素定義了與父元素相同的樣式，則子元素的樣式將覆寫掉父元素的樣式
后面定義的樣式，會覆寫前面定義的樣式

3.8 偽類

Body 標簽 link alink vlink
在css有相應的偽類去替代他們

未訪問的鏈接

a:link{color:#ff0000}

已訪問的鏈接

a:visited{color:#00ff00}

滑鼠移動到鏈接上

a:hover{color:#ff00ff}

滑鼠按下到鏈接上

a:active{color:#0000ff}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280708.html

標籤：其他

上一篇：如何消除默認選項值對JS判定的影響

下一篇：記錄：職業生涯中的所有學習資料和網站

web前端技術(一) 之從小白到大牛