190310HTML&CSS&JS
一、HTML
1、web server
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes("HTTP/1.1 200 OK\r\n\r\n", encoding='utf-8'))
client.send(bytes("<h1 style='background-color:red;'>Hello, Seven<h1>", encoding='utf-8'))
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 9999))
sock.listen(5)
while True:
conn, addr = sock.accept()
handle_request(conn)
conn.close()
if __name__ == '__main__':
main()2、web server2
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes("HTTP/1.1 200 OK\r\n\r\n", encoding='utf-8'))
f = open('index', 'rb')
data = f.read()
f.close()
client.send(data)
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 9999))
sock.listen(5)
while True:
conn, addr = sock.accept()
handle_request(conn)
conn.close()
if __name__ == '__main__':
main()3、实例index.html
<h1 style='background-color:red;'>Hello, Seven<h1>
<a href='http://www.baidu.com'>baidu</a>
<table border='1'>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<table>4、head标签
- meta 标签：编码、跳转、刷新、关键字、描述、IE兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <!-- 页面编码 -->
<meta http-equiv="Refresh" content="60"> <!-- 60s自动刷新一次页面 -->
<!--<meta http-equiv="Refresh" content="5; url=http://www.baidu.com" /> 5s后跳转到目标网站-->
<meta name="keywords" content="dongfei,dongfei2">
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8" />
<title>Title</title>
</head>
<body>
<h1>welcome dongfei web site.</h1>
</body>
</html>- title标签
- link标签：加图标
<link rel="shortcut icon" href="image/favicon.ico"> <!--给网站加图标-->- style
- script
5、body标签
5.1：各种符号
- 空格：
- 大于：>
- 小于：<
参考：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
5.2：p和br - p：段落，段落之间有间距
- br：换行
5.3：标题，加大加粗 - h1...h6
5.4：snap标签，行内白板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dongfei</title>
</head>
<body>
<a href="http://www.baidu.com">百 >度</a>
<h3>静夜思</h3>
<h5>作者：李白</h5>
<p>床前明月光，<br/>疑似地上霜。<br/>举头望明月，<br/>低头思故乡。</p>
<span>dongfei</span>
</body>
</html>5.5：div标签，块级白板
6、表单标签
- from标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<form action="http://localhost:xxx/index" method="get"> <!-- 向后端提交表单 -->
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="password" name="password"/>
<input type="button" value="login"/> <!--button默认没有任何功能-->
<input type="submit" value="login2"/>
</form>
</body>
</html>- 提交至搜索引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sougou</title>
</head>
<body>
<form action="https://www.sogou.com/web" method="get">
<input type="text" name="query" value="sogou"/> <!--value:默认值-->
<input type="submit" value="搜索">
</form>
</body>
</html>- 单选框&复选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked" />
女：<input type="radio" name="gender" value="2" />
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" />
足球：<input type="checkbox" name="favor" value="2" />
乒乓球：<input type="checkbox" name="favor" value="3" />
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>- 上传文件&重置表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<p>上传文件：</p>
<input type="file" name="fname">
</div>
<input type="submit" value="upload">
<input type="reset" value="reset">
</form>
</body>
</html>- 多行文本输入
<textarea name="menu" >默认值</textarea>- 下拉框：select标签
<select name="city" multiple="multiple" size="3">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
</select>
<input type="submit" value="提交">7、超链接&锚点
<a href="http://www.baidu.com" target="_blank">百度</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height:600px;">第一章的内容</div>
<div id="i2" style="height:600px;">第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div id="i4" style="height:600px;">第四章的内容</div>
</body>
</html>8、图片
<a href="http://www.baidu.com">
<img src="1.jpg" style="height: 200px;width: 200px;" alt="风景" title="风景">
</a>9、列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<dl>
<dt>123</dt>
<dd>456</dd>
</dl>10、表格
<table border="1">
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
<td>第一行，第三列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
</table><table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</tbody>
</table>- 合并单元格
<td colspan="2">内容2</td><td rowspan="2">内容2</td>11、label标签
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />二、CSS
1、css选择器
- css选择器的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">内容</div>
<div class="c1">内容2</div>
</body>
</html>- id选择器：#1
- class选择器：.c1
- 标签选择器：div
- 层级选择器：.c1 .c2
- 组合选择器：.c1,.c2
属性选择器：.c1[type='text']
2、引入css文件
<link rel="stylesheet" href="commons.css">3、基本样式
- border: 1px solid red;边框
- height: 48px;width: 200px;高和宽
- font-size: 18px;字体大小
- line-height:垂直居中
- text-align:ceter:水平居中
- font-weight:加粗
color:字体颜色
4、float
块级标签漂起来堆叠
<div style="width: 20%;background-color: red;float: left">左侧</div>
<div style="width: 60%;background-color: yellow;float: right">右侧</div>5、display
- display: inline;将div转换为span
- display: block;将span转换为div
- display: inline-block;
- display: none; 让标签消失
6、padding margin 内边距和外边距
- margin-top: 10px;外边距
- padding-top: 10px;内边距
7、position属性
<div style="width: 50px;
height: 50px;
background-color: black;
color: white;
position: fixed;bottom: 20px;right: 20px;">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;"></div>- 顶部标题栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>- relative+absolute 实现相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
</html>- 三层
- z-index: 10;数值最大的在上层
- opacity: 0.5;透明度50%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: fixed;
background-color: white;
height: 400px;
width: 500px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
"></div>
<div style="position: fixed;background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
z-index: 9;
"></div>
<div style="height: 5000px;background-color: green;">内容</div>
</body>
</html>8、图片的显示
<div style="height: 200px;width: 300px;overflow: hidden"> #混动条
<img src="win.jpg">
</div>9、鼠标移动到字体变颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 44px;
background-color: #2459a2;
line-height: 44px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<a class="menu">小视频</a>
</div>
</div>
<div class="pg-body">
<div class="w">正文</div>
</div>
</body>
</html>10、背景图片以及图标
- 全写
<div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px;border: 1px solid red;width: 20px;
background-position-x: 0;
background-position-y: 2px; /*y轴移动图片*/
"></div>- 简写
<div style="background: url(icon_18_118.png) 0 -79px no-repeat;height: 20px;border: 1px solid red;width: 20px;"></div>11、带图标的登录框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 400px;height: 35px;position: relative;">
<input type="text" style="width: 370px;height: 35px;padding-right: 30px;"/>
<span style="background: url(icon_18_118.png) 0 -139px no-repeat;width: 20px;height: 20px;display: inline-block;position: absolute;right: 0;top: 10px;"></span>
</div>
</body>
</html>三、JavaScript
1、js引用，写在body内部的最下边
<script src="commons-js.js"></script>2、在html中,type="text/javascript可不写
<script type="text/javascript"></script>3、变量
- 数字
age = 18; //声明变量，默认为字符串
i = parseInt(age); //将age转换为整数
k = parseFloat(age); //将age转换为浮点数- 字符串
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号4、定时器
setInterval("alert('dongfei')", 5000); //定时器，每5s执行一次5、console打印log
console.log(1);6、跑马灯示例
<div id="i1" style="text-align: center;font-size: 24px;">欢迎xxx莅临指导 </div>
<script>
function func() {
var tag = document.getElementById('i1');
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
setInterval("func()", 500);
</script>190310HTML&CSS&JS的更多相关文章
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...
- IIS7的集成模式下如何让自定义的HttpModule不处理静态文件（.html .css .js .jpeg等）请求
今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html ...
- 网站加载css/js/img等静态文件失败
网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...
- 【前端】Sublime text3 插件HTML/CSS/JS prettify 格式化代码
1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...
随机推荐
- python的ftplib模块
Python中的ftplib模块 Python中默认安装的ftplib模块定义了FTP类,其中函数有限,可用来实现简单的ftp客户端,用于上传或下载文件 FTP的工作流程及基本操作可参考协议RFC95 ...
- 25-从零玩转JavaWeb-抽象类
一.抽象类解决什么问题 求三角形,圆,矩形的面积 发现三个类都有共同的方法 ,所以我们可以抽出一个父类, 把他们相同的方法放到父类当中 二.什么是抽象方法 三.什么是抽象类 四.抽象类的特 ...
- 老外畅想C# 5.0这个可以有
C# 5.0 - not quite there yet! 老外大胆的YY了一下,感觉挺有意思转发过来. 回顾C#发展的历史,C#1.0模仿了Java,并保留了C/C++的一些特性如struct,新学 ...
- HTML中 .clearfix:after的使用
将一个<div>标签随着内容的增加而增加
- 仿函数（二、stl中常用仿函数）
提到C++ STL,首先被人想到的是它的三大组件:Containers, Iterators, Algorithms,即容器,迭代器和算法.容器为用户提供了常用的数据结构,算法大多是独立于容器的常用的 ...
- 448. Find All Numbers Disappeared in an Array 寻找有界数组[1,n]中的缺失数
［抄题］: Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice ...
- PyGrub
from:https://wiki.debian.org/PyGrub Using pyGRUB on Wheezy to boot a domU kernel Using pyGRUB from x ...
- Linuc bazaar命令
一.简介 Bazaar 是一种强大的新一代源代码控制系统,它能够适用于所有主流操作系统,能够适应任何开发团队的工作模式. 二.安装 1)yum方式 yum install -y bzr 三.教 ...
- jquery 遮罩层指定位置
.css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px ...
- 解决IE与FF 中 input focus 光标移动在最后的方案
只要把input元素的id传进来即可 function moveCursor(id) { var id = document.getElementById(id); id.focus(); var ...