前端HTML、CSS笔记｜青训营笔记

话多起腻
85 阅读4分钟

前端HTML、CSS笔记｜青训营笔记

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

一、前端概述

1.什么是前端？

前端是指使用HTML、CSS、JavaScript等以及相关衍生技术、框架，构建WEB页面或APP界面，实现互联网产品人机交互的技术

2.前端应关注哪些方面？

  1. 功能（核心）
  2. 美观
  3. 无障碍
  4. 安全
  5. 性能
  6. 兼容
  7. 用户体验

3.开发环境

浏览器：Chrome、火狐、Safari、IE……

编辑器：VScode（个人推荐）、记事本、vim、WebStorm

使用vs code推荐扩展：open in browser、Faker、CSS Peek、Prettier、Chinese、Eslint、HTML CSS Support、vscode-icons……

二、HTML

1.HTML介绍

HTML全称：Hyper Text Markup Language,即超文本标记语言，一种用来描述网页的语言（非编程语言，是一种标记语言 ）。

2.代码结构介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

上述代码为使用vs code自动生成的html代码，主要分为：

  • DOCTYPE：声明文档类型
  • html：编写页面代码，包括：
    • head：用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等;文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。且绝大多数文档头部包含的数据都不会真正作为内容显示给用户。
    • body：定义了文档的正文。该标签元素包含 HTML 文档的所有内容，例如标题、段落、图像、超链接、表格、列表等。

3.meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等。

常用的有：

  • charset：描述HTML文档类型
  • keywords：关键词
  • description：页面描述
  • viewport：移动端适配，可控制窗口大小和比例

4.语义化标签

语义化就是用正确的标签做正确的事情。

优点如下：

  • 对机器友好，带有语义的文字表现力丰富，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
  • 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，便于团队的开发与维护。

常用标签有：

<header></header> 头部 
<nav></nav> 导航栏 
<section></section> 区块（有语义化的div） 
<main></main> 主要区域 
<article></article> 主要内容 
<aside></aside> 侧边栏 
<footer></footer> 底部

5.HTML新特性

  1. 语义化标签
  2. 媒体标签（audio、video）
  3. 表单：
    • 表单类型：email、URL、search、number、color、range……
    • 表单属性：placeholder、autocomplete、autofocus、required、pattern……
    • 表单事件：oninput、oninvalid
  4. DOM查询：querySelector、querySelectorAll
  5. WEB存储：localStorage、sessionStorage ……

三、CSS

1.CSS工作原理

我们在打开一个网页的过程中，首先会加载HTML，然后解析HTML，在解析的同时加载并解析CSS，等HTML解析好并创建了DOM树之后，浏览器就会把CSS中的样式添加到对应的DOM树节点。具体的流程图就像这样： image （图源高频前端面试题汇总之浏览器原理篇）

2.CSS选择器

id选择器、类选择器、属性、伪类选择器、标签选择器、伪元素选择器、相邻兄弟选择器、子选择器、后代选择器、通配符选择器。

对于选择器的优先级：

  • 标签选择器、伪元素选择器：1
  • 类选择器、伪类选择器、属性选择器：10
  • id 选择器：100
  • 内联样式：1000
  • !important声明的样式的优先级最高；
  • 如果优先级相同，则最后出现的样式生效；
  • 继承得到的样式的优先级最低；
  • 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
  • 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

3.伪类

伪类选择器不会去选择某些特定的元素，而是会在某些元素处于某种状态的时候来进行样式表的渲染。大致有以下：

状态伪类

  • a:link 未被访问前
  • a:visited 鼠标点击后
  • a:hover 鼠标覆盖
  • a:active 被激活时

结构伪类

  • E:only-child
  • E:only-of-type
  • E:first-child
  • E:last-child

表单伪类

  • input:foucs 获取焦点(用于输入框)
  • input:blur 失去焦点
  • input:valid 校验通过
  • input:invalid 校验不通过

其他伪类

  • li:not(:last-child) 这里是排除最后一个, 其余剩下的li都有
  • E:empty 表示E这个元素没有任何的内容
  • E:target 当目标元素被触发为当前锚链接时

4.color

可以使用以下方式表示颜色

  • 对应颜色的英文名称
  • #xxx
  • rgb
  • rgba（a代表透明度）
  • hsla(颜色, 饱和度, 亮度,透明度)

总结

在这两天的学习过程中，首先我对前端有了一个较为清晰的认知，在这两天的学习过程中学习了HTML、CSS，个人对于这两类知识有了更加清晰的认知。期待明天的课程！

avatar
文章
阅读
粉丝