这是我的第一篇掘金博客，开启掘金写作之路。

初识前端：

一、什么是前端？

使用web技术栈，解决多端web图形界面下（GUI）的人机交互问题。

终端：pc端、小程序、VR/AR······

技术栈： web页面 HTML内容、CSS样式、JavaScript行为，通过网络协议（HTTP协议）与服务器端进行数据传输。

前端需要关注什么？

产品的功能：思考功能解决什么问题，实现用户的那些需求；

美观：页面的美观当然是必要的；

无障碍：考虑产品在无障碍人群中是否可以使用；

安全：网站的使用是否安全；

性能：产品使用的流畅性；

兼容：产品在多设备的兼容性；

体验：用户体验感。

前端的进步

nodejs：开发服务器应用；

ELECTRON：开发客户端应用；

WebRTC：p2p在线传输，实现多人会议；

webGL：开发3D游戏；

webASSEMBLY：其他的语言编写为浏览器上的语言；

前端开发环境：浏览器 + 编辑器

二、认识HTML

HTML : HyperText Markup Language 超文本标记语言

<!doctype html> html版本，帮助渲染页面

<html> 根标签

<head> 原数据

<body> 呈现内容

1.标签学习

标题： h1~h6

列表：

ol>li 有序列表; order list

ul>li 无序列表；unorder list

dl>dt>dd 定义列表；多对多关系

链接： <a href="https://www.bytedance.com/" /> img、audio、video

输入： input

选项：

label>input type="checkbox"

label>input type="radio" name=" "

select>option

文本标签

<blockquote> 块标签

<cite> 表书名等

<q> 表引用

<code> 代码引用

<pre> 多行内容

<strong> 强调

<em> 重读的词

2.HTML的布局

3.HTML语义化：

HTML中的元素、属性、属标签性值都拥有某些含义。开发者应遵循语义来编写语义。熟悉标签和属性 -> 思考应用场景 -> 不使用可视化工具生成代码

富有逻辑的页面布局不仅在使用者的感官、使用上有更好的体验感；语义化的标签使用很大程度上也可以让程序员条理的查看自己的代码区域。

4.HTML参与者

开发者：修改、维护页面；

浏览器：展示页面；

搜索引擎：提取关键词、排序；

屏幕阅读器：给盲人读页面内容；无障碍

三、认识CSS

Cascading Style Sheets 层叠样式表

h1 选择器 {
    color : white; 属性值value
    font-size : 14px;  声名
}

1.CSS引入方式

通用认识的使用优先级：外链 > 嵌入 > 内联

2.CSS工作方式

css是HTML解析后开始加载的，处理好选择器在页面的定位可以方便样式的渲染。

3.多种选择器的挑选

id > class > 标签 > 属性

选择器的组合写法：

4.颜色选择

rgb(0,0,0) 红绿蓝

HSL 色相、饱和度、亮度 hsl(0, 80%, 30%)

alpha 透明度在颜色中的表示

#ff00008a
rgba(255, 0, 0, 0.54)
hsla(0, 100%, 50%, 0.54)

字节青训营学习DAY1 | 小白初识前端、HTML、CSS