Python全栈 Web(HTML基础语法)-阿里云开发者社区

开发者社区> 巴黎香榭> 正文

Python全栈 Web(HTML基础语法)

简介:
+关注继续查看
超链接标签:
什么是超链接标签?
能够实现从当前文件跳转到其它文件的标签
语法:
<a>超链接文本</a>
属性:
href:
链接地址 #表示当前页面
可以为空“ ”也表示当前但是包含了网络请求 
刷新页面的效果
本地文件协议:
           file:///
target:设置目标文件打开方式
_self:默认当前窗口打开
_blank:新建窗口打开
锚点链接:
链接到当前文件的指定位置
语法:
设置锚点
                               <a name="bottom"></a>
                        链接锚点
                               <a href="#bottom">跳转</a>

表格:
语法:
格标签:
<table> </table>
属性:
border:设置边框(px)
width:宽度
geight:高度
align:水平对齐对齐方式
cellpadding
设置单元格内边距(内容与边框距离)(px)
cellspacing
设置单元格外边距(单元格与单元格、表格之间的距离)(px)
bgcolor:
设置表格背景颜色 取值:英文的单向
标签:
<tr> </tr>  (table row)
属性:
bgcolor:设置当前行背景颜色
align:设置水平对齐方式
valign:设置垂直对齐方式
top:上
middle:中
bottom:下
单元格
<td> </td>   (table data)
属性:
width:单元格的宽度
height:单元格高度
align:水平对齐方式
valign:垂直对齐
bgcolor:背景颜色
创建顺序
创建表格表标签
在表格标内嵌套行标签每个tr代表一行
在标签中创建单元格用来存放数据
<table> 
<tr>
<td>name</td>
<td>age</td>
<td>score</td>
<td>gander</td>
</tr>
</table>
单元格合并
单元格独有的属性:
colspan
合并:
从当前位置开始 横向合并n个单元(包含自身)
合并后要删除当中多余的单元格
rowspan
合并:
从当前位置开始 纵向合并n个单元格(包含自身)
合并后要删除每中多余的单元格
行分组:
允许将表格中若干行划分为一组 便于管理

这些标签可以省略 默认所有行都会添加到tbody中
如果需要手动添加分组,建议thead --> tfoot --> tbody顺序书写
语法:
表头行分组:
<thead>
<tr></tr>
</thead>
表尾行分组:
<tfoot>
<tr></tr>
</tfoot>
主体行分组:
<tbody>
<tr>
</tr>
</tbody>
表单:
表单二要素:
1.form表单元素:
收集用户信息并发送给服务器
本身是不可见的 但是不能省略 因为数据的提交功能要由form元素完成
语法:
<form>表单控件</form>
属性:
action:用来指定数据提交的目的地址
method:数据请求方式 GET(默认)、POST...
GET请求:
通常用于向服务器端获取数据
提交的数据会以参数的方式拼接在URL后面
安全性较低
提交的数据最大为 2KB
POST
将数据提交给服务器处理
隐式提交 看不到提交的数据
安全性较高
提交数据大小无限制
2.表单控件:
提供能够跟用户交互的可视化控件
只有放在表单元素中的表单控件才允许被提交
分类:
1).
文本框:
语法:
<input type="text">
密码框;
语法:
<input type="password">

*属性:
name
定义当前控件的名称 缺省的话无法提交
value
提交给服务器的值 同时也是默认显示在控件上的值
maxlength:
限时用户输入的最大字符数
placeholder:
用户输入之前显示在输入框中的提示文本
2).
单选框:
<input type="radio">
复选框:
<input type="checkbox">
*属性:
name:
定义控件名称,还起到分组的作用 一组的的按钮名称必须一致
value
设置当前控件的值 最终提交给服务器
checked
设置预选择状态 可以省略属性值或使用“checked”
3).
隐藏域:
需要用户提交给服务器却不需要呈现给用户
语法:
<input type="hidden">
属性:
name:控件名称
value:控件值
文件选择框:
选择文件上传,发送给服务器
语法:
<input type="file"
属性:
name:定义控件名称
4).
下拉选择框:
<select name="province">
<option value="山东省">山东省</option>
<option values="山西省">山西省</option>
</select>
使用GET方式请求
URL拼接数据为  provide
5).文本域:
语法:
支持用户输入多行文本
<textarea> </textarea>
属性:
name:控件名
cols:指定文本域默认显示的列数 一行中文显示的英文量 减半
rows:文本域能够显示的函数
文本域可以由用户调整大小
6).按钮
提交按钮:
<input type="submit">
将表单数据发送给服务器
重置按钮:
<input type="reset">
重置表单 将表单内容初始化
普通按钮:
<input type="button" value="点击">
绑定自定义按钮事件
value:显示按钮的显示值
按钮标签:
<button>按钮提示文本</button>
可以在任何局限中使用 不局限于form
按钮标签使用在form中默认具有提交功能 --- input submit
可以添加属性type:submit、reset、button
表单外作为普通按钮需要通过js动态绑定事件实现
7).
label for ID
                                          将文字和单选框之类的小按钮合并 点击文字也能选择
语法:
<label for="表单控件的ID"> </label>
<input type="radio" name="gender" value="male" id="male">

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9980 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10879 0
Python3 与 NetCore 基础语法对比(Function专栏)
Jupyter最新排版:https://www.cnblogs.com/dotnetcrazy/p/9175950.html 昨晚开始写大纲做demo,今天牺牲中午休息时间码文一篇,希望大家点点赞 O(∩_∩)O NetCore:https://github.
1505 0
【Python零基础到入门】Python基础语法篇——数字(Number) 学习 【文末送书】
目录 📢 前言 👑Python基础语法篇——数字(Number) 🚩整数 🚩浮点数 🚩复数 🚩Python 数字类型转换 🚩数学函数 🚩随机数函数 🚩三角函数 🚩数学常量 🍕总结 👑评论区抽奖送书 🚀往期优质文章分享
10 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13752 0
Python3 与 NetCore 基础语法对比(List、Tuple、Dict、Set专栏)
Jupyter最新版:https://www.cnblogs.com/dotnetcrazy/p/9155310.html 在线演示:http://nbviewer.jupyter.org/github/lotapp/BaseCode/blob/master/python/notebook/1.POP/3.list_tuple_dict 更新:新增Python可变Tuple、List切片、Set的扩展:https://www.cnblogs.com/dotnetcrazy/p/9155310.html#extend  今天说说List和Tuple以及Dict。
1354 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7317 0
Python 基础语法入门
这个系列是去年的时候给西门子电力的工程师培训Python入门课程准备的讲义~ 分享出来,仅供学习~ 本节是《Python入门-1.2 基础语法入门》
56 0
+关注
巴黎香榭
一个有梦想的咸鱼~~~
106
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载