html css一排四个,html_css

前端技术

第一章 前端介绍

第1节 什么是前端

前端即网站的前台部分，运行在PC端，移动端等浏览器或者APP上，展现给用户浏览的网页。

​

​

前端与后台是相对的前端是展示给用户并且和用户进行交互的客户端有app或者浏览器后台又称为服务器端进行数据处理，存储，业务逻辑等.

第2节 前端的开发流程

​

​

第3节 页面的组成结构

结构

HTML用于描述页面的结构

表现

CSS用于控制页面中元素的样式

行为

JavaScript用于响应用户操作

第4节 页面的描述

结构

​

​

表现

​

​

行为

​

​

第二章 HTML标签(结构)

第1节 HTML简介

HyperText Markup Language

超文本标记语言

Html通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)

第2节 网页的基本结构

​

: 版本的声明,当前是html5版本

html标签: 网页的根标签,所有其它的标签都被html包含

head头部标签: 网页的配置信息

:字符集(编码的设置)

​

为搜索引擎提供的关键字列表：各关键词间用英文逗号","隔开

Description用来告诉搜索引擎你的网站主要内容

​

第3节 body标签

主体标签: 所有的显示效果的标签和内容都被body包含

第4节 HTML标签基本结构

开始标签，结束标签

自闭和标签

第5节 标签的语法

标签由英文尖括号括起来，如就是一个标签

html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

内嵌套

，那么

必须放在

的前面

HTML标签不区分大小写

和

是一样的，但建议小写，因为大部分程序员都以小写为准

第6节 语义化，让你的网页更好的被搜索引擎理解

标签的用途:我们学习网页制作时，常常会听到一个词，"语义化"。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途(在什么情况下使用此标签合理)比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

第7节 常用标签

标题 h1~h6

标题一

标题二

标题三

标题四

标题五

标题六

段落 p

这是一个段落

强调/加强语气  strong  或 em

em:强调->默认是斜体  strong：更强烈的强调 ->粗体

强调

强烈的强调

换行 br

分隔线 hr

---

联系地址 address

北京市,沙河区,北科

添加一行代码 code

一行代码

添加一段代码 pre

多行代码

给文本增加样式的标签 span

文本

短引用文本 q

短引用文本

长引用 blockquote

常引用

无序列表 ul + li

无序列表1

无序列表2

无序列表3

无序列表4

有序列表 ol + li

有序列表1

有序列表2

有序列表3

有序列表4

布局标签 div

表格标签 table

ID

名字

年龄

1001

李雷

18

链接 a

发送

图片 img

表单标签 form 输入框 input

文本域 textarea

下拉列表 select + option

提交/重置按钮/lable标签

性别:

男

女

兴趣:

篮球

足球

台球

邮箱

描述

地址

北京

上海

天津

南京

第8节 转义字符

​

​

第三章 CSS (表现)

第1节 CSS简介

1.1 CSS全称为“层叠样式表”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等

1.2 CSS的代码语法

选择器｛属性：值;属性:值….. ｝

​

​

第2节 CSS基本知识

内联式CSS样式:直接写在html标签中

嵌入式CSS样式:写在当前文件中

p{

color:red;

}

外部式CSS样式:写一个单独的文件中

第3节 CSS的选择器

什么是选择器?

每一条css样式声明(定义)由两部分组成

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

选择器的分类?

1、标签选择器                               p{}

2、类选择器                                 .claa{}

3、ID选择器 (全局唯一)                      #id{}

4、子选择器 > (表示第一代子元素)          #id>p{} 如果没有>直接是空格的话就是后代所有的元素   #id p{}

5、通用选择器 *   *{}

6、伪类选择器 :hover                        p:hover{}

7、分组选择器 h1,h2,p                       h1,h2,p{}

​

第4节 CSS的继承、层叠和特殊性

继承性

ppppp

权值

1、标签的权值为1

2、类选择符的权值为10

3、ID选择符的权值最高为100

如果样式作用在一个标签上,根据权值来应用使用哪个样式(应用权值高的)

p{color:red;}

.first{color:green;}

三年级时，我还是一个胆小如鼠的小女孩。

层叠

当作用在同一个标签上的样式权值相同时,那么后面的样式会生效

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)

重要性  !important

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决

p{color:red!important;}

p{color:green;}

​

三年级时，我还是一个胆小如鼠的小女孩。

第5节 CSS样式格式化排版

文字—字体:

font-family: "microsoft yahei";

font-family: "微软雅黑";

文字—字号颜色:

font-size: 12px;

color: #FF0000;

文字—粗体:

font-weight: bold;

文字—斜体:

font-style: italic;

文字-下划线

text-decoration: underline;

文字-删除线

text-decoration: line-through;

段落-缩进

text-indent: 2em;

段落-行间距(行高)

line-height: 1.5em;

段落-中文字间距、字母间距

1、letter-spacing:50px;    中文或者是英文字母之间的间距

2、word-spacing:50px;     英文单词之间的间距

段落-对齐

text-align: center;为内联元素中的文本或者图片设置居中

第6节 元素分类

块状元素

、

、

~

、

1. 、

• 、

、

、

内联元素

、、
、、、

、

块状内联元素

、

第7节 CSS盒模型

盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系(用于前端布局)

​

​

​

​

第8节 CSS的布局

布局模型

1、流动模型(Flow)

流动模型，流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML网页元素都是根据流动模型来分布网页内容的

​

流动模型的特点

1、块状元素独占一行

2、内联元素不会独占一行而是从左向右排列

2、浮动模型(Float)

正常情况下块状元素独占一行,那么怎么能让块状元素并排显示呢?这时候就用到了浮动模型

​

实现浮动的css属性

float:left|right

​

高度塌陷问题处理

clear：left | right | both;

​

​

​

​

3、层模型(Layer)

层模型的三种形式?

1、绝对定位(position: absolute)

div{

width: 200px;

height: 200px;

border: 2px red solid;

position: absolute;

left: 100px;

top: 100px;

}

2、相对定位(position: relative)

div{

width: 200px;

height: 200px;

border: 2px red solid;

position: relative;

left: 100px;

top: 100px;

}

3、固定定位(position: fixed)

div{

width: 200px;

height: 200px;

border: 2px red solid;

position: fixed;

left: 100px;

top: 100px;

}

​

4、Relative与Absolute组合使用

​

​

#box1{

width: 200px;

height: 200px;

position: relative;

}

#box2{

width: 100px;

height: 100px;

position: absolute;

left: 20px;

top: 20px;

}

​

​

​

第9节 单位和值

颜色值

1、英文命令颜色

p{color:red;}

2、RGB颜色

p{color:rgb(133,45,200);}

3、十六进制颜色

p{color:#00ffff;}

​

​

​

长度值 :长度单位总结一下，目前比较常用到px(像素)、em、% 百分比

1、像素 px

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；

如果 font-size 为 18px，那么 1em = 18px上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)

​

​

​

​

​

第10节 CSS样式设置小技巧

水平居中设置-行内元素

被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的

水平居中设置-定宽块状元素

定宽块状元素,设置自身为 margin-left：auto；margin-right:auto

水平居中设置-不定宽块状元素

.container{

text-align: center;

}

.container>ul{

display: inline;

}

​

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height 高度一致来实现的

​

Hi 千锋教育

​

.container{

background-color: red;

height: 50px;

line-height: 50px;

}

垂直居中-父元素高度确定的多行文本

Hi 千锋教育

Hi 千锋教育

Hi 千锋教育

Hi 千锋教育

Hi 千锋教育

​

.container{

background-color: red;

height: 500px;

display: table-cell;

vertical-align: middle;

}

隐性改变display类型

隐藏标签

PPPPPPPPP

块状元素和非块状元素相互转换

display: inline

​

​

第11节 Flex弹性盒子模型布局

布局的传统解决方案，基于盒状模型，依赖  display  属性 +  position  属性 +  float  属性。它对有些特殊布局非常不方便.2009年，W3C 提出了一种新的方案  Flex  布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

① Flex布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局.

.box{

display: flex;

}

Webkit 内核的浏览器，必须加上-webkit前缀(这是兼容老版本浏览器的写法)

.box{

display: -webkit-flex; /* Safari,chrome */

display: flex;

}

注意: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

② 基本概念

采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”。

​

​

容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

③ 容器的属性

以下6个属性设置在容器上。

​

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

​

[1] flex-direction属性flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

​

​

它可能有4个值

row(默认值)：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

[2] flex-wrap属性默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，如果一条轴线排不下，如何换行.

​

​

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}

​

它可能取三个值。

nowrap(默认)：不换行。

​

​

wrap：换行，第一行在上方。

​

​

wrap-reverse：换行，第一行在下方。

​

​

[3] flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {

flex-flow: ;

}

[4] justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;

}

​

​

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start(默认值)：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

[5] align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {

align-items: flex-start | flex-end | center | baseline | stretch;

}

​

​

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。

[6] align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

​

​

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值)：轴线占满整个交叉轴

​

​

第12节 前端布局

一列布局

二列布局

三列布局

混合布局

第13节 其他常用前端属性介绍(小栗子练习)

设置圆角

border-radius: 3px;

取消a标签的默认下划线

text-decoration: none;

取消无序列表的点

list-style: none;

取消input的边框以及焦点

outline: none;

border: none;

​

​

原型地址:

https://www.xiaopiu.com/web/byId?type=project&id=5d6a109262ad1e4d5efc56f6