import socket
sk=socket.socket()
sk.bind(('127.0.0.1'),8888)
sk.listen(5)
while true:
conn,addr=sk.accept()
data=conn.recv(4)
conn.send(b"http/1.1 200 ok
")
conn.send(b"<h1>hello world</h1>")
conn.close()
浏览器发送请求---->http协议---->服务端接收请求----> 服务端返回响应----->服务端把html文件内容发给浏览器----->浏览器渲染页面
html是什么?
1、超文本标记语言,是一种用于创建网页的标记语言。
2、本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页,对于不同的浏览器,对同一个标签可能会有不同的解释
3、网页文件的扩展名:html或htm
html 是一种网页标记语言,不是编程语言
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
几个重要的属性:
id:定义标签的唯一ID,html文档树中唯一
class:为html元素定义一个或多个类名,
style:规定元素的行内样式(CSS样式)
使用
head内常用标签
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义js代码或者引入外部js
<link/> 引入外部样式表文件或网站图标
<meta/> 定义网页原信息
body 内常用标签
<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>
空格---> 
div span 标签
div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的biao现
span标签用来定义行内元素,并无实际的意义。主要通过CSS样式 为其赋予不同的表现。
块级元素和行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需要另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是在专门为定义CSS样式而生的。
注意:
关于标签嵌套:通常块级元素可以包含行内元素或某些块级元素,但是行内元素不能包含块级元素,只能包含行内元素。
P标签不能包含块级标签,也不能包含P标签。
img标签
<img src='图片的路径' alt='图片未加载成功时的提示' title='鼠标悬浮时提示的消息' width='宽' height='高'>
a 标签,超链接标签
http://www.baidu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成:
1、协议:http
2、域名或IP地址:www.baidu.com或222.172.123.33
3、站点中的目录:stu
4、页面名称:into.html
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
target:
_blank表示在新标签页中打开目标网页
_self 表示在当前标签页中打开目标网页
列表
1、无序列表
<ul type="disc">
<li>无序列表</li>
<li>无序列表</li>
</ul>
type属性:
disc 实心圆点,默认值
circle 空心圆圈
square 实心方块
none 无样式
1、有序列表
<ol type="1" start=“2”>
<li>列表</li>
<li>列表</li>
</ol>
type属性:
1 数字列表,默认值
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
form表单
表单用于向服务端传输数据,从而实现用户与web服务器的交互。
input元素,input元素会根据不同的type属性,变化为多种形态
<input type="text"/> 单行输入文本
<input type="password"/> 密码输入框
<input type="date"/> 日期输入框
<input type="checkbox" checked="checked"/> 复选框
<input type="radio"/> 单选框
<input type="submit" value=“提交”/> 提交按钮
<input type="reset" value=“重置”/> 重置按钮
<input type="button" value=“普通按钮”/> 普通按钮
<input type="hidden"/> 隐藏输入框
<input type="file"/> 文本选择框
下拉框select 标签
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4">森真</option>
</select>
</form>
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>表单
行内元素:行内大多为描述性标记
<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、宽度没有设置的时候,默认为100%
4、块级元素中可以包含块级元素和行内元素
#### 行内元素
1、和其他元素都在一行
2、高度宽度以及内边距都是不可控的
3、宽高就是内容的高度,不可以改变
4、行内元素只能行内元素,不能包含块级元素