HTML表格、表单介绍，以及块元素，行内元素复习~

HTML表格、表单介绍，以及块元素，行内元素复习~

1.块元素 （box）

作用：作为页面框架，或者容器。是页面的主体

特性：

1. 独占一行空间

2. 默认宽度为100%，默认高度由子元素或者内容决定

3. 可以为其指定宽高 style="width:;height:

div 无意义的块元素

h1~h3 标题

• font-size

• font-weight

• margin

p 段落

• margin

html

body

• margin

ul、li 无序列表，列表项

• ul

  • margin

  • padding

  • list-style

• li

ol、li 有序列表，列表项

• ol

  • margin

  • padding

  • list-style

dl、dt、dd 有序列表

• dl

  • margin

• dd

  • margin

H5新增的块元素（语义化标签）

• header(头)

• nav

• article（主体）

• section (部分)

• footer（脚）

• aside

标题2. 行内元素(label)

作用：点缀网页，填充内容

特性：

1. 与其他行内元素共享一行空间

2. 默认宽高由内容决定

3. 不能为其指定宽和高

4. 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

span 无意义的行内元素

• a 超级链接（axure open link）

  • 默认样式

    • color

    • text-decoration

    • cursor

  • 默认事件（js - dom） 点击事件

  • href

    • url

    • 相对路径

    • 绝对路径

    • mailto

    • 锚点

    • …

  • target

    • _self

    • _blank

• img

  • src 图片地址

    • url

    • 相对路径

    • 绝对路径

    • base64格式的数据

  • alt 图片找不到的时候文本替换

  • 图片地图

<img src="" alt="">
<map>

• canvas HTML5 <canvas>标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务。

• strong 粗体强调

• bold 加粗

• b 加粗

• em 单位

• i 斜体

• sub 上标

• sup 下标

• del 定义文档中已删除的文本

• …

功能元素 （行内元素）

1. 表格

• table

  • 【属性】border、width、center…

  • caption 表格标题

  • thead 表头部分

    • tr

      • th/td

  • tbody 表格主体部分【不可以省略】

    • tr

      • td/th

      • 【属性】colspan、rowspan、width、align

      • td/th中可以放任意子元素

  • tfoot 表底部分

    • tr

      • td

• 【注意】：每一行中的列数应该是相等

2表单（前后台交互）

用户 -> 表单 -> 后台 -> 数据库

注册页面

登录页面

搜索框

   <form action="">
   input
   select
   textarea
   </form>

• form

  • action 后台接口地址

  • method 请求方式

    • get

      • 参数拼接在url后面，通过?来分割

      • 传递参数较少

      • 查询学生信息、通过id删除学生信息

    • post

      • 参数存放在请求体中，安全

      • 传递参数更多

      • 保存或者更新学生信息、批量删除

  • enctype 编码方式

1. enctype=‘application/x-www-form-urlencoded’

• 浏览器就会将参数转换为【查询字符串 qs】格式

• username=charles&password=123321&nickname=李四&emailcharles@briup.com

2. multipart/form-data

• 当有附件在表单中的时候，enctype务必设置为这种格式

• ajax

  • 查询字符串

    • username=charles&password=123321&nickname=李四&emailcharles@briup.com

• JSON

  • ‘{“username”:“charles”,“password”:“123321”}’

• input

  • name: 不能省略，作为参数中的key

  • value: 作为参数中的value,在按钮中务必指定value值

  • type:

    • text 单行文本框

    • password 密码框

    • submit 提交按钮

    • file 附件选择器

    • radio 单选按钮

    • checkbox 复选按钮

    • h5拓展(兼容性，功能)

      • email

      • date

      • number

      • progress

      • …

  • checked: 单值属性 默认选址

  • placeholder 提示语

• select

  • option

    • 标签中的文本显示在网页中，提交的值应该是option的value值，当这个值没有设定的时候，提交的是标签中的文本

 <option value="sx">山西</option> 	     
 <option>山西</option> 	

• textarea

  • 多行文本域

  • placeholder 提示语

• 第三方库

  • 日期插件

  • 地址选择器地址

  • 附件上传

  • 副文本

table百度脑图

表单百度脑图

HTML整体百度脑图

今天是表格、表单的介绍~

下一篇写一个简单的html页面，我最近学习了盒 子模型，明天给你们介绍一下盒子模型 提前透露一下下哦 分边框盒子和内容盒子 明天具体介绍哦 小可爱 明天见哦~