HTML
一、HTML基础(树干)
1、基础概念：
1.1、html全称：hyper text markup language
中文：超文本标记语言
1.2、注释：<!-- 文字 --> 快捷键：Ctrl+?
1.3、整体页面设置 ： <!DOCTYPE html> : 定义文档类型
2、HTML中头部(head)的应用
2.1、网页名标签
<title>显示上方标题</title>:表示标题
<title>显示上方标题</title>
2.2、<meta charest=“UIF-8"> :字符编码集，万国码，防止乱码出现
2.3 引用标签：
Link：引用外部资源
<link rel="stylesheet" href="css/com.css">
<!--CSS-->
2.4 样式标签
Style：引用页面中的样式
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>F32班</title>
<style>
.text1{ background-color: black;
}
</style>
</head>
<body>
<!--最常使用且可重复使用-->
<div class="text1">引用样式</div>
</body>
</html>
3、HTML中主体(body)的应用
3.1标签分为2类(对写CSS样式有用)：
块级元素：
1. <p>:表示段落
2. <div>:表示区域
3. <h>:表示标题
4. <ul>:表示无序列表
5. <ol>:表示有序列表
6. <li>:表示列表项目
7. <dl>:表示定义标签
8. <dt>:表示列表中的定义项目
9. <dd>:表示列表中的定义条目
10. <pre>:定义预格式化的文本
11. <hr>:表示水平线
12. <table>:表示表格
13. <thead>:表示表头
14. <tbody>:定义表格正文
15. <tfoot>:定义表头页脚
16. <th>:定义表格单元格
17. <tr>:表示表格行
18. <td>:表示表格列
19. <caption>:表示表格外部标题
20. <form>:表示表单
行内元素：
1.<span>:跨越多个字符
2.<img>:表示网页中的图片（特殊的行内元素，可以设置宽高）
3.<a>:表示链接
4.<blockquote>:表示引用
5.<q>:表示引用
6.<cite>:表示引用
7.<strong>:表示强调字体
8.<b>:表示字体加粗
9.<br>:表示换行
10.<em>:表示斜体
11.<i>:表示斜体
12.<input>:表示输入
13.<label>:表示input元素定义标签
14.<select>:表示单选和多选菜单
15.<textarea>:表示多行文本输入
快级元素和行内的区别：行内元素是根据内容有多少就占多少，快级标签是不管多少都会占一行。
3.2常用标签应用：
表单中的标签：form、input、select、lable、textarea
用于格式的标签：<br />、<hr /> 、<h1-6></h1-6>
列表标签：ul、li、ol、dl、dt、dd
表格标签：table(<thead>、<tbody>、<tr>、<td>、<th>)
布局标签：div、span
引用、跳转外部标签：a(文字跳转)、meta(页面跳转)、link(引用外部资源)
3.3 标签的应用
1. img:表示图片
<body>
<img src="miqi.jpg"，alt="米奇"/>
</body>
2. P:表示段落
<p>赠人玫瑰，手有余香 </p>
3.a:表示超链接
<a href="http://www.baidu.com">点击这个链接去百度 </a>
4.h:标题标记
<h1>1级正文标题</h1> <h2>2级正文标题</h2> <h3>3级正文标题</h3> <h4>4级正文标题</h4> <h5>5级正文标题</h5> <h6>6级正文标题</h6>
5.序列标签
ul:表示无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
ol:表示有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ol>
dl:表示定义列表
<dl>
<dt>美人鱼</dt>
<dd>是一种鱼</dd>
</dl>
6.pre:预格式文本
<pre> 很多 很多 </pre>
7.引用：
blockquote:表示引用(长引用) <blockquote>举头望明月</blockquote> q:有引号的引用 <q>青出于蓝而胜于蓝</q>
8.span:跨越多个字符
<p>
没什么<span style="color:red">遗憾</span>
</p>
9.div:区域划分
<div> <p>感谢天感谢地</p> </div>
10.strong和b:表示语气强调
<strong>你的地盘你做主</strong> <b>我的地盘我做主</b>
11.em和i:表示斜体
<em>土耳其卖土豆</em> <i>吃了一斤土豆</i>
12.br:表示换行
<em>土耳其卖土豆</em> </br> <i>吃了一斤土豆</i>
13.hr:表示水平线
<hr/>
14.abbr:表示一个缩写形式
<p>
<abbr title="笔记本电脑">笔记本<abbr>
</p>
15.cite:表示引用
<cite>静夜思</cite>是谁写的
16.figure：表示定义
<figure>
<img src="" alt="米奇"/>
<figcaption>米奇</figcaption>
</figure>
17.video:视频
<video>
<source src=""/>
</video>
18.audio:音频
<audio>
<source src=""/>
</audio>
19.table:表示表格
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2" style="border-collapse: collapse" width="100" cellpadding="20">
<!--表头-->
<caption>计算机</caption>
<tr>
<!--表头-->
<th colspan="4" align="" >计算机</th>
</tr>
<tr>
<td colspan="4" align="right" >18.5</td>
</tr>
<tr>
<td>AC</td>
<td>+-</td>
<td>%</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>x</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
<td>=</td>
</tr>
<tfoot>
<tr>
<td>2016年8月10号</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1-1</td>
</tr>
</tbody>
<thead>
<tr>
<td>78</td>
</tr>
</thead>
</table>
</body>
</html>
7.thead:表示表格表头
<thead>
<tr>
<td>表头
</td>
</tr>
</thead>
8.tbody:表示表格身体部分
<tbody>
<tr>
<td>身体</td>
</tr>
</tbody>
9.tfoot:表示表格的页脚
<tfoot>
<tr>
<td>页脚</td>
</tr>
</foot>
10.th:定义表格表头，且表头显示粗体
<table>
<tr>
<th>表头粗体</th>
</tr>
</table>
colspan:横向合并
<table>
<tr>
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
rowspan:纵向合并
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
20.form：表示用户输入的表单
<form action="外部的链接路径" method="get/post">
</form>
method:用于向action 的链接发送数据的HTTP方法。
注意：post比get安全性高
21.input：标签数据输入文字，用户输入数据
<form action="外部的链接路径" method="get/post">
用户名：<input type="text" maxlength="11" value="请输入用户名"/>
密码： <input type="text" maxlength="6" placeholder="请输入密码"/>
<input type="button" value="登录按钮"/>
<button>登录按钮</button>
<input type="reset" value="重置"/>
<input type="submit"value="提交"/>
<input type="file" />:文件的选择
</form>
注意：
1.value和placeholder的区别：
value：直接显示在文本框中，需要用户自己删掉
placeholder:用户输入时，自己消失
2.<input type="button" value="登录">和<button>登录</button>区别
<input type="button" value="登录">：登录按钮不会自动发送请求
<button>登录</button>：登录按钮会自己发送请求
22.radio:代表单选框
男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>
<label for="man">男</label>
<input type="radio" name="sex" id="man"/>
<label ror="woman">女</label>
<input type="radio" name="sex" id="woman"/>
checkbox:代表多选框
网红1<input type="checkbox" name="gif"/> 网红2<input type="checkbox" name="gif"/>
23.导航
<nav>
<a href="#">新闻</a>
<a href="#">八卦</a>
<a href="#">9卦</a>
<a href="#">大卦</a>
<a href="#">黄马褂</a>
</nav>
二、CSS样式(修饰)：
1、style和class
1.1、style的三种存放位置(从高到低)
(1)标签属性(在属性中加style)
(2)html头部
(3)单独的CSS文件
优先级：标签属性最高，不管html头部和CSS文件是否存在，绝对以标签属性为准。
html头部和单独的CSS文件是继承关系，如果样式不同便会相互继承，但当 html头部和单独的CSS文件样式相同时html头部优先级比单独的CSS文件高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<link rel="stylesheet"href="csstest.css"/>
<style>
.color{ background-color: black;
color: aliceblue;
}
</style>
</head>
<body>
<!--第一种方式-->
<!--当前div样式只用着一次，可这样写-->
<div style="color: aliceblue">直接设置样式</div>
<hr />
<!--第二种方式-->
<!--当前div只用于这一个页面，可这样写-->
<div class="color">引用样式</div>
<hr />
<!--第三种方式-->
<!--当前div样式被多个页面引用，可这样写-->
<div class="color2">引用样式文件</div>
</body>
</html>
2、CSS选择器：用于选择不同样式进行引用
<style>
/*通配 所有标记*/
*{
margin: 0;
padding:0;
}
p{
background-color:red;
border: 5px solid green;
font-size: 30px;
font-weight: 900;
width: 50px; ;
}
/*a标记没有被访问时和样子*/
a{
color: black;
}
a:link{
color: black;
/*font-size: 30px;*/
}
/*a标记访问之后的样子*/
a:visited{
color:gainsboro;
}
/*移入的样子*/
a:hover{
color: blueviolet;
}
/*点击时的样子*/
a:active{
font-size: 20px;
}
/*指根元素*/
:root{
background-color:palevioletred;
}
table{
background-color:blue;
border: 20px solid yellow;
}
/*空*/
table td:empty{
background-color: gainsboro;
}
/*获取焦点*/
input[type="text"]:focus{
border:5px solid darkmagenta;
}
input[type="text"]{
border:20px solid darkmagenta;
display: block;
width: 20px;
/*height: 30px;*/
}
/*元素选取*/
::selection{
background-color: darkgreen;
color: green;
}
/*id*/
#testp1{
background-color:green;
font-weight: 900;
}
/*伪元素*/
.box1{
width: 200px;
border: 1px solid red;
}
/*第一个字*/
.box1 p:first-letter{
font-size: 50px;
}
.box1 p:first-line{
background-color: yellow;
}
.a1{
font-size: 50px;
}
/*在链接的前面*/
.a1:before{
content: "我是前面";
}
/*在链接的后面*/
.a1:after{
content:"你在我后面";
}
/*第4排*/
ul li:nth-child(4){
background-color: yellow;
}
/*第一行*/
ul li:first-child{
background-color: yellow;
}
/*最后一行*/
ul li:nth-last-child(1){
background-color: yellow;
}
/*基数*/
ul li:nth-child(2n+1){
background-color: red;
}
ul li:nth-child(odd){
background-color: aqua;
}
/*偶数*/
ul li:nth-child(even){
background-color: blue;
}
</style>
3.选择器的优先级
!important>内嵌>id>伪类/属性/class>元素/伪元素>通配符
<style>
<div class="box">
<p id="p1" >
<span class="span1">你好</span>
</div>
优先级：
.box #p1 .span1{
color:green;
}
>
.box #p1 span{
color: yellow;
}
>
#p1 span {
color:red;
}
>
div p span {
color:green;
}
>
span{
color: blue;
}
</style>
如果加!important优先级升级
span{
color: blue !important;
}
这时候就该显示蓝色。
3、DIV样式设置
3.1、基本设置(在style中设置属性)常用：
类型：设置字体颜色等
<style>
/*类型设置*/
.type{
font-saze:12px; /*字体大小设置*/
color: red; /*字体颜色*/
text-decoration: none; /*没有下滑线*/
}
</style>
背景：设置页面背景等
<style>
/*背景设置*/
.background
{
/*当背景颜色和图片同时设置时，你要知道这是两层，背景颜色在图片的下面*/
background-color: red; /*背景颜色*/
background-image: url("image/111.PNG"); /*背景图片*/
background-repeat: no-repeat; /*背景图片不重复*/
background-position: 22px/*(水平位置)*/ 22px/*垂直位置*/;
/*会根据你写X和Y的坐标，去到图片坐标显示的地方*/
height: 139px; /*背景高度*/
width: 100px; /*背景宽度*/
}
</style>
边框:用于设置DIV或span的边框
<style>
/*边框设置*/
.cheek
{
border: 1px solid red;
/*用于设置边框属性，选项有三个：边框粗细 类型 颜色*/
}
</style>
图片替换技术：两种方法：
1. 利用行高替换
<h1 class="way1">
<a href="http://taibao.com">淘宝</a>
</h1>
<style>
.way1{
width:154px;
height:30px;
border:1px solid blank;
background:url("../img.11.jpg") no-repeat;
overflow:hidden;
}
.way1 a{
line-height:100px;
display:block;
}
</style>
2.利用首行缩进：
<h1 class="way2">
<a href="http://taibao.com">淘宝</a>
</h1>
<style>
.way2{
width:154px;
height:30px;
border:1px solid blank;
background:url("../img.11.jpg") no-repeat;
text-indent:-500px;
overflow:hidden;
}
.way2{
display:block;
}
</style>
雪碧图：只访问一张图片
<div class="sprite"></div>
<style>
.sprite{
weith:54px；
hight:72px;
border:1px solid blank;
background:url("");
background-position:-54px 157px;
“向左和上平移都为-”
}
.sprite:hover{
background-position:-168px -57px;
}
</style>
渐变：
1.向右线性渐变
background：linear-gradient(to right,red,yellow);
2.垂直渐变
background:linear-gradient(90deg,yellow,red);
3.径向渐变
background：linear-gradient（pink,#58a）;
4.transform:translate( ):平移
transform:translate(30px,50px);
5.transform:rotate():旋转
transform：rotate（45deg）;
6.transform：scale（）：放大缩小
transform：scale（1，0.5）；
7.放慢的一个动画： transition: all linear 2s;
8./*兼容前缀，谷歌，火狐，微软，欧朋*/
-webkit--transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-ms-transituon:all linear 0.5s;
-o-transition:all linear 0.5s;
animation:yangjing 3s infinite 动画效果：
.box3{
width: 100px;
height: 100px;
background: red;
animation: yangjing 3s 2;
}
@keyframes yangjing {
/*第一种*/
/*from{*/
/*background: red;*/
/*}*/
/*to{*/
/*background: gold;*/
/*}*/
/*第二种*/
20%{
width: 300px;
border-radius: 50%;
background: purple;
}
30%{
width: 400px;
height: 150px;
border-radius: 20px/30px;
background: green;
}
40%{
width: 100px;
height: 100px;
background: powderblue;
transform: rotate(45deg);
}
60%{
background: darkgoldenrod;
}
80%{
border-radius: 50%;
}
100%{
background: orangered;
}
}