HTML文档结构
HTML
import socketserver = socket.socket()server.bind(('192.168.16.160',8001))server.listen()while 1: conn,addr = server.accept() from_browers_msg = conn.recv(1024) print('from_browers_msg',from_browers_msg.decode('utf-8')) send_msg = b'HTTP/1.1 200 ok\r\n\r\n' # data = b'daguangtou
' conn.send(send_msg) # conn.send(data) with open('test01.html','r',encoding='utf-8') as f: data = f.read() import time data = data.replace('{ { name }}',str(time.time())) conn.send(data.encode('utf-8')) conn.close()
test01.html内容:
Title 24期nb
{ { name }}
标签语法
标签的语法: <标签名 属性1="“属性值1”" 属性2="“属性值2”……"> 内容部分 标签名> <标签名 属性1="“属性值1”" 属性2="“属性值2”……" />
HTML常用标签
head内常用标签
标签 | 意义 |
---|---|
定义网页标题 | |
定义内部样式表 | |
定义JS代码或引入外部JS文件 | |
引入外部样式表文件 | |
定义网页原信息 |
body基本标签
不加标签的纯文字也是可以在body中写的加粗斜体下划线删除段落标签
#独占一个段落标题1
标题2
标题3
标题4
标题5
标题6
#就是单独个一个水平线每次加上一些内容,别忘了刷新一下页面,才能看到新添加的效果或者内容,其实上面这些标签很少用
特殊符号
--空格>大于号<小于号... 找HTML特殊符号
标签分类
块级标签(行外标签):独占一行,可以包含内敛标签和某些块级标签,div,p,h1-h6,hr,form内敛标签(行内标签):不独占一行,不能包含块级标签,只能包含内敛标签 b,i,u,s,a,img,select,input,span,textareap标签,p标签内部不能包含块级标签和p标签
img标签和a标签
img标签 内敛标签 src属性='图片路径' alt属性='图片加载失败的提示信息' title='鼠标悬浮提示信息'(title属性不单单是img标签的)
a标签(超链接标签)
内联标签a标签 没有写href属性,百度 显示普通文本 有属性,但是没有值:百度 #href="" ,写了href属性,但是里面没有值,效果:有特殊效果,文字有颜色,有下划线,点击会刷新当前页面 有属性有值的:百度,跳转到href属性指定的网址京东target="_blank" 新的标签页打开,默认是在当前标签页打开target="_self" 默认的,在当前标签页打开
锚点示例:
Title 这是顶部24期皇家赌场
百度http://www.baidu.com京东 #跳转锚点,写的是a标签name属性对应的值,写法 href='#值'回到顶部
列表标签
type对应的值:
无序列表type属性对应的值:disc(实心圆点,默认值)circle(空心圆圈)square(实心方块)none(无样式)
有序列表type属性对应的值: start属性是从数字几开始1 数字列表,默认值A 大写字母a 小写字母Ⅰ大写罗马ⅰ小写罗马
有序和无序列表:type属性控制显示样式,start控制起始值无序列表:
- 柴嘉欣
- 周道镕
- 朱凡宇
- 柴嘉欣
- 周道镕
- 朱凡宇
- 标题1
- 内容1
- 标题2
- 内容1
- 内容2
table标签(重点)
姓名 | 年龄 | 爱好 |
---|---|---|
柴嘉欣 | 篮球 | |
周道镕 | 18 | |
朱凡宇 | 18 |
常用属性: border: 表格边框.cellpadding: 内边距 (内边框和内容的距离)cellspacing: 外边距.(内外边框的距离)width: 像素 百分比.(最好通过css来设置长宽)rowspan: 单元格竖跨多少行colspan: 单元格横跨多少列(即合并单元格)
input标签
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | |
password | 密码输入框(不显示明文) | |
date | 日期输入框 | |
checkbox | 复选框 | |
radio | 单选框 | |
submit | 提交按钮 | #发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新 |
reset | 重置按钮 | #页面不会刷新,将所有输入的内容清空 |
button | 普通按钮 | |
hidden | 隐藏输入框 | |
file | 文本选择框 | (等学了form表单之后再学这个) |
总结
input文本输入框,input标签如果想将数据提交到后台,那么必须写name属性input选择框,必须写name属性和value属性input选择框,name值相同的算是一组选择框**
form表单标签
action属性:值是一个网址,将数据提交到哪个网址去method属性:提交方法,默认是get,效果是在网址上可以看到提交的数据
注意,想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮,按钮有两种,1: input标签type='submit', 2: botton按钮
select下拉框
multiple属性,多选,name属性提交数据时的键,option标签中value属性的值需要写,是将来提交数据的真实数据
label标签 (标识一下标签的作用)
1.label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容 2.
textarea标签,多行文本输入框