1. form标签:
<!--form标签-->
<form action="http://127.0.0.1:8001"> <!-- 将内容提交到action对应的网址 -->
<label for="11">账号:
<input type="text" name="username" id="11">
</label>
<label for="22">密码:
<input type="password" name="password" id="22">
</label>
<br>
性别:
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
<br>
爱好 <!--input type='radio'或者'checkbox' 那么value属性必须写，才能提交正常数据-->
<input type="checkbox" name="hobby" value="1">running
<input type="checkbox" name="hobby" value="2" checked>walking
<input type="checkbox" name="hobby" value="3">shopping
<br>
城市 <!--select标签，name属性要写，value属性如果没写，那么提交的是选择的option标签内部的文本内容，但是不符合我们的实际开发场景，所以value属性必须写-->
<select name="city" id="" >
<option value="1" selected>上海</option>
<option value="2">北京</option>
<option value="3">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
2. CSS引入HTML: 三种方式
<!-- 选择器{css属性名称:属性值;css属性名称:属性值;} -->
<style>
div{
color:blue;
font-size: 40px;
}
</style>
</head>
<body>
<div>
今天是个雨天
</div>
<h1>
明天是个晴天
</h1>
外部文件引入 工作中常用的
创建一个css文件,stylesheet文件,比如test.css文件
里面写上以下代码
div{
/* css注释 */
200px;
height: 200px;
background-color: red;
}
在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径
内联样式:
<div style="background-color: red;height: 100px; 100px;"></div>
3. 元素选择器: 三种
<style>
/* 基本选择器 */
/* 第一种,元素选择器，标签名称 */
div{
color:blue;}
/* 第二种,类选择器 .类值* /
.d1{
background-color: green;}
/* 第三种,id选择器 #id值* /
#h11{
background-color: red;}
</style>
</head>
<body>
<div class="d1">
今天是个雨天
</div>
<h1 id="h11">
明天是个晴天
</h1>
<div>
倾盆大雨
</div>
<div>
电闪雷鸣
</div>
4. 属性选择器:
<style>
/* 属性选择器,可以给自定义的属性加样式*/
[aa="dd"]{
color:red;
}
</style>
</head>
<body>
<div class="d1" aa="dd">
今天是个雨天
</div>
5. 后代选择器:
<style>
/* 后代 写法，选择器 选择器 选择器 ...*/
.d1 .s1{
color:red;
}
</style>
</head>
<body>
<div class="d1" aa="dd">
<p class="c1">
<span class="s1">
这是个雨天
</span>
<span class="s2">
明天是晴天
</span>
</p>
6. 组合选择器: 用逗号连接
<style>
/* 组合选择器,用逗号连接 */
.d1 .s1,.d2 span{
background-color: green;
}
</style>
</head>
<body>
<div class="d1" aa="dd">
<p class="c1">
<span class="s1">
这是个雨天
</span>
<span class="s2">
明天是晴天
</span>
</p>
</div>
<div class="d2">
<span class="s3">
这个夏天很奇怪
</span>
</div>
7. 基本样式设置:
(1) 高度宽度: 也可以设置百分比,会按照父级标签的高度宽度来计算
高度: height
宽度: width
块级标签可以设置高度宽度，即便设置了宽度，还是霸占一整行
内敛标签不能设置高度宽度，内敛标签的高度宽度由内容的高度宽度来决定
(2) 字体:
font-size: 20px; /* 默认字体大小是16px */
color:green; /* 字体颜色 */
/*font-family: '楷体','宋体'; !* 字体格式 *!*/
font-weight: 400; /* 字体粗细 100-900,默认是400 */
text-align: center; 字体水平居中
line-height: ; 和height高度相同,标签文本垂直居中
(3) 字体或背景颜色设置:
三种方式:
英文单词: 如red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);
带透明度的: rgba(255, 0, 0,0.3); 单纯的就是颜色透明度
标签透明度:opacity: 0.3; 0到1的数字,这是整个标签的透明度,百分比也可以
(4) 背景设置:
<div class="c1">
</div>
css写法:
/*background-color: #ff746d;*/
/*background-color: rgb(155, 255, 236);*/
/*background-image: url("fage.png");*/ url写图片路径,也可以是网络地址路径
/*background-repeat: no-repeat;*/ 代表不平铺整个背景
/*background-repeat: repeat-y;*/ 竖直平铺
/*background-position: right top;*/ 背景图片居右上角
/*background-position: 100px 50px;*/ 自定义
/* 简写方式 */
background: #ff0000 url("fage.png") no-repeat right bottom;
(5) 边框设置:
<div>
</div>
css写法:
/* 边框简写方式,对四个边框进行设置 */
/*border:1px solid red;*/
/*border-left: 1px solid green;*/
/*border-top: 1px solid blue;*/ (border buttom)
border- 5px; 边框宽度
border-style: dashed; 边框样式 (dotted)
border-color: aqua; 边框颜色
/*border-left-color: blue;*/
/*border-left-style: dotted;*/
8.盒子模型：
占用空间大小
margin: 外边距 距离其他标签或者自己父级标签的距离
下面三个表示标签实际占用的空间大小
padding: 内边距 内容和边框之间的距离
border: 边框
content: 内容部分 设置的width和height
＜！－－内边距－－＞
html代码:
<div>
英姿飒爽雄鸡装,飞上枝头变凤凰!
</div>
css写法:
200px;
height: 100px;
border: 4px solid red;
/*padding: 6px 8px;*/
/*padding: 4px 2px 6px 8px;*/
/*padding-left: 20px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 20px;*/
＜！－－外边距－－＞
html代码:
<div>
英姿飒爽雄鸡装,飞上枝头变凤凰!
</div>
<div class="c1">
<div class="c2">
</div>
</div>
css写法:
.c1{
background-color: red;
height: 100px;
100px;
/*margin-left: -1000px;*/
/*margin: 10px 15px;*/
}
.c2{
background-color: green;
height: 20px;
20px;
/*margin: 10px 15px;*/
margin-left: 20px;
}
/*margin-left: 10%; !* margin设置百分比的效果：按照父级标签宽度的10%之时作为距离左边的距离 *!*/
margin: 0 auto; /* 就是水平居中的效果，text-align:center,设置的是文本内容居中， */
９．
示例:
html代码:
<span>
我是span标签
</span>
<div class="c1">
鹅鹅鹅,曲项向天歌!
</div>
<div class="c2">
拔毛烧开水,铁锅炖大鹅!
</div>
css写法:
span{
/*display: block;*/
}
.c1{
background-color: red;
height: 100px;
100px;
/*display: inline;*/
/*display: inline-block;*/
display: none;
}
.c2{
background-color: green;
height: 100px;
100px;
}
display的几个值:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏
10.
浮动的元素,不独占一行,并且可以设置高度宽度
html代码
<div class="cc">
<!--<div>吟诗作对</div>-->
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
css样式
body{
margin: 0;
}
.c1{
background-color: red;
height: 100px;
200px;
float: left;
}
.c2{
background-color: brown;
height: 100px;
200px;
float: right;
}
.c3{
background-color: pink;
height: 100px;
100%;
}
浮动,造成父级标签塌陷的问题,没有高度了
解决父级标签塌陷问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签练习</title>
<style>
.c1{
background-color:red;
height:200px;
width:200px;
float:left;
}
.c2{
background-color:blue;
height:200px;
width:200px;
float:right;
}
.c3{
background-color:green;
height:50px;
}
/*
方式一: 给父盒子加高度
.cc{
height:200px;
} */
/*
方式二: 给子盒子加清除浮动
.c3{
clear:both;
} */
/* 方式三:工作中比较常用 */
.clearfix:after{
content:'';
display:block;
clear:both;
}
/*
方式四:
.cc{
overflow:hidden;
} */
</style>
</head>
<body>
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>