这是我参与「第五届青训营 」伴学笔记创作活动的第 1天。
一、视频课笔记：
1.本堂课重点内容： 前端是什么，前端的技术栈，前端要关注的方面。HTML是什么，HTML的入门，DOM树，HTML语义化介绍及其重要性。
2.详细知识点介绍：
前端：图形方面下的人机交互，前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。
前端技术栈：
前端关注的方面：
- 功能
- 美观
- 安全
- 体验
- 性能
- 无障碍
- 兼容
前端开发环境：浏览器和编辑器。
HTML:超文本标记语言（HyperText Markup Language）,是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
DOM树：
HTML语法：
- 标签属性不区分大小写（推荐使用小写）。
- 空标签不闭合，（比如input）。
- 属性值用双引号包裹。
- 某些属性值可以省略，（比如required）。
内容划分：
语义化：HTML中的元素属性及属性值都拥有某些含义。（eg.有序列表用ol，无序列表用ul）。
语言化好处： 1.代码可读性。 2.可维护性。 3.搜索引擎优化。 4.提升无障碍性。
谁在使用我们的HTML：
- 开发者——修改，维护。
- 浏览器——展示页面。
- 搜索引擎——提取关键词，排序。
- 屏幕阅读器——给盲人读页面内容。
二、实践练习例子：
仿标记信件:
代码展示:
<!DOCTYPR html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>envelope</title>
<style>
p,h2,h3,ul,ol,dl,li,dd,dt{
padding-left:2ex;
}
</style>
</head>
<body>
<p align="right"><strong>Dr. Eleanor Gaye</strong><br>Awesome Science faculty<br>University of Awesome<br>Bobtown, CA 9999,<br>USA<br><strong>Tel</strong>: 123-456-7890<br><strong>Email:</strong> no_ reply@ example .com</p>
<p align="right">20 January 2016</p>
<p><strong>Miss Eileen Dover</strong><br>4321 Clif Top Edge<br>Dover, CT9 XXX<br>UK</p>
<h2><strong>Re: Eileen Dover university application</strong1></h2>
<p>Dear Eileen,</p>
<p>Thank you for your recent application to join us at the University of Awesome s science faculty to study as partof your <abbr>PhD</abbr>. next year. I will answer your questions one by one, in the following sections.</p>
<h3>Starting dates</h3>
<p>We are happy to accommodate you starting your study with us at any time, however it would suit us better if youcould start at the beginning of a semester; the start dates for each one are as follows:</p>
<ul>
<li>First semester: 9 September 2016</li>
<li>Second semester: 15 January 2017</li>
<li>Third semester: 2 May 2017</li>
</ul>
<p>Please let me know if this is ok, and if so which start date you would prefer.</p>
<p>You can find more information about <a href="https://portal-ui.paas.jmu.edu.cn/main.html#/Index" title=“集美大学主页”>important university dates</a> on our website.</p>
<h3>Subjects of study</h3>
<p>At the Awesome Science Faculty, we have a pretty open minded research facility - as long as the subjects fallsomewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and justthe kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intriguedby are as follows, in order of priority:</p>
<ol>
<li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
<li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30C (86<sup>。</sup>F), when theaudience size exponentally increases (effect of 3 x 10<sup>3</sup> increasing to3 x 10<sup>4</sup>.)</li>
<li><abbr>HTML</abbr> and <abbr>CSS<abbr> constructs for representing musical scores.</li>
</ol>
<p>So please can you provide more info<>rmation on each of these subjects, including how long you'd expect theresearch to take, required staff and other resources, and anything else you think we'd need to know? Thanks.</p>
<h3>Exotic dance moves</h3>
<p>Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question,my favourite dances are as follows, with definitions:</p>
<dl>
<dt>Polynesian chicken dance
<dd>A litle known but very infuential dance dating back as far as 300BC, a whole village would dance aroundin a circle like chickens, to encourage their livestock to be "fruitful".</dd>
</dt>
<dt>
Icelandic brownian shufle
<dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, whichinvolved huddling close together in a circle on the floor, and shufling their bodies around in imperceptiblytiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
</dt>
<dt>
Arctic robot dance
<dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have
discovered a new dance style characterised by "robotic", stilted movements, being practiced by inhabitantsof Northern Alaska and Canada. Later on however it was discovered that they were just moving like thisbecause they were rally cold.</dd>
</dt>
</dl>
<p>For more of my research, see my <a href="https://www.zhihu.com/people/hai-tao-88-1-33">exotic dance research _page.</a></p>
<p>Yours sincerely,</p>
<p>Dr Eleanor Gaye</p>
<p>University of Awesome motto:“Be awesome to each other." .-- The memoirs of Bill S Preston, Esq</p>
</body>
</html>
三、个人思考与总结：
- HTML中语言和属性和标签太多难以在短时间的学习中熟记及使用，需要边查阅手册边进行代码编写。
- 在代码编写时结束标签常常会漏写或者少了“/”，在书写时要细心仔细，不能马虎。
