第一周周报：简单的HTML知识总结及部分CSS基础

HTML

# 文本元素

## h[块级]

h1-h6

## p[块级]

同上

> lorem，乱数假文，没有任何实际含义的文字

## span 【无语义】【容器】

没有语义，仅用于设置样式

## pre 【常用于显示写出的代码(一般套code元素，code表示代码区域)】 【功能本质：默认css属性】（white-space:pre）

预格式化文本元素

空白折叠

# 链接

# 图片元素

# 列表元素

## 有序列表

ol，父，属性：type（规定序号类型，不建议用，语义化，建议css）；reversed(序号顺序颠倒eg:1~3变为3~1，布尔属性）

li，子

## 无序列表

ol改成ul

ul

无序列表常用于制作菜单或新闻列表

## 定义列表

通常用于一些术语的定义

dl

dt

dd

# 容器元素

## div

没有语义

## 语义化的容器元素

header: 表示页头，文章头部也可

footer：表示页脚，文章尾部也可

article：表示文章，正文

section：表示文章的章节

aside:表示侧边栏（或者说附加信息）

# 元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定

例如：查看h1元素中是否可以包含p元素

可上mdn直接查，格式:**.mdn

eg:h不能包p;p不能包h;p,h不能包div

总结；

1. 容器元素中可以包含任何元素

2. a元素中几乎可以包含任何元素

3. 某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd）

4. 标题元素和段落元素（h和p）不能相互嵌套，并且不能包含容器元素（div，语义化容器元素）

CSS

# 为网页添加样式

## 术语解释

```css

h1{

            color: red;

            background-color: lightblue;

            text-align: center;

        }

```

css规则=选择器（h1）+声明块（中括号及其内容）

### 选择器

选择器：选中元素

1.ID选择器:选中的是对应id值的元素

2.元素选择器（所有同名元素）

3.类选择器（main,推荐）

### 声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式

## CSS代码书写位置

1. 内部样式表[少可用（200），能提速]

书写在style样式中（最先加载放在head中）

2. 内联样式表,元素样式表[JS有点用]

直接书写在元素的style属性中

3. 外部样式表（main，推荐）[可解决多页面样式重复问题，有利于浏览器缓存从而提高页面响应速度，有利于代码分离更容易阅读和维护]

将样式书写到独立的css文件中