HTML 标签使用方法2

HTML5及CSS学习

表格标签

• 表格：显示展示数据
• 基本语法：

<table>
    <tr>
        <td>单元格中的文字</td>
      </tr>
  </table>

• 定义表格的标签
• 定义表格中的行
• 单元格，标签之间添加内容

表头单元格标签

• 语法：<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>

合并单元格

跨行合并

• 最上侧单元格为目标单元格，写合并代码
• rowspan=“要合并的单元格的个数”

跨列合并

• 最左侧单元格为目标单元格，写合并代码 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来改变大小