[青训营] HTML与CSS基础

taiiiyang
96 阅读2分钟

    这是我参与「第四届青训营 」笔记创作活动的的第1天,今天的课程了解了前端的基础知识点，不过这些是属于刚开始接触的部分，权当是复习一下之前学过的知识点了。

IMG_8826.jpg

HTML基础

前端工程师应当注意的点

人机交互：用户与页面的交互是否符合用户的心智

代码质量：可维护性，可复用性，避免代码重复

数据安全：页面是否会被篡改，浏览器请求数据是否加密

性能：加载速度，首屏渲染时间，首次可交互时间，服务端渲染

兼容性：是否可以兼容各种浏览器。可以在多端创建各种应用

产品直观感受：用户观察页面时的感受

常用环境

常用浏览器： IE（ Trident ） Edge（ Chromium ） Firefox（ Gecko ) Chrome（ Webkit ）

编辑器：Vscode、WebStorm、Vim

HTML标签

HTML标签一般需要有开始标签和结束标签

<!DOCTYPE HTML> 指明HTML版本。使用什么方式，如果不添加则会使用怪异模式渲染

<head> 头部文档信息,存放页面的元数据，不在主页展示

文档中的meta属性涉及到的方面较多，但一般不会去特别了解，这里指出meta的各种属性代表值

  1. charset： 指定文档字符集，通常为UTF-8

  2. name： 提供文档级别的元数据，应用于整个页面

    <meta name="theme-color" content="#000000"

  3. content: 指定标签内容

<body> 主体内容，存放用户可见内容

浏览器会从document开始解析HTML为DOM树、解析 CSS 为 CSSOM 树，二者结合在浏览器上渲染为页面

HTML语法

  1. 标签和属性大小写不敏感，推荐小写
  2. 空标签可以不闭合
  3. 属性值推荐用双引号包裹
  4. 某些属性值可以省略，比如 required 、readonly

HTML语义化

为何语义化？

  1. 提升代码可读性
  2. 利于SEO
  3. 提升无障碍性
  4. 可维护性

如何语义化？

  1. 了解每个标签的含义
  2. 了解在哪个位置使用哪种标签
  3. 不使用可视化工具生成代码

CSS基础

CSS嵌入方式

<!-- 外链 -->
<link rel="stylesheet" href="style.css" />

<!-- 内嵌 -->
<style></style>

<!-- 内联 -->
<p style="margin: 0 auto">
  hello world
</p>

CSS渲染方式

CSS根据选择器的关系生成CSSOM树，结合DOM树渲染到页面

CSS选择器

  1. 通配选择器：权限最低
  2. 标签选择器
  3. id选择器
  4. 类选择器
  5. 属性选择器：属性内部支持匹配开头和结尾
  6. 伪类选择器： :nth-child

CSS标签组合方式

  1. AB 直接组合 同时满足A和B
  2. A B 后代组合 选中B 同时是A的后代
  3. A > B 父子组合 选中B 同时是A的直系后代
  4. A ~ B 兄弟选择器 选中B 同时是A的后面元素且同级
  5. A + B 相邻选择器 选中B 同时只能是A的相邻元素
avatar
文章
阅读
粉丝