Web前端开发—-HTML基础总结(2)

认识表格

<table>
	<tr>
	<td>内容<td>
    <td>内容<td>
	</tr>
</table>

table --定义一个表格标签

tr --行，有多少行就写多少对tr,必须包在table里

td --单元格，一行有多少个单元格就写多少对td,必须嵌套在tr中

基本作用 --存储显示数据

表头单元格标签th

所有位置 --一般位于表格的第一行或者第一列

语法 --把tr中td替换成th标签写即可

特点 --单元格中文本会加粗居中显示

表格的属性（了解）

border  --设置表格的表框     默认为0

width --设置表格宽度           固定值或者百分比

height --设置表格的高度      一般不使用，高度由内容决定

align --设置表格在网页中水平方向对齐方式         left左     center中       right右

cellpadding --单元格中内容到边框的距离(内填充)     默认1像素

cellspacing --单元格与单元格边框之间空白距离(外边距)      默认2像素

表格结构划分

头-->身体-->脚

thead --表格头部   -- 存放表头标签之类    内部必须拥有 tr 标签！

tbody --表格主体  --  存放数据内容

合并单元格（难点）

合并两种方式：

- 跨行合并 --rowspan="合并单元格的个数"
- 跨列合并 --colspan="合并单元格的个数"

合并单元格顺序：

- 先上后下   先左后右

合并单元格步骤：

1.先分析是跨行合并还是跨列合并

2.根据先上后下，先左后右的顺序找到目标单元格

3.书写合并方式和合并单元格的数量

4.删除多余的单元格

表格总结

表格是用来做什么的？ --存储显示数据

tr --表格中的行，写在table里

td --行中单元格，写在tr里

th --	表头单元格，文字居中加粗

rowspan和colspan  --跨行和跨列合并单元格

无序列表（重点）

1.没有先后顺序的列表

2.li标签必须放在ul标签里面，反过来，ul里面只能是li

3.li标签里面可以写任何内容

扩展了解：

- type属性 --列表前面的符号 
  - 默认disc 实心圆 
  - circle 空心圆   type="circle"
  - square 方块    type="square"

有序列表（了解）

1.有先后顺序的列表

2.li标签必须放在ol标签里面，反过来，ol里面只能是li

3.li标签里面可以写任何内容

自定义列表（重点）

1. 常用于对名词进行解释 类似字典
2. dt dd这两对标签只能出现在dl中
3. 每一个dt里面可以放多个dd

表单标签（掌握）

表单的作用 --收集用户信息

input控件（重点）

input --表单输入框 

- type属性 --指定不同的控件类型；属性值不同，效果不同。
  - type=“text”   普通文本框
  - type=“password”  密码框    输入内容不可见！！
  - type="radio"   单选按钮        只能选择多个中的一个
  - type=“CheckBox” 复选按钮   可以选择多个
  - type=“button”     普通按钮     为了效果好看和好区分，需要写value值
  - type=“submit”     提交按钮    为了效果好看和好区分，需要写value值
  - type=“reset”         重置按钮    为了效果好看和好区分，写上value值
  - type=“image”      图像按钮     不用加value值    
  - type=“file”           文件域          可以加name属性或者其他
- value属性
  - 文本框默认显示的文字信息
  - value=“这里的值信息随便写”   一般取名要有意义（不能看别人不爽 比如：尼玛吗）
- name属性
  - 给表单取名，区分不同的input表单
  - name="表单名称"   名称自定义
  - 后期提交数据到后台，我们可以根据name的名称区分是哪一个表单
- checked属性
  - checked=“checked”   表示默认选中
  - 经常用于单选按钮和多选按钮
- maxlength属性
  - 规定输入字段的最大长度

label标签（理解即可）

目的 --主要用于提高用户体验，没啥大的实际意义

作用 --点击label标签，被绑定元素获取输入焦点
绑定方式：

- 一 --label直接包住input表单 
  - 举例：<label>用户名：<input type="text"/></label>
- 二 --通过for 和 id 来控制
  - 举例：<label for="nc">昵称:</label>      <input type="text" id="nc"/>
  - 解释：通过for属性规定label与那个input元素关联    

textarea文本域控件

作用 --多行文本输入框，里面可以写很多行文字

cols=“每行中的字符数” 了解即可！

rows=“可以显示的行数” 了解即可！

select下拉列表

作用 --供用户选择，方便小巧，节约空间

注意点：

1.select中至少包含一对option

2.可以设置默认选中项   selected=“selected”

3.在不同浏览器展示效果不一样（了解）

form表单域

作用 --收集信息，提交给后台服务器

属性：

- action=“URL地址”      把收集的数据提交给谁
- method=“get/post”    收集信息的提交方式
- name="自定义名称"    指定表单名称

查阅文档

程序员 --写代码

知识点全记住吗？NO   查询或者百度

程序 --学习方法第一位      第二才去记