WEB前端之html基础（三）

1、图像和链接
1、URL
地址
1、分类
1、绝对路径
1、引用互联网资源
协议名
主机名(IP地址，域名)
目录路径
文件名
2、本机文件
从文件所在的最高目录处(盘符)开始
2、相对路径
通过 文件间的位置关系 找到资源文件
1、同目录，直接用
2、子目录，先进入
3、父目录，先返回(…/)
3、根相对路径
永远都是从WEB站点所在的根目录处开始查找
语法：/
2、图像
1、语法


2、属性
1、src
指定要显示的图像的URL
2、width
3、height
注意：等比缩放
3、链接
1、语法
内容
2、属性
1、href
链接文件URL
2、target
目标，打开新网页的方式
取值：
1、_self
默认值
2、_blank
新标签页打开
3、链接4种表现形式
1、目标文档为下载资源
xxx
2、电子邮件链接
xxxx
3、返回页面顶部空链接
xxx
4、链接到JS
xxx
4、锚点
1、定义锚点
1、通过任何标记的 id 属性
2、通过a标记的 name 属性
2、链接到锚点


2、表格
1、作用
将数据 按照 从左到右，从上到下的顺序进行显示
2、语法
1、标记
1、创建表格

2、创建表行
– table row
3、创建列(单元格)
– table data
2、属性
1、table
width,height,align,border,cellspacing,cellpadding,bgcolor
2、tr
align,valign,bgcolor
3、td
align,valign,bgcolor,width,height,colspan,rowspan
3、表格其他标记
1、标题

2、行标题或列标题

4、表格复杂应用
1、行分组
表头：
表主体：
表尾:
2、不规则表格
通过 td 的 colspan和rowspan 属性来设置
colspan：跨列，从指定单元格位置处开始，水平向右 合并 几列，被合并掉的单元格一定要删除
rowspan：跨行，从指定单元格位置处开始，纵向向下 合并 几个单元格,被合并掉的单元格一定要删除

3、表格嵌套
一个表格中又出现一个表格
表格中的所有内容，只能出现在td中

---

1、列表
1、什么是列表
按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
2、列表的组成
主要由 列表类型 和 列表项 来组成
3、语法
1、有序列表
标记:

– Order List
列表项：

• 1. 内容
  2. 内容
  3. ... ...
  属性： 1、type 作用：列表项前的标识 取值： 1、1 数字，默认值 2、a 小写字母 3、A 大写字母 4、i 小写罗马数字 5、I 大写罗马数字 2、start 指定 列表项 从第几个字符开始显示 2、无序列表 标记：
  -- Unorder List 列表项：
• 属性： 1、type 1、disc，实心圆（默认值） 2、circle，空心圆 3、square，实心方块 4、none，没有 3、列表的嵌套 通过列表嵌套，可以实现多层列表 被嵌套的内容，必须放在li中 4、定义列表 1、作用 定义列表用于给出一类事物的定义情形 掩耳盗铃 xxxxxxxxxxxx 2、语法
  :定义一个定义列表 :定义列表中要解释的名词或术语
  :定义列表中对名词或术语的解释

  	3、使用场合
  		图文混排 时
  

  2、结构标记
  1、作用
  用于表示页面中的布局，目的是为了提升标记的语义化
  2、结构标记
  1、

  元素
  1、语法
  

  
  2、作用
  定义文档的页眉
  用于取代：

  
  2、

  元素
  1、语法
  

  
  2、作用
  用于表示页面中的导航部分
  3、

  元素
  1、语法
  

  
  2、作用
  用于表示 页面中的 主体部分
  4、

  元素
  1、语法
  

  
  2、作用
  用于表示独立于文档的其他部分的内容
  比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等… …
  5、

  元素
  1、语法
  

  
  2、作用
  用于表示 网页 底部信息
  6、

  元素
  1、语法
  

  
  2、作用
  表示网页 内容 中的边栏信息
  3、表单(重难点)
  1、表单作用
  用于显示、收集用户信息，并将信息提交给服务器
  表单组成：
  1、表单元素-负责将用户数据提交给服务器
  2、表单控件-负责接收用户的数据(与用户进行数据交互)
  2、表单元素
  1、标记
  
  2、属性
  1、action
  定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL
  默认 是提交给本页
  2、method
  指定表单数据提交的方式
  取值：
  1、get(默认值)
  向服务器端要数据时使用
  特点：
  1、显示提交：用户数据是可以显示在地址栏上的
  2、提交数据长度限制：2KB
  2、post
  向服务器传递数据时使用
  特点：
  1、隐式提交：所提交的数据是看不见的-安全性较高
  2、无数据大小限制
  3、enctype(非重点)
  表单数据进行编码的方式
  取值：
  1、application/x-www-form-urlencoded(默认值)
  2、multipart/form-data
  使用场合：上传文件时使用
  3、text/plain
  3、表单控件
  1、作用
  提供多种类型的表单控件，并且具备可视化的外观，可以接收用户的数据
  2、表单控件分类
  input组元素，textarea，选项框(select和option)，其他元素
  1、input 元素
  1、语法
  或
  属性：
  1、type
  根据type值，创建各种类型的输入字段,如文本框，密码框，单选按钮复选框等… …
  2、value
  值，要提交给服务器的值
  3、name
  控件的名称，服务器端使用，没有名字，无法提交
  4、disabled
  禁用控件，该属性无值，只要出现在控件中就表示禁用
  
  2、分类
  1、文本框与密码框
  文本框：type=“text”
  密码框：type="password
  属性：
  1、maxlength
  限制输入的字符数
  2、readonly
  只读
  3、name
  以控件的缩写+功能名称组成
  文本框和密码框的缩写：txt
  ex:
  用户名称:txtUsername
  用户昵称:txtNickname
  4、value
  2、单选按钮 和 复选框
  单选按钮：type=“radio”
  复选框：type=“checkbox”
  属性：
  1、name
  名称以及分组，一组单选按钮或复选框的话，名称必须一致
  单选按钮:rdo
  复选框：chk
  2、value
  值
  3、checked
  设置默认被选中
  3、按钮
  提交按钮：type=“submit”
  负责提交数据到服务器
  重置按钮：type=“reset”
  将表单元素恢复到默认值
  普通按钮：type=“button”
  执行客户端脚本(JS)
  属性：
  1、name
  缩写：btn
  2、value
  按钮上的显示文本
  4、隐藏域和文件选择框
  1、隐藏域
  不想给用户看，但是要提交给服务器的数据
  
  属性：
  1、name 名称,缩写 txt
  2、value 值
  2、文件选择框
  提交(上传)文件时使用
  
  属性：
  1、name
  缩写 ：txt
  注意：
  1、保证 form 的 method 属性 必须为 post
  2、保证 form 的 enctype 属性 必须为 multipart/form-data
  2、textarea 元素
  多行文本框
  1、语法
  文本
  2、属性
  1、name
  控件的名称，缩写 txt
  2、readonly
  只读
  3、cols
  指定文本域的列数
  变相设置宽度
  4、rows
  指定文本域的行数
  变相设置高度
  3、选项框
  两种：
  1、下拉选项框
  2、滚动列表
  语法
  1、
  功能：创建选项框(滚动列表)
  属性：
  1、name
  缩写：sel
  2、size
  默认显示的选项数量，如果取值大于1的话，则为滚动列表
  3、multiple
  设置多选
  2、
  选项框中的选项
  属性：
  1、value
  值
  2、selected
  预选中
  4、其他元素
  1、label 元素
  1、作用
  关联 文本 与表单控件。
  2、语法
  文本
  属性：
  for ：表示与该元素相关联的表单控件的ID值
  2、fieldset 元素
  1、作用
  为控件分组
  2、语法
  1、
  为控件分组
  2、
  为分组指定标题
  3、button 元素
  语法:
  内容
  注意：
  元素放在中，就是提交按钮,放在之外，就是普通按钮(IE除外)
  4、其他标记
  1、浮动框架
  1、作用
  可以在一个浏览器窗口中同时显示多个页面文档
  2、语法
  内容
  注意：
  1、必须是成对标记
  2、当浏览器不支持元素时，将显示"内容"作为该处的 内容
  属性
  1、src
  浮动框架中的网页URL
  2、width
  3、height
  4、frameborder
  浮动框架的边框，设置为0，则取消边框
  2、摘要与细节
  1、作用
  允许将页面某部分内容进行展开或收缩
  2、语法
  
  标题
  
  3、度量元素
  1、作用
  用于显示静态比例的信息
  2、语法
  文本
  属性：
  1、min
  度量范围的最小值，默认为0
  2、max
  度量范围的最大值，默认为1
  3、value
  当前显示的度量值，默认为0
  4、时间元素
  1、作用
  用于关联时间的不同表现形式
  2、语法
  时间文本
  属性：
  datetime:关联的日期时间，可以只关联日期，也可以只关联时间。如果同时关联日期与时间的话，日期与时间之间用"T"来分割
  5、高亮文本显示
  1、作用
  将页面中的某部分文本，以特殊的背景颜色显示出来
  2、语法
  高亮文本显示

  https://www.baidu.com/?txtUsername=sanfeng.zh&txtUserpwd=12346fd&rdoGender=nv&chkHobby=drink&chkHobby=play

  https://www.baidu.com/?txtUsername=fdaf&txtUserpwd=fdsa&rdoGender=nv&chkHobby=drink&txtUserID=110011000110

  file:///E:/%E8%B5%B5%E6%97%AD/CLASS/01_HTML5BASIC/Day03/Exer/01-%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6.html?txtName=mary&rdoGender=nan&selEdu=2&selCity=3&txtDesc=Hello&chkPublic=on