190310HTML&CSS&JS -云博客

190310HTML&CSS&JS

# 前端 2024-05-05 03:55 0 32 来源：云博客

一、HTML

1、web server

import socketdef 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 socketdef 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">百&nbsp;&nbsp;&nbsp;&nbsp;&gt;度</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莅临指导&nbsp;&nbsp;&nbsp;&nbsp;</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>