前端
一. HTML
标签
自闭合标签
<> </>
内联和块级标签
块级标签: DIV，占一整行
内联标签: span ,按字符占
a标签
跳转
符号
<a b> 小于大于等于
标题大小
h1到h6为字体大小
段落及换行
p 和 br
input系列标签
text 文本输入
password 密码输入
radio 单选框
checkbox 多选框
file
button 按钮
subimit 提交当前表单
reset 重置表单
select
选择按钮
textarea
多文本换输入
form
用于创建HTML表单，需要提交内容都在form标签中
table
在HTML 中定义表格布局
link
指定图片
h,p,br: id
a: id href target
div: id
二. CSS
存放位置：
单独css文件 低
html头部
标签属性 高
- 效果
color: red;
display: none;
inline;
block;
inline-block
边距：
margin 外边距（本身不增加）
padding 内边距（本身增加）
漂浮：
float:left;
position:
relative
absolute -- 固定窗口，滚动移动
fixed -- 固定，窗口
==》
fixed
absolute
relative + absolute
JavaScript
- 语言基础
- 效果：
查找
操作
一、基础HTML
HTML 三部分
1. 整体<html>
* 包括所有
2. 头部<head>
* 定义样式
3. 主体<body>
* 页面内容
<html>
<head> 头部
<meta charset="UTF-8"> 元素用于插入属性
<title>王明虎</title> 标题
</head>
<body>
内容
</body>
</html>
基本语法框架
<!DOCTYPE html>
<html lang="en">
<!--页头-->
<head>
<!-- 自闭合标签 -->
<meta charset="UTF-8">
<!--跳转-->
<!--<meta http-equiv=“Refresh” Content=“2″/>-->
<meta http-equiv="Refresh" Content="2;Url=http://www.baidu.com"/>
<!--支持最新IE-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--标题-->
<title>王明虎</title>
<!--标题图形-->
<link rel="shortcut icon" href="favicon.ico">
</head>
<!--显示主体-->
<body>
你哥两耳朵
</body>
</html>
DIV展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="color: green;"> 绿色字体样式，针对整行，DIV块级标签
asdfasdf
<div style="color: red;"> 红色字体样式，内嵌DIV
<div>
<a>asdf</a>
</div>
</div>
<div style="color: red;">asdfas</div>
asdf
</div>
</body>
</html>
综合标签
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 自闭合标签 -->
<meta charset="UTF-8" />
<!--<meta http-equiv="Refresh" Content="2"/>-->
<!--<meta http-equiv="Refresh" Content="2; Url=http://www.autohome.com.cn" />-->
<!--标签属性 name="alex" -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>老男人</title>
<link rel="shortcut icon" href="favicon.ico">
</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>
FORM表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form> <表单1>
<input type="text" /> <输入内容>
</form>
<p></p> <为了好看来个空段>
<form> <表单2>
<div style="border: 1px solid red;"> <border边框，1像素，红色>
<各种input输入框>
<p>用户名：<input type="text" /> </p> <输入>
<p>密码：<input type="password" /> </p> <密码输入>
<p>邮箱：<input type="email" /> </p> <邮箱输入>
<p>性别(单选框)：
<br /> 男<input type="radio" name="ee" /> <radio单选>
<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"> <多选菜单，按ctrl多选，有滚动条>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select>
<optgroup label="一线城市"> <固定总菜单项optgroup，无法选择，只能选其下>
<option>上海</option>
<option>北京</option>
</optgroup>
<optgroup label="二线城市">
<option>长沙</option>
<option>武汉</option>
</optgroup>
</select>
</p>
<p>文件：<input type="file" /></p> <选择文件选框>
<p>备注 ： <textarea></textarea> </p> <多行文本输入框>
<input type="submit" value="submit"/> <提交按钮，此动作针对本form的本div中所有输入，可以提交表单>
<input type="button" value="button"/> <单纯的按钮功能；提交的是输入文本>
<input type="reset" value="reset"/> <重置按钮，对本div本form中的所有输入内容清空>
</div>
</form>
</body>
</html>
多form表单：1.假搜索引擎 2.多操作 3.水平分隔后的表单
# 准备工作
1. 安装
tar -xvf Django-1.9.tar.gz
cd Django-1.9/
python3 setup.py install
python3 manage.py runserver 0.0.0.0:8080
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form表单1-->
<!--实现本地输入要查的内容，提交后直接到搜狗直接查结果,叫"假搜索引擎"-->
<!--action动作，get访问，接收内容输入，必须为query才能直接把内容提交给对方搜索-->
<form action="https://www.sogou.com/web" method="get">
<input type="text" name="query" />
<input type="submit" value="提交" />
</form>
<!--form表单2-->
<!--连接自己的网站操作-->
<form action="http://172.16.0.2:8080/index/" method="post" enctype="multipart/form-data">
<input type="text" name="user" />
<input type="password" name="pwd" />
男<input type="radio" name="gender" value="1" />
女<input type="radio" name="gender" value="0"/>
<p>爱好：
篮球<input name="favor" type="checkbox" value="1"/>
足球<input name="favor" type="checkbox" value="2"/>
玻璃球<input name="favor" type="checkbox" value="3"/>
</p>
<p>文件：
<input type="file" name="fafafa"/>
</p>
<p>
<select name="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</p>
<p>
备注：<textarea name="extra"></textarea>
</p>
<input type="submit" value="提交" />
</form>
<!--水平分隔标题或段落-->
<!--此处是将form表单分隔-->
<hr />
<!--form表单3-->
<form>
<input type="text" />
<input type="submit" value="提交" />
</form>
</body>
</html>
序号排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--ul无序列表,前面带点-->
<ul>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ul>
<!--ol有序列表，前面带数字-->
<ol>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ol>
<!--定义列表，带规定格式-->
<dl>
<dt>dt 计算机</dt>
<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>
<!--<style>-->
<!--table{-->
<!--border-right: 1px solid red;-->
<!--border-bottom: 1px solid red;-->
<!--border-spacing: 0;-->
<!--}-->
<!--table td,th{-->
<!--border-left: 1px solid red;-->
<!--border-top: 1px solid red;-->
<!--}-->
<!--</style>-->
</head>
<body>
<!--table制表,border指定边框，第一个tr会默认加粗字体，代表标题-->
<table border="1">
<tr>
<!--合并三列或叫横跨三列-->
<th colspan="3">标题一</th>
<th>标题二</th>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td>内容一</td>
<!--合并三行或叫树跨三行-->
<td rowspan="2">内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td>内容一</td>
<td>内容三</td>
<td>内容三</td>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容三</td>
</tr>
</table>
<hr />
<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>
iframe页面嵌套网页
<!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://autohome.com.cn"></iframe>
</body>
</html>
二、CSS样式写法有三种
1. 单文件
2. head头中(html文件)
3. body体中(html文件)
单文件CSS
-------common.css
div{
background-color: red;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--调用CSS样式文件-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div>asdfasdfsdf</div>
</body>
</html>
块级标签 DIV，占一整行
内联标签 span ,按字符占
-----head头中CSS样式
选择器的使用head定义选择器，body中调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="common.css" />-->
<style>
/*标签选择器，找到所有的标签应用以下样式*/
div{
color: green;
}
/*id选择器，找到标签id等于i1的标签，应用以下样式*/
#i1{
font-size: 56px;
/* color: green; */
}
/*class选择器，找到class=c1的所有标签，应用一下样式*/
.c1{
background-color: red;
}
/*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/
/*.c2 div p a{*/
/**/
/*}*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/
.c4,.c5,.c6{
background-color: aqua;
}
</style>
</head>
<body>
<div class="c4">1</div>
<div class="c5">1</div>
<div class="c6">1</div>
<div class="c2">
<div></div>
<div>
<p>
<span>oo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c3">sdfsdf</div>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a>
<a id="i1">baidu</a>
<div>99</div>
<div>99</div>
<div>99</div>
<div>
<div>asdf</div>
</div>
</body>
</html>
-----body体中CSS样式
float在规定框内左右漂移
# 如果有多个同方向漂移，会飘出去，用clear:both清除全部样式，把飘出去的内容拉回到框内，应该放在最后一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 500px;border: 1px solid red;">
<div style="width: 20%;background-color: aqua;float: left">f</div>
<div style="width: 30%;background-color: beige;float: right">a</div>
<div style="width: 30%;background-color: beige;float: right">a</div>
<!--把飘出去的内容拉回到框内-->
<div style="clear: both;"></div>
</div>
</body>
</html>
float浮动漂移
按百分比漂移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
color: red;
/*background-color: #FF69B4;*/
/*background-color: rgb(25,180,10);*/
/*background-color: red;*/
font-size: 32px;
height: 150px;
width: 500px; /* 按照父亲相对占比*/
}
</style>
</head>
<body>
<div class="c1">sdfdf</div>
<div style="width: 500px;">
<div style="width: 20%;background-color: antiquewhite;float: left">asdf</div>
<div style="width: 80%;background-color: palegoldenrod;float: left">asdf</div>
</div>
</body>
</html>
页面位置固定字段，不随页面滚动，fixed固定，bottom底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 1000px;background-color: #ddd;"></div>
<!--fixed固定，bottom底部，页面位置固定字段，不随页面滚动-->
<div style="position: fixed;right:200px;bottom: 100px;">返回顶部</div>
</body>
</html>
精确固定，不按四框
CSS 相对/绝对(relative/absolute)定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--relative相对定位边框位转置-->
<div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
<div style="height: 200px;background-color: red;">
<!--absolute 绝对定位到右边底部-->
<div style="position: absolute;bottom: 0;right: 0;">111</div>
</div>
</div>
</body>
</html>
显示背景图片，按位置和像素显示部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*显示图片,no-repeat不重复*/
.img{
background-image: url("4.gif");
height: 150px;
width: 400px;
background-repeat: no-repeat;
}
/*显示图片,background-position配置背景图片的超始位置*/
.img2{
background-image: url("2.jpg");
height: 50px;
width: 50px;
background-position: 84px -58px;
}
</style>
</head>
<body>
<div class="img"></div>
<div class="img2"></div>
</body>
</html>
内联标签转化成块标签 span
<!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>
两个框，对漂移操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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>
</head>
<body>
<!--按实际像素显示-->
<img src="2.jpg" style="height: 220px;width: 329px;">
<!--拉长显示-->
<img src="2.jpg" style="height: 500px;width: 20px;">
</body>
</html>
浙公网安备 33010602011771号