開發工具：Visual Studio 2017
C#版本：C#7.1html
最有效的防止SQL注入的方式是調用數據庫時使用參數化查詢。
可是若是是接手一箇舊的WebApi項目，不想改繁多的數據庫訪問層的代碼，應該如何作。前端
個人解決方案是加一個過濾器。html5
先寫過濾方法，上代碼jquery
using System; using System.Collections.Generic; using System.Web; namespace Test { /// <summary> /// 防止SQL注入 /// </summary> public class AntiSqlInject { public static AntiSqlInject Instance = new AntiSqlInject(); /// <summary> /// 初始化過濾方法 /// </summary> static AntiSqlInject() { SqlKeywordsArray.AddRange(SqlSeparatKeywords.Split('|')); SqlKeywordsArray.AddRange(Array.ConvertAll(SqlCommandKeywords.Split('|'), h => h + " ")); SqlKeywordsArray.AddRange(Array.ConvertAll(SqlCommandKeywords.Split('|'), h => " " + h)); } private const string SqlCommandKeywords = "and|exec|execute|insert|select|delete|update|count|chr|mid|master|" + "char|declare|sitename|net user|xp_cmdshell|or|create|drop|table|from|grant|use|group_concat|column_name|" + "information_schema.columns|table_schema|union|where|select|delete|update|orderhaving|having|by|count|*|truncate|like"; private const string SqlSeparatKeywords = "'|;|--|\'|\"|/*|%|#"; private static readonly List<string> SqlKeywordsArray = new List<string>(); /// <summary> /// 是否安全 /// </summary> /// <param name="input">輸入</param> /// <returns>返回</returns> public bool IsSafetySql(string input) { if (string.IsNullOrWhiteSpace(input)) { return true; } input = HttpUtility.UrlDecode(input).ToLower(); foreach (var sqlKeyword in SqlKeywordsArray) { if (input.IndexOf(sqlKeyword, StringComparison.Ordinal) >= 0) { return false; } } return true; } /// <summary> /// 返回安全字符串 /// </summary> /// <param name="input">輸入</param> /// <returns>返回</returns> public string GetSafetySql(string input) { if (string.IsNullOrEmpty(input)) { return string.Empty; } if (IsSafetySql(input)) { return input; } input = HttpUtility.UrlDecode(input).ToLower(); foreach (var sqlKeyword in SqlKeywordsArray) { if (input.IndexOf(sqlKeyword, StringComparison.Ordinal) >= 0) { input = input.Replace(sqlKeyword, string.Empty); } } return input; } } }
而後是過濾器，先上代碼git
using System.Web.Http.Controllers; using System.Web.Http.Filters; namespace Test { /// <inheritdoc> /// <cref></cref> /// </inheritdoc> /// <summary> /// SQL注入過濾器 /// </summary> public class AntiSqlInjectFilter : ActionFilterAttribute { /// <inheritdoc /> /// <summary> /// </summary> /// <param name="filterContext"></param> public override void OnActionExecuting(HttpActionContext filterContext) { base.OnActionExecuting(filterContext); var actionParameters = filterContext.ActionDescriptor.GetParameters(); var actionArguments = filterContext.ActionArguments; foreach (var p in actionParameters) { var value = filterContext.ActionArguments[p.ParameterName]; var pType = p.ParameterType; if (value == null) { continue; } //若是不是值類型或接口，不須要過濾 if (!pType.IsClass) continue; if (value is string) { //對string類型過濾 filterContext.ActionArguments[p.ParameterName] = AntiSqlInject.Instance.GetSafetySql(value.ToString()); } else { //是一個class，對class的屬性中，string類型的屬性進行過濾 var properties = pType.GetProperties(); foreach (var pp in properties) { var temp = pp.GetValue(value); if (temp == null) { continue; } pp.SetValue(value, temp is string ? AntiSqlInject.Instance.GetSafetySql(temp.ToString()) : temp); } } } } } }
思路是，加過濾器繼承ActionFilterAttribute，重寫OnActionExecuting方法，獲取入參，對入參中的string類型的全部數據進行過濾。兩種狀況，一是參數是string類型，二是類的屬性。過濾器搞定。github
過濾器有兩種使用方式，一種是在具體的方法上添加web
[HttpPut,Route("api/editSomething")] [AntiSqlInjectFilter] public async Task<bool> EditSomeThingAsync([FromBody]SomeThingmodel) { var response = await SomeThingBusiness.Editsync(model); return response; }
一種是全局配置，在WebApiConfig.cs文件中的Register方法中加上過濾器算法
using System.Web.Http; namespace Test { /// <summary> /// WebApi配置 /// </summary> public static class WebApiConfig { /// <summary> /// 註冊配置服務 /// </summary> /// <param name="config"></param> public static void Register(HttpConfiguration config) { // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); //全局配置防止SQL注入過濾 config.Filters.Add(new AntiSqlInjectFilter()); } } }
測試有效。sql
Web.config中customErrors異常信息配置
開發工具：Visual Studio 2017 15.7.5
開發平臺：Windows 10
新建WebApi項目，Web.config配置文件中，system.web下級節點中默認沒有customErrors的配置，即customErrors默認是RemoteOnly <customErrors mode="RemoteOnly" />
<customErrors defaultRedirect="url" mode="On|Off|RemoteOnly"> <error. . ./> </customErrors>
mode
必選的屬性。
指定是啓用或禁用自定義錯誤，仍是僅向遠程客戶端顯示自定義錯誤。
此屬性能夠爲下列值之一。
|值|說明|
|-|-|
|On|指定啓用自定義錯誤。若是未指定 defaultRedirect，用戶將看到通常性錯誤。|
|Off|指定禁用自定義錯誤。這容許顯示標準的詳細錯誤。|
|RemoteOnly|指定僅向遠程客戶端顯示自定義錯誤而且向本地主機顯示 ASP.NET 錯誤。這是默認值。|
在調試或部署測試服務時，建議在system.web下加上<customErrors mode="Off" />，以便調試。
Off的首字母O應爲大寫。
參考：
如何在ASP .NET中使用 Visual C#.NET建立自定義錯誤報告頁面
customErrors 元素（ASP.NET 設置架構）
customErrors Element (ASP.NET Settings Schema)
customErrors 元素
ife2018 零基礎學院 day 4
第四天，背景邊框列表連接和更復雜的選擇器
背景，邊框，列表，連接相關屬性
背景
元素的背景是指，在元素內容、內邊距和邊界下層的區域。
| 屬性 | 描述 |
|---|---|
| background-color | 爲背景設置一個純色。 |
| background-image | 把圖像設置爲背景。線性漸變是經過linear-gradient()函數傳入的，它是一個background-image屬性的值。 |
| background-position | 指定背景應該出如今元素背景中的位置。 |
| background-repeat | 指定背景是否應該被重複(平鋪)。 |
| background-attachment | 當內容滾動時，指定元素背景的行爲 |
| background | 在一行中指定以上五個屬性的縮寫。 簡寫屬性，做用是將背景屬性設置在一個聲明中。 |
| background-size | 容許動態調整背景圖像的大小。 |
邊框
元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。
每一個邊框有 3 個方面：寬度（border-width）、樣式（border-style），以及顏色（border-color）。
列表
列表有三種：無序列表、有序列表、描述列表
能夠在 <ul> 或 <ol> 元素上設置的三個屬性：
- list-style-type ：設置用於列表的項目符號的類型，例如無序列表的方形或圓形項目符號，或有序列表的數字，字母或羅馬數字。
- list-style-position ：設置在每一個項目開始以前，項目符號是出如今列表項內，仍是出如今其外。
- list-style-image ：容許您爲項目符號使用自定義圖片，而不是簡單的方形或圓形。
連接
連接存在時處於不一樣的狀態，每個狀態均可以用對應的 僞類 來應用樣式:
- a:link - 普通的、未被訪問的連接
- a:visited - 用戶已訪問的連接
- a:hover - 鼠標指針位於連接的上方
- a:active - 連接被點擊的時刻
- a:focus - 連接被選中。一個連接當它被選中的時候 (好比經過鍵盤的 Tab 移動到這個連接的時候，或者使用編程的方法來選中這個連接 HTMLElement.focus()) 它可使用 :focus 僞類來應用樣式。
CSS 各類選擇器的概念，使用方法及使用場景
簡單選擇器（Simple selectors）
經過元素類型、class 或 id 匹配一個或多個元素。
類型選擇器（又名元素選擇器）
在 W3C 標準中，元素選擇器又稱爲類型選擇器（type selector）。
此選擇器只是一個選擇器名和指定的HTML元素名的不區分大小寫的匹配。這是選擇全部指定類型的最簡單方式。
針對某個HTML元素設置樣式
html {color:black;} h1 {color:blue;}
類選擇器
類選擇器由一個點「.」以及類後面的類名組成。類名是在HTML class文檔元素屬性中沒有空格的任何值。由你本身選擇一個名字。一樣值得一提的是，文檔中的多個元素能夠具備相同的類名，而單個元素能夠有多個類名(以空格分開多個類名的形式書寫)。
.類型名A{}，對類型名爲A的元素設置樣式，一個HTML文檔中能夠匹配多個元素
ID選擇器
ID選擇器由哈希/磅符號 (#)組成，後面是給定元素的ID名稱。 任何元素均可以使用id屬性設置惟一的ID名稱。 由你本身選擇的ID是什麼。 這是選擇單個元素的最有效的方式。
#ID名A{}，對ID名爲A的元素設置樣式，一個HTML文檔中只能匹配一個元素
屬性選擇器（Attribute selectors）
經過 屬性 / 屬性值 匹配一個或多個元素。
CSS 2 引入了屬性選擇器。
- [attr]：該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。
- [attr=val]：該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
- [attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的全部元素，好比位於被空格分隔的多個類（class）中的一個類。
把包含標題（title）的全部元素變爲紅色，能夠寫做：
*[title] {color:red;}
僞類（Pseudo-classes）
僞類和僞元素
概念：
匹配處於肯定狀態的一個或多個元素，好比被鼠標指針懸停的元素，或當前被選中或未選中的複選框，或元素是DOM樹中一父節點的第一個子節點。
使用方法：
一個 CSS 僞類（pseudo-class） 是一個以冒號(:)做爲前綴的關鍵字，當你但願樣式在特定狀態下才被呈現到指定的元素時，你能夠往元素的選擇器後面加上對應的僞類（pseudo-class）。
僞元素（Pseudo-elements）
概念：
匹配處於相關的肯定位置的一個或多個元素，例如每一個段落的第一個字，或者某個元素以前生成的內容。
使用方法：
僞元素（Pseudo-element）跟僞類很像，但它們又有不一樣的地方。它們都是關鍵字 —— 但此次僞元素前綴是兩個冒號 (::) —— 一樣是添加到選擇器後面達到指定某個元素的某個部分。
組合器（Combinators）
這裏不只僅是選擇器自己，還有以有效的方式組合兩個或更多的選擇器用於很是特定的選擇的方法。例如，你能夠只選擇divs的直系子節點的段落，或者直接跟在headings後面的段落。
| Combinators | Select |
|---|---|
| A B | 匹配任意元素，知足條件：B是A的後代結點（B是A的子節點，或者A的子節點的子節點） |
| A > B | 匹配任意元素，知足條件：B是A的直接子節點 |
| A + B | 匹配任意元素，知足條件：B是A的下一個兄弟節點（AB有相同的父結點，而且B緊跟在A的後面） |
| A ~ B | 匹配任意元素，知足條件：B是A以後的兄弟節點中的任意一個（AB有相同的父節點，B在A以後，但不必定是緊挨着A） |
多用選擇器（Multiple selectors）
這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面， 以將一組聲明應用於由這些選擇器選擇的全部元素。
| Combinators | Select |
|---|---|
| A,B | 匹配知足A（和/或）B的任意元素 |
CSS 選擇器的優先級
CSS 是 Cascading Style Sheets 的縮寫，這暗示層疊（cascade）的概念是很重要的。在最基本的層面上，它代表CSS規則的順序很重要，但它比那更復雜。什麼選擇器在層疊中勝出取決於三個因素（這些都是按重量級順序排列的——前面的的一種會否決後一種）：
重要性（Importance）
在CSS中，有一個特別的語法可讓一條規則老是優先於其餘規則：
!important。
相互衝突的聲明將按如下順序適用，後一種將覆蓋先前的聲明：
- 在用戶代理樣式表的聲明 (例如：瀏覽器在沒有其餘聲明的默認樣式).
- 用戶樣式表中的普通聲明（由用戶設置的自定義樣式）。
- 做者樣式表中的普通聲明（這是咱們設置的樣式，Web開發人員）。
- 做者樣式表中的重要聲明
-
用戶樣式表中的重要聲明
專用性（Specificity）
一個選擇器具備的專用性的量是用四種不一樣的值（或組件）來衡量的，它們能夠被認爲是千位，百位，十位和個位——在四個列中的四個簡單數字： - 千位：若是聲明是在style 屬性中該列加1分（這樣的聲明沒有選擇器，因此它們的專用性老是1000。）不然爲0。
- 百位：在整個選擇器中每包含一個ID選擇器就在該列中加1分。
- 十位：在整個選擇器中每包含一個類選擇器、屬性選擇器、或者僞類就在該列中加1分。
-
個位：在整個選擇器中每包含一個元素選擇器或僞元素就在該列中加1分。
源代碼次序（Source order）
若是多個相互競爭的選擇器具備相同的重要性和專用性，那麼第三個因素將幫助決定哪個規則獲勝——後面的規則將打敗先前的規則。
ife2018 零基礎學院 day 3
ife2018 零基礎學院 第三天：讓簡歷有點色彩
什麼是CSS，CSS是如何工做的!
摘自CSS如何工做
什麼是CSS
CSS是一種用於向用戶指定文檔如何呈現的語言 — 它們如何被指定樣式、佈局等。
文檔一般是用標記語言結構化的文本文件 — HTML 是最經常使用的標記語言, 但你依然能夠碰見一些其餘的標記語言，好比 SVG 或者 XML。CSS如何工做
當瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。它分兩個階段處理文檔：
- 瀏覽器將 HTML 和 CSS 轉化成 DOM （文檔對象模型）。DOM在計算機內存中表示文檔。它把文檔內容和其樣式結合在一塊兒。
- 瀏覽器顯示 DOM 的內容。
CSS的基本語法是怎樣的
摘自CSS 語法
屬性和值組成一個聲明，多個聲明構成聲明塊，聲明塊和選擇器構成完整的CSS規則
從最基本的層次來看，CSS是由兩塊內容組合而成的：
- 屬性（Propertie）：一些人類可理解的標識符，這些標識符指出你想修改哪一些樣式，例如：字體，寬度，背景顏色等。
- 屬性值（Value）：每一個指定的屬性都須要給定一個值，這個值表示你想把那些樣式特徵修改爲什麼樣，例如，你想把字體，寬度或背景顏色改爲什麼。
與值配對的屬性被稱爲CSS聲明。CSS聲明會被放置在一個CSS聲明塊中。最後，CSS聲明塊與選擇器相結合造成一個CSS規則集（或CSS規則）。
CSS聲明
屬性和屬性值之間，用英文半角冒號 (:) 隔離，以下圖所示。
CSS聲明塊
聲明按塊分組，每一組聲明都用一對大括號包裹，用 (
{) 開始，用 (}) 結束。
聲明塊裏的每個聲明必須用半角分號（;）分隔，不然代碼會不生效（至少不會按預期結果生效）。聲明塊裏的最後一個聲明結束的地方，不須要加分號，可是最後加分號是個好習慣，由於能夠防止在後續增長聲明時忘記加分號。CSS 選擇器和規則
咱們的拼圖還少了一塊——咱們須要討論一下如何告知咱們的聲明塊：哪些元素是它們須要應用的。經過在每一個聲明塊前加上選擇器（selector）來>完成這一動做，選擇器是一種模式，它能在頁面上匹配一些元素。這將使相關的聲明僅被應用到被選擇的元素上。選擇器加上聲明塊被稱爲規則集>（ruleset），一般簡稱規則（rule）。
CSS選擇器是什麼概念，簡單選擇器和屬性選擇器是什麼
CSS選擇器是什麼概念
在 CSS 中，選擇器是一種模式，用於選擇須要添加樣式的元素。
選擇器是一種模式，它能在頁面上匹配一些元素。選擇器加上聲明塊被稱爲規則集（ruleset），一般簡稱規則（rule）。
簡單選擇器是什麼
摘自簡單選擇器
簡單選擇器（Simple selectors）：經過元素類型、class 或 id 匹配一個或多個元素。
屬性選擇器是什麼
摘自屬性選擇器
屬性選擇器（Attribute selectors）：經過 屬性 / 屬性值 匹配一個或多個元素。
文本樣式都有哪些相關屬性，對應哪些值
參考自基本文本和字體樣式
用於樣式文本的 CSS 屬性一般能夠分爲兩類。
- 字體樣式: 做用於字體的屬性，會直接應用到文本中，好比使用哪一種字體，字體的大小是怎樣的，字體是粗體仍是斜體，等等。
- 文本佈局風格: 做用於文本的間距以及其餘佈局功能的屬性，好比，容許操縱行與字之間的空間，以及在內容框中，文本如何對齊。
字體
顏色
color 屬性設置選中元素的前景內容的顏色
描述color值的方式有顏色名（色彩關鍵字）、Color HEX（RBG十六進制數，例如#000000對應黑色）、Color RGB(rgb(0,0,0))
色彩關鍵字
色彩關鍵字是不區分大小寫的標識符，它表示一個具體的顏色，例如
red, blue, brown, lightseagreen。rgb()
顏色可使用紅-綠-藍（red-green-blue (RGB)）模式的兩種方式被定義：
十六進制符號 #RRGGBB 和 #RGB- "
#" 後跟6位十六進制字符（0-9, A-F） -
"
#" 後跟3位十六進制字符（0-9, A-F）。
三位數的 RGB 符號（#RGB）和六位數的形式（#RRGGBB）是相等的。
例如， #f03 和 #ff0033 表明一樣的顏色。
函數符 rgb(R,G,B)
"rgb" 後跟3個<integer>或3個<percentage>值。
整數 255 至關於 100%，和十六進制符號裏的 F 或 FF 。/* These examples all specify the same RGB color: */ #f03 #F03 #ff0033 #FF0033 rgb(255,0,51) rgb(255, 0, 51) rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ rgb(100%,0%,20%) rgb(100%, 0%, 20%) rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */
hsl()
顏色也可使用 hsl() 函數符被定義爲色相-飽和度-明度（Hue-saturation-lightness）模式。HSL 相比 RGB 的優勢是更加直觀：你能夠估算你想要
的顏色，而後微調。它也更易於建立相稱的顏色集合。（經過保持相同的色相併改變明度/暗度和飽和度）。色相（Hue）表示色環（即表明彩虹的一個圓環）的一個角度。這個角度做爲一個無單位的
<number>被給出。定義 red=0=360，其它顏色分散於圓環，因此 green=120, blue=240，以此類推。做爲一個角度，它隱含像 -120=240 和 480=120 這樣的迴環。飽和度和明度由百分數來表示。
100%是滿飽和度，而0%是一種灰度。100%明度是白色，0%明度是黑色，而50%明度是「通常的」。hsl(0, 100%,50%) /* red */ hsl(30, 100%,50%) hsl(60, 100%,50%) hsl(90, 100%,50%) hsl(120,100%,50%) /* green */ hsl(150,100%,50%) hsl(180,100%,50%) hsl(210,100%,50%) hsl(240,100%,50%) /* blue */ hsl(270,100%,50%) hsl(300,100%,50%) hsl(330,100%,50%) hsl(360,100%,50%) /* red */ hsl(120,100%,25%) /* dark green */ hsl(120,100%,50%) /* green */ hsl(120,100%,75%) /* light green */ hsl(120,100%,50%) /* green */ hsl(120, 67%,50%) hsl(120, 33%,50%) hsl(120, 0%,50%) hsl(120, 60%,70%) /* pastel green */rgba()
顏色可使用 rgba() 函數符在紅-綠-藍-阿爾法（RGBa）模式下被定義。RGBa 擴展了 RGB 顏色模式，它包含了阿爾法通道，容許設定一個顏色的透明度。
** a **表示透明度：0=透明；1=不透明；rgba(255,0,0,0.1) /* 10% opaque red */ rgba(255,0,0,0.4) /* 40% opaque red */ rgba(255,0,0,0.7) /* 70% opaque red */ rgba(255,0,0, 1) /* full opaque red */hsla()
顏色可使用 hsla() 函數符在色相-飽和度-明度-阿爾法（HSLa）模式下被定義。HSLa 擴展自 HSL 顏色模式，包含了阿爾法通道，能夠規定一個顏色的透明度。
a 表示透明度：0=透明；1=不透明；hsla(240,100%,50%,0.05) /* 5% opaque blue */ hsla(240,100%,50%, 0.4) /* 40% opaque blue */ hsla(240,100%,50%, 0.7) /* 70% opaque blue */ hsla(240,100%,50%, 1) /* full opaque blue */字體種類
要在你的文本上設置一個不一樣的字體，你可使用 font-family 屬性，這個容許你爲瀏覽器指定一個字體 (或者一個字體的列表)，而後瀏覽器能夠將這種字體應用到選中的元素上。
p { font-family: arial; }字體棧 : 因爲你沒法保證你想在你的網頁上使用的字體的可用性 (甚至一個網絡字體可能因爲某些緣由而出錯), 你能夠提供一個字體棧 (font stack)，這樣的話，瀏覽器就有多種字體能夠選擇了。
p { font-family: "Trebuchet MS", Verdana, sans-serif; }字體大小
px(像素): 將像素的值賦予給你的文本。這是一個絕對單位， 它致使了在任何狀況下，頁面上的文本所計算出來的像素值都是同樣的。em: 1em 等於咱們設計的當前元素的父元素上設置的字體大小rem: 這個單位的效果和em差很少，除了 1rem等於 HTML 中的根元素的字體大小， (i.e.<html>) ，而不是父元素。
字體樣式，字體粗細，文本轉換和文本裝飾
CSS 提供了 4 種經常使用的屬性來改變文本的樣子：
font-style: 用來打開和關閉文本 italic (斜體)。normal: 將文本設置爲普通字體 (將存在的斜體關閉)italic: 若是當前字體的斜體版本可用，那麼文本設置爲斜體版本；若是不可用，那麼會利用oblique狀態來模擬italics。oblique: 將文本設置爲斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。font-weight: 設置文字的粗體大小。normal,bold: 普通或者加粗的字體粗細lighter,bolder: 將當前元素的粗體設置爲比其父元素粗體更細或更粗一步。100–900: 數值粗體值，若是須要，可提供比上述關鍵字更精細的粒度控制。text-transform: 容許你設置要轉換的字體。值包括：none: 防止任何轉型。uppercase: 將全部文本轉爲大寫。lowercase: 將全部文本轉爲小寫。capitalize: 轉換全部單詞讓其首字母大寫。full-width: 將全部字形轉換成固定寬度的正方形，相似於等寬字體，容許對齊。拉丁字符以及亞洲語言字形（如中文，日文，韓文）text-decoration: 設置/取消字體上的文本裝飾 (你將主要使用此方法在設置連接時取消設置連接上的默認下劃線。) 可用值爲：none: 取消已經存在的任何文本裝飾。underline: 文本下劃線.overline: 文本上劃線line-through: 穿過文本的線
文字陰影
你能夠爲你的文本應用陰影，使用 text-shadow 屬性。這最多須要 4 個值，以下例所示：
text-shadow: 4px 4px 5px red;
4 個屬性以下:- 陰影與原始文本的水平偏移，可使用大多數的 CSS 單位 length and size units, 可是 px 是比較合適的。這個值必須指定。
- 陰影與原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移動陰影，而不是左/右。這個值必須指定。
- 模糊半徑 - 更高的值意味着陰影分散得更普遍。若是不包含此值，則默認爲0，這意味着沒有模糊。可使用大多數的 CSS 單位 length and size units
- 陰影的基礎顏色，可使用大多數的 CSS 顏色單位 CSS color unit. 若是沒有指定，默認爲 black.
文本佈局
文本對齊
text-align屬性用來控制文本如何和它所在的內容盒子對齊。left: 左對齊文本。right: 右對齊文本。center: 居中文字justify: 使文本展開，改變單詞之間的差距，使全部文本行的寬度相同。
行高
line-height屬性設置文本每行之間的高，能夠接受大多數單位 length and size units，不過也能夠設置一個無單位的值，做爲乘數，一般這種是比較好的作法。無單位的值乘以 font-size 來得到 line-height。當行與行之間拉開空間，正文文本一般看起來更好更容易閱讀。推薦的行高大約是 1.5–2 (雙倍間距。) 因此要把咱們的文本行高設置爲字體高度的1.5倍，你可使用這個:line-height: 1.5;字母和字間距
letter-spacing 和 word-spacing 屬性容許你設置你的文本中的字母與字母之間的間距、或是字與字之間的間距。
它們能夠接受大多數單位length and size unitsp::first-line { letter-spacing: 2px; word-spacing: 4px; }ife 零基礎學院 day 2
次日：給本身作一個在線簡歷吧
最後的驗證，提出了幾個問題，嘗試解答一下HTML是什麼，HTML5是什麼
HTML的定義摘抄自w3school的HTML 簡介
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 (
HyperTextMarkupLanguage) - HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
HTML5的定義也摘抄自w3school的HTML 5 簡介
HTML5是下一代的HTML，一個新版本的HTML。
HTML5 的一些規則：- 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
- 減小對外部插件的需求（好比 Flash）
- 更優秀的錯誤處理
- 更多取代腳本的標記
- HTML5 應該獨立於設備
- 開發進程應對公衆透明
新特性
HTML5 中的一些有趣的新特性：- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內容元素，好比 article、footer、header、nav、section
- 新的表單控件，好比 calendar、date、time、email、url、search
瀏覽器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。HTML元素、標籤、屬性都是什麼概念？
摘抄自HTML簡介
HTML 標籤
HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)。- HTML 標籤是由尖括號包圍的關鍵詞，好比
<html> - HTML 標籤一般是成對出現的，好比
<b>和</b> - 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱爲開放標籤和閉合標籤
摘抄自HTML 元素
HTML 元素
HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的全部代碼。摘抄自HTML 屬性
屬性爲 HTML 元素提供附加信息。
HTML 屬性
HTML 標籤能夠擁有屬性。屬性提供了有關 HTML 元素的更多的信息。
屬性老是以名稱/值對的形式出現，好比：name="value"。
屬性老是在 HTML 元素的開始標籤中規定。文檔類型是什麼概念，起什麼做用？
摘抄自
HTML <!DOCTYPE>
概念：它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。
做用：
聲明幫助瀏覽器正確地顯示網頁。
HTML 也有多個不一樣的版本，只有徹底明白頁面中使用的確切 HTML 版本，瀏覽器才能徹底正確地顯示出 HTML 頁面。meta標籤都用來作什麼的？
定義和用法
<meta>元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。<meta>標籤位於文檔的頭部，不包含任何內容。<meta>標籤的屬性定義了與文檔相關聯的名稱/值對。Web語義化是什麼，是爲了解決什麼問題
Web語義化是指使HTML元素有更清晰的語義，例如HTML5的新增內容元素article、footer、header、nav、section。
顧軼靈關於「如何理解 Web 語義化？」的回答提到什麼是語義化？其實簡單說來就是讓機器能夠讀懂內容。
摘自維基百科的詞條語義化
語義化是前端開發裏面的一個專用術語，其優勢在於標籤語義化有助於構架良好的html結構，有利於搜索引擎的創建索引、抓取；另外，亦有利於頁面在不一樣的設備上顯示儘量相同；此外，亦有利於構建清晰的機構，有利於團隊的開發、維護。
從上述的文字中，對語義化解決什麼問題，能夠簡單表述：
- 使html結構更有序和清晰
- 利於搜索引擎索引和抓取
- 利於不一樣設備的顯示
- 利於團隊開發和維護
連接是什麼概念，對應什麼標籤？
摘抄自HTML 連接
超連接能夠是一個字，一個詞，或者一組詞，也能夠是一幅圖像，您能夠點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個連接上時，箭頭會變爲一隻小手。
咱們經過使用<a>標籤在 HTML 中建立連接。
有兩種使用<a>標籤的方式：
1.經過使用 href 屬性 - 建立指向另外一個文檔的連接
2.經過使用 name 屬性 - 建立文檔內的書籤經常使用標籤都有哪些，都適合用在什麼場景
表單標籤都有哪些，對應着什麼功能，都有哪些屬性
摘抄自http://www.w3school.com.cn/tags/html_ref_byfunc.asp
表單
標籤 描述 <form>定義供用戶輸入的 HTML 表單。 <input>定義輸入控件。 <textarea>定義多行的文本輸入控件。 <button>定義按鈕。 <select>定義選擇列表（下拉列表）。 <optgroup>定義選擇列表中相關選項的組合。 <option>定義選擇列表中的選項。 <label>定義 input 元素的標註。 <fieldset>定義圍繞表單中元素的邊框。 <legend>定義 fieldset 元素的標題。 <isindex>不同意使用。定義與文檔相關的可搜索索引。 <datalist>定義下拉列表。 <keygen>定義生成密鑰。 <output>定義輸出的一些類型。 表單屬性請查看http://www.w3school.com.cn/html/html_form_attributes.asp
ol, ul, li, dl, dd, dt等這些標籤都適合用在什麼地方，舉個例子
參考自HTML 列表
無序列表始於
<ul>標籤。每一個列表項始於<li>。<ul> <li>Coffee</li> <li>Milk</li> </ul>顯示以下
- Coffee
- Milk
有序列表始於
<ol>標籤。每一個列表項始於<li>標籤。<ol> <li>Coffee</li> <li>Milk</li> </ol>顯示以下：
- Coffee
- Milk
自定義列表以
<dl>標籤開始。每一個自定義列表項以<dt>開始。每一個自定義列表項的定義以<dd>開始。<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>顯示以下：
Coffee
Black hot drink
Milk
White cold drinkife 零基礎學院 day 1 - 我爲何想學前端
與前端結緣
我是後端研發，畢業四年，用了四年C#，一開始寫ASP.NET，有時會在asp頁面寫簡單的js和html，作點css樣式調整。當時的感觸是前端調試太費勁了，由於沒有js、html、css基礎，出點樣式或者js的問題，能難爲好久。2014那會兒前端的概念還不清晰，當時所在的公司設置的職位也沒有前端工程師，那會兒叫美工和切圖。當時負責美工和切圖的姐姐，原來的工做是文字編輯，換成如今的說法是自媒體運營。她剛生完孩子，以爲文字編輯工資過低，因此轉崗作美工和切圖，職業跨度的難度至關大，那時沒有感觸，如今輪到本身學前端的時候，才真的感受到那個姐姐決心和毅力很大。
我在上面提到了工資，說點本身的感覺，編程語言裏C#的總體上工資相對較低，國內較大的互聯網公司，使用Java和PHP較多，工資增加幅度最高的是Java。不提不管什麼語言，成爲大牛，工資天然不愁這種話，只說大多數，首選Java和PHP方面的工做比較好，固然前端更好。
固然微軟的生態有愈來愈好的趨勢，.NET CORE 和ASP.NET CORE的呼聲也愈來愈大，此次百度前端技術學院推薦使用的編輯器Visual Studio Code是微軟同期推廣的，或許過兩年，.NET在國內的境況會有長足改善吧。
14年所在公司作.NET的小夥伴，有人轉了PHP，有人轉了前端，有人去作了需求分析師，有人轉了Java，還在作.NET的愈來愈少，因此.NET的境況可見一斑。爲錢而工做
前端從15年開始大火，火到如今熱度不減，我認識的不少後端技術過硬的人紛紛轉投前端陣營，大概年紀越大越喜歡錢吧，他們多數是由於前端工資更高而轉投前端的懷抱。回想起剛畢業時，爲
代碼改變世界這句話會熱血沸騰好久，心裏真是五味雜陳。工做久了會有職業倦怠感，必定要解決職業倦怠感，否則那種一成天的工做以後空洞的感受很讓人沮喪。其中一個解決辦法是，爲本身的工做賦予一個高尚的意義，但其實我很難說服本身不是由於錢才工做的。看到酷炫的網站，單純也想作到，這很好
不要期望工做裏能有機會作很酷炫的網頁，大多可能性是，工做以後要重複的造輪子，作一點都不酷炫，甚至粗陋的網頁。因此，仍是要驅動本身在工做之餘，爲本身創建一個自留地，在上面天馬行空去作很炫酷的網頁。
任務描述瀏覽裏提到的相似https://wangyasai.github.io/Stars-Emmision/ 帶有github.io的網站，是github的一項福利GitHub Pages ，能夠利用GitHub Pages本身去搭建網站，很省錢，不須要買域名和vps服務器。