AI 摘要

文章系统梳理了 HTML 媒体元素、结构标签、iframe 及表单全家桶。video/audio 详解 src、controls、autoplay、muted 等属性，提示静音方可自动播放；header、main、section 等语义化布局提升可读性；iframe 可内嵌页面但存在性能与安全隐患。form 部分覆盖 method、enctype，input 的 20 余种 type、textarea、select、button 用法，并示范 placeholder、required、pattern 等初级验证技巧，帮助开发者快速构建交互式网页。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

媒体元素

视频元素

video 标签用于加载视频。

video 标签的基本用法：

<video src="url"></video>

video 标签的基本属性：

名称描述
src视频的路径
controls向用户显示视频播放控件
autoplay视频就绪后立即播放
loop循环播放视频
preload视频在页面加载时加载，并预备播放
muted静音播放
width播放器宽度
height播放器高度

示例：播放视频

入口页面（index.html）：

<video src="demo.mp4" width="500px" controls autoplay></video>

示例效果：

虽然在 video 标签中加上 autoplay 属性，但在浏览器中，视频还是无法自动播放，有些浏览器禁止自动播放带有声音的音视频，如果要实现自动播放，可以将视频静音。

示例：自动播放视频

入口页面（index.html）：

<video src="demo.mp4" width="500px" controls autoplay muted></video>

示例效果：

音频元素

audio 标签用于加载音频。

audio 标签的基本用法：

<audio src="url"></audio>

audio 标签的基本属性：

名称描述
src音频的路径
controls向用户显示音频播放控件
autoplay音频就绪后立即播放
loop循环播放音频
preload音频在页面加载时加载，并预备播放
muted静音播放
width播放器宽度
height播放器高度

示例：播放音频

入口页面（index.html）：

<audio src="music.mp3" autoplay loop></audio>

结构标签与 iframe

结构元素

一个页面大体可以由三部分组成：页面头部、页面主体、页面底部。

在制作网页时，必须先划分结构，再编写内容。

HTML 中具有语义化的结构标签：

  • header 标签：定义页面头部。
  • footer 标签：定义页面底部。
  • main 标签：定义文档的主要内容，在整个 HTML 文档中只能出现一次。
  • section 标签：定义页面中的某一个独立区域。
  • article 标签：定义独立的文章内容。
  • aside 标签：定义相关内容或应用，常用于侧边栏。
  • nav 标签：定义导航类辅助内容。

示例：使用结构标签布局页面

入口页面（index.html）：

<header>
    <h1>页面头部</h1>
</header>
<main>
    <section>
        <h1>新闻区域</h1>
        <article>文章区域</article>
    </section>
    <section>
        <h1>娱乐区域</h1>
    </section>
</main>
<footer>
    <h1>页面底部</h1>
</footer>

示例效果：

iframe

iframe 标签用于内联网页。

iframe 标签的基本用法：

<iframe src="url"></iframe>

iframe 标签的基本属性：

属性描述
name内联框架的名称
src内联网页的地址，支持远程链接和本地文件
width内联框架的宽度
height内联框架的高度
frameborder删除内联框架的边框，该属性已经被废弃

示例：内联网页

入口页面（index.html）：

<iframe name="myIframe" src="https://www.fjisp.com/" frameborder="0" width="500px" height="500px"></iframe>
<br>
<a href="https://www.taobao.com/" target="myIframe">在myIframe内联框架中跳转</a>

示例效果：

iframe 存在的问题：

  • iframe 需要加载嵌入的网页，因此会增加整体页面的加载时间。
  • 对搜索引擎不友好，搜索引擎通常会忽略 iframe 中的内容。
  • 恶意网站可以通过 iframe 来进行钓鱼、点击劫持等攻击，从而危害用户的隐私和安全。
  • 不同浏览器对 iframe 的支持程度不同。
  • 有些网站禁止被 iframe，如百度。

表单

表单元素 form

form 标签的基本用法：

<form method="xx" action="url">
    <!-- ... -->
</form>

form 标签的基本属性：

名称描述
method表单请求方式，GET（默认） / POST
action表单请求地址
enctype表单数据提交到服务器时应如何编码
application/x-www-form-urlencoded：默认编码
multipart/form-data：文件上传编码

表单元素 input

input 标签用于定义输入字段，用户可以在其中输入数据。

通常情况下，input 标签会使用 label 标签为元素定义标签。

input 标签的基本用法：

<label for="id">xxx：</label>
<input type="xxx" name="xxx" id="xxx" value="xxx"/>

input 标签的基本属性：

属性描述
type表单元素的类型
name表单元素的名称
id表单元素的 id
value表单元素的初始值
maxlengthtype 为 text 或 password 时，输入的最大字符数
checkedtype 为 radio 或 checkbox 时，指定按钮是否是被选中
readonly表单元素只读
disabled禁用表单元素
required表单元素必填
placeholder表单元素的提示信息

input 标签的基本表单元素类型：

名称描述
text（默认值）普通文本输入框
password密码框
radio单选框
checkbox多选框
button普通按钮
submit提交表单请求按钮
reset重置表单内容按钮
file文件上传选择按钮
email邮箱输入框
url网址输入框
number数字输入框
range滑块
search搜索框
hidden隐藏表单域

示例：表单元素 input

入口页面（index.html）：

<!-- 普通文本框 -->
<label for="userName">用户名：</label>
<input type="text" id="userName" value="duozai"/>

<!-- 密码框 -->
<label for="password">密码：</label>
<input type="password" id="password" value="123456"/>

<!-- 单选框 -->
<label>请选择性别：</label>
<input type="radio" name="sex" value="男"/> 男
<input type="radio" name="sex" value="女"/> 女

<!-- 多选框 -->
请选择爱好：
<input type="checkbox" name="hobby" value="吃饭"/> 吃饭
<input type="checkbox" name="hobby" value="睡觉"/> 睡觉
<input type="checkbox" name="hobby" value="打豆豆"/> 打豆豆

<!-- 按钮 -->
<input type="button" value="普通按钮"/>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>

<!-- 文件上传选择按钮 -->
<input type="file" name="file" value="请选择文件"/>

<!-- 数字输入框 -->
<label for="age">年龄：</label>
<input type="number" id="age" name="age" value="123456"/>

<!-- 滑块 -->
<input type="range" name="range" min="0" max="100" step="2" value="80"/>

<!-- 搜索框 -->
<label for="keyword">关键词：</label>
<input type="search" id="keyword" name="keyword"/>

<!-- 禁用输入框 -->
<input type="text" id="myName" value="duozai" disabled/>

<!-- 带提示的文本框 -->
<input type="text" placeholder="请输入内容"/>

示例效果：

表单元素 textarea

textarea 标签用于定义多行文本框。

textarea 标签的基本用法：

<textarea id="xxx" name="xxx" rows="5" cols="50">
    xxx
</textarea>

textarea 标签的基本属性：

名称描述
cols多行文本框可见宽度
rows多行文本框可见行数

示例：表单元素 textarea

入口页面（index.html）：

<textarea rows="7">
    欢迎使用textarea
</textarea>

示例效果：

表单元素 select 和 option

select 标签用于创建下拉框，option 标签用于创建下拉框中的每一个选项。

select 标签和 option 标签的基本用法：

<select name="cars" id="cars">
    <option value="xxx">xxx</option>
</select>

option 标签的基本属性：

名称描述
value选项的值
selected选项默认被选中

示例：表单元素 select 和 option

入口页面（index.html）：

<label for="cars">请选择一个汽车品牌：</label>

<select id="cars">
    <option value="audi">奥迪</option>
    <option value="byd">比亚迪</option>
    <option value="geely">吉利</option>
    <option value="volvo">沃尔沃</option>
</select>

示例效果：

表单元素 button

button 标签用于创建按钮。

在 button 元素内部，可以放置文本、图像、图标等标签，这是用 input 元素创建的按钮所不能做到的。

button 标签的基本用法：

<button type="xxx">xxx</button>

button 标签的基本属性：

名称描述
type按钮类型
button：普通按钮
submit：表单提交按钮（默认）
reset：重置表单按钮

示例：表单元素 button

入口页面（index.html）：

<button type="button">点击我！</button>

表单初级验证

表单验证的好处：

  • 减轻服务器的压力。
  • 保证数据的可行性和安全性。

实现表单初级验证：

  • 可以使用 placeholder 描述表单元素期待用户输入何种内容。
  • 设置表单元素的类型，限定输入的数据类型。
  • 使用 pattern 进行正则表达式校验。

示例：表单初级验证

入口页面（index.html）：

<form>
    <p>
        <input type="number" name="age" placeholder="请输入年龄"/>
    </p>
    <p>
        <input type="email" name="email" placeholder="请输入邮箱"/>
    </p>
    <p>
        <input type="text" name="tel" required pattern="^1[358]\d{9}" placeholder="请输入手机号"/>
    </p>
    <p>
        <button type="submit">提交</button>
    </p>
</form>

示例效果：