百度前端技术学院 第二天学习笔记（HTML）（3）

HTML学习, 百度前端技术学院 本文总阅读量次

Iframe

iframe 用于在网页内显示网页。

语法

<iframe src="URL"></iframe>

Iframe - 设置高度和宽度

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

  • height 和 width 属性用于规定 iframe 的高度和宽度。
  • 属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。

Iframe - 删除边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

  • frameborder 属性规定是否显示 iframe 周围的边框。
  • 设置属性值为 “0” 就可以移除边框：

使用 iframe 作为链接的目标

  • iframe 可用作链接的目标（target）。
  • 链接的 target 属性必须引用 iframe 的 name 属性：
  • 初始页面是百度，点击“W3School.com.cn”后百度页面会变成w3school页面。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html>
    <body>

    <iframe src="https://www.baidu.com/" name="iframe_a"></iframe>

    <p><a href="https://www.w3school.com.cn/html/html_iframe.asp" target="iframe_a">W3School.com.cn</a></p>

    <p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

    </body>
    </html>

背景

需要注意：背景图像是否增加了页面的加载时间。小贴士：图像文件==不应超过 10k==。

文件路径

  • 使用==相对路径==是个==好==习惯（如果可能）。
  • 如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL：<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

相对路径

相对路径指向了相对于当前页面的文件。

  • <img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹
  • <img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中
  • <img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中
  • <img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中

标签

<base> 标签为页面上的所有链接规定==默认地址==或==默认目标==（target）

1
2
3
4
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

所有链接一个目标(target)【使用 base】

  • 在内使用使页面中的所有标签在新窗口中打开。
  • 比如<base target="_blank" />使得内的超链接都将在==新窗口==中加载，因为 target 属性被设置为 “_blank”。（个别超链接需要不同的打开方式可以单独在设置target属性）
  • 例子

HTML 字符实体

  • HTML 中的预留字符必须被替换为字符实体。
  • 比如：如需显示小于号，我们必须这样写：&lt; 或 &#60;
  • 有用的字符实体

表单（form）

Action 属性

  • action 属性定义在提交表单时执行的动作。
  • <form action="action_page.php">如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性

  • method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
  • <form action="action_page.php" method="GET">
使用 GET（默认方法）不安全
  • 当您使用 GET 时，表单数据在页面地址栏中是可见的：action_page.php?firstname=Mickey&lastname=Mouse
  • 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，可以使用GET。
  • 注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
推荐使用 POST：
  • 如果表单正在更新数据，或者包含敏感信息（例如密码）。
  • POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

Name 属性

  • 如果要正确地被提交，每个输入字段必须设置一个 name 属性。
  • <input type="text" name="username">

用<fieldset>组合表单数据

  • <fieldset> 元素组合表单中的相关数据
  • <legend> 元素为 <fieldset> 元素定义标题。
  • 例子
  • 效果：会有一个粗框把表格内容框住。

<select> 元素（下拉列表）

1
2
3
4
5
6
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
  • 列表通常会把==首个==选项显示为==被选选项==。
  • 您能够通过添加==selected属性==来==定义预定义选项==。<option value="fiat" selected>Fiat</option>
HTML学习, 百度前端技术学院