热门搜索:
您现在的位置是：首页 > 文章详情

Python全栈 Web（HTML基础语法）

日期：2018-08-30点击：496
超链接标签：
什么是超链接标签？
能够实现从当前文件跳转到其它文件的标签
语法：
<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">
原文链接：https://yq.aliyun.com/articles/632672
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章