HTML和CSS | 青训营笔记

26 阅读3分钟

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

1、前端与HTML

1.1、什么是前端工程师?

使用web技术栈解决多端图形用户界面交互问题的工程师

1.2、前端技术栈

HTML(内容) CSS(样式) JavaScript(行为)

1.3、前端应该关注哪些方面?

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

1.4、HTML是什么?

HTML(HyperText Markup Language),超文本标记语言。

超文本指不只包含文本,还有图片、标题、链接、表格等内容。

标记指的是标签语法例如:

<img src="photo.jpg" />

1.5、DOM树

DOM: DOM(文档对象模型) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。

image.png

1.6、语义化

1.6.1、什么是语义化?

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol;无序列表用ul
    • lang属性表示内容所使用的语言

1.6.2、为什么需要语义化?

  • 增加代码的可读性和可维护性
  • 使浏览器更好地展示画面
  • 有利于SEO(搜索引擎优化)
  • 提升无障碍性(给盲人读页面内容)

1.6.3、如何做到语义化?

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视花工具生成代码

2、走进前端技术栈-CSS

2.1、什么是CSS?

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

2.2、在页面中使用CSS

  • 外链(推荐)
<link rel="stylesheet" href="/assets/style.css">
  • 嵌入
<style>
    li {
       margin: 0;
       list-style: none;
    }
</style>
  • 内联(不推荐)
<p style="margin:1em 0">Example Content</p>

2.3、CSS是如何工作的?

image.png

2.4、选择器

2.4.1、什么是选择器?

  • 找出页面中的元素,以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名和id
    • 按照属性
    • 按照DOM树中的位置

2.4.2、选择器种类

  • !important
  • 内联样式
  • ID选择器
  • 类/伪类选择器
  • 元素选择器
  • 通配符选择器

!如果不同选择器选中同一个元素该怎么处理?

答:根据选择器的特异性(权重)进行判断,高的覆盖低的

2.4.3、选择器权重

image.png

例如:

html:
<artical>
    <p id="text" class="example">Examplr Content</p>
</artical>

css:
artical .example {
    color: skyblue;
}

#text {
    color: red;
}

最终的颜色是red,因为id选择器的权重高

2.4.4、选择器组合

image.png

2.5、颜色

  • RGB/RGBA
    • R:红色通道
    • G:绿色通道
    • B:蓝色通道
    • A:透明度通道

R、G、B的值都是0-255,A的值为0-1,例如:rgba(255, 255, 255, 1)表示白色,又可以表示为#ffffff。这种表示方法最常用,但是不够直观

  • HSL
    • H:色相,取值范围0-360
    • S:饱和度,取值范围0-100%
    • L:亮度,取值范围0-100%

例如:hsl(18, 90%, 80%)