190310HTML&CSS&JS

发布时间：2023-09-06 02:35责任编辑：苏小强关键词：CSS HTML

一、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>

190310HTML&CSS&JS

原文地址：https://www.cnblogs.com/L-dongf/p/10562185.html

190310HTML&CSS&JS

一、HTML

1、web server

2、web server2

3、实例index.html

4、head标签

5、body标签

6、表单标签

7、超链接&锚点

8、图片

9、列表

10、表格

11、label标签

二、CSS

1、css选择器

2、引入css文件

3、基本样式

4、float

5、display

6、padding margin 内边距和外边距

7、position属性

8、图片的显示

9、鼠标移动到字体变颜色

10、背景图片以及图标

11、带图标的登录框

三、JavaScript

1、js引用，写在body内部的最下边

2、在html中,type="text/javascript可不写

3、变量

4、定时器

5、console打印log

6、跑马灯示例

知识推荐