前端用到html css js
html
1.html简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>女神</title>
<style>
.lvmao{
color: greenyellow;
}
</style>
</head>
<body>
<!--html对空格 和tab不敏感 1.空白折叠现象 多个空格和换行会折叠成一个空格-->
<!--
h1~h6
div
span
a
img
ul
li
ol
li
table
form
文本级的标签：h1~h6 独占一行 span:小跨域的标签
-->
<h1>女神开车去西二旗见金老板</h1>
<h2>女神开车去西二旗见金老板</h2>
<h3>女神开车去西二旗见金老板</h3>
<h4>女神开车去西二旗见金老板</h4>
<h5>女神开车去西二旗见金老板</h5>
<h6>女神开车去西二旗见金老板</h6>
女神开车去西二旗见<span class="lvmao">金老板</span>
<span>女神开车去西二旗见金老板1</span><span>女神开车去西二旗见金老板2</span>
</body>
</html>
2. head标签中的相关标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
选择器: 基础选择器 和高级选择器
标签选择器
*/
html{
/*css的继承 只有个别的属性 color font-xxx text-xxx line-**/
color: #fff;
font-size: 14px;
/*text-align: center;*/
}
body{
margin: 0;
}
.top{
100% ;
height: 40px;
background-color: black;
color: #fff;
/*让文本水平居中*/
/*text-align: center;*/
line-height: 40px;
}
.header{
100%;
height: 100px;
background-color: red;
}
.content{
100%;
/*height: 2000px;*/
background-color: mediumpurple;
}
.footer{
100%;
height: 400px;
background-color: grey;
}
/*.hei{*/
/* 100px;*/
/*height: 40px;*/
/*background-color: red;*/
/*overflow: hidden;*/
/*}*/
.container{
1226px;
height: 100%;
/*background-color: transparent;*/
/*让盒子水平居中*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!--
1.独占一行的标签：h1~h6,div
2.在一行内显示的标签：span
-->
<div class="top">
<div class="container">
top黑色区域
</div>
</div>
<div class="header">
<div class="container">
导航区域
</div>
</div>
<div class="content">
<div class="container">
主体内容区域
</div>
</div>
<div class="footer">
<div class="container">
脚后跟
</div>
</div>
</body>
</html>
<!--
h1~h6：标题标签
span
div：division 分割 块区域
a
img
ul
li
ol
li
table
form
-->
3. 超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 14px;
}
body{
margin: 0;
}
a{
text-decoration: none;
}
.top{
100%;
height: 40px;
background-color: #333;
line-height: 40px;
/*color: #b0b0b0;*/
}
.container{
1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto;
}
/*高级选择器 后代选择器*/
.top a{
color: #b0b0b0;
}
.top .sep{
color: #424242;
margin: 0 6px;
}
</style>
</head>
<body>
<!--
1.独占一行的标签：h1~h6,div
2.在一行内显示的标签：span a
-->
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
<a href="#">政企服务</a>
</div>
</div>
</div>
</body>
</html>
4. img浮动标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
100px;
height: 50px;
}
a{
display: inline-block;
200px;
height: 300px;
}
</style>
</head>
<body>
<!--
块级标签： display:block; h1~h6,div
1.独占一行的标签：
2.可以设置宽高 如果不设置宽度 它的宽度是父亲的100%
行内标签：display:inline; span a
1.在一行内显示的标签：
2.不能设置宽高 如果不设置宽高 那么默认是字体的大小
行内块标签：1.在一行内显示 2.可以设置宽高 img input
标签嵌套：
1.行内标签可以包含行内标签
2.行内标签不能包含块级标签
-->
<div class="box">
<span>美女</span>
<a href="#">
<img src="./01.jpg" alt="图片来了" width="200" height="300">
<span></span>
</a>
<img src="./01.jpg" alt="图片来了" width="200">
</div>
</body>
</html>
5. 浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.top{
100%;
height: 40px;
background-color: #333;
line-height: 40px;
/*color: #b0b0b0;*/
}
.container{
1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto;
}
/*高级选择器 后代选择器*/
.top a{
color: #b0b0b0;
}
.top .sep{
color: #424242;
margin: 0 6px;
}
.top-info{
float:left;
}
.top-cart{
float: right;
color: red;
}
.top-login{
float:right;
margin-right: 20px;
200px;
height: 40px;
}
.content {
100%;
}
.content ul li{
float: left;
25%;
height: 300px;
background-color: grey;
}
/*.ttt{*/
/*float:left;*/
/* 100px;*/
/*height: 100px;*/
/*line-height: 100px;*/
/*}*/
</style>
</head>
<body>
<!--
1.独占一行的标签：h1~h6,div
2.在一行内显示的标签：span a
-->
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
<a href="#">政企服务</a>
</div>
<div class="top-cart">购物车</div>
<div class="top-login">
<a href="#">登陆</a>
<span class="sep">|</span>
<a href="#">注册</a>
<span class="sep">|</span>
<a href="#">消息通知</a>
</div>
</div>
</div>
<div class="content">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<!--<span class="ttt">个哈哈哈哈</span>-->
</body>
</html>
6. 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.top{
100%;
height: 40px;
background-color: #333;
line-height: 40px;
/*color: #b0b0b0;*/
}
.container{
1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto;
}
/*高级选择器 后代选择器*/
.top a{
color: #b0b0b0;
}
.top .sep{
color: #424242;
margin: 0 6px;
}
.top-info{
float:left;
}
.top-cart{
float: right;
color: red;
}
.top-login{
float:right;
margin-right: 20px;
200px;
height: 40px;
}
.content {
100%;
}
.content ul .item{
float: left;
25%;
height: 300px;
background-color: grey;
}
.uuu{
100px;
height: 400px;
background-color: red;
}
.clearfix{
clear: both;
}
/*.ttt{*/
/*float:left;*/
/* 100px;*/
/*height: 100px;*/
/*line-height: 100px;*/
/*}*/
</style>
</head>
<body>
<!--
1.独占一行的标签：h1~h6,div
2.在一行内显示的标签：span a
-->
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
<a href="#">政企服务</a>
</div>
<div class="top-cart">购物车</div>
<div class="top-login">
<a href="#">登陆</a>
<span class="sep">|</span>
<a href="#">注册</a>
<span class="sep">|</span>
<a href="#">消息通知</a>
</div>
</div>
</div>
<div class="content">
<div class="container">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<!--内墙法：在最后浮动的元素的后面加一个空的块级标签 设置该标签的属性clear:both;-->
<li class="clearfix"></li>
</ul>
</div>
</div>
<!--<div class="uuu"></div>-->
<!--<span class="ttt">个哈哈哈哈</span>-->
</body>
</html>
7. 伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.top{
100%;
height: 40px;
background-color: #333;
line-height: 40px;
/*color: #b0b0b0;*/
}
.container{
1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto;
}
/*高级选择器 后代选择器*/
.top a{
color: #b0b0b0;
}
.top .sep{
color: #424242;
margin: 0 6px;
}
.top-info{
float:left;
}
.top-cart{
float: right;
color: red;
}
.top-login{
float:right;
margin-right: 20px;
200px;
height: 40px;
}
.content {
100%;
}
.content ul{
overflow: hidden;
}
.content ul .item{
float: left;
25%;
height: 300px;
background-color: grey;
}
.uuu{
100px;
height: 400px;
background-color: red;
}
.clearfix1:after{
content:'.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
<a href="#">政企服务</a>
</div>
<div class="top-cart">购物车</div>
<div class="top-login">
<a href="#">登陆</a>
<span class="sep">|</span>
<a href="#">注册</a>
<span class="sep">|</span>
<a href="#">消息通知</a>
</div>
</div>
</div>
<div class="content">
<div class="container">
<ul class="clearfix">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
</div>
</div>
<!--<div class="uuu"></div>-->
<!--<span class="ttt">个哈哈哈哈</span>-->
</body>
</html>
8.计算盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
180px;
height: 180px;
background-color: green;
/*padding: 20px;*/
padding-top: 20px;
padding-left: 20px;
/*border: 1px double red;*/
/*如果保持盒模型不变，加padding，就要减内容的宽高*/
border-radius: 5px ;
/*margin垂直方向会出现塌陷问题，避免问题的问题只设置一个标准文档流的盒子的垂直方向的margin*/
margin-bottom: 100px;
/*盒子的宽度= 内容的宽度+ 2*padding + 2*border*/
}
.box2{
100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box">alex</div>
<div class="box2">wusir</div>
</body>
</html>
9. 表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
https://www.baidu.com/s?wd=%E8%B7%AF%E9%A3%9E%E5%AD%A6%E5gB6Wq%2F50ARfE%2BYyM
https://www.baidu.com/s?wd=%E8%B7%AF%E9%A3%9E%E5%AD%A6%E5%9F%8E
server
bind(127.0.0.1,8080)
http://127.0.0.1:8080
-->
<form action="https://www.baidu.com/s" ="get">
<input type="text" name="wd" value="路飞学城">
<br>
<input type="submit">
</form>
</body>
</html>