Day 1 笔记

前端与html

前端后端这两个词已经很不陌生，但对其下一个具体的定义，则还是比较困难。综合相关书籍以及百科可以知道：前端工作是通过使用html、css、js等web技术栈，解决GUI人机交互问题的工作。通俗来讲，就是做一个可供人机交互的界面。

主要包括三剑客：html、css、js。一个前端界面中html负责传达内容，css负责传达样式，JavaScript用来传达行为。

现如今，随着技术的发展，前端已经不仅仅局限于以上三个范畴，诸如nodejs、electron、react、vue等开发框架的诞生和发展，让我们可以进行更多更便捷的开发。当然，前端三剑客仍然是最核心、最底层也是最根本的。

html用来传达内容。而不是样式！ 很多开发者通常忽略了html具体该干什么事，喜欢在html中直接表示过多的样式内容，这其实是不规范的。

什么是html语义化？顾名思义，html语义化就是可以不通过了解html的内容，就可以知道这个部分代表的意义。

html有很多标签，我们要思考哪些标签适合用来干什么，做到善用巧用这些标签，在编程的时候经常参考W3C以及MDN的文档，来做到html的规范。 另外还有一点很重要，不要惯用可视化工具生成代码。

常用语义化标签如：

<title>：定义文档的标题（注：只能在head标签内出现）。

<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。

等等。

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS有三种插入方式：外部样式、内部样式以及内联样式。

外链

<link rel="stylesheet" type="text/css" href="style.css"/>

嵌入（内部样式）

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

一般情况下，优先级如下： （内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

在前端Web开发中，一般不推荐内联样式，通常采用外链形式，让CSS单独形成一个文件。

CSS的选择器有通配选择器、标签选择器、id选择器、类选择器、属性选择器等等，他们用来声明HTML中哪些内容采用何种具体样式。他们的写法都很类似，具体详见CSS相关文档。