我从昨天开始学习前端技术。想要以博客的形式，记录一下自己的学习内容，并且把自己认为有用的部分记录下来，以便于自己以后查询，同时也希望能够帮助到其他学习者。
我的前端学习路径参考了知乎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 another
paragraph.</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，希望好运！