HTML 超文本 标记 语言
标签：是由一对 <> 构成的，有开始、有结束。
html架构：
<!doctype html>
<html>
<head>
网页的名称、网页的样式css、网页相关的js、网页的编码
</head>
<body>
书写要学习的标签（内容）
</body>
</html>
例子1：
<!doctype html>
<html>
<head>
<title>hello world</title>
</head>
<body>
hello world
</body>
</html>
例子2：设置中文编码
!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>hello world</title>
</head>
<body>
哈哈哈
</body>
</html>
（1）<meta charset="utf-8"/> 网页的编码
（2）网页文件的编码
标签：
块标签： 单独占一行
1.标题标签 从1到6 文字大小依次变小
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2.水平线
<hr>
3.段落标签
<p></p>
4.无序列表
<ul>
<li></li>
</ul>
5.div 布局标签
<div></div>
6.换行标签
<br />
行标签： 不单独占一行
7.span 标签 对文字起强调的作用
<span></span>
8.a标签 <a href="链接的地址" target="_blank"></a>
（1）链接
外网<a href="http://"></a>
内网<a href="网页的地址+文件名.html"></a>
（2）锚链接 链接到一个确定的位置
位置 锚点 <a name="自定义名"></a>
去锚点 <a href="#自定义名"> </a>
回到顶部 <a href="#"></a>
(3)空链接 <a href="javascript:void(0);"> </a>
9.图片标签
<img src="图片的地址" width="100" height="100"/>
10.音频标签
<audio src="音频的地址" autoplay controls ></audio>
11.视频标签
<video src="视频的地址" autoplay controls></video>
CSS层叠样式表：
1.行内样式表
在标签的开始元素里面添加 style="" 属性
<div style=""></div>
在style="样式名:样式值;样式名:样式值;样式名:样式值;...."
字体样式：
字体粗细 font-weight:bold;
字体大小 font-size:像素值; 像素值=数字+px 如 24px
字体倾斜 font-style: italic; normal
字体下划线 text-decoration:underline ; 上划线 text-decoration:overline ; 删除线 text-decoration:line-through ; 去掉线 text-decoration:none;
字体颜色 color: red; 英文表示颜色 16进制颜色 #000-#fff 第一位 代表 红 第二位代表 绿 第三位代表 蓝 #000000-#ffffff rgb颜色 rgb(0,0,0)-rgb(255,255,255)
字体 font-family:'宋体'
字体水平位置 text-align: right; left center
背景样式
背景颜色：background-color: green; 英文 16进制 rgb
背景图片：background-image:url(图片的地址) ;
背景图重复：background-repeat:no-repeat ;
背景图大小：background-size:100% 800px; 第一个值 控制宽度 第二个值 控制高度 表示 像素值 百分比
背景图固定：
背景图位置：
div的盒子模型
宽度 width：像素值;
高度 height:像素值;
外边距 margin 对div的大小没有影响
margin-left:像素值;
margin-right:像素值;
margin-top:像素值;
margin-bottom:像素值;
argin-left:20px;
内边距 padding 对div的大小有影响
padding-left:像素值;
padding-right:像素值;
padding-top:像素值;
padding-bottom:像素值;
padding-left:10px;
边框 border 对div的大小有影响
border-left: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border-right: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border-top: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border-bottom: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border:1px solid red;
div的实际宽度=width+内边距（左右）+边框（左右）;
div的实际高度=height+内边距（上下）+边框（上下）;
div的水平居中
margin:0 auto;
把块标签你变成行标签
float:left;
2.页内样式表
在head里面 title的下面加上：
<style type="text/css">
</style>
选择器：
（1）标签选择器
<style type="text/css">
标签名{ }
标签名{ }
标签名{ }
...
</style>
(2)ID选择器 id名字不能重复出现
定义id
<div id="id名"></div>
选择
<style type="text/css">
标签名{ }
标签名{ }
标签名{ }
...
#id名{}
#id名{}
#id名{}
...
</style>
（3）class选择器 多用class 选择器
定义
<div class="class的名字"></div>
选择
<style type="text/css">
标签名{ }
标签名{ }
标签名{ }
...
#id名{}
#id名{}
#id名{}
...
.class名{}
.class名{}
.class名{}
...
</style>
html中的注释： 注释快捷键 ctrl+shift+/ 描述网页中标签内容
<!---->
css中的注释
/**/
去掉li的点点
list-style: none;
文字垂直居中
line-height:与height保持一致;
例：
height:50px;
line-height:50px;
伪类选择器
hover 鼠标移动到某个标签上面，设置器其样式
a:hover{
color:#fff;
}
把行标签变成快标签
display:block;
通用选择器 用于新建网页时，初始化网页的元素
*{margin: 0; padding: 0;}
子类选择器
充当父类选择器>充当父类的儿子{
}
.nav_div>ul>li{
list-style: none;
}
图片效果:
放大、缩小 transform:scale(放大的倍数); transform:scale(1.5);
放大镜 overflow:hidden;
<div class="img_div">
<img src="img/timg.jpg" class="img1" />
</div>
样式
.img_div{
width: 300px;
height: 170px;
background-color: yellow;
overflow: hidden;
}
.img1{
width: 300px;
}
.img1:hover{
transform:scale(1.5);
}
延迟效果 transition: all 1s; /*延迟 1s*/
旋转2d
transform: rotate(180deg); deg时度数的意思
旋转3d
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
表单： 收取、记录信息
<form action="提交的地址" method="post">
</form>
表单元素：
<!--表单-->
<form action="" method="post">
<!--单行文本框-->
<input type="text" placeholder="请输入您的用户名" />
<!--密码框-->
<input type="password" placeholder="请输入您的密码" />
<!--日期框-->
<input type="date" />
<!--单选按钮-->
性别：<input type="radio" name="gender" /> 男 <input type="radio" name="gender" /> 女
<!--复选按钮-->
爱好：<input type="checkbox" name="hobby" /> 球 <input type="checkbox" name="hobby" /> 看球 <input type="checkbox" name="hobby" /> 玩球
<br />
<!--下拉列表-->
毕业院校：
<select>
<option>兰州工业学院</option>
<option>皇家工业学院</option>
<option>兰州工业</option>
</select>
<br />
<!--文本域-->
个人简介：
<textarea></textarea>
<br />
<!--提交按钮-->
<input type="submit" value="保存" />
<!--重置按钮-->
<input type="reset" value="重写" />
</form>
3.外部样式：
新建css文件，文件名与html的名保持一致；
在html中引入css外部文件 <link rel="stylesheet" type="text/css" href="css文件的地址"/>
4.阴影效果
box-shadow: 10px 15px 25px #ddd;
/*
第一个值 代表 阴影 水平移动 + 右 —左
第2个值 代表 阴影 垂直移动 + 下 —上
第3个值 代表 阴影范围 越大越虚
第4个值 代表 阴影颜色
* */
标签：是由一对 <> 构成的，有开始、有结束。
html架构：
<!doctype html>
<html>
<head>
网页的名称、网页的样式css、网页相关的js、网页的编码
</head>
<body>
书写要学习的标签（内容）
</body>
</html>
例子1：
<!doctype html>
<html>
<head>
<title>hello world</title>
</head>
<body>
hello world
</body>
</html>
例子2：设置中文编码
!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>hello world</title>
</head>
<body>
哈哈哈
</body>
</html>
（1）<meta charset="utf-8"/> 网页的编码
（2）网页文件的编码
标签：
块标签： 单独占一行
1.标题标签 从1到6 文字大小依次变小
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2.水平线
<hr>
3.段落标签
<p></p>
4.无序列表
<ul>
<li></li>
</ul>
5.div 布局标签
<div></div>
6.换行标签
<br />
行标签： 不单独占一行
7.span 标签 对文字起强调的作用
<span></span>
8.a标签 <a href="链接的地址" target="_blank"></a>
（1）链接
外网<a href="http://"></a>
内网<a href="网页的地址+文件名.html"></a>
（2）锚链接 链接到一个确定的位置
位置 锚点 <a name="自定义名"></a>
去锚点 <a href="#自定义名"> </a>
回到顶部 <a href="#"></a>
(3)空链接 <a href="javascript:void(0);"> </a>
9.图片标签
<img src="图片的地址" width="100" height="100"/>
10.音频标签
<audio src="音频的地址" autoplay controls ></audio>
11.视频标签
<video src="视频的地址" autoplay controls></video>
CSS层叠样式表：
1.行内样式表
在标签的开始元素里面添加 style="" 属性
<div style=""></div>
在style="样式名:样式值;样式名:样式值;样式名:样式值;...."
字体样式：
字体粗细 font-weight:bold;
字体大小 font-size:像素值; 像素值=数字+px 如 24px
字体倾斜 font-style: italic; normal
字体下划线 text-decoration:underline ; 上划线 text-decoration:overline ; 删除线 text-decoration:line-through ; 去掉线 text-decoration:none;
字体颜色 color: red; 英文表示颜色 16进制颜色 #000-#fff 第一位 代表 红 第二位代表 绿 第三位代表 蓝 #000000-#ffffff rgb颜色 rgb(0,0,0)-rgb(255,255,255)
字体 font-family:'宋体'
字体水平位置 text-align: right; left center
背景样式
背景颜色：background-color: green; 英文 16进制 rgb
背景图片：background-image:url(图片的地址) ;
背景图重复：background-repeat:no-repeat ;
背景图大小：background-size:100% 800px; 第一个值 控制宽度 第二个值 控制高度 表示 像素值 百分比
背景图固定：
背景图位置：
div的盒子模型
宽度 width：像素值;
高度 height:像素值;
外边距 margin 对div的大小没有影响
margin-left:像素值;
margin-right:像素值;
margin-top:像素值;
margin-bottom:像素值;
argin-left:20px;
内边距 padding 对div的大小有影响
padding-left:像素值;
padding-right:像素值;
padding-top:像素值;
padding-bottom:像素值;
padding-left:10px;
边框 border 对div的大小有影响
border-left: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border-right: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border-top: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border-bottom: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border: 边框的宽度（像素值） 边框的样式（solid、dashed） 边框的颜色;
border:1px solid red;
div的实际宽度=width+内边距（左右）+边框（左右）;
div的实际高度=height+内边距（上下）+边框（上下）;
div的水平居中
margin:0 auto;
把块标签你变成行标签
float:left;
2.页内样式表
在head里面 title的下面加上：
<style type="text/css">
</style>
选择器：
（1）标签选择器
<style type="text/css">
标签名{ }
标签名{ }
标签名{ }
...
</style>
(2)ID选择器 id名字不能重复出现
定义id
<div id="id名"></div>
选择
<style type="text/css">
标签名{ }
标签名{ }
标签名{ }
...
#id名{}
#id名{}
#id名{}
...
</style>
（3）class选择器 多用class 选择器
定义
<div class="class的名字"></div>
选择
<style type="text/css">
标签名{ }
标签名{ }
标签名{ }
...
#id名{}
#id名{}
#id名{}
...
.class名{}
.class名{}
.class名{}
...
</style>
html中的注释： 注释快捷键 ctrl+shift+/ 描述网页中标签内容
<!---->
css中的注释
/**/
去掉li的点点
list-style: none;
文字垂直居中
line-height:与height保持一致;
例：
height:50px;
line-height:50px;
伪类选择器
hover 鼠标移动到某个标签上面，设置器其样式
a:hover{
color:#fff;
}
把行标签变成快标签
display:block;
通用选择器 用于新建网页时，初始化网页的元素
*{margin: 0; padding: 0;}
子类选择器
充当父类选择器>充当父类的儿子{
}
.nav_div>ul>li{
list-style: none;
}
图片效果:
放大、缩小 transform:scale(放大的倍数); transform:scale(1.5);
放大镜 overflow:hidden;
<div class="img_div">
<img src="img/timg.jpg" class="img1" />
</div>
样式
.img_div{
width: 300px;
height: 170px;
background-color: yellow;
overflow: hidden;
}
.img1{
width: 300px;
}
.img1:hover{
transform:scale(1.5);
}
延迟效果 transition: all 1s; /*延迟 1s*/
旋转2d
transform: rotate(180deg); deg时度数的意思
旋转3d
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
表单： 收取、记录信息
<form action="提交的地址" method="post">
</form>
表单元素：
<!--表单-->
<form action="" method="post">
<!--单行文本框-->
<input type="text" placeholder="请输入您的用户名" />
<!--密码框-->
<input type="password" placeholder="请输入您的密码" />
<!--日期框-->
<input type="date" />
<!--单选按钮-->
性别：<input type="radio" name="gender" /> 男 <input type="radio" name="gender" /> 女
<!--复选按钮-->
爱好：<input type="checkbox" name="hobby" /> 球 <input type="checkbox" name="hobby" /> 看球 <input type="checkbox" name="hobby" /> 玩球
<br />
<!--下拉列表-->
毕业院校：
<select>
<option>兰州工业学院</option>
<option>皇家工业学院</option>
<option>兰州工业</option>
</select>
<br />
<!--文本域-->
个人简介：
<textarea></textarea>
<br />
<!--提交按钮-->
<input type="submit" value="保存" />
<!--重置按钮-->
<input type="reset" value="重写" />
</form>
3.外部样式：
新建css文件，文件名与html的名保持一致；
在html中引入css外部文件 <link rel="stylesheet" type="text/css" href="css文件的地址"/>
4.阴影效果
box-shadow: 10px 15px 25px #ddd;
/*
第一个值 代表 阴影 水平移动 + 右 —左
第2个值 代表 阴影 垂直移动 + 下 —上
第3个值 代表 阴影范围 越大越虚
第4个值 代表 阴影颜色
* */