HTML5

这篇笔记主要记了HTML里的表格标签，列表标签和表单标签
初学者看网课写下的笔记，如有错误，欢迎大家前来指正。

表格标签

  • 表格：显示展示数据
  • 基本语法：
<table>
    <tr>
        <td>单元格中的文字</td>
      </tr>
  </table>
  • <table></table>定义表格的标签
  • <tr></tr>定义表格中的行
  • <td></td>单元格，标签之间添加内容

表头单元格标签

  • 语法：<th></th>
  • 表格会加粗，内容会居中显示
  • 表格属性(不常用，经常通过css设置)

属性名

属性值

描述

align

left，center，right

相对于周围元素的对齐方式，默认为left

border

1或""

表格是否有边框，默认为""没有边框

cellpadding

像素值

单元边沿与其内容之间的空白，默认为1像素

cellspacing

像素值

单元格之间的空白，默认2像素

width

像素值或百分比

规定表格的宽度

  • 表格属性要写到table里
<table align="center" border="1">
        <tr></tr>
    </table>

表格结构标签

  • thead表示表头区域 tbody表示主体部分
  • 使用方法，用thead把头部区域包起来
<table>
      <thead>表格头部区域</thead>
      <tbody>表格主体部分</tbody>
  </table>

合并单元格

  1. 跨行合并
  • 最上侧单元格为目标单元格，写合并代码
  • rowspan=“要合并的单元格的个数”
  1. 跨列合并
  • 最左侧单元格为目标单元格，写合并代码
  • colspan=“要合并的单元格的个数”
  • 合并单元格三部曲
  • 先确定是跨行合并还是跨列合并
  • 找到目标单元格，写上合并方式=“合并单元格的数量”

例<td colspan= "2"></td>

  • 删除多余的单元格

列表标签

  • 列表是用来布局页面的
  • 分类：
  • 无序列表
  • 有序列表
  • 自定义列表

无序列表

<ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
  • <ul>里只能放<li>标签，不允许放其他文字或标签
  • 但<li>里可以放任何标签

有序列表

<ol>
      <li>列表项1</li>
      <li>列表项2</li>
    </ol>
  • 注意事项和无序列表一致，<ol>里只允许<li>标签

自定义标签

  • 说明，围绕着表头来解释说明
<dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
    </dl>
  • 注意事项：
  • dl里只能有<dt>和<dd>
  • 一个自定义列表里可以有多个<dt>

表单标签

  • 注册页面就是个表单
  • 表单，收集用户信息
  • 组成：
  • 表单域
  • 表单控件(也叫表单元素)
  • 提示信息

表单域

  • <from>会把它范围内的元素提交给服务器
  • 实例代码：
<form action="url地址" method="提交方式" name="表单域名称">
    </form>

属性

属性值

作用

action

url地址

将表单数据传到哪

method

get/post

提交方式，get/post(GET POST大写)

name

名称

用于指定表单的名称，以区分一个页面多个表单域

表单元素

  • 元素种类
  • input输入表单元素
  • select下拉表单元素
  • textarea文本域元素

    input输入元素

  • 语法规范:
<input type="属性值" />
  • <input type="属性值"/>标签为单标签
  • type属性设置不同值来指定不同控件类型
  • type属性值表:

type属性值

描述

text

单行输入字段,默认长度20个字符

password

字段中字符被掩码

radio

单选按钮，必须在同一name属性下

checkbox

复选框，必须在同一name属性下

submit

提交按钮，把表单元素发送到服务器 属性value，可以更改按钮内的文字

reset

清除表单里的所有数据 属性value，可以更改按钮内的文字

button

定义可点击按钮 value来定义里面的文字 后面结合js脚本使用

file

文件上传

  • input的其他属性
  • name属性：
  • 单选按钮和复选按钮必须在同一name下
  • value属性
  • 在输入框内的默认文字
  • 往后台发送的值
  • 可以更改按钮里的文字
  • checked属性
  • 针对单选按钮和复选按钮
  • 当页面打开的时候，默认选中这个按钮
  • checked="checked"
  • maxlength属性
  • 用户最大填入字符的长度
  • maxlength="长度"

<label>标签

  • 扩大表单元素的点击面积
  • 双标签,特征值(id)必须和for相同
<label for="man">男</label>
    <input type="radio" value="sex" id="man" />

select下拉表单元素

  • 语法规范：
<form>
  <select>
    <option>男</option>
    <option>女</option>
    <option selected="selected">机器人</option>
  </select>
</form>
  • select 至少包含一对 option
  • option里属性selected="selected"当前项为默认项

textarea文本域元素

写很多很多文字的时候用这个

<form>
  <textarea>
  默认显示的内容
  </textarea>
<form>
  • 文本框的默认文字写在<textarea>里
  • 参数cols=每行的字符数
  • 参数rows=显示的行数
  • 这两个平时不会使用，经常通过css来改变大小

内容参考：黑马程序员pink老师