003-HTML标签与属性_html &#003-CSDN博客

本文链接：https://blog.csdn.net/rulaixiong/article/details/109112318

HTML除了基本的布局标签以外，还有部分标签拥有强大的交互功能，比如表单标签，可以实现基本的登录注册操作。再者各种标签通过设置不同的属性，也可以实现一些交互效果。

一、HTML 标签属性

（一）、HTML属性

HTML属性指的是对元素的一种描述方式，其提供了更多有关HTML元素的信息

（二）、通用属性

通用属性指的是所有标签都拥有的属性

id 规定元素的唯一 id
class 规定元素的类名
style 规定元素的行内样式
title 规定元素的额外信息，当鼠标放在元素上，提示的文本内容

<!--以下代码是实际开发的案例-->
<div class="wrapper" id="wrapper" style="background:red;" title="此处鼠标悬停显示此段信息"></div>

（三）、自定义属性

HTML5规范中指定如果需要使用自定义属性，需要用 data-*的方式，比如 data-src data-index

<!--以下代码是实际开发的案例，img标签显示的是缩略图，而data-src的值为点击显示原图的地址-->
<img src='./img/1.jpg' data-src='./img/big_1.jpg'>

二、table 表格标签

（一）、table表格

在Html中 <table>标签表示一个表格，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）

表格属性
- border：设置表格边框
- width：设置表格宽度
- align：设置表格对齐
- cellpadding：设置单元格间距
- cellspacing：设置像素间隙
常见表格展示

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" >
  <tr>
    <td>ID</td>
    <td>姓名</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>男/td>
  </tr>
</table>

（二）、td跨行\跨列属性

rowspan 属性定义单元格应该纵跨的行数

<!-- 单元格纵跨两列 -->
<table border="1">
 <tr>
   <th>First Name:</th>
   <td>Bill Gates</td>
 </tr>
 <tr>
   <th rowspan="2">Telephone:</th>
   <td>555 77 854</td>
 </tr>
 <tr>
   <td>555 77 855</td>
 </tr>
</table>

colspan 属性定义单元格应该横跨的列数

<!-- 单元格横跨两格 -->
<table border="1">
 <tr>
   <th>Name</th>
   <th colspan="2">Telephone</th>
 </tr>
 <tr>
   <td>Bill Gates</td>
   <td>555 77 854</td>
   <td>555 77 855</td>
 </tr>
</table>

（三）、table完全表格

一个完整table表格一般包含<thead>、<tbody>、和 <tfoot> 元素结合，用来规定表格的各个部分（表头、主体、页脚）

<thead> 标签用于组合 HTML 表格的表头内容
<tbody> 标签用于组合 HTML 表格的主体内容
<tfoot> 标签用于组合 HTML 表格的页脚内容

<!-- 完整表格实例 -->
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" >
 <thead> 
   <tr align="center">
     <td>姓名</td>
     <td>年龄</td>
   </tr>
 </thead>
 <tbody>
   <tr align="center">
     <td>王五</td>
     <td>25</td>
   </tr>
 </tbody>
 <tfoot>
   <tr align="center">
     <td colspan="2">底部</td>
   </tr>
 </tfoot>
</table>

三、form 表单标签

（一）、form表单

<form>表单是一个包含表单元素的区域，允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

表单常用属性
- name属性：规定表单的名称
- action属性：规定当提交表单时，向何处发送表单数据
- method属性：规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）,常见的用post，get方式请求

（二）、表单元素

HTML 表单元素的有：<input>、<textarea>、<button>、<select>

<input>标签：根据不同的 type 属性，可以变化为多种状态输入方式
1. <input type="text" />: 定义供文本输入的单行输入字段
2. <input type="password" />：定义密码字段
3. <input type="submit" />：定义提交表单数据至表单处理程序的按钮
4. <input type="radio" />：定义单选按钮
  - checked {boolean}:属性为选中状态，true为选中，false 为未选中
5. <input type="checkbox" />：定义复选框
  - checked {boolean}:属性为选中状态，true为选中，false 为未选中
6. <input type="button" />：定义普通按钮
7. <input type="reset" />：定义重置按钮
8. <input type="file" />：定义文件框
<textarea>标签：定义多行的文本输入控件
<button>标签：定义一个按钮，根据不同的 type 属性展示不同按钮类型
1. button:定义普通按钮
2. reset:定义重置按钮
3. submit：定义提交按钮
<select>标签：定义可单选或多选下拉菜单，包含若干个可选项(<option>)

（三）、表单通用属性

表单通用属性的有：name、value、readonly、disabled

name属性：规定输入字段名称
value属性：规定输入字段的初始值
readonly属性：规定输入字段为只读
disabled属性：规定输入字段是禁用的

四、iframe 框架标签

<iframe>元素会创建包含另外一个文档的内联框架，也是镶嵌在一个网页中的另一个网页。相当网页中又嵌套了一个窗口

src属性：规定在框架中显示的文档的 URL
name属性：规定框架的名称
width属性：iframe设置宽度
height属性：iframe设置高度
frameborder属性：设置框架边框
scrolling属性：设置滚动条

<!-- 此处是一个内嵌框架：地址为百度，宽度1200 高度500 无滚动条 框架边框为0 -->
<iframe src="http://www.baidu.com" 
  name="baiduIframe" 
  width="1200" 
  height="500" 
  frameborder="0" 
  scrolling="no">
</iframe>