html与css的基础知识

1.HTML与CSS的概述：

HTML
根据W3C定义，HTML全称HyperText Markup Language，用于定义文档内容结构

CSS

根据W3C定义，CSS全称Cascading Style Sheets，用于定义HTML文档的样式（外观）

HTML：

head：meta、title。
2. body：其他元素。

html元素又叫做根标记、根元素，它是所有其他元素的祖先元素，文档中所有其他元素，都必须放置在它的元素内容中。

<html lang="en"></html>该文档中的文字使用英语书写
<html lang="zh-cmn-Hans></html>该文档中的文字使用简体中文书写

head元素：

又叫做文档头，它是html元素的第一个子元素。
文档头中可以包含一些其他元素，用于描述页面的附加信息

注意！head元素中的内容不会显示在页面上

head元素通常包括以下元素:

body元素：

body元素又叫做文档体，网页中所有的可见内容都放置在该元素内
body元素中可以包含大量其他元素，定义文档的内容结构

css术语：

元素选择器（标记名{/*}）
类选择器（.类名{}）
ID选择器（#id值{}）

2.html中的各种元素

超链接<a>元素点击链接后跳转到另外一个页面

<a>元素的书写格式：<a href="目标">内容<a>

绝对路径和相对路径

绝对路径： 当网站部署到服务器后，网站中的所有资源都可以通过一个地址(路径)访问

该地址(路径)的书写格式为：协议://域名/目录

示例：http://meyerweb.com/eric/tools/css/reset/reset.css

协议：http
域名：meyerweb.com
目录：根目录/eric/tools/css/reset/reset.css

相对路径： 相对路径是相对于当前资源的位置，只能用于访问站内资源

相对路径的书写格式为：./路径

./：表示当前资源所在的目录，必须作为相对路径的开始，可省略

../：表示返回上一级目录

文本元素：

h1~h6：1级标题~6级标题    p:段落
blockquote：整段的引用   cite:对参考文献的引用
q：小段文本的引用   abbr：对缩写词的引用
strong:重要的文本   em：强调的文本
b：应突出显示的文字   i：应区别对待的文本

结构元素：

div:它是一个非常常见的元素
它没有任何的语义
它仅仅表示一个容器，用于包含其他元素
在网站布局时，它通常用于表示页面的区域

语义化结构元素:
<header> 用于表示页面或某个区域的头部
<nav>用于表示导航栏
<aside>用于表示跟周围主题相关的附加信息
<article>用于表示文章或其他可独立页面存在的内容
<section>用于表示一个整体的一部分主题
<footer>用于表示页面或某个区域的脚注

无语义元素:

<div>无语义，表示页面中的一块区域
<span>无语义，仅用于给一小段文本添加样式
<br>无语义，空元素，用于在页面中换行
<hr>无语义，空元素，用于在页面中制造一个分割线
<pre>无语义，预格式化元素(保留文字在源代码中的格式)

实体字符:

在HTML中，有些字符会被浏览器特殊处理
如：<、>会被浏览器认为是标记符号，不会显示到页面
空白字符会被浏览器折叠为一个空格

实体字符的书写格式为&实体名称;或&#实体编号;

空格：实体名称&nbsp；实体编号&#160；

<（小于符号）实体名称&lt； 实体编号&#60；

>(大于符号)实体名称&gt； 实体编码&#62；

&（并且符号）实体名称&amp； 实体编码&#38； ©（版权符号）实体名称&copy； 实体编码&#169；

其他元素:

ins：加下划线
del：加中间线
ol(li):有序列表
ul(li):无序列表
dl:dt表示标题，dd表示正文

块级元素，行内元素与行内块级元素:

块级元素行内元素与行内块级元素分类等（相互之间可以转换）

**块级元素 **
1.宽高可以自行设置，与内容无绝对关系
2.默认独占一行，与其他元素不能共存一行
3.对应的css属性是 display：block
4.常见的有 div、 p 、h1-h6 、hr、 ul 、 ol 、pre 各种h5 新增的语义化标签如header 、footer

**行内元素 **
1.宽高不可以设置，设置无效，由内容决定宽高
2.默认能与其他元素共存一行
3.对应的css属性是display:inline
4.常见的行内元素有：a、 span 、 strong、 I、 b 、td

**行内块级元素 **
1. 宽高可以设置，与内容无绝对关系
2. 默认不独占一行，可与其它元素共存一行
3. 对应的CSS属性是：display:inline-block
4. 常见的元素： img 、 td 、 table 、video 、audio 、表单、。。。

3.选择器和层叠：

常见CSS属性：

h1{color:red; text-align:center;}

CSS选择器：

CSS选择器，决定了将规则应用到哪些元素上

三种基本选择器：元素选择器、类选择器、ID选择器

除此之外，CSS还提供了大量的选择器

通配符选择器

属性选择器

伪类选择器

伪元素选择器

层叠概述：

什么是层叠: 层叠是一种机制，用于解决CSS声明冲突

声明冲突:多个相同的CSS声明(属性)，应用到同一个元素上

层叠的整个过程，是浏览器根据规则自动完成的

学习层叠，就是学习层叠过程中的规则

学习层叠的目的，是为了在开发时更好的掌控元素的样式

层叠的过程:

比较优先级:优先级低的声明会被淘汰，优先级高的声明胜出
比较特殊性:特殊性低的声明会被淘汰，特殊性高的声明胜出
比较源次序:源次序靠前的声明会被淘汰，靠后的声明胜出

经过这三个步骤，仅会有一个声明最终胜出，其他的全部被淘汰

比较优先级:

每一个声明都有一个优先级

当发生冲突时，优先级高的会保留，优先级低的会被淘汰

一个声明的优先级，与它的来源和重要性有关

来源：

作者样式表
浏览器默认样式表
用户样式表

重要性：

若属性值后跟上!important ，则表示一条重要声明，否则，表示普通声明

示例：color:red; 普通声明

color:red !important; 重要声明

优先级从低到高：

浏览器默认样式表中的声明
用户样式表中的普通声明
作者样式表中的普通声明
作者样式表中的重要声明
用户样式表中的重要声明

比较特殊性 ：

特殊性从高到低：

行内样式

ID选择器

类选择器

元素选择器

通配符选择器

比较特殊性-总体规则：

每一个声明都有一个特殊性(Specificity)

当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰

一个声明的特殊性，取决于规则适用范围的大小

规则适用范围越大，特殊性越低，适用范围越小，特殊性越高

特殊性从高到低：行内样式> ID选择器 > 类选择器 > 元素选择器 > 通配符选择器

比较源次序：最后出现的声明胜出，其他的全部淘汰。

该规则的实际应用：

CSS Reset代码前置
a元素的伪类书写顺序

a元素的伪类书写顺序

:link 链接未被访问过的样式

:visited 链接已被访问过的样式

:hover 鼠标悬停到元素上的样式，适用于其他元素

:active 链接被激活时的样式

继承：

什么是继承：继承(inherit)，是指子元素会自动拥有父元素的某些CSS属性

继承是自动发生的，开发者不需要书写任何额外的代码

并不不是所有CSS属性都可以被子元素继承

可被继承的属性：color font-size font-weight text-align

不可被继承的属性：background-color

有些属性在页面的某个区域中具有通用性

若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿

继承发生的场景

一个元素的某个CSS属性，只有满足下面两个条件，才会继承父元素：

该属性是可继承的属性
该属性在样式表中没有声明

强制继承：强制继承，也叫做显式继承，是指将CSS属性值设置为inherit

这样做，通常有两个原因：

为了继承有些不可继承的属性
为了继承已被声明过的属性

属性值计算过程简介

属性值计算过程简介：

1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值

3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值

4.使用默认值：对仍然没有值的属性，使用默认值

元素的渲染顺序：先算出父元素的所有CSS属性值，

再计算子元素，依次类推