一、什么是html?
1.我们说socket网络编程的时候，提到过一个cs模型，就是客户端—服务端模型，前端开发也是基于网络编程，但是这时就应该是bs模型了，是浏览器与服务端的通信。
我们可以模拟一个bs模型：
#服务端
import socket
sock=socket.socket()
sock.bind(('127.0.0.1',8989))
#绑定ip和端口
sock.listen(5)
while True:
conn,addr=sock.accept()
print('conn',conn)
print('addr',addr)
data=conn.recv(1024)
print(data.decode('utf8'))我们会在服务端收到这样一些东西
conn <socket.socket fd=444, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('127.0.0.1', 8989), raddr=('127.0.0.1', 61502)>
addr ('127.0.0.1', 61502)
GET / HTTP/1.1
Accept: text/html, application/xhtml xml, image/jxr, */*
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:8989
Connection: Keep-Alive这些就是http的请求头，浏览器会把这些请求以键值对的方式发送给服务端
2.html全称叫超文本标记语言（Hypertext Markup Language），是一种标记语言，通过标签来识别和描述网页中的结构和内容
二、html结构
1.html的结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html>是用来告诉浏览器使用什么样的html来解析html文档，不指定的话默认按照怪异模式（BackCompat），还有一个作用是指定了这个html文档的版本是html5
<html lang="en"> 是 表明当前标签下使用的语言是英文
<html></html> 是文档的开始和结束标记，作用是告诉浏览器这是一个html文档
<head></head> 是网页的源信息，是给计算机看得内容
<meta>标签可以提供页面的元信息，有name和http-equiv两个属性
name属性：用于描述网页，属性值为content，content中的内容包括用于搜索的关键字和描述信息
http-equiv属性：可以向浏览器传回一些信息，来帮助正确的显示网页内容
<title></title>是既能给计算机看，又能给人看的内容，就是网页的标题，在浏览器标题栏显示
<link rel="icon" href="url">是浏览器标题栏中显示的网页的图标
<body></body> 就是可见的网页主体的内容
三、html常用标签
1.html标签格式：
（1）标签由尖括号包围着关键词组成
（2）标签通常是成对出现的，叫闭合标签，如<div></div>,不成对出现的叫自闭和标签，如<img>
（3）标签可以带属性，也可以不带属性
（4）标签可以嵌套，但是要结构分明，不能交叉嵌套
（5）块级标签可以嵌套块级标签和内联标签，但是内联标签只能嵌套内联标签
（6）标签不区分大小写，推荐使用小写
（7）在代码中的空格，不论写几个，都会默认是一个，可以用特殊字符表示多个空格（ ）
2.块级标签和内联标签
块级标签就是这个标签里的内容独占一行，后面的内容只能另起一行显示，典型的如div标签
而内联标签是指按文本内容占位置，典型的如span标签
3.基本标签
4.img标签：图片标签 内联标签
<img src="url" alt="图片" title="图片" width="300px" height="600px">src：图片路径
alt:图片加载失败时的提示信息
title:鼠标悬浮在图片上的信息
width:图片宽度
height:图片高度
5.超链接标签 a 内联标签
<a href="url" target="_blank">点击</a>
href:要链接到的地址，如果是#,表示为空地址
target="_blank":表示重新打开一个新的网页，当前网页不变
a标签还可以用来实现锚的功能
比如在body开头位置加一个div标签，id设为“start”，这样在后面不管什么地方加上<a href="#start">返回顶部</a>，在网页中点击这个“返回顶部”，就可以实现返回网页顶部的功能了。
6. 列表标签 块级标签
当我们的html有很多并列的元素时，可以把这些并列的元素都放在列表中
列表标签包括三种：ul无序列表，ol有序列表和dl自定义列表，常用的是无序列表
<ul> 与 <li> 连用，<li> 下面是列表的每一项
<dl> 自定义列表
<dt> 列表标题
<dd> 列表项
7.表格标签 table 块级标签
主要用来显示表格类数据，其中tr表示行，td或者th表示列，th是标题样式
基本结构为
<table>
<tr>
<th>标题<th>
<th>标题<th>
</tr>
<tr>
<td>内容<td>
<td>内容<td>
</tr>
属性有：
<table border="1px" cellpadding="2px" cellspacing="2px" width="300px">
border:表格边框
cellspacing: 外边距
cellpadding: 内边距
width: 表格宽度，像素或者百分比
<tr>
<td rowspan="3">111</td>
rowspan: 单元格竖跨几个格
<td colspan="2">222</td>
colspan: 单元格横跨几个格
</tr>
</table>练习：写一个课程表
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="x-ua-compatible" content="IE=chrome">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>class schedule</title>
8 </head>
9 <body>
10 <table border="1">
11 <strong>
12 <caption>课程表</caption>
13 </strong>
14
15
16 <tr>
17 <th>项目</th>
18 <th colspan="5">上课</th>
19 <th colspan="2">休息</th>
20 </tr>
21
22 <tr>
23 <th>星期</th>
24 <th>星期一</th>
25 <th>星期二</th>
26 <th>星期三</th>
27 <th>星期四</th>
28 <th>星期五</th>
29 <th>星期六</th>
30 <th>星期日</th>
31 </tr>
32
33 <tr>
34 <td rowspan="4">上午</td>
35 <td>语文</td>
36 <td>数学</td>
37 <td>英语</td>
38 <td>英语</td>
39 <td>物理</td>
40 <td>计算机</td>
41 <td rowspan="4">休息</td>
42 </tr>
43
44 <tr>
45 <td>数学</td>
46 <td>数学</td>
47 <td>地理</td>
48 <td>历史</td>
49 <td>化学</td>
50 <td>计算机</td>
51 </tr>
52
53 <tr>
54 <td>化学</td>
55 <td>语文</td>
56 <td>体育</td>
57 <td>计算机</td>
58 <td>英语</td>
59 <td>计算机</td>
60 </tr>
61
62 <tr>
63 <td>政治</td>
64 <td>英语</td>
65 <td>体育</td>
66 <td>历史</td>
67 <td>地理</td>
68 <td>计算机</td>
69 </tr>
70
71 <tr>
72 <td rowspan="2">下午</td>
73 <td>语文</td>
74 <td>数学</td>
75 <td>英语</td>
76 <td>英语</td>
77 <td>物理</td>
78 <td>计算机</td>
79 <td rowspan="2">休息</td>
80 </tr>
81
82 <tr>
83 <td>数学</td>
84 <td>数学</td>
85 <td>地理</td>
86 <td>历史</td>
87 <td>化学</td>
88 <td>计算机</td>
89 </tr>
90
91 </table>
92 </body>
93 </html>8.表单标签 form
我们在网页上见到的注册或者登陆时的那些可以输入东西的框框，就用到了表单标签。
表单标签就是用来收集用户输入的信息，在表单标签中，最重要的就是input系列
（1）input系列
<form action="">
用户名：<input type="text" name="user" value="zhang"><br>
<!--text表示框内输入的是文本形式，正常显示-->
密码： <input type="password" name="pwd" value="123">
<!--password表示框内输入的是密码，会隐藏，显示*****-->
<input type="radio">记住密码<br>
<!--radio表示单选框-->
性别：<input type="radio" name="sex" value="1" checked>男
<!--checked表示默认-->
<input type="radio" name="sex" value="0" >女
<br>
爱好：
篮球<input type="checkbox" name="hobby" checked>
<!--check表示是默认值-->
足球<input type="checkbox" name="hobby">
羽毛球<input type="checkbox" name="hobby">
<!--checkbox 表示复选框-->
<br>
<input type="submit" value="提交">
<!--提交按钮-->
<br>
<input type="reset">
<!--重置按钮-->
<br>
<input type="file">
<!--选择文件按钮-->
表单标签最重要的功能是实现前端和服务器端的通信，
我们在input框里输入的东西，怎么传给服务器端呢，
就是通过我们在input里面指定的name和value
我们输入的信息会以键值对的形式发送给服务器端，
name就是key ，value就是对应的值，
但是submit那个value不一样，那是显示的名字
</form>上面的代码在浏览器中大概就是这样子的:
先忽略“丑”这个问题，我们将会在css中解决这个问题
input里面还有一个属性，placeholder，这个是提示用的，看效果：
<input type="text" placeholder="用户名">
input还有一个disable属性，设置这个属性后输入框将不能使用
（2）select标签，这个是实现下拉菜单的，比如选择一个省份，点一个三角就把所有省份罗列出来
籍贯：<select name="jiguan" id="">
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="shandong">山东省</option>
<option value="jiangxi">江西省</option>
<option value="beijing">北京市</option>
</select>
就是这个效果，那能不能有默认值呢，能不能多选呢，可以的
multiple属性就表示多选，size表示选几个，selected表示默认值
籍贯：<select name="jiguan" id="" multiple="multiple" size="2">
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="shandong" selected>山东省</option>
<option value="jiangxi">江西省</option>
<option value="beijing">北京市</option>
</select>（3）多行文本框标签 textarea
<textarea name="jianjie" cols="30" rows="10"></textarea>
可以指定行数和列数
（4）label标签
这个标签的效果就是需要在输入框输入东西的时候，鼠标不一定要点在框内，在前面的“用户名”位置也可以快速把光标定位到输入框内
这时需要用到id属性，每个标签都可以指定一个id属性，那这个标签在整个文档中就是独一无二的了
<label for="user">用户名：</label>
<input type="text" id="user">
学习前端需要学习三部分，html,css和js,html最基础,也最简单吧，话总不能说一半啊
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
