前端 一. 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=" 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=" 500px;border: 1px solid red;"> <div style=" 20%;background-color: aqua;float: left">f</div> <div style=" 30%;background-color: beige;float: right">a</div> <div style=" 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=" 500px;"> <div style=" 20%;background-color: antiquewhite;float: left">asdf</div> <div style=" 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; 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; 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; 329px;"> <!--拉长显示--> <img src="2.jpg" style="height: 500px; 20px;"> </body> </html>