【FE前端學習】第二階段任務-基礎

時間 2019-11-09

標籤 FE前端學習第二階段任務基礎简体版

原文原文鏈接

技能學習部分：

1.須要熟練掌握HTML標籤以及CSS各個經常使用屬性。
2.掌握CSS3 經常使用屬性
3.掌握jquery的基本用法，對於JS基本邏輯語句須要熟練掌握css

上文【FE前端學習】第二階段任務-提升

1、HTML標籤

HTML是一種標記語言，標記語言是一套標記標籤，標記標籤是用尖括號包圍的關鍵詞，以開始標籤和結束標籤成對存在，如<b>和</b>
HTML屬性，給元素提供了更多信息，在開始標籤中以名稱/值的形式出現，以下例的href屬性
```
<a href="http://www.w3school.com.cn">This is a link</a>
```
HTML標題 <h1> - <h6>
HTML 水平線<hr /> html
HTML 註釋前端
```

```
HTML段落
```
<p>This is a paragraph</p>
```

HTML換行

<br />因爲關閉標籤沒有任何意義，所以它沒有結束標籤。

HTML文本格式化

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

HTML編輯器，推薦使用Notepad (PC) 或 TextEdit (Mac)簡單的文本編輯器

HTML樣式

內部樣式表jquery

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

外部樣式表css3

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

內聯樣式web

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML連接

<a href="http://www.cnblogs.com/flipped/" >Visit MyBlog!</a>target="_blank"

HTML圖像
```
<img src="boat.gif" >alt="Big Boat" width="50" height="50"
```
沒有閉合標籤，src屬性爲圖片地址，alt屬性爲當圖片不能加載時的替換文本，寬高屬性調整圖片尺寸

HTML表格

<table 
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>border="1">

<tr>表示行，<td>表示列，border屬性爲表格邊框寬度

HTML列表
```
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
```
無序列表始於 <ul> 標籤。每一個列表項始於 <li>。有序列表即把<ul>替換爲<ol>
HTML塊
HTML 元素被定義爲塊級元素(block level element)或內聯元素(inline element)。塊級元素在瀏覽器中以新的一行開始和結束例如<h1>, <p>, <ul>, <table>，內聯元素如<b>, <td>, <a>, <img>正則表達式
HTML<div>元素
是塊級元素，做爲組合其餘元素的容器，或用於文檔佈局canvas
HTML<span>元素
是內聯元素，做爲文本的容器，可給部分文本設置樣式瀏覽器
HTML表單
```
<form>
...
  input 元素
...
</form>
```
表單指包含文本域、下拉列表、單選框、複選框等輸入信息的表單元素的區域服務器
HTML輸入
```
<input type="text" name="nickname" />
```
```
<input type="radio" name="sex" value="male" />
```
type屬性指定輸入類型，text表示文本輸入框，radio表示單選框，checkbox表示複選框，button表示普通按鈕，submit表示提交按鈕
HTML框架
```
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
```
經過frame標籤將幾個HTML文檔放在一個HTML文檔中，每一個文檔獨立於其餘文檔

HTML內聯框架

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" ></iframe>

用於在網頁內顯示其餘網頁

HTML頭部
<head>是全部頭部元素的容器，能夠放<title>、<base>、<link>、<meta>、<script> 以及 <style>，其中<title>定義網頁標題
```
<title>Title of the document</title>
```
<link>經常使用來鏈接外部樣式表
```
<link rel="stylesheet" type="text/css" href="mystyle.css" />
```
<style>用於定義樣式信息
```
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
```
<meta>用於定義網頁的描述關鍵詞，便於搜索引擎索引
```
<meta name="description" content="這是一個我的博客" />
```
```
<meta name="keywords" content="前端,博客,我的" />
```
HTML 字符實體
在 HTML 中不能使用小於號（<）和大於號（>），這是由於瀏覽器會誤認爲它們是標籤。所以HTML 中的預留字符必須被替換爲字符實體。如小於號寫成< 或 <，在HTML源碼中打10個空格，瀏覽器只顯示1個空格，所以用 來輸出更多空格

HTML多媒體

<embed height="80" width="500" src="/i/horse.mp3"></embed>

用embed標籤嵌入MP3文件

<video src="movie.ogg" controls="controls" width="320" height="240" ></video>

添加視頻，control 屬性供添加播放、暫停和音量控件。

HTML5的新特性
用於繪畫的 canvas 元素

用於媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，好比 article、footer、header、nav、section

新的表單控件，好比 calendar、date、time、email、url、search

2、CSS屬性

CSS 指層疊樣式表 (Cascading Style Sheets)

CSS的語法

 selector {declaration1; declaration2; ... declarationN }

selector表示選擇器，declaration由屬性（property）和值組成

h1 {color:red; font-size:14px;}

CSS高級語法
```
h1,h2,h3,h4,h5,h6 {
  color: green;
  }
```
被分組的選擇器共享系統的聲明

CSS派生選擇器

li strong {
    font-style: italic;
    font-weight: normal;
  }

只改變<li>標籤中的strong元素的樣式

CSS id 選擇器

 {color:red;}css代碼爲：#red

HTML代碼爲：<p >這個段落是紅色。</p>id="red"

同一個id 屬性只能在每一個 HTML 文檔中出現一次

CSS 類選擇器

 {text-align: center}css代碼爲：.center

HTML代碼爲：<p >
This paragraph will also be center-aligned.
</p>class="center"

類名的第一個字符不能使用數字，類屬性能夠在每一個HTML中出現屢次

CSS 元素選擇器
```
h1 {color:blue;}
```

CSS背景

p {background-color: gray;}

body {background-image: url(/i/eg_bg_04.gif);}

背景重複body
  { 
  background-image: url(/i/eg_bg_03.gif);
  
  }background-repeat: repeat-y;

背景定位body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    
  }background-position:center;

背景固定body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  
  }background-attachment:fixed

CSS文本

縮進文本 p {text-indent: 5em;}

文本居中對齊 h1 {}text-align:center

文本裝飾(使連接無下劃線) a {text-decoration: none}

CSS字體

按給出的字體順序，選擇候選字體p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

不一樣的style p.normal {}
p.italic {}
p.oblique {}font-style:normal;font-style:italic;font-style:oblique;

不一樣的粗細 p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字體大小 h1 {font-size:60px;}

1em=父元素的字體大小 h1 {font-size:3.75em;}

全部字體屬性在一個聲明裏，其中30px表示line-height行高 p{font:italic bold 12px/30px arial,sans-serif;}

CSS 連接
連接的四種狀態：
- a:link - 普通的、未被訪問的連接
- a:visited - 用戶已訪問的連接
- a:hover - 鼠標指針位於連接的上方
- a:active - 連接被點擊的時刻

CSS列表

無序列的小圓點 ul.circle {}
無序列的小方塊 ul.square {}
有序列的大寫羅馬數字 ol.upper-roman {}
有序列的小寫字母 ol.lower-alpha {}list-style-type:circle;list-style-type:square;list-style-type:upper-roman;list-style-type:lower-alpha;

無序列的圖片 ul li {list-style-image : url(xxx.gif)}

簡寫樣式，inside表明標誌出如今列表項內容內部li {list-style : url(example.gif) square inside}

CSS表格

td
  {
   height:50px;設置高度
   vertical-align:bottom;文本豎直對齊
   padding:15px; 表格內邊距
  }
table, td, th
  {
   border:1px solid purple;表格邊框顏色
   background-color:gray;表格背景顏色
   color:white;表格文字顏色
  }

CSS框模型概述

外邊距 margin: 0;
內邊距 padding: 0;

分別設置上下左右的內邊距 padding: 10px 0.25em 2ex 20%;

CSS 定位
position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。

absolute

元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

CSS 浮動

向右浮動 float:right;

清除浮動（左右兩邊的） clear:both;

CSS對齊
左和右外邊距設置爲 "auto"，來水平對齊塊元素
```
margin:auto
```
position設置左右對齊
```
position:absolute;
right:0px;
```
float設置左右對齊
```
float:right;
```

CSS分類

屬性	描述
clear	設置一個元素的側面是否容許其餘的浮動元素。
cursor	規定當指向某元素之上時顯示的指針類型。
display	設置是否及如何顯示元素。
float	定義元素在哪一個方向浮動。
position	把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
visibility	設置元素是否可見或不可見。

內聯元素display: inline;
消失display: none;
塊級元素display: block

3、CSS3經常使用屬性

CSS3 圓角邊框

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 邊框陰影

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 邊框圖片

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }

CSS3 background-size 屬性

div
{
background:url(bg.gif);
-moz-background-size:50px 100px; /* 老版本的 Firefox */
background-size:50px 100px;/* 分別表明寬度高度 */
background-repeat:no-repeat;
}

CSS3 background-origin 屬性

背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。

div
{
background:url(bg.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;/* 背景圖片在文本區域  */
}

CSS3 文本陰影

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3 自動換行
```
p {word-wrap:break-word;}
```

CSS3 @font-face 規則首先定義字體的名稱（好比 myFirstFont），而後指向該字體文件

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

CSS3 2D 轉換

transform: translate(50px,100px);/* 移動到X,Y座標 */

transform: scale(2,4);/* 拉伸到2倍寬4倍高 */

transform: skew(30deg,20deg);/* 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。 */

transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* 旋轉，縮放，移動，傾斜*/

-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */

CSS3 3D轉換

div
{
transform: rotateX(120deg); /* rotateY(130deg); */
-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
-moz-transform: rotateX(120deg);	/* Firefox */ }

CSS3 過渡

transition: width 2s, height 2s, transform 2s;

CSS3 多列

div
{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */  }column-count:3;

CSS3 動畫

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }

4、jQuery

jQuery 是一個 JavaScript 函數庫。
HTML 元素選取和操做
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容（包括 HTML 標記）
- val() - 設置或返回表單字段的值
- attr() 方法用於獲取屬性值。
HTML 元素添加和刪除
- append() - 在被選元素的結尾插入內容
- prepend() - 在被選元素的開頭插入內容
- after() - 在被選元素以後插入內容
- before() - 在被選元素以前插入內容
- remove() - 刪除被選元素（及其子元素）
- empty() - 從被選元素中刪除子元素
CSS 獲取和設置
- addClass() - 向被選元素添加一個或多個類
- removeClass() - 從被選元素刪除一個或多個類
- toggleClass() - 對被選元素進行添加/刪除類的切換操做
- css() - 設置或返回樣式屬性
```
$("p").css("background-color","yellow");/*設置一個屬性*/
```
```
$("p").css({"background-color":"yellow","font-size":"200%"});/*設置多個屬性*/
```
處理尺寸
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
遍歷
1. 祖先
  - parent()
  - parents()
  - parentsUntil()
2. 後代
  - children()
  - find()
3. 同胞
  - siblings()
  - next()
  - nextAll()
  - nextUntil()
  - prev()
  - prevAll()
  - prevUntil()
4. 過濾
  - first()
  - last()
  - eq()
  - filter()
  - not()

AJAX

load() 方法從服務器加載數據，並把返回的數據放入被選元素中
```
$("#div1").load("demo_test.txt #p1");
```

$.get() 方法經過 HTTP GET 請求從服務器上請求數據。

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post() 方法經過 HTTP POST 請求從服務器上請求數據。

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

5、JS的基本邏輯語句

和C語言同樣的比較運算符，多了一個===全等號，值和類型都相等才返回true
和C語言同樣的邏輯運算符&&、||、!表明與或非

和C語言同樣的？：三目運算符

variablename=(condition)?value1:value2

和C語言同樣的if和switch語句
和C語言同樣的for、while、break語句

測試和捕捉

try
  {
  adddlert("Welcome guest!");//在這裏運行代碼
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";//在這裏處理錯誤
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }