<!--前端总结 -->
一,基础标签
1.html ---->hyperText markup language超文本标记语言
2.<html></html> 根标签
<head>设置浏览器特性</head> ,<body>展示给用户</body>结构化标签
3.编码字符集:gb2312(不识别繁体)gbk(识别繁体),unicode万国码,UTF-8万国码升级版
4.lang="en" :告诉搜索引擎爬虫,我们的网站是关于什么内容的。方便抓取我们的网站。
5.
<p></p>段落标签
<h1></h1>标题标签;分行,加粗,更改字体
<em>斜体</em>
<del>中间划线</del>
<address></address>地址标签:斜体,分行
<div style="color:#f40">
<em>q</em>
<strong>fad</strong>
<p>djfl</p>
</div>
<span></span>
容器: 结构化,绑定化操作
二,高级标签
1.
<br>换行符
<hr>水平线
2.有序列表:ol>li
<ol type="" reversed="">列表架
<ol type="1" start="2">
列表项
<li></li>
</ol>
3.无序列表:ul>li
<ul type="circle">
....
</ul>
list-style:none;
4.<img src="图片资源地址(网上的url,本机的路径" alt="这是图片"title="图片提示符">
5.<a href="网站地址">给用户看的</a>hyperText refercence超文本引用
超链接,锚点,打电话发邮件,协议限定符
<!-- a表现做锚点 -->
<div id="demo1" style="height:10px;width:100px;backgrond-color:green">demo1</div>
<br>*100
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
<div id="demo2" style="height:100px;width:100px;background-color:red;">demo2</div>
<a href=""></a>
6.
<form method="GET" action="发送给谁">
<input type="text" name="username" >输入框
<input type="password" name="password">密码框
<input type="submit" value="login">
明星
aa<input type="radio" name="star" value="xiaoa">单选框;
bb<input type="radio" name="star" value="xiaob">
cc<input type="radio" name="star" value="xiaoc">
<input type="sumbit">
<input type="checkbox" name=".." value=".." checked="checked">复选框
<h1>Province</h1>下拉菜单
<select name="province" >
<option value="aa">bj</option>
<option value="bb">sh</option>
<option value="cc">tj</option>
</select>
</form>把前端的数据发送给后端
课时4 css引入
1. 主流浏览器
shell外壳 内核
IE trident
Firefox Gecko
Google chrome Webkit/blink
Safari Webkit
Opera presto
2.CSS ---> cascading style sheet 层叠样式表
3.引入
行间样式<div style="width:20px...."></div>,页面级,外部引入
4. 选择器
id选择器 #name{}
class选择器.name{}
标签选择器span{}
通配符选择器*{}
!important;直接写语句后面
5.css权重 256禁止
!important Infintity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
课时五 css复杂选择器
1.父子选择器/派生选择器 div em{} .name1 .name2{}
2.直接子元素选择器 div>em{}
3.并列选择器 用多个限制条件选择一个元素且中间不加空格
4.分组选择器 em, p, div{}
div[class="name"]
5浏览器默认字体大小font-size:16px;
www.cs88。
6.设置字体
font-size:16px;大小
font-weight:bold;加粗
font-style:italic;斜体
font-family:arial/cursive;字体(英/楷)
Color:#ff4400; rgb(255,255,255);
border :10px solid black;复合属性(border-width:10px border-style:solid)
border-top-color:
7.画三角形
一个div设置width:0px;height=0px;
border:100px;
border-top/right/bottom-color:transform
border-left-color:black;
课时六
1.text-align:center/left/right;对齐方式
line-height:16px;单行文本所在高度
文本垂直居中方式:line-height=容器高度;
文本水平居中方式:text-align:center;
text-indent:2em;1em表示一个字体的宽度高度
text-decoration:underline/line-through/overline/none
2.cursor:help/pointer鼠标触碰
3.伪类选择器
a:hover{...}
4.行级元素:inline
span,strong,em,a,del,伪元素
内容决定元素所在位置
不可以通过css改变宽高
块级元素:block
div,p,ul,ol,form,address
独占一行
可以通过css改变宽高
行级块元素 inline-block;
img
内容决定大小
可以改变宽高
凡是带有inline属性的元素都有文字特性(有间隙)
5.*{
margin:0;
padding:0;
}
6.盒子的组成部分:
盒子边框border
内边距 padding里面不能写文本,能设背景颜色/图片
盒子内容 width+height;
div:margin+border+padding+(content)
一盒子居中于一盒子:两个div一样大,外层盒子的设置padding即可
body默认的margin:8px;
7.定位position
absolute:脱离原来的层定位(其他人可以用它之前的位置)
相对于最近的定位的父级定位,没有就相对于文档定位
relative:保留原来位置进行定位(别人不能用它之前位置)
一般relative为参照物,position定位
fixed固定定位(广告定位)
块级元素在页面内居中:
div{
position:absolute;
left:50%;取文档的宽度
top:50%; 高度
height:100px;
width:100px;
background-color:red;
margin-left:1/2的div宽度50px;
margin-top:1/2的div高度50px;
}
课时七:margin的bug解决
1. margin塌陷:父子垂直方向的margin粘合一起取最大值
解决方式:bfc--->block format context 块级格式化上下文
如何促发一个盒子的bfc
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
2.margin合并:两个兄弟结构的元素,垂直方向的margin是合并的
把元素放入bfc环境里
3.盒模型/层模型/浮动模型
float:left/right:让元素排队
浮动元素产生了浮动流,块级元素看不到他们
产生了bfc的元素和文本类属性元素(inline)和浮动元素都能看到他们。
clear:both;清除周围的浮动流;只有在块级元素才能生效
课时九
1.伪元素:可以当元素操所,但是没有html结构
实现父级(块级元素)包住浮动元素:操作父级的伪元素
span::after{
content:"";
clear:both;
display:block;
}
2.设置成position:absolute;float:left/right打内部把元素转换成inline-block;
课时十:
1.溢出容器,打点展示
p{//单行
white-space:nowrap;强制不换行
overflow:hidden;
text-overflow:ellipsis;溢出部分...显示
}
p{//多行
height:40px;
line-height:20px;保证容器内刚好装满
overflow:hidden;之后手动打...
}
2.图片代替文字:
{
text-indent:190px;首行缩进图片宽度
white-space:hidden;
overflow:hidden
}
{
width:190px;
height:0px;
padding-top:90px;
overflow:hidden;
}
行级元素只能嵌套行级元素
块级元素能嵌套任何元素
p标签不能套块级元素,a标签里不能套a标签
课时十一
1.div.wraper>div.content
.content{
margin:0px;auto;
}
文本类元素底对齐
vertical-align:num/middle对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">页面级
.div{
}
</style>
<link rel="stylesheet" href="lesson.css">外部css文件
</head>
<body>
</body>
</html>