iframe标签 、label标签、table标签、表单标签、列表标签

iframe

作用：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
优点：

● 用来加载速度较慢的内容（如广告）

● 可以使脚本并行下载

● 可以实现跨子域通信

缺点：

● iframe 会阻塞主页面的 onload 事件

● 无法被一些搜索引擎索识别

● 会产生很多页面，不容易管理

label 

<label> 标签为 input 元素定义标注（标记）

作用：label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

使用方法：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

 

table

结构
thead、tbody

tr：行

th：表头/td：行内每个元素

样式

align=“center/left/right”

border=“1”或者“”

合并单元格

合并行：rowspan=“合并单元格个数”【跨行合并】

合并列：colspan=“合并单元格个数”【跨列合并】

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

table,
td {
    border: 1px solid #333;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

表单标签

input

type

text：文本

radio：单选

password：密码

button：按钮

checkbox：多选

file：文件

image：图片

submit：提交

reset：重置

hidden：隐藏

H5新增：number：数字；tel：电话；search：搜索；email：邮箱；url：地址；date：年月日；time：时分秒；month：月；week：周；time：时间；color：生成颜色选择表单；

range：范围

属性

name：input名称【radio单选及checkbox多选的name要一致】

value：规定input里面的值

checked：input自动聚焦

maxlength：规定输入字段的最大长度

H5新增表单属性：required ；placeholder； autofocus ；autocomplete（=on/off） multiple； pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$" form=" form表

单的ID"

事件

click：点击事件

focus：聚焦事件

blur：失焦事件

change：失焦且value值改变

submit：form提交事件

input：每当input里的输入框内容发生变化都会触发此事件

invalid：当验证不通过时触发此事件

 

  <input type="text" size="20" maxlength="20" value="文本输入框" style="height: 30px; color:cyan">

  <input type="password" size="30" maxlength="20" value="">

  篮球<input type="radio" value="bb" name="bool">
  足球<input type="radio" value="fb" name="bool" checked>
  All<input type="radio" value="all" name="bool">

  北京<input type="checkbox" value="北京" name="city">
  上海<input type="checkbox" value="上海" name="city">
  深圳<input type="checkbox" value="深圳" name="city">
  香港<input type="checkbox" value="香港" name="city">
  澳门<input type="checkbox" value="澳门" name="city">

value属性中的值用来设置用户选中改项目后提交到数据库中的值，name为复选框的名称

  <input type="image" src="图片URL" name="Yes" width="80" height="25" />
  <input type="image" src="图片URL" name="No" width="80" height="25" />

这个功能是将图片转为图片形式按钮，其中src是链接图片的路径，name为图片名称，width为图片宽度，height为图片高度，当按下图片按钮会以name中的值向服务器发送信息。

select：下拉表单元素

结构：option

属性

selected=“selected”当前option默认选中

multiple=“multiple”支持多选option（按住ctrl）

size=“2”，展示两个option选项

<select multiple="multiple" size="2">

  <option value ="volvo" selected>Volvo</option>

  <option value ="saab">Saab</option>

  <option value="opel">Opel</option>

  <option value="audi">Audi</option>

</select>

textarea：文本框

rows=“2”

cols=“2”

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

列表标签

ul-li：无序列表

list-style-type：disc

ol-li：有序列表

list-style-type：decimal

dl-dt-dd：自定义列表

去除列表样式：list-style： none

参考文章：

<table> - HTML（超文本标记语言） | MDN (mozilla.org)

(41条消息) input标签属性详解大全__吉尔伽的博客-CSDN博客_input属性有哪些