iframe元素（框架页）

通常用于在网页中嵌入另一个页面 iframe为可替换元素

通常为行盒
通常显示的内容取决于元素的属性
CSS不能完全控制其中的样式
具有行块盒的特点（盒模型中的各个尺寸都可以设置）

在页面中使用flash

object和embed 它们都是可替换元素 MIME(Multipurpose Internet Mail Extensions)——多用途互联网邮件类型：比如，资源是一个jpg图片，MIME：image/jpeg

表单元素

表单元素包含了一系列元素，主要用于收集用户数据

input元素（输入框）

input元素（可替换元素）是一个空元素，有下列常见属性：

type属性，输入框的类型，常见取值：
- text,普通文本输入框
- password，密码输入框
- number，数字输入框（可通过min和max属性控制取值范围，可通过step属性控制步径）
- checkbox，多选框（多配合name属性使用，表示为同一组）
- radio，单选框（多配合name属性使用，表示为同一组）
- date，日期选择框（可能出现兼容性问题）
- search，搜索框（可能出现兼容性问题）
- range，滑块框（可通过min和max属性控制取值范围）
- color，颜色选择框
value属性，输入框的值（内容）
placeholder属性，显示提示文本，在文本框没有内容时显示

input元素可以制作按钮当type值为reset（重置按钮）、button（普通按钮）、submit（提交按钮）时，input表示按钮

select元素（下拉列表选择框）

通常和option元素（选项）配合使用

<select>
	<option>成都</option>
	<option>北京</option>
	<option selected>天津</option>
	<!-- selected是一个布尔属性，在HTML5中可以简写，实际为  selected:"selected" 在此表示默认选中天津-->
	<!-- 在input元素中设置默认选中时，使用checked-->
</select>

给下拉列表分组

请选择你最喜欢的主播：
  <select>
        <optgroup label="才艺表演">
            <option>咻咻满</option>
            <option>王雨檬</option>
            <option>真栗</option>
        </optgroup>
        <optgroup label="游戏主播">
            <option>寅子</option>
            <option>杨树</option>
            <option>阿飞</option>
        </optgroup>
</select>

textarea元素（文本域）

多行文本框

<textarea cols="30" rows="10">此处内容无空白折叠</textarea>
<!-- cols表示列，rows表示行；多用CSS控制宽高 -->
<!-- textarea也可以使用placeholder属性 -->

button元素（按钮）

type属性：reset（重置）、submit（提交）、button，默认值为submit

表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式 disabled属性：布尔属性，是否禁用，会改变表单显示样式

配合表单元素的其他元素

label元素

普通元素，通常配合单选和多选框使用，有两种关联方式

显示关联可以通过for属性，让label元素关联某一个表单元素，for属性中书写表单元素的id值

<body>
    <div>
        请选择性别：
        <input id="radMale" name="gender" type="radio">
        <label for="radMale">男</label>
        <input id="radFemale" name="gender" type="radio">
        <label for="radFemale">女</label>
    </div>
</body>

隐式关联

<body>
    <div>
        请选择性别：
        <label>
            <input name="gender" type="radio">
            男
        </label>
        <label>
            <input name="gender" type="radio">
            女
        </label>
    </div>
</body>

datdalist元素（数据列表）

该元素本身不会显示到页面，通常用于和普通文本框配合,以id值关联

<body>
    <div>
        请输入你常用的浏览器：
        <input list="userAgent" type="text">
    </div>
    <datalist id="userAgent">
        <option value="Chrome">谷歌浏览器</option>
        <option value="IE">IE浏览器</option>
        <option value="Opera">欧鹏浏览器</option>
        <option value="Safari">苹果浏览器</option>
        <option value="Fire fox">火狐浏览器</option>
    </datalist>
</body>

form元素

通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。 form元素对开发静态页面没有什么意义

fieldset元素

表单分组

美化表单元素

新的伪类选择器

focus 元素聚焦时的样式

tabindex属性，调整聚焦顺序

checked 单选或多选框被选中的样式

新的伪元素选择器

placeholder，可以用来设置placeholder的样式

常见用法

重置表单元素样式

input,
textarea,
button,
select {
    border: none;
}

input:focus,
textarea:focus,
button:focus,
select:focus {
    outline: none;
    outline-offset: 0;
}

设置多行文本框textarea是否允许调整尺寸设置resize属性：

both：默认值，两个方向都可以调整尺寸
none：不能调整尺寸
horizontal: 水平方向可以调整尺寸
vertical：垂直方向可以调整尺寸

文本框边缘到内容的距离

/* 方式1：padding */
input {
	padding:0 10px;
}

/* 方式2：text-indent */
input, textarea {
	text-indent: 1em;
}

控制单选和多选的样式不使用浏览器默认样式，自行设计

<head>
...
    <style>
        /* 设置单选框外圆样式/即未选中状态 */
        .radio {
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            border-radius: 50%;
            cursor: pointer;
        }
        /* 设置选中后样式 */
        .radio.checked {
            border-color: #008c8c;
        }
        /* 设置选中后圆点样式，此为第一种方式 */
        .radio.checked::after {
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background: #008c8c;
            margin-left: 3.5px;
            margin-top: 3.5px;
            border-radius: 50%;
        }
        /* 设置选中后圆点样式的第二种方式为绝对定位，注意将外圆框设置为相对定位，以为其提供包含块 */
    </style>
</head>
<body>
    <div class="radio checked">
    </div>
</body>

实现切换选中/未选中状态

<head>
...
    <style>
	    /* 设置单选框外圆样式/即未选中状态 */
        .radio-item .radio {
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;/* 设置为行块盒 */
        }
        /* 此选择器选中的是类名为radio的元素（类名为radio-item的元素下，用户选中的文本框后的相邻兄弟元素且类名为radio的元素） */
        .radio-item input:checked+.radio{
            border-color: #008c8c;
        }
        /* 此选择器选中的是span元素（类名为radio-item的元素下，用户选中的文本框后的所有兄弟元素中的span元素）*/
        .radio-item input:checked~span{
            color:#008c8c;
        }
        /* 此选择目的是为了在类名为radio的元素后添加一个伪元素， 其中样式为文本选择框选中后的圆点样式*/
        .radio-item input:checked+.radio::after {
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background: #008c8c;
            margin-left: 3.5px;
            margin-top: 3.5px;
            border-radius: 50%;
        }
        /* 选中类型为radio的input元素，让其隐藏 */
        .radio-item input[type="radio"]{
            display: none;
        }
    </style>
</head>
<body>
    <p>
        请选择性别：
        <!-- 将单选框放在label元素中，即可将自行设计的选择框样式和选择框关联起来 -->
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>男</span>
        </label>
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>
</body>

表格元素

在css技术出现之前，网页通常使用表格布局。后台管理系统中可能会使用表格。前台：面向用户后台：面向管理员。对界面要求不高，对功能性要求高。表格不再适用于网页布局的原因：表格的渲染速度过慢。

<body>
    <table>
        <caption>表格标题</caption>
         <!-- 表头 -->
        <thead>
            <!-- table row -->
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
                <th>列5</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
        <!-- 表尾 -->
        <tfoot>
            <tr>
                <!-- colspan属性定义表头单元格应该横跨的列数 -->
                <!-- 类似有rowspan规定表头单元格可纵跨的行数-->
                <td colspan="5">合计：XXXX</td>
            </tr>
        </tfoot>
    </table>
</body>

其他元素

abbr 缩写词
time 提供给浏览器或搜索引擎阅读的时间
b（bold）以前是一个无语义元素，主要用于加粗字体 HTML5中赋予其语义，表示用于强调
q 一小段引用文本
blockquote 大段引用的文本 q和blockquote元素都可以加上cite属性，表明引用地址
br 无语义主要用于在文本中换行
hr 无语义主要用于分割（添加分割线）
meta 给网页添加元数据还可以用于搜索引擎优化（SEO）

<meta name="keywords" content="关键字,关键字,关键字，等">
<meta name="author" content="作者名字,邮箱地址">
<meta name="description" content="描述 描述 描述 等">

link 通常用于链接外部资源（CSS、图标） rel（relation）属性：链接的资源和当前网页的关系 type属性：链接的资源的MIME类型

链接图标地址，可以在网页标签栏显示网站图标
<link rel="icon" href="图标地址">

前端学习-day8-HTM进阶