CSS前置必备知识 html+css day 03

仗剑恬雅人

已于 2023-07-06 10:07:16 修改

阅读量91

点赞数 1

分类专栏： 0基础自学前端文章标签： vscode html5 css ide html

于 2023-07-05 14:30:00 首次发布

本文链接：https://blog.csdn.net/qq_45897045/article/details/131549391

版权

0基础自学前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

元素的语义化
- 含义：用正确的元素做正确的事情
- 理论说，所有的HTML元素都能实现相同的事情
- 标签语义化好处
  - 方便代码维护
  - 增强阅读性，减少沟通成本
  - 让语音合成工具能更好的阅读
  - 有利于SEO优化
- 语义化实例：
SEO
- 搜索引擎优化（缩写为SEO）是通过了解搜索引擎的算法调整自己的网站，以提高该网站在搜索引擎中的排名
- 原理
  - 搜索引擎首先对大量网站的数据进行爬取
  - 其次将爬好的数据加到临时数据库中，符合网站规则加入到索引区，不符合规制进行清理
  - 最后对索引区中存放的数据进行分类，排序等，最后将结果呈现给用户
认识字符编码
- 计算机是干什么的？
  - 计算机最早发明是为了解决数字计算问题
  - 计算机只能识别二进制 0，1
  - 计算机的底层硬件是用电路的开和闭两种状态表示0，1
  - 计算机为了能表示，存储和处理文字图像等，能只处理必须将这些字符转化为二进制数字
- 目前使用最多的编码是：UTF-8
认识CSS
- CSS表示层叠样式表（Cascading Style Sheet）
- 作用：为网页添加样式的代码
- CSS是一个计算机语言，不是一种编程语言
- CSS历史
  - 早期通过HTML添加样式，但没有统一的标准
  - 1994，发布了CSS1
  - 1997，W3C成立了专门的CSS工作组，发布CSS2
  - 2006~2009，流行“div+css”布局
  - 2011，CSS3 Color Module开始发布
  - 从CSS3开始，所有CSS3分为不同模块（modules），每个模块有不同的版本
- CSS作用
  - 美化HTML，让结构（HTML）与样式（CSS）分离
    - 美化一：为HTML添加样式
    - 美化二：对HTML进行布局
CSS如何编写（重要）
- 语法规则：声明 = 属性名：属性值
- 将CSS样式应用到元素上（三种方式）
  - 内联样式
    - 存在于HTML元素的style属性中
    - 内联样式详细写法:
      - 例如：
      - CSS样式间用；分开，建议每条CSS样式后加上分号；
      - 以下写法在原生HTML编写中不推荐
      - 在vue的template中某些动态的样式是会用到内联样式的
  - 内部样式表/文档样式表/内嵌样式表
    - 将CSS放在HTML<head>元素的<style>元素中
    - 示例：
  - 外部样式表
    - 独立的css文件，用link进行引入
    - 示例：
    - 可以用index.css引入其他的资源
    - index.css引入其他的资源，直接在link中进行调用
常见的CSS中五个属性
- CSS官方文档地址：www.w3.org/TR/?tag=css 或者 mdn上
- font-size
- color
- background-color
- width
- heigth
link元素
- link元素是外部资源链接元素，规范了文档与外部资源的关系
- link元素通常在head元素中（不要写在body元素中）
- 最常用的链接是样式表（CSS），此外也可以被用来创建站点图标
- 常见属性
  - href：被链接是指定资源的URL
  - ref：指定链接类型
    - icon：站点图标
    - stylesheet：css样式
- 示例：在head元素中
进制
- 概念：当数字达到某个值时，向前进一位
- eg：16进制：a(10)，b（11），c（12），d（13），e（14），f（15）
- 二进制：0b开头
- 八进制：0o开头
- 十六进制：0x开头
CSS颜色的表示方法
- 颜色关键字（颜色的单词）
- RGB颜色：是一种色彩空间，通过红，绿，蓝三原色组成不同的颜色
  - RGB各个原色的取值范围是 0~255
- RGB颜色可以通过16进制字符和（rgb（），rgba（）透明度）表示
- 示例：一般开发时候用16进制表示较多。
  - 十六进制： #aabbcc （简写：#abc）
浏览器的渲染流程
- 下载HTML--> 解析HTML--> 若解析到link标签，加载css文件，同时解析下面的HTML语言 --> HTML中的各种嵌套会转化成DOM树形结构（数据结构）--> 另一个线程将css解析完成，将解析完成的css样式附加到DOM树结构中会变成Render Tree--> 最后渲染给用户。