HTML和css的基础知识

一，HTML

1.HTML和CSS概述？

HTML:W3C定义，HTML全称hyper text markup language用用于与定义文档的内容结构.

中文全称：超文本标记语言

CSS：全称cascading style sheets 页面表现的基础，可以控制布局，控制元素的渲染.用于定义HTML的文档样式（外观.）.

中文全称：层叠样式表

index（文00件名.自定义）. 分隔符（必须是英文状态下的点）  HTML 扩展名（文件类型）

2.HTML术语

HTML注释的书写格式

‘’HTML注释主要用于描述代码功能  ctrl+？注释

‘’浏览器解析HTML代码是会忽略注释内容

空元素<meta charset=“UTF-8“><img src="/asset/img/default/lazyload_class.png"alt=”编程入门基础班”>   

没有元素内容和结束标记

元素的层次结构：如果一个元素的内容中可以包含其他元素形成嵌套的层次结构

.注：元素与元素之间必须正常嵌套，不能交叉嵌套.

img元素没有元素内容和结束标记

src是图片地址

alt的功能是为了提升用户体验。当src的地址写错，或者引用了不存在的图片

3.语义化标签

div区域含义

在HTML5出现之前，一直使用div来换分面区域

但div无法明确表示该区域的内容含义

div是无语义（区域，区块）

为了能够实现，div带有一定的含义，我们在其上面添加了注释，但只解决了开发者和维护者的问题.HTML代码还是要给浏览器看，但浏览器会忽略注释内容

10个div对于浏览器来说.10个区域都是一个含义

DOCTYPE 文本类型.告诉浏览器用什么样的模式去解析

标记分类《块级元素》

《行内元素》

 语义化标签和页面布局

4.什么是HTML元素？

div元素

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

语义化结构元素.

header（用于表示页面或某个区域的头部）

nav（用于表示导航栏）

aside（用于表示跟周围主题相关的附加信息）

article（用于表示文章或其它可独立页面存在的内容）

section（用于表示一个整体的一部分主题）

footer（用于表示页面或某个区域的脚注）

a.所有内容在一个固定的区域展示

b.这个区域，是水平向上居中。

c.没划分一个区域，就要用一个标签进行位置的占用。注；占用（页面的尺寸） 尺寸代表当前标签的宽度和高度

5.引入css的方式

.外部样式表

.内部样式表.

.内联样式表..

.

7.元素选择器 ：标记名{/*声明块*/}

类选择器：.类名{声明块}

id选择器：#id值{声明块}

二.css术语

1.css注释

css注释的书写格式：/*注释内容*/  ctrl+？

a.css注释主要用于描述代码功能

b.浏览器解析css代码时会忽略注释内容

/*将一级标题的颜色设为红色，文字居中*/

举例：h1{color：red；text-align：center；}   

 2.css规则

h1是选择器：该样式规则应用到那些元素上

{color：red；text-align：center；}   声明块：有哪些样式规则

css又一个一个的规则组成.

.每个规则指定了：对那哪一些元素应用什么样式.

..规则：由选择器和声明块组成.

4.选择器

该样式规则应用到哪些元素上.《常用的：元素选择器，类选择器.id》

1.元素选择器 2.类选择器。3.id选择器

A.元素选择器的书写格式：标记名{/*声明块*/}

所有与该标记名匹配的元素，都将应用声明块中的规则

4.1什么是复合选择器？.

.复合选择器是将已有的选择器通过不同的方式进行组合从而的到新的选择器.

.后代选择器.空格为分隔符.选择某个父元素所有的后代元素.

.div p{

.子元素选择器.大于符号作为分隔符.选择某个父元素所有的后代元素.

Div>p{}

.兄弟选择器.加号作为分隔符.选择紧跟在某个元素后面的兄弟元素.

Div+p{}

.多元素选择器.逗号作为分隔符，逗号左右两边的元素都被选择.

Div，p{}

4.2权重选择器

每个选择器都有自己的权重，组合选择器的权重级别是由不同的选择器权重相加计算的.

b.选择器权重值不会满十进一.

c.如果两个选择器同时作用在一个元素上权重高者生效.

D.   ！Important>style>id>class>元素>*

？》

5.声明块：有哪些样式规则..

height高度：1200px

width宽度：108px

如何让一个块级元素在水平方向上居中

快级元素：main，div，语义化标签

step1.给一个固定宽度

step2.margin：auto；

尺寸单位：px em  rem  %

二.常用的属性

.px 像素单位   em《相对于当前元素字体大小》 主要用于首行缩进的单位.

声明块：1.文本：text-align:left（right）（center）文本向左右居中对齐.

文本缩进  text-indent：2em；

文本修饰  text-decoration：none；（去掉下划线修饰）

               text-decoration：underline（文本加下划线）

text-decoration：overline（文本顶线修饰）

text-decoration：line-through（文本加删除线修饰）

2.字体

font-size字体大小

font-weight字体加粗

font-style ：italic字体倾斜

3.长度

相对长度单位是px

.rem的根元素是body..可以通过该body的font-size来更改默认浏览器字体的大小.具有继承性.

Vw{viewpoint}值得是视窗的宽度.1vw=视窗宽度的1%.

Vh

4.文本

.letter-spacing 更改字符间距.

.word-spacing更改词间距.连续的中文无效

.text-direction设置文本的线装饰.

.text-indent.设置文本首行缩进.

.text-transform控制元素中的字母.

.text-shadow设置文本中的阴影效果.

.text-height更改行高.

.插入多张背景图片使用逗号分隔.

5.背景的简写属性.

.  Background：background-color background-image background-repeat background-attachment background-position；

可以忽略其中一个或多个无需设置的属性值.

.background-size设置背景图的大小.

.background-origin更改背景图的原点

.background-clip 用来定义背景图的剪裁区域.

.background-color背景颜色.

.background-image用来为元素插入背景图片.

.background-position用来控制背景图片的显示位置.

.background-repeat用来设置图片的平铺方式.

.background-attachment可以控制背景图片不随页面滚动而滚动.

6.flex弹性盒模型

什么是容器？（父元素）

容器装东西.（元素标签）

A容器，装了一个B元素

1.什么是项目？

2.什么是主轴？

默认情况下，就是水平方向（x轴）

水平方向对齐方式：左中右

3.什么是交叉轴？

默认情况下，就是垂直方向（y轴）

垂直方向上对齐方式：上中下

7.如何创建flex标签.

当一个标签，添加了display;flex；当前标签就是容器

默认情况：所有子元素都在一行显示.如果所有项目尺寸超过了容器也不会进行超出展示.每个项目会自动缩小.

[扩展；display]功能：标签显示方式.

8.FLEX-direction属性决定主轴的方向

flex-direction：row row-reverse 倒序.column.column-reverse

top上   bottom下  right  右 left 左  row  行  column 列 center 中

9.项目是否换行.

条件：所有项目宽度之和要大于容器的宽度

flex-wrap项目是否换行

取值: wrap换行   onwrap不换行.然后在 wrap-reverse进行倒序展示..设置元素超出范围时是否换行..

9.（容器属性）

justify-content.设置主轴方向的对齐方式

flex-start左对齐   

flex-end右对齐

flex-around 两端对齐，起始元素左边的距离和结束元素的距离

flex-between两端对齐.距离相对.

flex-center

交叉轴对齐.

align-items：center

10.浮动“

.在HTML标记中，分了块级标记和行内标记.

.标准文档流：在没有css的干扰下块级元素独占一行.行内标记并排.显示，直到父级宽度的终点换行.

.浮动属性float

.float：left

Float：right

.脱离标准文档流，让块级标记表现和行内标记，行内块标记一样水平展示

.清除浮动属性clear.

.clear：left

..clear：both.

用来规定元素的那一侧不允许其他元素浮动.