HTML笔记4

5.URL

5.1简介

URL:Uniform Resource Locator统一资源定位器，用来定位资源所在的位置，最常见的就是网址

https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male
https://www.w3school.com.cn/html_quotation_elements.asp
file:///C:Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE3.html
http://www.sxgjpx.net/
ftp://10.255.254.253./

5.2组成

http://www.w3school.com.cn/html5/index.asp
http://www.sxgjpx.net/
file:///C:/Useerd/Administrator/Dasktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8E%A5.html
ftp://10.255.254.253/
https://www.baidu.com/img/bd_logo1.png

一个完整的URL由8个部分组成：

• 协议：prococol如
  http:超文本传输协议，用来访问WEB网站Hyper text Transfer protocol
  https:更加安全协议SSL安全套接子层
  ftp：文件传输协议，用来访问服务器上的文件，实现文件的上传和下载File Transfer protocol
  file：文件协议，用来访问本地文件
• 主机名hostname服务器地址或服务器Netbios名称，如www.baidu.com ftp://10.255.254.253
• 端口：port位于主机的后面，使用冒险进行分隔
  不同的协议使用不同的端口，如http使用80端口，https使用的433端口，ftp使用20和21如果使用的是默认端口，则端口可以省略
  如果使用的不是默认端口，则必须指定端口http://59.49.32.213:7070/
• 路径：path目标文件所在的路径结构，如:www.baidu.com/img/
• 资源resource要访问的目标文件，如bd_logo1.png
• 查询字符串：query string 也称为参数
  再资源后面使用？开头的一组称/值
  名称和值之间以=分隔，多个表达式之间用&分隔，如:name=tom&age=2&sex=male
• 锚点anchor,在资源后面使用#开头的文本，如#6
• 身份认证authentication,指定身份信息，如：ftp://账户:密码@ftp.bbshh010.com

五.表格

1.简介

表格是一个规则的行列表格，每一个表格都是由若干行组成的，每行由若干行组成

tabe, row, column

2.基本结构

2.1table标签

用来定义表结构

常用属性：

• border属于：边框，默认值为0
• width/height:宽度/高度
• align:水平对齐，取值：left(默认)、center、right
• bordercolor:边框颜色
• bgcolor:背景颜色
• background:背景图片
• cellspacing:间距，单元格与单元格之间的距离
• cellpadding:边距，单元格内容之间与边界之间的距离

2.2 tr标签

table row 用来定义行

常用属性：

• align:水平对齐，取值left(默认)、center、right
• valign: 垂直对齐，取值：top、middle(默认)、bottom
• bgcolor:背景颜色
• background:背景图片

2.3 td标签

table data 用来定义单元格

常用属性：algn、valign、bgcolor、background

注意：表格必须由行组成的，行必须由单元格组成，数据必须放到单元格中

3.合并单元格

也称为表格的跨行跨列

两个属性：

• rowspan
  设置单元格所跨的行数
• colspan
  设置单元格所跨的列数

步骤：

1.在跨越单元格中设置rowspan/codspan属性

2.将被跨越的单元格删除

必须要保证每行的实际列数是相同的，否则表格可能出现错乱

4.高级标签

4.1 capation标签

表格的标题

4.2 thead标签

表格的头部table head

4.3 th标签

表格的头部标题table head title

一般用在thead中，设置表格的头部，替代td标签，与td的区别，放到td标签中的文本会自动加粗，且居中显示

4.4 tbody标签

表格的主题部分table body

4.5 tfoot标签

表格的底部table foot

六、表单

1.简介

表单是一个包含若干个表单元素的区域，用于获取不同类型的用户数据信息

表单元素是允许用户在表单中输入信息的元素，如文本框，密码框，单选按钮，复选框，下拉列表，按钮等

2.表单的结构

2.1 表单语法

<form>
    多个表单元素
</form>

2.2 from标签

用来定义表单，可以包含多个表单元素

常用属性：

• action:提交数据给谁处理，即处理数据的程序，默认为当前页面
• method:提交数据的方式，取值：get(默认)、post
  get和post的区别：
  get以查询字符串的形式提交，在地址栏中能看到，长度为限制，不安全
  post以表单数据组成的形式提交，在地址栏中看不到，长度无限制，安全
• enctype:-----encode type编码的类型：提交数据的编码，取值：application/x-www-form-urlencoded(默认)、multipart/form-data(文件上传)

2.3 表单元素

大多数的表单元素都是通过使用标签来定义的，通过设置属性type来定义不同的表单元素

<import type="表单语速" name="取值" value="初始值" size="宽度">

表单元素的 含义 说明
text 单行文本框 省略是默认就是text
password 密码框 输入的数据是以点号显示，安全
radio 单选按钮 只能选择其中一个
checkbox 复选框 可以同时选择多个
submit 提交按钮 提交表单数据
reset 重置按钮 重置表单元素的初始值
image 图像按钮 可以使用图片作为按钮，也具有提交功能
button 普通按钮 默认无功能
file 文件选择器 选择要上传的文件
hidden 隐藏域 在页面上不显示，但是它会提交，可以用存储数据

3.1 单行文本框

常用属性：

• name名称：很重要，如果没有指定的name属性，则该表单元素的数据是无法提交的
• value：初始值
• size：显示宽度
• maxlength：最大字符数，默认没有限制
• readonly：只读，readonly=“readonly”，可简写readonly，即只写属性名称
• disabled禁用：disabled=“disabled”,可简写disabled，完全被禁用
  readonly与disabled区别：readonly的数据会提交，而disabled的数据不会被提交
  表单元素被提交的两个条件：1、有name属性 2、非disabled状态

3.2 单选按钮

常用属性：

• name：名称，多个radio的名称属性值必须相同，才可以实现互斥(单选)
• value：值
• checked是否选中，两种状态，选中、未选中checked=“checked”,简写checked

3.3 复选框

常用属性：与radio类似

3.4 文件选择器

常用属性：

• name属性：名称
• accept设置可选的文件类型，用来限制上传的文件类型
  使用MIME格式字符串对资源类型进行限制
  常见的MIME类型：
  • 纯文本：tet text/plain text/html text/xml
  • 图像：image/jpeg image/png image/gif
    提示：涉及文件上传时要修改form标签的enctype属性为multipart/form-data

4.特殊表单元素

表单元素 含义 说明
select 下接列表
option 列表选项
optgroup 选项组 对option进行分组
textarea 文本域/多行文本框 用来创建多行文本框

4.1 下接列表

select常用的属性：

• name：名称
• size：行数，同时显示多个选项
• multiple：允许同时选择多个
• disabled：禁用

option常用的属性：

• value选项值
• selected设置默认选中的项

optgroup常用属性：

• label

4.2 文本域

常用属性：

• name名称
• rows行数
• cols宽度
  案例27：
  
  案例28：
  
  案例29：