分类:双标签、单标签
在pycharm内书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全
<head> <title>网页标题</title> <!--css代码 --> <style></style> <!--js代码--> <script></script> <link rel="stylesheet" href="mycss.css"> 引入外部css文件 <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户 <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!"> 网页的描述性信息 </head>
基本标签
<!--标题标签 1-6级--> <h1></h1> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p> 段落标签 </p> <br>换行标签 <hr>水平分割线标签
<!-- 块级标签:独占一行 h1~h6 p div 1 块级标签可以修改长宽 行内标签不可以 修改了也不会变化 2 块级标签内部可以嵌套任意的块级标签和行内标签 但是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签 如果套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来) 总结: 只要是块级标签都可以嵌套任意的块儿级标签和行内标签 但是p标签只能嵌套行内标签(HTML书写规范) 行内标签:自身文本多大就占多大 i u s b span 行内标签不能嵌套块儿级标签 可以嵌套行内标签 -->
特殊符号
空格 > 大于号 < 小于号 & & ¥ ¥ © © 商标® ®
常用标签
div与span
div 块级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域,之后往该区域内部填写内容即可,而普通的文本先用span标签
a标签
# 链接标签 <a href=""></a> <!-- 当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色 如果点击过了就会是紫色(浏览器给你记忆了) href 1.放url,用户点击就会跳转到该url页面 2.放其他标签的id值 点击即可跳转到对应的标签位置 target 默认a标签是在当前页面完成跳转 _self 你也可以修改为新建页面跳转 _blank --> <!--a标签的锚点功能--> 点击一个文本标题 页面自动跳转到标题对应的内容区域""" <a href="" id="d1">顶部</a> <h1 id="d111">hello world</h1> <div style="height: 1000px;background-color: red"></div> <a href="" id="d2">中间</a> <div style="height: 1000px;background-color: greenyellow"></div> <a href="#d1">底部</a> <a href="#d2">回到中间</a> <a href="#d111">回到中间</a>
img标签
<img src="" alt="" title="" > src 1.图片的路径 可以是本地的也可以是网上的 2.url 自动朝该url发送get请求获取数据 alt="这是" 当图片加载不出来的时候 给图片的描述性信息 title="新衣" 当鼠标悬浮到图片上之后 自动展示的提示信息 height="800px" width="" 高度和宽度当只修改一个的时候 另外一个参数会等比例缩放 如果修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
id与clas属性
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p class = "p1" user="lili"> </p>
1、无序列表
<ul> <li>1</li> <li>2</li> </ul>
2、有序列表
<ol> <li>1</li> <li>2</li> </ol>
3、标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> </dl>
<body> <table border="1"> <!-- 一个tr就是一行--> <thead> <tr> <th>id</th> <th>username</th> <th>password</th> </tr> <tr> <td>1</td> <td>upup</td> <td>123456</td> </tr> <tr> <td>2</td> <td rowspan="2">bjt</td> <td>123456</td> </tr> </thead> <tbody></tbody> </table> </body> <table border="1"> 加外边宽 <td colspan="2">egon</td> 水平方向占多行 <td rowspan="2">DBJ</td> 垂直方向占多行
<form action=""> </form> <!-- action:控制数据提交的后端路径,要提交给哪个服务器 1、什么都不写 action="" 默认向当前服务器提交数据 2、写全路径:https://www.baidu.com 向百度服务端提交 3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面 host:port/index/ --> <!--通过label和id可使点击文字光标到input框 第一种 直接讲input框写在label内 第二种 通过id链接即可 无需嵌套 --> <label for = "d1"> username:<input type="text" id = "d1"> </label> <!--input标签 就类似于前端的变形金刚 通过type属性变形 type属性 :text:普通文本 password:密文 date:日期 submit:用来触发form表单提交数据的动作 button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的,学完js之后可以给它自定义各种功能 reset:重置内容 radio:单选 默认选中要加checked='checked' --> <input type="radio" name="gender" checked='checked'>男 <!--当标签的属性名和属性值一样的时候可以简写--> <input type="radio" name="gender" checked>女 <!--checkbox:多选--> <input type="checkbox" checked>DBJ file:获取文件 也可以一次性获取多个 <input type="file" multiple> <!-- hidden:隐藏当前input框 钓鱼网站 value:可以给按钮加值--> <!--下拉框 select标签 默认是单选 可以加mutiple参数变多选 默认选中selected--> <select name="" id="" multiple> <option value="" selected>新垣结衣</option> <option value="" selected>斯佳丽</option> <option value="">明老师</option> </select> <!--textarea标签 获取大段文本--> <textarea name="" id="" cols="30" rows="10"></textarea>
可以触发form可以提交的按钮:
1、<input type="submit" value="注册"> 2、<button>点我</button>
所有获取用户输入的标签 都应该有name属性,name就类似于字典的key,用户的数据就类似于字典的value
<p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </p>
python安装
pip3 install FLASK
Python代码
from flask import Flask, request app = Flask(__name__) # 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求 @app.route('/index/',methods=['GET','POST']) def index(): print(request.form) # 获取form表单提交过来的非文件数据 # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')]) print(request.files) # 获取文件数据 file_obj = request.files.get('myfile.png') file_obj.save(file_obj.name) return 'OK' app.run()
<!--form表单默认提交数据的方式 是get请求 数据是直接放在url后面的,具有不安全性 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on 你可以通过method指定提交方式--> <form action="http://127.0.0.1:5000/index/" method="post"> <!--针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值--> <p>gender: <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" checked value="female">女 <input type="radio" name="gender" value="others">其他 </p> <p>hobby: <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" checked name="hobby" value="football">足球 <input type="checkbox" checked name="hobby" value="doublecolorball">双色球 </p> <p>province: <select name="province" id=""> <option value="sh">上海</option> <option value="bj" selected>北京</option> <option value="sz">深圳</option> </select> </p> <!-- form表单提交文件需要注意 1.method必须是post 2.enctype="multipart/form-data" enctype类似于数据提交的编码格式 默认是urlencoded 只能够提交普通的文本数据 formdata 就可以支持提交文件数据 --> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <!--针对用户输入的标签。如果加value 是默认值--> <label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label> <!--disable 禁用 readonly只读-->