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 ...
随机推荐
- leetcode144
/** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...
- python文件处理-读、写
Python中文件处理的操作包括读.写.修改,今天我们一起来先学习下读和写操作. 一.文件的读操作 例一: #文件读操作 f = open(file="first_blog.txt" ...
- Unity3D Physics Keynote
[Unity3D Physics Keynote] 1.在哪设置Layer Collision Matrix? "Edit"->"Project Settings& ...
- 图论算法》关于tarjan算法两三事
关于tarjan,在下觉得这个算法从本质上是一种暴力求强连通分量的方法,但事实上这也是最有效的求强连通分量的方法之一,它对于处理各种强连通分量中奇怪问题,都可以直接转化,所以比较通用和常见. 什么是t ...
- 修改Tomcat可支持get传参方式的url长度，get形式
maxHttpHeaderSize="8192"加在 <Connector port="8081" maxHttpHeaderSize="314 ...
- shell 别名alias
在这说下 shell 命令 alias 别名 看个人爱好 设置. 直接执行命令 显示当前所有别名 alias 别名＝'新的别名' 该命令在当窗口关闭以后 会失效 想要永久生效 需要在 ...
- 38-最长公共子序列(dp)
最长公共子序列 https://www.nowcoder.com/practice/c996bbb77dd447d681ec6907ccfb488a?tpId=49&&tqId=293 ...
- PHP学习笔记之continue与break
百度中有人这样解释:break是结束整个循环体,continue是结束单个循环体.昨天看燕十八老师PHP视频,讲到break,continue时,举了一个例子,理解更容易.天龙八部中,西夏国公主选婿, ...
- CF547D Mike and Fish
欧拉回路,巧妙的解法. 发现每一个点$(x, y)$实际上是把横坐标和$x$和纵坐标$y$连一条线,然后代进去跑欧拉回路,这样里一条边对应了一个点,我们只要按照欧拉回路间隔染色即可. 注意到原图可能并 ...
- Python3 BeautifulSoup和Pyquery解析库随笔
BeautifuSoup和Pyquery解析库方法比较 1.对象初始化: BeautifySoup库: from bs4 import BeautifulSoup html = 'html strin ...