Python 前端 HTTP HTML标签
浏览器中敲入网址回车发送了几件事? 1.浏览器超服务端发送请求 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看
1. 文档指令：<!DOCTYPE html>
-- 需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的
2.html注释
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->
<html>
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>
1. 空格： 2. 字符"：" 3. 字符&：& 4. 字符<：< 5. 字符>：> 6.字符￥：¥ 7.字符©：© 8.字符;：®
标签的分类1: 1.双标签(<h1></h1> <a></a>) 2.单标签(自闭和标签 <img/>) 标签的分类2 1.块儿级标签(独占浏览器一行) div p h 1.块儿级标签可以修改长宽 2.块儿级标签内部可以嵌套任意的块级标签 但是p标签虽然是块儿级标签 但是他不能够其他块儿级标签 包括自身 可以嵌套行内标签 总结: 只要是块儿级标签 都可以嵌套行内标签 p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签 2.行内标签(自身文本多大就占多大) span b s i u div和span通常都是用来构建网页布局的
head内常用标签
1. 网页标题标签：<title></tile> 2.样式标签：<style></style> 用来控制样式的 内部支持写css代码 3.链接标签：<link /> 专门用来引入外部的css文件 4.脚本标签：<script></script> 内部支持写js代码 也支持导入外界的js文件 5.元标签：<meta /> #1.关键字搜索 #2.描述
body内常用标签
1. 换行标签：<br /> 2. 分割线标签：<hr /> 3. 标题标签：<h1></h1> ... <h6></h6> 4. 段落标签：<p></p> 5. 斜体标签：<i></i> 6. 加粗标签：<b></b> 7.<u>下划线</u> 8.<s>删除</s> 9."架构"标签：<div></div> 块级标签 10.行文本标签：<span></span> 行内标签
body内超链接标签和锚点
<a href="https://www.baidu.com/" target=""_blank"> 前往百度</a> #1.href后面存放url的时候 点击跳转到该url，如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色 #2.target 默认是_self当前页面跳转，_blank新建页面跳转 锚点功能(回到顶部或所需位置) href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签 #1. <!-- 种下锚点：该a标签不能在页面中显示文本，用全局属性name来种下一个叫top的锚点 --> <a name="top"></a> <!-- 返回锚点：href中用 #锚点名 来表示要前往的锚点，点击 "返回top" 会自动回到页面顶 --> <a href="#top">返回top</a> #2. <a href="" id="d1">顶部</a> <div style="height: 1000px;background-color: red"></div> <a href="" id="d2" class="c1">中间</a> <div style="height: 1000px;background-color: green"></div> <a href="#d2">会到中间</a> <div style="height: 1000px;background-color: yellow"></div> <a href="#d1" username="jason" password="123">点我回到顶部</a>
body内图片链接
<img src="" alt="" title=""> src存放的是图片的路径(该路径可以是本地的也可以是网上的) 1.也可以放url(会自动请求该url获取相应数据) 2.也可以直接放图片的二进制数据 会自动转换成图片 alt当图片加载不出来的时候 显示的提示信息 title当鼠标悬浮在图片上 提示的信息 #修改图片大小：height,width 当你只指定一个参数的时候 另外一个会等比例缩放
body内列表标签
<!-- 无序列表 -->
<!--ul>li{列表项}*3-->
<ul type="disc">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
<!-- 有序列表 -->
<!--ol>li{第$项}*3-->
<ol type="1" start="2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
body内表格标签
<table border="1" cellspacing="0" cellpadding="10"> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td rowspan="2">单元格</td><!-- 合并2行单元格 --> <td colspan="2">单元格</td><!-- 合并2列单元格 --> <!-- <td>单元格</td> --><!-- 该列单元格被合并 --> <td>单元格</td> </tr> <tr> <!-- <td>单元格</td> --><!-- 该行单元格被合并 --> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table> <!-- 标签部分： 1. table表格标签 2. caption表格标题标签 3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写 4. tr表格行标签 5. th表格标题单元格标签，td表格普通单元格标签 全局属性部分： 1. border表格的边框宽度 2. cellspacing单元格直接的间距 3. cellpadding单元格内部的间距 4. rowspan合并行单元格 5. colspan合列行单元格
# colspan表示的水平方向
rowspan表示的竖直方向
body内表单标签
<form actio="" method="" enctype=""> <label></label> <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p> <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p> <select name="list"> <option value="val1">列表项</option> <option value="val2">列表项</option> </select> <textarea></textarea> <button type="button">按钮</button> <input type="submit" value="提交"> </form> 标签部分： 1. from表单标签 2. 普通文本标签 3. input输入标签，通过全局属性type的值来确定具体是什么类型的输入标签 4. select表单中的列表标签，option列表项标签 5. textarea文本域标签 6. button按钮标签 #1.form全局属性 1. action：提交表单数据给后台的地址， #不写的情况下 默认提交到当前页面所在的路径 #写全路径(https://www.baidu.com) #路径后缀(/index/) 2. method：提交数据的方式(get或post) 3. enctype：提交数据的编码格式 #form表单传文件的时候 需要指定enctype参数 #2.input标签tpye属性值与分类 1. text：普通文本输入框 2. password：密文文本输入框 3. radio：name的值一样时单选可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked" 4. checkbox：复选框，该类型input标签也有个全局属性checke用同单选框，多个复选框用name值来标识属于同一组复选框，如都代表爱好的复选框的name都应该叫hobby 5. file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表同时可以选取多文件提交给后台 6. submit：提交表单信息给后台，用value设置提交按钮的显示内容 7.reset:重置表单内容 select标签 select表单中的列表标签，option列表项标签;optgroup分组 默认是单选 可以通过multiple变成多选，如果想默认选择 用selected (selected="selected") 例： <p>省市1: <select name="province" id=""> <option value="sh">上海市</option> <option value="bj">北京市</option> <option value="sz">深圳市</option> </select> </p> <p>省市1: <select name="" id=""> <optgroup label="上海"> <option value="">嘉定区</option> <option value="" selected>浦东新区</option> <option value="">静安区</option> </optgroup> <optgroup label="北京"> <option value="">朝阳区</option> <option value="">海淀区</option> <option value="">昌平区</option> </optgroup> <optgroup label="安徽"> <option value="">芜湖市</option> <option value="">合肥市</option> <option value="">安庆市</option> </optgroup> </select> </p> button标签tpye属性值与分类 1. button：不同按钮，默认点击后无任何操作 2. reset：重置按钮，默认点击后会还原表单的所有操作 3. submit：提交按钮，和type为submit的input标签功能一样，将表单信息提交给后台 总结 1.form表单默认是get请求 你需要通过method参数 换成post提交 2.form表单中 要想触发提交动作 3.只有两种情况可以 1.input标签type指定成submit 2.直接写button标签type指定成submit 4.获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性 这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value 5.form表单传文件的时候 需要指定enctype参数
