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>score</td>

<td>gander</td>

</tr>

</table>

单元格合并：

单元格独有的属性：

colspan

跨

列合并：

从当前位置开始横向合并n个单元（包含自身）

合并后要删除当行中多余的单元格

rowspan

跨

行合并：

从当前位置开始纵向合并n个单元格（包含自身）

合并后要删除每列中多余的单元格

行分组：

允许将表格中若干行划分为一组便于管理

这些标签可以省略默认所有行都会添加到tbody中

如果需要手动添加分组，

建议thead --> tfoot --> tbody顺序书写

语法：

表头行分组：

<thead>

</thead>

表尾行分组：

<tfoot>

</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">

</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">