通俗的解释:HTML是一个没有穿衣服的人
CSS是穿上了华丽衣服的人
JS是使这个人动起来
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。
例一:模拟web服务器,供浏览器客户端访问
#!/usr/bin/env python # -*- coding:utf-8 -*- import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n") client.send(‘12345‘) def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind((‘localhost‘, 8003)) sock.listen(5) while True: connection, address = sock.accept() handle_request(connection) connection.close() if __name__ == ‘__main__‘: main()
运行此服务端后,浏览器访问如下:
例二:模拟拟web服务器,供浏览器客户端访问,此时web服务器加上了html等效果
服务端sock(注意这里我加了h1这个html标签,并且设置成了红色字体,端口我换了一个,有冲突,但加上一个重复利用端口参数加上就可以了。)
#!/usr/bin/env python # -*- coding:utf-8 -*- import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n") client.send("<h1 style=‘color:red;‘>12345</h1>") def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind((‘localhost‘, 8004)) sock.listen(5) while True: connection, address = sock.accept() handle_request(connection) connection.close() if __name__ == ‘__main__‘: main()
运行此服务端后,浏览器访问如下:
例三::不知不觉就写出了一个简介的WEB框架了
服务端sock,这里我读入s.log文件里的内容
#!/usr/bin/env python # -*- coding:utf-8 -*- import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n") a = open(‘s.log‘) data = a.read() a.close() client.send(data) def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind((‘localhost‘, 8005)) sock.listen(5) while True: connection, address = sock.accept() handle_request(connection) connection.close() if __name__ == ‘__main__‘: main()
s.log文件如下,下面是html内容,为了规范,一般将下面内容存成一个.html后缀的文件
<h1 style=‘color:red;‘>12345</h1>
运行此服务端后,浏览器访问如下:也能看到有效果出来,说明应用s.log文件里的内容成功。
HTML
新建一个html文件默认内容如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
注:HTML的注释使用<!-- 内容 -->来表示,多行同样的适用。
CSS的注释使用/* 内容 */来表示,多行同样的适用。
JavaScript注释使用//内容表示单行注释,多行注释使用/*内容*/来注释。
jQuery是JavaScript的一个代码库(类库),可使用的注释与它一样,用//内容与/*内容*/来注释。
HTML head(头)
直接上栗子吧!这样更容易解释与理解。
例一:设置了5秒钟刷新一次页面,并写了一个h1标签显示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--5秒钟刷新一次页面--> <meta http-equiv="Refresh" Content="5"> <title></title> </head> <body> <h1>ssssss</h1> </body> </html>
浏览器运行并打开F12网站调度键效果如下:会不断的5s刷新页面
例二:刷新页面并跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--5秒钟刷新一次页面--> <!--<meta http-equiv="Refresh" Content="5">--> <!--5秒刷新页面并跳转,跳转后就不刷新了--> <meta http-equiv="Refresh" Content="5;Url=http://www.taobao.com"> <title></title> </head> <body> <h1> ssssssssssssssssssssssss</h1> </body> </html>
浏览器运行效果如下:5s钟后刷新页面会跳转到www.taobao.com去了
例三:title的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--5秒钟刷新一次页面--> <!--<meta http-equiv="Refresh" Content="5">--> <!--5秒刷新页面并跳转--> <!--<meta http-equiv="Refresh" Content="5;Url=http://www.taobao.com">--> <title>我的网页头部信息</title> </head> <body> <h1> ssssssssssssssssssssssss</h1> </body> </html>
浏览器运行效果如下:
例四:title下的link来加上icon网页头部图片favicon.icon
制作好的图片需要放在供html文件访问到的位置,这里我放在与html文件相同目录下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--5秒钟刷新一次页面--> <!--<meta http-equiv="Refresh" Content="5">--> <!--5秒刷新页面并跳转--> <!--<meta http-equiv="Refresh" Content="5;Url=http://www.taobao.com">--> <title>我的网页头部信息</title> <!--添加的网页小图标--> <link rel="shortcut icon" href="favicon.icon" > </head> <body> <h1> ssssssssssssssssssssssss</h1> </body> </html>
浏览器运行效果如下:
HTML body
内联标签(自己有多少占多少)
块级标签(占整行)
为了方便实验,我新建了一个h2.html文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 style=""> sssssss</h1> <a style="">我的页面</a> </body> </html>
其中body下的<a>标签是内联标签,<h1>标签是块级标签
浏览器运行效果如下:
需要注意的是:red与 green后面都有一个分号,这样的话在分号后面还可以设置参数,比如字体字体颜色等
修改成如下<a style="color:antiquewhite;">我的页面</a>
例二:HTML中特殊字符处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1> </body> </html>
这里<代表<小于,>代表>大于
浏览器运行如下:
附HTML特殊字符编码对照表:http://www.jb51.net/onlineread/htmlchar.htm
常用标签
p和br
p表示段落,默认段落之间是有间隔的
br是换行
例一:p的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>雄姿英雄姿英发</p> <p>雄姿英雄姿英发</p> <p>雄姿英雄姿英发</p> </body> </html>
浏览器运行如下:可以看到,段落中间就间隔
例二:br的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>雄姿英雄姿英发</p> <p>雄姿英雄姿资资资资资<br/>资资资资资英发</p> <p>雄姿英雄姿英发</p> </body> </html>
浏览器运行如下:可以看到,从br代码处分隔了,分隔后没有间隔
例三:各种跳转,锚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a target="_blank" href="http://www.taobao.com">新开页面跳转到一个URL地址</a> <a href="#a2">点击跳转到a2书签</a> <div id="a1" style="height:700px;">1</div> <div id="a2" style="height:500px;">2</div> </body> </html>
href表示跳转,并且是本页面跳转,加上target="_blank"后表示新开一个页面跳转,href="#a2"表示点击后则会跳转到id为a2标签上面去,#很关键。
浏览器运行如下:
例四:基础下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select name="group"> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">广州</option> </select> </body> </html>
浏览器运行如下:可以看到上面的代码中,selected设置的为广州就表示默认不选择的话就是广州
例五:下拉框(二)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select multiple="multiple" size="2"> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">广州</option> </select> </body> </html>
浏览器运行如下:Multiple代表可以按着shift多选,size代表下拉框显示多长
例六:下拉框(三)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select> <optgroup label="河北省"> <option>石家庄</option> <option>邯郸</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遥</option> </optgroup> </select> </body> </html>
浏览器运行如下:label不能选,只是显示一下。
上面已经说到1,各种符号;2,p和br;3,a标签;4,H标签;5,select标签;
接下来就要学习input了
input系列
例一:input 的checkbox(多选框),checked="checked"表示默认勾选上了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" checked="checked" /> </body> </html>
浏览器运行如下:
例二:input的 radio;Radio一般用于只能选一个的时候,比如性别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="radio" /> <input type="radio" /> <input type="radio" /> </body> </html>
浏览器运行如下:可以看到默认可以多选
默认的是可以多选的,只要加上一个参数name参数设置为相同就只能单选了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="radio" /> <input type="radio" /> <input type="radio" /> <hr /> <input type="radio" name="gender"/> <input type="radio" name="gender"/> <input type="radio" name="gender"/> </body> </html>
浏览器运行如下:只能单选
例三:input系统文本框
<input /> 不写任何参数默认就是一个文本框
type=”text”表示文本框,type=”password”表示密码文本框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" /> <input type="password" /> <input /> </body> </html>
浏览器运行如下:
例四:input系列button按钮及file文件上传
type=”file”表示上传文件按钮type="text" value="123"表示文本框默认有值123。type=”button”与type=”submit”都表示按钮此处看着没有差别,其实是有差别的,如果submit按钮处于from表单里面,则会将这个from表单提交给后台。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="提交"/> <input type="submit" value="提交"/> <input type="file" /> <input type="text" value="123" /> </body> </html>
浏览器运行如下:
以上input系列就完了,值得一提的是,有一个textarea标签与input系列的type=”text”类似,只是textarea标签可以输入多行的框,而text只能单行
例一:使用textarea多行输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" value="123" /> <textarea>123 </textarea> </body> </html>
浏览器运行如下:
例二:如果学了css还可以自己指定文本框的大小
下面的style="height:50px;width:50px;"就是指定文件框的大小为50像素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" value="123" /> <textarea style="height:50px;width:50px;">123 </textarea> </body> </html>
浏览器运行如下:
form表单
可以有多个表单存在
例一:表单中使用input系列的submit提交
以下写了两个按钮,但只有submit按钮有效果,button按钮不行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一个表单--> <form> <p>用户名:<input type="text" /></p> <p>密码:<input type="password" /></p> <input type="submit" value="提交"/> <input type="button" value="按钮"/> </form> <!--第二个表单--> <form> <p>用户名:<input type="text" /></p> <p>密码:<input type="text" /></p> </form> </body> </html>
浏览器运行如下:
例二:模拟使用submit按钮提交一个表单,表单开头的method="get"可以不写,默认就是get
注意性别那一栏的value 这里必须要指定一个值用于区别,否则提交给服务器的表单这个性别值为on,服务器区别不出来
模拟提交表单及性别单选
浏览器运行如下:(此时不能点提交向服务器提交表单,因为我的服务器地址设置的是<form action="http://127.0.0.1:8000/login/" method="get">,这个地址并不能使用)
例三:兴趣爱好可以多选,投票也可以多选
使用input系列的checkbox多选框可以通过设置不同的name及value来区分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://127.0.0.1:8000/login/" method="get"> <p> 用户名:<input type="text" /> </p> <p> 密码:<input type="password" /> </p> <p> 部门:<select name="depart"> <option value="1">CEO</option> <option value="2">DBA</option> </select> 性别:<input type="radio" name="gender" value="1" />男<br/> <input type="radio" name="gender" value="2" />女<br/> <input type="radio" name="gender" value="3" />中<br/> <textarea name="mulit"></textarea> 兴趣爱好: <input type="checkbox" name="favor" value="v1" /> <input type="checkbox" name="favor" value="v2" /> <input type="checkbox" name="favor" value="v3" /> <input type="checkbox" name="favor" value="v4" /> 投票: <input type="checkbox" name="vote" value="v11" /> <input type="checkbox" name="vote" value="v22" /> <input type="checkbox" name="vote" value="v33" /> <input type="checkbox" name="vote" value="v44" /> </p> <input type="submit" value="提交"/> </form> </body> </html>
浏览器打运行如下:我这里选择了兴趣第一个与每二个框,投票的第二个与第三个框,使用submit按钮提交个表单服务器就能看到提交的值key=favor value=[v1,v2],key=vote value=[v22,v33],这儿同样不能提交
例四:模拟使用submit按钮提交表单(提交到搜狗搜索)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="https://www.sogou.com/web?"> <p>关键字:<input type="text" name="query"/></p> <input type="submit" /> </form> </body> </html>
浏览器打运行如下:使用搜狗搜索一般https://www.sogou.com/web?query=我的世界 这样子,我在上面代码中将自己的key定义成了query。这样输入的值就是value了,也就是query=等号后面的值
例五:几种列表格式
label for=”name2” 跟之前说过的锚有点儿相似,这里的效果是点姓名,或婚否这几个中文字会跳到相应的输入框中。
<ul><li>结合使用表示前面的编号为黑点<ol><li>结合使用表示前面的编号为有序的数字
<dl><dt><dd>中<dt>代表相当于省<dd>想当于省下面的市这样的层级关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <label for="name2"> 姓名: <input id="name2" type="text"> <label> <label for="marriy2"> 婚否: <input id="marriy2" type="checkbox"> <label> <ul> <li>sssssssssssssssssssss</li> <li>sssssssssssssssssssss</li> <li>sssssssssssssssssssss</li> <li>sssssssssssssssssssss</li> </ul> <ol> <li>sssssssssssssssssssss</li> <li>sssssssssssssssssssss</li> <li>sssssssssssssssssssss</li> <li>sssssssssssssssssssss</li> </ol> <dl> <dt>湖南省</dt> <dd>长沙市</dd> <dd>株洲市</dd> <dt>广东省</dt> <dd>广州市</dd> <dd>深圳市</dd> </dl> </body> </html>
浏览器打运行如下:
例六:合并单元格
colspan="2"表示向右合并,占两格。rowspan="2"表示向下合并,占两格。最后面一行的<td>1</td>我删除掉了,不然的话会出现空白行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--合并单元格--> <table border="1"> <tr> <td colspan="2">1</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table> </body> </html>
浏览器打运行如下:
例七:加深标题单元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--合并单元格2--> <table border="1"> <thead> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> </thead> <tbody> <tr> <td colspan="2">1</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </tbody> </table> </body> </html>
浏览器打运行如下:
例八:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <fieldset> <legend>登陆</legend> <p>用户名:</p> <p>密码:</p> </fieldset> </body> </html>
浏览器运行如下:这种一般不常用。一般自己写的。
例九:div标签及块级与内联标签之间的转换
div不作任何处理,只是作为一个容器,分割页面。div 是块级标签,可以通过display转换为内联标签,他们是可以互相转换的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="">div是块级标签</div> <div style="display:inline">块级变内联标签</div> <a style="display:block">内联标签变块级标签</a> <div>div相当于一个大容器,而小容器则是span标签<span style="display:block">span转换成块级标签后</span></div> </body> </html>
浏览器运行效果如下:
CSS
选择器
有三种方法设置CSS,其中它们的优先级
最高是自己文件的style=”color:red;”这种
第二是class=”re”这种
最后才是调用CSS文件
例一:style=”color:red;” 的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="color:red;"> kkkkk </div> </body> </html>
浏览器运行效果如下:
例二: class=”re”的使用
可以看到,在<head>里面加上了一个<style>指定了一个class为re
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .re{ color:red; } </style> </head> <body> <span class="re">rerere</span> </body> </html>
浏览器运行效果如下:
例三:调用CSS文件
注意创建CSS文件的时候选择的就是stylesheet这种类型
common.css文件内容如下:
.re{ color:red; }
h2.html文件如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--调用 common.css文件--> <link rel="stylesheet" href="common.css" /> </head> <body> <span class="re">css</span> <span class="re">css</span> <span class="re">css</span> </body> </html>
浏览器运行效果如下:也能看到样式应用上了
例四:调用css文件的几种类型
common.css文件内容如下
.re{ color:red; } #name{ background-color:antiquewhite; } span{ font-size:100px; }
上面的.re代表所有class="re"所有这样调用的生效,#name代表所有id是name的就生效,span代表所有的span标签都生效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--调用 common.css文件--> <link rel="stylesheet" href="common.css" /> </head> <body> <span style="color:#dddddd;" class="re">asdf</span> <span class="re">asdf</span> <span id="name" class="re">asdf</span> </body> </html>
浏览器运行效果如下:
Background(背景颜色),图片,border(边框)
Common.css文件如下:
.re{ color:red; } #name{ background-color:antiquewhite; } span{ font-size:100px; }
需要一张图片,路径如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--调用 common.css文件--> <link rel="stylesheet" href="common.css" /> </head> <body> <!--背景颜色条--> <div style=""> </div> <!--背景图片--> <div style="background-image:url(‘image/4.gif‘); height: 80px;"></div> <!--加上no-repeat避免图片重复--> <div style="background-image:url(‘image/4.gif‘); height: 80px;background-repeat:no-repeat"></div> <!--加上边框,solid代表实线,border代表大小,red代表颜色--> <div style="border:1px solid red; height: 10px;"></div> <br></br> <div style="border:1px dotted red; height: 10px;"></div> <br></br> <div style="border:1px dashed red; height: 10px;"></div> <!-- border-left表示左边3px大小的线--> <div style="border-left:3px solid green;">asdfasdf</div> <div style="border-right:3px solid green;">asdfasdf</div> <div style="border-top:3px solid green;">asdfasdf</div> <div style="border-bottom:3px solid green;">asdfasdf</div> <!--设置style="display:none"后会消失,去掉即展现出来--> <!--如果display设置为block则将标签由内联标签转换成块级标签,设置为inline则将块级标签设置为内联标签--> <span id="name" class="re" style="display:none">ssss</span> </body> </html>
浏览器运行效果如下:
Cursor(鼠标)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <h2>cursor</h2> <a href="http://www.autohome.com.cn">autohome</a> <input type="text"> <span>老衲</span> <ul> <li>css提供的cursor值</li> <p> <!--鼠标移动到这些字上面会有不同的状态--> <span style="cursor:pointer;">pointer</span> || <span style="cursor:help;">help</span> || <span style="cursor:wait;">wait</span> || <span style="cursor:move;">move</span> || <span style="cursor:crosshair;">crosshair</span> </p> <li>伪造超链接</li> <p><span style="cursor:pointer;color:blue;">pointer</span></p> <li>自定义(一般不用)</li> <p> <span style="cursor:url(image/favicon.icon),auto;">mine</span> </p> </ul> <br> </div> </body> </html>
浏览器运行效果如下:
浮动
因为是块级标签会占整行,所以这里设置一个float:left;来往左漂,左对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .w-left{ width: 20%; background-color:red; height:500px; float: left; } .w-right{ width: 80%; background-color:green; height:500px; float: left; } </style> </head> <body> <div> <div class="w-left"></div> <div class="w-right"></div> </div> </body> </html>
浏览器运行效果如下: