前端与HTML | 青训营笔记

这是我参与「第四届青训营 -前端场」笔记创作活动的的第1篇笔记

一，前端是什么

解决 GUI 人机交互问题
跨终端
Web 技术栈

1.1 前端应该关注哪些方面

    功能，性能，美观，无障碍，安全，体验，兼容

1.2 开发工具的选择

结论：VScode

最初我选择的是Hbuilder，轻量级，界面淡黄色和绿色结合比较护眼，但是插件较少，格式化代码以及快捷键用着不是特别顺手，转而使用VScode

二，HTML介绍

HTML 是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。本模块将介绍前两个用途，并且介绍一些 HTML 的基本概念和语法。

 ### HTML 语法：
 .标签和属性不区分大小写，推荐使用小写
 .空标签可以不闭合，eg： input，meta
 .属性值推荐使用双引号包裹
 .某些属性值可以省略，eg： required、readonly

2.1 语义化是什么?

. HTML中的元素、属性及属性值 都拥有某些含义

. 开发者应该遵循语义来编写HTML

.有序列表用<ol>；
.无须列表用<ul>；
.lang属性表示内容所使用的语言

传达内容，而不是样式

  <h1>前端工程师的自我修养</h1>

2.2 Head中有什么？HTML中的元数据

当页面被加载后，HTML 中的 head 部分是不会被显示在 Web 浏览器中的。它包含了许多信息，例如网页的标题 <title>，指向 CSS 的链接（如果你使用 CSS 来设计 HTML 内容的样式的话），指向自定义网站图标的链接和一些元数据（关于 HTML 本身的数据，例如它的作者和描述这个文档的关键字）。

2.3 HTML标签的书写

对于像img这样标签内不需要嵌套其它内容的标签，可以进行简写

就好像下面这样

 <img src=""></img> 
 
 <img src="" />
复制代码

其实不闭合也可以，比如input,meta

2.3 HTML文本的相关标签

blockquote 块级引用

blockquote 表示引用一个长文档，可以设置cite属性表示引用来源

 <blockquote cite=“aaa.xxx”>
     <p>
         你好呀，这里是一个快级引用哦
     </p>
 </blockquote>

code,pre标签

code,pre通测组合使用用来展示代码片段

 <pre><code>
     console.log("Hello,World!")
 </code></pre>

理解CSS

CSS 语法

CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”

下面这段代码使用非常简单的 CSS 规则实现了之前提到的效果：

h1 {
    color: red;
    font-size: 5em;
}

Copy to Clipboard

语法由一个选择器 (selector)起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题<h1> (en-US)）添加样式。

接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性 (properties) (en-US) 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。

一个 CSS 样式表可以包含很多个规则。

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}