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 ...
随机推荐
- 判定元素是否刚插入到DOM树
上接<这篇博文>,其应用于avalon的if绑定.如果一个节点还没有插入DOM树,那么avalon将延时对它进行扫描渲染,直到它再次插入到DOM树为止.由于CSS3 keyframe动画的 ...
- java tcp socket实例
java tcp socket实例 2011-04-20 13:58 2364人阅读 评论(1) 收藏 举报 socketjavatcpthreadserverclass package com.ne ...
- php中不借助IDE快速定位行数或者方法定义的文件和位置
借助了ReflectionMethod的一些特性,可以快速获得函数或者方法是在哪个文件的什么位置定义的,对于调试没有文档的程序来说很有帮助! ---------------- function fun ...
- Angular27 指令
1 自定概述 2 自定义指令 详情参见<揭秘Angular2> 2.1 属性指令 >工具代码 <div class="panel panel-primary" ...
- js颜色拾取器
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
- Ubuntu14.04（64位）下gcc-linaro-arm-linux-gnueabihf交叉编译环境搭建
1. 下载 gcc-linaro-arm-linux-gnueabihf-4.9.tar.gz 下载地址参考:http://blog.csdn.net/lg1259156776/article/det ...
- python 正则表达式 练习题
会用到的语法 正则字符 释义 举例 + 前面元素至少出现一次 ab+:ab.abbbb 等 * 前面元素出现0次或多次 ab*:a.ab.abb 等 ? 匹配前面的一次或0次 Ab?: A.Ab 等 ...
- phpmyadmin安全预防
头疼的安全 之前服务器总是本人黑,千疮百孔,只能一步步的去做一些安全防范,如何防范自然先从如何渗透开始. 文章及建议 前段时间看到了个phpmyadmin提权的教程,很多人都说现在那里还有root帐号 ...
- Gabor filter与Gabor transform
https://en.wikipedia.org/wiki/G%C3%A1bor Gabor filter:a linear filter used in image processing一种线性滤波 ...
- LibreOJ 6000 搭配飞行员(最大流)
题解:最基础的最大流,按照主飞行员与起点建边,副飞行员与终点建边,可以同坐的主副飞行员之间建边,值均为一,然后跑一边最大流就完美了! 代码如下: #include<queue> #incl ...