我从昨天开始学习前端技术。想要以博客的模式，记录一下本人的学习内容，并且把本人认为有用的局部记录下来，以便于本人当前查问，同时也心愿可能帮忙到其余学习者。
我的前端学习门路参考了知乎Web 前端怎么入门？问题下汪小黑的答复。学习材料目前次要应用w3school。依照汪小黑的学习门路，我目前破费一天半工夫学习了w3school下面的HTML教程，包含“HTML基础教程”的“HTML教程”到“HTML列表”局部，以及“HTML表单”局部。其中大部分代码示例，我都照着打了一遍，以加深记忆和应用了解。
编辑器方面，我依据知乎下面的测评，抉择了bracket。因为这款编辑器开源收费，并且有实时预览性能（尽管有些HTML表单内容仿佛并不能实时预览），调试起来不便直观。而且能够在HTML两头编辑CSS。下图是实时预览界面，十分不便。
下文次要是我在HTML入门学习中的一些简略了解和记忆点。更多残缺的示例代码在w3school上全副搜寻失去，所以只贴了一点点。局部标签会影响到markdown格局编写的博客的格局，所以我加了空格，例如< a/ >。
1.HTML（超文本标记语言）不是编程语言，而是标记语言，用标记标签来形容网页。HTML文档就是网页，包含HTML标签和纯文本。
2.HTML题目通过< h1 >-< h6 >标签定义。
HTML段落通过< p >标签定义。
HTML链接通过< a >标签定义。在href中指定链接的地址。URL意为同一资源定位符，即网络地址。
HTML图像通过< img >标签定义。图像的名称和尺寸以属性模式提供。
3.HTML文档由HTML元素定义。大多数HTML元素可领有属性。
大多数HTML元素能够嵌套。（元素的内容能够是元素）
没有内容的HTML元素是空元素，< br />是敞开空元素的正确办法。
4.HTML标签有属性，在start tag中规定。
例：链接的地址在href属性中指定。
align for h1, bgcolor for body, border for table.（前两者其实当初都被style取代了，慎用）。
Style属性用于扭转HTML元素的款式。
属性值在双引号内，如果属性值中有双引号，则用单引号。
实用于大多数元素的属性：class，id，style，title
5.HTML题目：只用于题目，不能用于粗体or大字！！
搜索引擎应用题目为网页的构造和内容编制索引。
6.< hr />用于创立水平线。
< !-- This is a comment -->为正文，能够用条件正文，定义只有Internet Explorer执行的HTML标签。
用< br / >插入空行，不要< p >< p/ >
< br / >能够不产生新段落换行。
不要省略完结标签，可能导致谬误。
显示页面时，浏览器会移除源代码中多余的空格和空行。（看起来个别只保留一个空格，回车也视作一个空格）
前几局部的示例代码如下：
<html><body style = "background-color: powderblue"> <h1 style = "background-color: yellow">This is a heading</h1><h2 style = "text-align: center">This is a heading</h2><h3>This is a heading</h3><a href="#tips">跳到Tips</a> <p>This is a paragraph.<p/><hr /><p>This is another paragraph.</p> <p>This is <br /> another paragraph.</p><p>This is anotherparagraph.</p> <a href = "http://www.w3school.com.cn" target="_blank">This is a link</a><br /><br /><img src = "w3school.jpg" width = "104" height = "142" alt="w3school"/> <!-- This is a comment--><br /><a name="tips">Tips:</a> <p style = "font-family: verdana; color: red">This text is in Verdana and red</p> <p style = "font-family: times; color: green">This text is in Times and green</p> <p style = "font-size: 30px">This text is 30 pixels high</p> </body></html>7.文本格式化：HTML可定义很多供文本格式化输入的元素，包含粗体、大字、小字、斜体、删除线、下划线、长援用、短援用、缩写、文字方向，等等。示例代码如下：
<html><body><b>This text is bold</b><br /><strong>This text is strong</strong><br /><big>This text is big</big><br /><em>This text is emphasized</em><br /><small>This text is small</small><br />This text contains<sub>subscript</sub><br />This text contains<sup>superscript</sup> </body></html>8.< dfn >元素应用比较复杂，倡议间接当做< abbr >用，或者只用< abbr >
9.能够通过< head >局部的款式信息（或在其中用< link >标签链接到内部样式表）来对HTML进行格式化。
1） 当款式要被利用到很多界面时，应用内部样式表。这样能够通过更改一个文件来更改整个网页的外观。
2） 当单个文件须要特地款式时，应用外部样式表。能够在head局部通过< style >标签定义外部样式表。
3） 当非凡款式要利用到个别元素时，应用内联款式。应用办法是在相干的标签中应用款式属性。款式属性能够蕴含任何CSS属性。
示例代码如下：
<html><head><style type = "text/css"> h1{color:red} p {color:blue}</style><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head> <body><h1>header 1</h1><p>paragraph</p><a href="http://www.w3school.com.cn" style="text-decoration: none">这是一个链接</a><p style="color: red; margin-left: 20px">This is a paragraph</p></body> </html>10.超文本的基本特征就是能够超链接文档。
超链接规范叫法叫锚（anchor）。能够通过它跳到同文档中的某个主题，或是跳到其余文档。
应用< a >的两种形式：
1） href属性：指向另一个文档的链接
2） name属性：创立文档内的书签（而后能够通过href=#namexxx来指向该锚）
如果应用target属性，能够设定被关上的链接在哪里显示。例如，把target设为“_blank”，则该链接会在新窗口中关上。
11.图像标签< img >是空标签，只蕴含属性，并且没有闭合标签。必须应用源属性（src）能力显示图像。源属性的值是图像的URL地址。
图像标签可用alt属性来定义一串准备的可替换文本。图片无奈显示时，会显示这串文本。
HTML页面能够增加背景图片。
能够排列图像地位（默认为bottom）。能够将图片浮动至段落的右边/左边。
能够应用< map >和< area >定义图像地图和其中的可点击区域。
12.表格中的每个单元格外面能够嵌套其余元素（元素内显示元素）包含表格、列表、段落等等。示例代码如下：
<html><body> <h4>表头：</h4><table border="1" frame="vsides"><caption>题目</caption><tr> <th>姓名</th> <th>电话</th> <th>电话</th></tr><tr> <td>Bill Gates</td> <td>123 123</td> <td>123 123</td></tr></table><h4>垂直表头：</h4><table border = "2"><tr> <th>姓名</th> <td>Bill Gates</td></tr><tr> <th>电话</th> <td>123 123</td></tr><tr> <th>电话</th> <td>123 123</td></tr></table><br /> <table border="1" cellspacing="10"><tr> <th>姓名</th> <th colspan="2">电话</th></tr><tr> <td>Bill Gates</td> <td>123 123</td> <td>123 123</td></tr></table> <br /> <table border = "2" cellpadding="10"><tr> <th>姓名</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">电话</th> <td>123 123</td></tr><tr> <td>123 123</td></tr></table></body></html>13.列表包含有序（< ol >）和无序（< ul >）。列表中可嵌套列表。示例代码如下：
<html><body><ol start="10"> <li>Coffee</li> <li>Milk</li> <li>Tea</li></ol><ul type="circle"> <li>Coffee</li> <li>Milk</li> <li>Tea</li></ul> <dl> <dt>计算机</dt> <dd>用来计算的机器</dd> <dt>显示器</dt> <dd>以视觉形式显示信息的安装</dd></dl></body></html>14.HTML表单用于收集用户输出。
< input >元素有很多状态，依据不同的type属性。罕用的包含text，radio，date，number，submit等。
Chrome、Firefox 或 Internet Explorer 不反对 type="datetime"，不反对输出类型时，输出类型会显示为text。
url和email类型与一般文本的区别：反对这些性能的浏览器会主动对电子邮件地址/url字段进行主动验证。
Search类型与一般文本相似。Tel类型只有Safari8反对。
15.Action属性定义在提交表单（通常是应用submit按钮）时执行的动作。通常，表单会被提交到web服务器上的网页。GET为默认解决办法，适宜大量数据的提交，没有敏感信息。POST实用于表单正在更新数据或蕴含敏感信息（如明码）。POST的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
如果想要正确地被提及，则每个输出字段必须设置一个name。
< fieldset >用于组合表单中的相干数据，< lenged >用于为< fieldset >元素定义题目。
16.表单input的属性
1） Value：输出字段的初始值。
2） Readonly：只能读不能改。readonly不须要值，它等同于readonly=“readonly”。
3） Disabled：禁用该输出字段。被禁用的元素不可用，不可点击，不会被提交。也不须要值，同上。
4） Size：输出字段的尺寸。
5） Maxlength：输出字段容许的最大长度。
6） Autocomplete：表单和独自的输出字段都能够抉择是否开启/敞开主动补全性能。当开启时，浏览器会基于用户之前的输出值主动填写值。
7） Novalidate：< form >的属性，设置了的话则提交表单时不对表单数据进行验证。
Formovalidate则是用于单个input的属性，设置了的话则提交表单时不对该input数据进行验证
8） Target：form的属性，批示提交表单后在何处显示接管到的响应。
Formtarget则是单个input的该属性。
9） Autofocus：主动取得输出焦点。其实意思是运行网页时，光标初始会间接落在这个中央。
10） Form：在form有id的状况下，< input >元素的form决定了它属于哪个表单。这样，输出字段即便外观上在某个表单之外，输出内容却仍能够属于该表单。
11） Formaction：只实用于type为submit或者image。它的值应为当提交表单时解决该输出的文件的url。
12） Formenctype：规定当提交表单数据时如何对其编码（仅针对method=“post”的表单
13） Formmethod：只实用于type为submit或者image。和form的method属性实质一样，当有多个submit时，可用于规定某单个submit的提交办法。
14） Height和width：image input的尺寸。（肯定要规定，否则页面会在图像加载时闪动）
15） List：援用的datalist中蕴含了input list元素的预约义选项。
16） Min和max：输出的最大值和最小值。实用于number、range、date、datetime、datetime-local、month、time 以及 week。
17） Multiple：如果设置了该属性，则容许输出超过一个input元素。（只实用于email和file）
18） Pattern：用于检测input元素值的正则表达式。
19） Placeholder：在输出前的显示的提醒。（最常见的，“请输出搜寻内容”这种。）实用于以下输出类型：text、search、url、tel、email 以及 password。
20） Required：必须填写输出字段能力提交表单。实用于以下输出类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
21） Step：input数字的距离。实用于number、range、date、datetime、datetime-local、month、time 以及 week。
Date – 缺省是1天
Week – 缺省是1周
Month – 缺省是1月
Time – 缺省是1分钟
DateTime – 缺省是1分钟
DateTime –local– 缺省是1分钟
表单示例代码如下：
<html><body><form action = "action_page.php" method = "post"> <fieldset> <legend>Personal Information</legend> First name: <br /> <input type = "text" name = "firstname", value = "Mickey" autofocus> <br /> Last name: <br /> <input type = "text" name = "lastname", value = "Mouse"> <br /> <input type = "radio" name = "sex" value = "male" checked>Male <br /> <input type = "radio" name = "sex" value = "female">Female <br /> <select name = "cars"> <option value = "volvo">Volvo</option> <option value = "saab">Saab</option> </select> <br /> <textarea name = "message" rows = "10" cols = "60">The cat was playing in the garden. </textarea> <br /> <button type = "button" onclick = "alert('Hello World')">Click Me!</button> <br /> <input list = "browsers"> <datalist id = "browsers"> <option value = "IE"> <option value = "Chrome"> </datalist> <br /> Quantity (between 1 and 5): <input type = "number" name = "quantity" min = "1" max = "5"> <br /> Birthday: <input type = "date" name = "bday" step = "2"> <br /> Favorite color: <input type = "color" name = "favcolor"> <br /> <input type = "range" name = "points" min = "0" max = "20"> <br /> Time: <input type = "datetime-local" name = "usr_time"> <br /> E-mail: <input type = "email" name = "email"> <br /> <br /> <input type = "submit" value = "Submit"> </fieldset></form> </body></html>今天下午开始学习根底CSS，心愿好运！