HTML&CSS

HTML

介绍

1. HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)
2. HTML 文本是由 HTML 标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等
3. HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

结构

image-20220403212514135.png

标签

文档

1. 在线文档 : https://www.w3school.com.cn

说明

1. HTML 标签用两个尖括号”<>”括起来
2. HTML 标签一般是双标签，如<b></b>前一个标签是起始标签, 后一个标签为结束标签
3. 两个标签之间的文本是 html 元素的内容
4. 某些标签称为"单标签",因为它只需单独使用就能完整地表达意思,如<br/><hr/>
5. HTML 元素指的是从开始标签到结束标签的所有代码。

---

CSS

介绍

CSS 指的是层叠样式表* (Cascading Style Sheets) 在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式 属性，费心费力。所以 CSS 就出现了。 使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发) CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面

文档

在线文档地址: https://www.w3school.com.cn/css/index.asp 离线文档: W3School 离线手册(2017.03.11 版).chm

使用方式

方式 1

在标签的 style 属性上设置 CSS 样式

<p style="color:red">红色</p>

方式 2

在 head 标签中，使用 style 标签来定义需要的 CSS 样式

<style>
	p{
		color:red;
	}
</style>

方式 3

把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

<link rel="stylesheet" href="test.css"/>

选择器

元素选择器

1. 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
2. CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等
3. 比如：

h1 {color:blue;}
h2 {color:silver;}
p {color:blue;}

ID 选择器

1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
2. id 选择器以 "#" 来定义。
3. 比如:

#css1 {color:red;}
#css2 {color:green;}

class 选择器（类选择器）

1. class 类选择器，可以通过 class 属性选择去使用这个样式
2. 语法格式

.class属性值{属性:值;}

组合选择器

1. 组合选择器可以让多个选择器共用同一个 css 样式代码
2. 语法格式

选择器1，选择器2，选择器n{属性:值;}

优先级

行内样式 > ID 选择器 > class 选择器 > 元素选择器