HTML
浏览器本质相当于socket客户端,业务服务器相当于socket服务端,建立sokcet传输数据,
服务器端收到消息进行处理,发送数据并关闭,然后浏览器收到消息展示页面,
1.其实就是一套规则,浏览器认识的规则
2.开发者:
(1)学习html规则
(2)开发后台程序:
- 写html文件 (充当模板的作用)
- 数据库获取数据,然后替换到html文件的指定位置 (web框架就是帮我们做这些事的)
3.本地测试
(1)找到文件路径,直接浏览器打开
(2) pycharm 打开测试 (pycharm会自己给你起个socket)
4.编写html文件
(1)doctype对应关系
(2) html标签,标签内部可以写属性 ===> < html >标签只能有一个
- 注释用: < !-- 注释的内容 – >
5.标签分类
- 自闭合标签 (就不用写结尾) 可以写成< meta >或者< meta />所有自闭和标签都可以这样 但最好是在后面加斜杠 例如< br / >
< meta charset=“UTF-8”> 就先记这个- 主动闭合标签
< title >Title< /title>
6.
head标签中
- 编码,跳转,刷新,关键字,描述,IE兼容>
- < title > 标题
- < link / > 里面有个网站窗口的小图标,还有很多先不讲,或者链接css来引入css
- < style / > 样式
- < script>
7.body标签
- 所有的标签分为:
- 块级标签:独占一行
H系列(加大加粗),p标签(段落和段落之间有间距),div标签(白板) div是用的最多的- 行内标签(内联标签):可以多个存在一行
span标签(白板)
- 标签之间可以嵌套
- 标签存在的意义,定位操作容易,以及css js操作很简单
ps: chrome 可以审查元素的使用(重要)
- 可以定位
- 可以查看样式
8.body标签详细
-
图标, 一个空格; > 大于;< 小于
-
p标签,段落
-
br,换行
-
div 必须要会 (白板 块级)
-
span 必须要会 (白板 行内)
-
h 系列必须要会(加大加粗)
-
< input > < select> < textarea >
只有input+form select textarea才能提交数据input系列+form:要全会
POST和GET差不多, GET会把数据拼接放在url上,POST是自己传入
< form action=“http…” method=‘GET’> 提交表单
input type=“text” - name属性,value=… value是输入默认值
input type=“password”- password属性,value=…
input type=“submmit” - value="提交"提交按钮 表单
input type=“button” - valus="登录按钮
input type=“redio” 单选框 - value,name属性(name相同则互斥 就只能选一个的意思)
input type=“checkbox” 复选框 -value ,name属性(批量获取数据)
input type=“file” - 默认上传不了,必须依赖form表单的一个属性
input type=“reset” - 重置
< textarea name=“tx”> 默认值 < /textarea> 多行文本输入 这个也可以提交数据到后台
- select标签 - name 内部opetion value ,提交到后台,size 大小,multiple 多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://localhost:8888/index" method="GET">
<input type="text" name="user"/>
<input type="password" name="pwd"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/> <!-- 默认get提交 -->
<!--提交后 生成字典格式 {'user':...,'pwd':...}提交到后台 -->
<!--POST和GET差不多, GET会把数据拼接放在url上,POST是自己传入-->
</form>
<p>上传文件</p>
<input type="file" name="fname" />
<textarea name="tx"> ad ad </textarea>
<div>
<select name="city" > <!-- 单选 -->
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">成都</option>
<option value="4" selected="selected">南京</option>
</select>
<select name="city" multiple="multiple" size="2"> <!-- 多选 -->
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">成都</option>
<option value="4" selected="selected">南京</option>
</select>
</div>
</body>
</html>
- a标签必会
- 跳转 < a href=“http://www.baidu.com” targrt=…> 百度
- 锚 < a href=’#某个标签的id’> 标签id不允许重复
锚 跳转到某个地方:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a> 第一章 </a>
<a> 第二章 </a>
<a href="#i3"> 第三章 </a>
<a> 第四章 </a>
<div style="height:600px;">第一章的内容</div>
<div style="height:600px;">第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div style="height:600px;">第四章的内容</div>
</body>
</html>
- img标签 必会
- < img src=“1.jpg” title=“百度” style=“height:200px;width:200px;” alt=“百度”>
- title 鼠标放上去现实 alt没有图片的时候显示
默认img标签有一个1px的边框
去掉 为 img{
border:0;
}
- 列表标签
<ul>
<li>a</li>
<li>b</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
</ol>
<dl>
<dt>aaa</dt>
<dd>bbb</dd>
</dl>
- table标签 (表格 必会)
thead 表头
tbody 表格内容
tr 一行
td 一列
colspan 列合并 等于几表示占几格
rowspan 行合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
- lable标签 (用于点击文字,使得关联的标签获取光标) 知道就行
<label for="username">用户名:</label>
<input id="username" type="text" name=" user" />