03.HTML基础知识下

学习目标

1. 能够书写表格
2. 能够写出无序列表
3. 能够写出3-4个常用input表单 类型
4. 能够写出下拉列表表单
5. 能够使用表单元素实现注册页面
6. 能够独立查阅W3C文档

学习目录

1. 表格标签
2. 列表标签
3. 表单标签
4. 综合案例
5. 查阅文档

1.表格标签

• 1.1表格的主要作用。

  表格主要用于显示，展示数据，不是用来布局页面的，让数据显示的非常的规整，可读性非常好

• 1.2表格的基本语法

  table用于定义表格的标签，tr用于定义表格中的行,td用于定义表格中的单元格,th用于HTML表格的表头部分

• 1.4表格属性

  属性名	属性值	描述
  align	left,center,right	规定表格相对周围元素的对齐方式
  border	1或“”	规定表格单元格是否拥有边框，默认为""，表示没有边框
  cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
  cellspacing	像素值	规定单元格之间的空白，默认2像素
  width	像素值或百分比	规定表格的宽度

• 1.5表格结构标签

  thead标签表格的头部标签，thead内部必须拥有tr标签，tbody标签表格的主体区域

• 1.6合并单元格

  合并单元格方式：跨行合并rowspan;跨列合并colspan；合并后要删除多余的单元格

• 2.列表标签

  表格是用来显示数据的，那么列表就是用来布局的，列表最大的特点就是整齐，有序。

  • 2.1无序列表（重点）
    语法如下:无序列表的各个列表项之间是并列的，ul中只能嵌套li标签

  <ul>
      <li>列表项1</li>
      <li>列表项2</li>
  </ul>
  

  • 2.2有序列表
    语法格式：ol标签列表排序以数字显示

  <ol>
      <li>列表项1</li>
      <li>列表项2</li>
  </ol>
  

  • 2.3自定义列表（重点）
    自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。dl标签用于定义描述列表，dt定义项目、名字，dd描述每一个项目、名字.经常是一个dt对应多个dd

  <dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  </dl>
  

  3.表单标签

  3.1 使用表单标签目的是为了收集用户信息
  3.2 完整的表单通常由表单域，表单控件和提示信息三个部分组成

  
  3.3 表单域是一个包含表单元素的区域，form标签用于定义表单域，form会把它范围内的表单元素信息提交给服务器

  <form action="url地址" method="提交方式" name=“表单域名称”>
    各种表单域控件
    </form>`
  

  属性	属性值	作用
  action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
  method	get/post	用于设置表单数据的提交方式，其取值为get/post
  name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

  3.4 表单控件
    3.4.1 input表单元素

  <input type="属性值">
  

  
  name是表单元素名字，这里性别单选按钮必须拥有相同的名字name，才可以实现单选
  
  checked属性主要针对于单选按钮和复选框。
  
    3.4.2 lable标签

  <lable>标签为input元素定义标签
  <lable>标签用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将选择对应的表单元素上，用来增加用户体验
  语法：
  <lable for="sex">男</lable>
  <input type="radio" name="sex" id="sex"/>
  

    3.4.3 select下拉列表

  <select>
   <option selected="selected">选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   </select>
  

    3.4.4 textarea多行文本输入框
  cols每行中的字符数，rows显示的行数，实际开发中不会使用

  <textarea rows="3" cols="20">
  文本内容
  </textarea>