共计 7164 个字符，预计需要花费 18 分钟才能阅读完成。
我从昨天开始学习前端技术。想要以博客的模式，记录一下本人的学习内容，并且把本人认为有用的局部记录下来，以便于本人当前查问，同时也心愿可能帮忙到其余学习者。
我的前端学习门路参考了知乎 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，心愿好运！