HTML
头部标签:
DOCTYPE:
是(文档类型)的缩写,他是网页必备的组成部分,避免浏览器怪异模式。
<!DOCTYPE html>
head
标签
body
标签
title
标签:网页名称,title的增加有利于SEO优化
meta
单标签
<meat charset="utf-8">
基本标签:
标题h1-h6
一级到六级标题
在标签中增加属性:align="left|center|right"
表示标题左中右
段落<p align="right">段落标签</p>
换行:<br>
水平线<hr>
四个属性<hr color="red" width="300px" size="20px" align="right">
默认居中
标签之图片img:
<img src="" alt="" width(宽度)="" height(高度)="" title(鼠标悬停给提示)="" >
一般只规定宽度,不规定高度
图片路径
绝对路径:完整路径
相对路径:
子级关系:/
父级关系:../
同级关系: ./
网络路径:具体的网络地址
超文本链接a:
<a href="https://www.baidu.com">内容</a>
文本标签:em/b/i/strong/del/span
标签 描述
<em> 定义着重文字
<b> 定义粗体文本
<i> 定义斜体
<strong> 定义加重语气
<del> 定义删除字
<span> 元素没有特点
列表标签ol/li:
有序列表:
能够嵌套
<ol type="1/a/A/i/l">
<li>第一行</li>
<li>第二行</li>
</ol>
无序列表ul/li:
能够嵌套
<ul type="disc实心圆/circle空心圆/square小方块/none不显示 ">//默认为实心圆
<li>第一个无序列表</li>
<li>第二个</li>
</ul>
快捷键:ul>li*3
表格table/tr/td:
标签:
行:
单元格(列):
表格属性:
border: 设置表格的边框
width:设置表格的宽度,表格整个宽度
height:设置表格的高度,表格整个高度table>tr*2>td*2 <table border="1" width="400px" height="400px"> </table>
快捷键:
table>tr*2>td*3{单元格}
表格单元格合并:水平合并:colspan
垂直合并:rowspan<table> <tr> 如果合并单元格1和2: <td colspan="2">单元格1和单元格2</td> <--<td>单元格2</td> > <td>单元格3</td> </tr> </table>
水平合并保留左边删除右边
垂直合并保留上,删除下
Form表单:
表单是由容器和控件组成,一个表单一般应该包含用户填写信息的输入框、按钮等,这些输入框,按钮叫做控件,表单就是容器,他能容纳各种各样的控件
属性:
action: 服务器地址,填url
name:表单名称
method中Get和Post的区别:
1、数据提交方式,get把提交的数据url可以看到,post看不到
2、get一般用于提交少量数据,Post用来提交大量数据表单元素:表单标签、表单域、表单按钮
text、password、submit。三种最常用的表单元素,分别为文本、密码、提交按钮
<form>
账号:<input type="text">文本域
密码:<input type="password">
确定<input type="submit" value="登录">按钮
</form>
块元素与行内元素(内联元素)
内联元素和块元素的区别:
块元素会在页面中独占一行,内联不独占一行,只占自身大小
可以设置width,height属性,内联不能
一般块级元素可以包含行内元素和其他块级元素
内联只包含内联,不能包含块级元素!常见块级元素:
div、form、h1·h6、hr、p、table、ul等
常见内联(行内)元素:
a、b、em、i、span、strong等
行内块级元素(特点:不换行、能够识别宽高):
button、img、input
div标签:容器元素
H5新标签:
<header></header>头部 <nav></nav>导航 <section></section>定义文档中的节,比如章节,页眉,页脚 <aside></aside>侧边栏 <footer></footer>脚部 <article></article>代表一个独立的、完整的相关内容块,例如一片论坛帖子,一篇文章,一个用户的评论!
CSS:
层叠样式表:
又叫级联样式表,简称样式表,使网页变得美观一致
语法: 在头部添加
<style>
h3{
color:blue;
font-size:30px;
}
</style>
三种引入样式的方法:
内联(行内)样式、内部样式、外部样式(引入css文件)
外部样式需要在头部引入
<link rel="stylesheet" type="text/css" href="xxx.css"
选择器*/元素/.:
全局选择器:
可以与任何元素匹配,优先级最低,一般做样式初始化
*{
margin: 0;
padding: 0;
}
元素选择器:
p{
font-size: 14px;
}
类选择器:ccc是class的值
.ccc{
color:red;
}
一种写法
<p class="classone size">
这个class可以有两个值
</p>
ID选择器:
id属性在style中是通过#来索引的,id是唯一的,不能重复
<h2 id="mytitle">你好</h2>
在css中:
#mytitle{
属性内容!
}
合并选择器:
作用:提取共同的样式,减少重复的代码
<style>
p,h3{
font-size:30px;
color:red;
}
</style>
选择器的优先级:
css中,权重用数字衡量
元素选择器权重为:1
class权重为:10
id权重为:100
内联(行内)样式权重为:1000
同级别下按照代码执行顺序,后执行的生效!
字体属性:
规定文本的颜色:color
div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,5);}
字体大小font-size
:
最小字体为12px
文本的粗细font-weight
:
值 bold
,bolder
,lighter
,100-900定义由细到粗400等于默认,700等于bold
文本的样式font-style
:
normal
默认值/italic
定义斜体字
字体类型:font-family:
"微软雅黑"
背景属性:
background-color :设置背景颜色
background-image :设置背景图片
background-image: url(" 图片位置")
设置如何平铺背景图像:background-repeat
repeat : 默认值
repeat-x :只向竖屏方向平铺
repeat-y :只向垂直方向平铺
no-repeat :不平铺
background-position : 设置背景图片显示位置
默认值:0% 0%
left top左上角
left center 左 中
left bottom左下
right top 右上角right center 右中
right bottom右下
center top 中上
center center中中
center bottom 中下
x% y% 第一个水平位置,第二个垂直位置,左上角是0% 0%,右下角是100% 100%,如果只指定了一个值,其他值默认50%。
xpos ypos 单位是像素
background-repeat:设置背景图片如何填充
background-sizie : 设置背景图片大小属性
length:
设置图片的宽度和高度,第一个宽度值,第二个高度,如果只设置一个,第二个值auto
percentage:
计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只设置一个,第二个值auto
cover:
保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小,切割图片使用率最高。
contain:
保持图片纵横比并将图片缩放成完全覆盖背景区域的最大大小 ,不切割图片
文本属性:
文本放置位置:
text-align:
left :文本居左排序,默认值
right:把文本排列到右边
center:把文本排列到中间
为文本添加下划线、上划线、删除线!
text-decoration:
underline:定义下划线
overline:定义上划线
line-through:定义删除线
控制文本大小写
text-transform:
captialize:定义每个单词开头大写
uppercase:全部字母大写
lowercase:全部字母小写
文本块中首行缩进
text-indent:
参数为:负数到整数px
表格属性:
border: 1px solid red;
第一个参数表格线的粗细,第二个参数是线的类型,第三个参数是线的颜色!
border-collapse:
设置表格的边框是否被折叠成一个单一的边框隔开。
collapse折叠效果
width和height:
表格宽度和高度
属性为数字+px
text-align:
设置水平对齐方式
td{text-align:right}一般给td加left、center、right
vertical-align:
垂直对齐方式
top居上
center居中
bott0m居下
padding:给td加,也就是内边距!!!
可以不用上面的文字对齐方式,非常方便
padding : 15px;
表格颜色:
th元素的文本和背景颜色
background-color:#颜色;背景颜色设置
color:#颜色; 设置表格内字体颜色
关系选择器
后代选择器
E F{}选择所有被E元素包含的F元素,中间用空格隔开
子代选择器
E>F{}//选择所有作为E元素的直接子元素F,对更深一层元素不起作用
相邻兄弟选择器
E+F{}//选择紧跟E元素后的F元素,用加好表示
通用兄弟选择器
E~F{}//选择E元素之后的所有兄弟元素F,作用于多元素
CSS盒子模型(Box Modle)
padding:内边距
如果是一个值,那么久上下左右都是那么大
如果是两个值,第一个值是上下,第二个值是左右边框距离
margin:外边距
border:边框
在外边距里面,在内边距外边,
第一个值是边框的粗细,第二个值是边框线的类型,第三个值是颜色
border: 5px solid blue;
还可以用
padding-left/right/top/bottom
这种设置,分别设置边距的上下左右。
外边距margin、边框:border、内边距:padding、实际内容:content
弹性盒子模型:
主要针对于一个大盒子内的很多小盒子如何摆放
弹性盒子模型由弹性容器和弹性子元素组成。
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
默认弹性盒子里的内容是横向摆放
display: flex;//开启弹性盒子
<head>
<title>我的第一个网页!</title>
<meta>
<style>
.container{
width: 500px;
height: 500px;
background-color: #555;
display: flex;/*开启弹性盒子*/
}
.box1{
width:100px;
height:100px;
background-color:black;
}
.box2{
width:100px;
height:100px;
background-color:blue;
}
.box3{
width:100px;
height:100px;
background-color:aqua;
}
</style>
</head>
<body>
<div class = "container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
flex-directio子元素排列顺序
指定弹性子元素在父容器中的位置
row:横向从左到右排列,默认的排列方式
row-reverse:反转横向排列,使用率低
column:纵向排列
column-reverse:反向纵向排列,使用率低
justify-content
垂直方向上盒子摆放的位置:分为上中下
flex-start
:弹性项目向行头紧挨着填充。默认值
flex-end
:弹性项目向行尾紧挨着天秤宫。
center
:弹性项目居中紧挨着填充。
align-items
水平方向上子盒子的摆放对齐方式,也是分为左中右三个,与上面一直
flex-start:默认值
flex-end
center
子元素上的属性:
flex-grow/flex
两种写法都可以
根据台女星盒子元素所设置的扩展因子作为比率来分配剩余空间,默认值位0,即如果存在剩余空间,也不放大。
里面填数字,设置这个属性之后,宽度就不再生效了,这个属性优先级大于宽度
文档流
定义:
标准流会出现的问题:高矮不齐,底边对齐、空格折叠、元素无间隙
脱离文档流:
使一个元素脱离标准文档流有三种方式
1、浮动、2、绝对定位、3、固定定位
浮动
float属性定义元素在哪个方向浮动,任何元素都可以浮动
浮动的原理:
浮动以后使元素脱离了文档流
浮动只有左右非能动,没有上下浮动
float:left/right
清楚浮动:
浮动副作用:浮动元素会造成父元素高度塌陷
后续元素会受到影响