内容概要：
HTML
- 标签
1、分类 块级 行内
2、符号
3、p,br,h
4、input系列
5、form -action -method -enctype--->上传文件
6、select, textarea
7、ur/ol/dl
8、table
9、iframe,fieldset
10、div,span
CSS
存放位置： 单独css文件 （优先级最低）
html头部
标签属性（优先级最高）
- 效果
color:red;
display: none;隐藏
inline;内联标签
block;块级标签
inline-block：具有内联和块级标签的属性
边距：
margin 外边距（本身不增加）
padding 内边距 （本身增加）
漂浮：
float:left;
position:
relative
absolute --固定窗口滚动移动
fixed --固定，窗口
HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
Title
网页头部信息
Link
css
< link rel="stylesheet" type="text/css" href="css/common.css" >
icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
例如：
< style type="text/css" >
.bb{
}
< /style>
Script
引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写js代码
< script type="text/javascript" > ... </script >
常用标签
标签一般分为两种：块级标签 和 行内标签
- a、span、select 等
- div、h1、p 等
各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p 和 br
p表示段落，默认段落之间是有间隔的！
br 是换行
a标签
< a href="http://www.autohome.com.cn"> </a>
1、target属性，_black表示在新的页面打开
2、锚
H 标签
H1
H2
H3
H4
H5
H6
<!DOCTYPE html>
<html lang="en">
<head>
<!--自闭和标签-->
<meta charset="UTF-8">
<meta http-equiv="Refresh" Content="5"/>
<!--2秒后跳转到页面-->
<!--<meta http-equiv="Refresh" Content="2; Url=http://www.autohome.com.cn"/>-->
<!--标签属性 name = ‘alex-->
<link rel="shortcut icon" href="image/favicon.ico">
<title name = ‘alex‘>哈哈</title>
</head>
<body>
<!--内联和块级-->
<div style="background-color: red;">12</div>
<span style="background-color: green;">12</span>
<!--符号-->
<a b>
<!--段落和换行-->
<p>asdfuo<br />iuasdkfjlkjasdfkj<br />alskdjfas;dlfj</p>
<p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
<p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
<!--标题-->
<h1>a</h1>
<h2>a</h2>
<h3>a</h3>
<h4>a</h4>
<h5>a</h5>
<h6>a</h6>
<h6 style="font-size: 65px;">a</h6>
<!--a标签-->
<a href="http://www.baidu.com">跳转1</a>
<a href="http://www.baidu.com" target="_blank">跳转2</a>
<!--<div href="http://www.baidu.com">阿萨德发送到</div>-->
<!--寻找页面中id=i1的标签，将其标签放置在页面顶部-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<!--id没有一个标签的id属性值不允许重复；id属性可以不写-->
<div id="i1" style="height: 500px;">第一章内容</div>
<div id="i2" style="height: 500px;">第二章内容</div>
<div id="i3" style="height: 500px;">第三章内容</div>
</body>
</html>
select 标签
上海
北京
广州
上海
北京
广州
广州
上海
北京
广州
广州
石家庄
邯郸
太原
平遥
Checkbox
redio
男 女 保密
男 女 保密
password
button
file
提交文件时： enctype=‘multipart/form-data‘ method=‘POST‘
textarea
label
姓名： 婚否：
姓名： 婚否：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--默认get方式提交 和post不同点就是数据格式不一样;enctype使文件上传成功-->
<form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data">
<div style="border: 1px solid green">
<p>用户名：<input type="text" name="user" />
密码：<input type="password" name="pwd" />
</p>
<!--这里男和女的name设置成相同的值选择时就可以是互斥的-->
<p>男<input type="radio" name="gender" value="1" />
女<input type="radio" name="gender" value="2" />
</p>
<p>爱好：
篮球<input name="favor" type="checkbox" value="1" />
</p>
<p>文件：
<input type="file" name="fasongshuju" />
</p>
<hr/>
<p>
<select name="city">
<option value="1">上海</option>
<option value="2">北京</option>
</select>
</p>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" />
</form>
<form>
<div style="border: 1px solid red;">
<p>用户名：<input type="text" /> </p>
<p>密码：<input type="password" /> </p>
<!--<p>邮箱：<input type="email" /> </p>-->
<p>性别(单选框)：
<br /> 男<input type="radio" name="ee" />
<br /> 女<input type="radio" name="ee"/>
</p>
<p>爱好（复选框）：
<br /> 男1<input type="checkbox" />
<br /> 男2<input type="checkbox" />
<br /> 男3<input type="checkbox" />
<br /> 男4<input type="checkbox" />
<br /> 男5<input type="checkbox" />
</p>
<p>城市：
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select multiple size="10">
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select>
<optgroup label="AAA">
<option>上海</option>
<option>北京</option>
</optgroup>
<optgroup label="BBB">
<option>广州</option>
</optgroup>
</select>
</p>
<p>文件：<input type="file" /></p>
<p>备注 ： <textarea></textarea> </p>
<input type="submit" value="submit"/>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>
ul ol dl
ul
- ul.li
- ul.li
- ul.li
ol
- ol.li
- ol.li
- ol.li
dl
- 河北省
- 邯郸
- 石家庄
- 山西省
- 太原
- 平遥
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ul>
<ol>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ol>
<dl>
<dt>DT</dt>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dt>DT</dt>
<dd>dd</dd>
</dl>
</body>
</html>
table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--不完整的写法也能实现相同效果-->
<table border="1">
<tr>
<th colspan="2">标题一</th>
<th>标题二</th>
<th>标题三</th>
<!--<th>标题四</th>-->
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td rowspan="2">内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td>内容一</td>
<!--<td>内容二</td>-->
<td>内容三</td>
<td>内容四</td>
</tr>
</table>
<br/>
<!--完整的写法-->
<table border="1">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
</body>
</html>
fieldset
登录
用户名：
密码：
form 表单
文件:enctype=‘multipart/form-data‘ method=‘POST‘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>老男孩车之家</h1>
<iframe style="width: 100%;height: 2000px;" src="http://www.autohome.com.cn"></iframe>
</body>
</html>
CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = ‘key1:value1;key2:value2;‘
- 在标签中使用 style=‘xx:xxx;‘
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
标签选择器
div{ }
<div > </div>
class选择器
.bd{ }
<div class=‘bd‘> </div>
id选择器
#idselect{ }
<div id=‘idselect‘ > </div>
关联选择器
#idselect p{ }
<div id=‘idselect‘ > <p> </p> </div>
组合选择器
input,div,p{ }
属性选择器
input[type=‘text‘]{ width:100px; height:200px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--只在c1有效对以下所有内容有效-->
<style>
/*标签选择器*/
div{
background-color: red;
color: white;
}
/*id选择器，id不能重复,不常用*/
#i1{
font-size: 56px;
color: green;
}
/*class选择器，找是c1的标签，可以重复*/
.c1{
background-color: red;
}
/*层级选择器*/
/*.c2 div p a{*/
/*background-color: aqua;*/
/*}*/
/*和上面的结果一样，只是两种方法，优先使用下面这种*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器*/
.c4,.c5,.c6{
background-color: green;
}
</style>
<!--common.css其他文件可以共用的格式-->
<!--<link rel="stylesheet" href="common.css" />-->
</head>
<body>
<div class="c2">
<div></div>
<div>
<p>
<span>oo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c4">1</div>
<div class="c5">2</div>
<div class="c6">3</div>
<div style="background-color: rebeccapurple;color: white;"></div>
</body>
</html>
background
颜色写法三种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
/*rgb颜色 #FF69B4*/
/*background-color: #FF69B4;*/
background-color: rgb(25,180,10);
/*background-color: red;*/
width:500px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div style="width: 500px; background-color: aquamarine">
<div style="width: 20%;background-color: blueviolet">sssss</div>
<div style="width: 800%;background-color: blueviolet">aaaa</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
background-image: url("ss.png");
height: 80px;
width: 150px;
background-repeat: no-repeat;
}
.img2{
background-image: url("ss.png");
height:18px ;
width: 30px;
background-position: 91px 19px;
}
</style>
</head>
<body>
<div class="img"></div>
<div class="img2"></div>
</body>
</html>
display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="background-color: red;height: 50px;width: 200px;">asdfasdf</span>
<span style="display: inline-block;height: 50px; background-color: red;">asdsfsdf</span>
</body>
</html>
margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 70px;border: 1px solid red;">
<div style="height: 30px;background-color: green;"></div>
</div>
<div style="height: 100px;background-color: #ddd;border: 1px solid red;">
<div style="margin-top: 30px;margin-left: 100px;">
<input />
<input />
<input />
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
margin: 0;
list-style-type: none;
}
ul li{
float: left;
padding: 0 8px 0 8px;
color: white;
cursor: pointer;
}
/*当鼠标移动到li标签上时，自动应用以下样式*/
ul li:hover{
background-color: blueviolet;
}
.pg-header{
margin: 0;
height: 44px;
background-color: #2459a2;
line-height: 44px;
}
.w{
width: 980px;
margin: 0;
}
</style>
</head>
<body >
<div class="pg-header"></div>
<div class="w">
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单一</li>
</ul>
</div>
<div class="pg-body"></div>
<div class="pg-end"></div>
</body>
</html>
float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 500px;height: 500px;border: 1px solid red;">
<div style="width: 20%;background-color: aqua;float: left">f</div>
<div style="width: 30%;background-color: blueviolet;float: right">a</div>
<div style="width: 50%;background-color: chocolate;float: right">a</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 500px;background-color: green;"></div>
<div style="position: fixed; right:0;top:0;">返回顶部</div>
<!--<div style="position: absolute; right:0;top:0;">返回顶部</div>-->
<!--absolute 是跟relative一起用的它会找relative的区域-->
<div style="height: 500px;width: 400px;border: 1px solid red;position: relative;">
<div style="height: 200px;background-color: red;">
<div style="position: absolute;bottom: 0;right: 0;">1111</div>
</div>
</div>
</body>
</html>
时间： 2024-08-09 08:55:43