目录
import socketsk = socket.socket()sk.bind(("127.0.0.1", 8080))sk.listen(5)while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close()
过程:浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
html是什么?
html不是什么?
HTML是一种标记语言(markup language),它不是一种编程语言。HTML使用标签来描述网页。
html文档结构
最基本的HTML文档:
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>css样式优先级</title></head><body></body></html>
补充:
1. <!DOCTYPE html>声明为HTML5文档。2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。4. <title>、</title>定义了网页标题,在浏览器标题栏显示。5. <body>、</body>之间的文本是可见的网页主体内容。
html标签
单标签:<br/>、<hr/>、<img src="1.jpg" />等。 双标签:<div>和</div>,第一个标签是开始,第二个标签是结束。
几个重要的属性
id:定义标签的唯一id,就好像人的身份证class:为html元素定义一个或多个类名style:规定元素的行内样式(CSS样式)
html注释
<!--注释内容-->
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<b>加粗</b><i>斜体</i><u>下划线</u><s>删除</s><p>段落标签</p><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!--换行--><br><!--水平线--><hr>
内容 对应代码空格 > >< <& &¥ ¥版权 ©注册 ®
img标签 img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签超链接标签a?href="http://www.oldboyedu.com"?target="_blank"?>点我</a> 所谓的超链接是指从一个网页指向一个目标的连接关系href属性指定目标网页地址。该地址可以有几种类型:绝对URL - 指向另一个站点(比如 href="http://www.jd.com)相对URL - 指当前站点中确切的路径(href="index.htm")锚URL - 指向页面中的锚(href="#top") target属性:_blank表示在新标签页中打开目标网页_self表示在当前标签页中打开目标网页
补充
URL地址由4部分组成第1部分:为协议:http://、ftp://等 第2部分:为站点地址:可以是域名或IP地址第3部分:为页面在站点中的目录:stu第4部分:为页面名称,例如 index.html各部分之间用“/”符号隔开。
列表1.无序列表<ul type="disc"> <li>第一项</li> <li>第二项</li></ul> type属性:disc(实心圆点,默认值)circle(空心圆圈)square(实心方块)none(无样式)
有序列表<ol type="1" start="2"> <li>第一项</li> <li>第二项</li></ol> type属性:1 数字列表,默认值A 大写字母a 小写字母Ⅰ大写罗马ⅰ小写罗马
标题列表标签<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd></dl>
表格标签<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody>
form表单标签<form type=""> </from>type属性:属性 描述accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。action 规定向何处提交表单的地址(URL)(提交页面)。autocomplete 规定浏览器应该自动完成表单(默认:开启)。enctype 规定被提交数据的编码(默认:url-encoded)。如果是上传文件需要将enctype="multipart/form-data"method 规定在提交表单时所用的 HTTP 方法(默认:GET)。name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。novalidate 规定浏览器不验证表单。target 规定 action 属性中地址的目标(默认:_self)。
input元素type属性值 表现形式 对应代码text 单行输入文本 <input type=text" />password 密码输入框 <input type="password" />date 日期输入框 <input type="date" />checkbox 复选框 <input type="checkbox" checked="checked" />radio 单选框 <input type="radio" />submit 提交按钮 <input type="submit" value="提交" />reset 重置按钮 <input type="reset" value="重置" />button 普通按钮 <input type="button" value="普通按钮" />hidden 隐藏输入框 <input type="hidden" />file 文本选择框 <input type="file" />----------------------------------------------------------------------属性:name:表单提交时的“键”,注意和id的区别value:表单提交时对应项的值type="button", "reset", "submit"时,为按钮上显示的文本年内容type="text","password","hidden"时,为输入框的初始值type="checkbox", "radio", "file",为输入相关联的值checked:radio和checkbox默认被选中的项readonly:text和password设置只读disabled:所有input均适用
select标签<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select></form> 属性说明:multiple:布尔属性,设置后为多选,否则默认单选disabled:禁用selected:默认选中该项value:定义提交时的选项值
textarea多行文本<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>属性说明name:名称rows:行数cols:列数disabled:禁用
块级标签:<h1>...</h1> 标题一级 <h2>...</h2> 标题二级 <h3>...</h3> 标题三级 <h4>...</h4> 标题四级 <h5>...</h5> 标题五级 <h6>...</h6> 标题六级 <hr> 水平分割线 <p>...</p> 段落 <ul>...</ul> 无序列表 <ol>...</ol> 有序列表 <dl>...</dl> 定义列表 <table>...</table> 表格 <form>...</form> 表单 <div>...</div> 特点: 1.总是从新的一行开始 2.高度、宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素
行内标签:<span>...</span> <a>...</a> 链接 <br> 换行 <b>...</b> 加粗 <strong>...</strong> 加粗 <img > 图片 <i>...</i> 斜体 <em>...</em> 斜体 <del>...</del> 删除线 <u>...</u> 下划线 <input>...</input> 文本框 <textarea>...</textarea> 多行文本 <select>...</select> 下拉列表 特点: 1.和其他元素都在一行 2.高度、宽度以及内边距都是不可控的 3.宽高就是内容的高度,不可以改变 4.行内元素只能行内元素,不能包含块级元素