HTML与CSS

# HTML

html是什么

# 📃doctype的作用

一种标准通用标记语言的文档类型声明，目的是告诉告诉浏览器，应该使用什么样的文档定义来解析文档

**严格模式：**声明<!DOCTYPE html>进入严格模式，文档按照W3C的标准解析
**混杂模式：**兼容老的浏览器

# 标签

列表
input输入
选择

提供快捷输入提示方式
引用
- 一个函数和对其周围状态（**lexical environment，词法环境**）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是**闭包**（**closure**）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。
  块级引用
- 《小王子》引用
- hello内容引用
- hello word代码引用
- ....
内容

# 语义化：HTML所有属性和标签都有特定的含义

# 意义

方便不同开发者阅读代码,提升了代码的可读性
浏览器展示页面
搜索引擎抓取关键字，搜索引擎的优化
方便盲人使用屏幕阅读器阅读网站内容，提升无障碍性

# html部分面试侧重点

# 语义化

# HTML5新特性[^1]

html5新特性不支持ie8及以下版本的浏览器

# CSS

# CSS使用的不同位置

外链式：使用link标签导入外部的CSS样式文件
- <link rel="stylesheet" href="/assets/style.css">
- 注：外链式css样式是从上往下层叠生效的，靠下的css样式会覆盖靠上部分的css样式

嵌入式: 以style标签的形式嵌入到了html文档中

<style>
    li { margin:0; list-style:none }
</style>

1
2
3

内联样式：在标签内使用style属性声明样式
- <p style="margin:lem 0">Example Content xiaocao</p>

# CSS工作方式和选择器权重

# 内联样式：1000
# id选择器：100
# 类选择器、伪类选择器、属性选择器：10
# 标签选择器、微元素选择器：1

# CSS继承

某些属性会自动继承其父元素的计算值，除非显式的指定一个值

**inherit**可以让一些不会自动继承父元素的计算值的属性编程可继承的属性
**initial**设置属性的初始值

# CSS布局

# 常规流

# 盒模型
- width
- height
- padding
  - 指定元素的四个方向的内边距
  - 如果设置为百分数，则是相对于容器宽度的百分数
- border：设定边框的宽度，颜色样式等。
- margin：外边距
  - margin边距折叠问题：只发生在垂直边距重叠的时候
  - 计算原则：
    - 两者都是整数，取较大者
    - 一正一负，正值减去负值的绝对值
    - 两者都是负值，0 - 两者中绝对值大者
- overflow
# 行级：元素不会独占一行，设置width和height都无效，但是可以设置水平方向的margin和padding属性（可通过设置display:inline转换为行级元素）
- span
- em
- strong
- cite
- code
- ...
# 块级：可以设置宽高，元素独占一行（设置display:block转换为块级元素）
- body
- article
- div
- main
- section
- h1-6
- p
- ul
- li
- ...
# 表格布局
# FlexBox
# GridBox

# 浮动

# 绝对定位

# 排版上下文

# 参考文章

[^1]:jane_panyiyun 2020-6-11 H5新特性：十个新特性 (opens new window)

编辑

上次更新: 2022/02/21, 05:57:00

HTML与CSS

# HTML

# 📃doctype的作用

# 标签

# 语义化：HTML所有属性和标签都有特定的含义

# 意义

# html部分面试侧重点

# 语义化

# HTML5新特性[^1]

# CSS

# CSS使用的不同位置

# CSS工作方式和选择器权重

# 内联样式：1000

# id选择器：100

# 类选择器、伪类选择器、属性选择器：10

# 标签选择器、微元素选择器：1

# CSS继承

# CSS布局

# 常规流

# 盒模型

# 行级：元素不会独占一行，设置width和height都无效，但是可以设置水平方向的margin和padding属性（可通过设置`display:inline`转换为行级元素）

# 块级：可以设置宽高，元素独占一行（设置`display:block`转换为块级元素）

# 表格布局

# FlexBox

# GridBox

# 浮动

# 绝对定位

# 排版上下文

# 参考文章

HTML与CSS

# HTML

# 📃doctype的作用

# 标签

# 语义化：HTML所有属性和标签都有特定的含义

# 意义

# html部分面试侧重点

# 语义化

# HTML5新特性[^1]

# CSS

# CSS使用的不同位置

# CSS工作方式和选择器权重

# 内联样式：1000

# id选择器：100

# 类选择器、伪类选择器、属性选择器：10

# 标签选择器、微元素选择器：1

# CSS继承

# CSS布局

# 常规流

# 盒模型

# 行级：元素不会独占一行，设置width和height都无效，但是可以设置水平 方向的margin和padding属性（可通过设置display:inline转换为行级元素）

# 块级：可以设置宽高，元素独占一行（设置display:block转换为块级元素）

# 表格布局

# FlexBox

# GridBox

# 浮动

# 绝对定位

# 排版上下文

# 参考文章

# 行级：元素不会独占一行，设置width和height都无效，但是可以设置水平方向的margin和padding属性（可通过设置`display:inline`转换为行级元素）

# 块级：可以设置宽高，元素独占一行（设置`display:block`转换为块级元素）