开发工具：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服务器。