这是我参与「第四届青训营」笔记创作活动的第1天

前端

什么是前端？：解决图形界面下人机交互问题

跨终端：PC、移动浏览器、客户端、小程序、VR/AR等

前端工程师：就是使用web技术栈，解决多端图形用户界面交互的工程师

基础技术栈：HTML，CSS，JavaScript，网络协议

关注方面：产品功能、界面美观、无障碍、安全、性能、兼容、体验

边界：node.js，electron, react, Web RTC , WebGL, Web Assembly

HTML

超文本标记语言

<!doctype html> //当前HTML版本，决定浏览器使用哪种渲染模式

语义化是什么？

HTML中的元素、属性、属性值都拥有某种含义
开发者应遵循语义来编写HTML
- 有序列表用<ol>；
- 无序列表用<ul>;
- lang属性申明使用语言

谁在使用我们写的HTML

开发者：修改维护页面
浏览器：展示页面
搜索引擎：提取关键词、排序（正文和标题中的关键词权重不同）
屏幕阅读器：给残疾人提供舒适的服务，给正常人在不同条件下提供相同是服务质量

语义化好处：

代码可读性
可维护性
搜索引擎优化
提升无障碍性

HTML的主要目的是传达内容，而不是样式

如何做到语义化？

了解每个标签和属性的含义（多看MDN\W3C的标准文档）
思考什么标签最适合描述这个内容（不同情况下，使用相对最适合的标签来展现相同或不同的效果）
不使用可视化软件生成代码

常见页面内容划分

header：页头，logo、导航等元素

nav：导航栏

main：主要内容

article：文章内容、正文

aside：推荐链接等相对不重要的内容

footer：参考链接，版权信息等

引用

块级引用`<blockquote>`标签

<blockquote cite = "http://hao123.com">
    <p>
        天生我材必有用，千金散尽还复来。
    </p>
</blockquote>

短引用

`<cite>`标签

效果：字体倾斜多用于书名、专辑名、章节名等

`<q>`标签

效果：标签所在位置为引号多用于真正表示引用内容

<p>
    在<cite>第一章</cite>中，我们讲过<q>字符串是不可变量</q>
</p>

代码引用`<code>`标签

行内代码引用

<p>
    <code>code</code>是一个标签
</p>

多行代码引用

将多行代码和<code>标签包含在<pre>标签中

<pre><code>
	int a = 1;
	printf("%d", a);
</code></pre>

强调

`<strong>`标签

效果：字体加粗

含义上的强调，表示重要语义重要的强调

`<em>`标签

效果：字体倾斜

语气加重，表示重读（语音加重）的强调

CSS层叠样式表

用来定义页面元素的样式

CSS是如何工作的

选择器

常用选择器

通配选择器
元素选择器
id选择器
类选择器

属性选择器

伪类选择器

一般伪类
超链接伪类

伪元素选择器

组合选择

选择器组

多个选择器之间，用逗号隔开

颜色

RGB

RGB(255, 255, 255)
// 或
#FFFFFF

HSL

H：色相
S：饱和度
L：亮度

hsl(18, 28%, 82%)

直接指定颜色名

blue
red
yellowgreen

alpha 透明度

#FF0000FF		// 最后两位为不透明度的十六进制数
rgba(255, 0, 0, 0.47)
hsla(0, 100%, 50%, 1)

当a为1时，不透明度为100%；a为0时，不透明度为0

文字样式

字体font-family

通用字体族

通用字体族是一种风格，不是一种特指的字体

Serif 衬线体，Georgia、宋体
Sans-Serif 无衬线体，Arial、Helvetica、黑体、微软雅黑
Cursive 手写体，Caflisch Script、楷体
Fantasy、Comic Sans Ms，Papyrus
Monospace 等宽字体，Consolas、Courier、中文字体

使用Web Fonts

  @font-face{
      font-family:"Megrim";
      src:
url(http:fonts.gstatic.com/s/megrim/v11/46kulbz5wjvLqJZVam_hVUdI1w.woff2)
format('woff2');
  }
  h1{
      font-family:Megrim, Cursive;
  }

字号font-size

关键字：

small、medium、large

长度

px、em

百分数：

相对于父元素字体大小

font-style

.normal {
    font-style: normal;		// 正常
}
.italic {
    font-style:italic		// 斜体
}

font-weight 字重

.w1 {font-weight: 100}
.w2 {font-weight: 200}
.w3 {font-weight: 300}
.w4 {font-weight: 400} // 400 = normal
.w5 {font-weight: 500}
.w6 {font-weight: 600}
.w7 {font-weight: 700} // 700 = bold
.w8 {font-weight: 800}
.w9 {font-weight: 900}

字重的效果展现需要字体本身支持，有的字体在设计时，只支持一部分字重

行高line-height

默认1.2，大多需要调整,

以上属性都可以合并写进`font`属性

文章有些地方是只是提到，并没有具体描述，具体的还需要自己再继续补充学习

前端和HTML、CSS | 青训营笔记

前端