HTML笔记【3】

来源：互联网发布：国内外治疗癌症知乎编辑：程序博客网时间：2024/06/05 09:41

——————————————————————————

HTML 布局

——————————————————————————

使用 HTML5 的网站布局

HTML5 语义元素

header 定义文档或节的页眉

nav 定义导航链接的容器

section 定义文档中的节

article 定义独立的自包含文章

aside 定义内容之外的内容（比如侧栏）

footer 定义文档或节的页脚

details 定义额外的细节

summary 定义 details 元素的标题

使用表格的 HTML 布局

注释：<table> 元素不是作为布局工具而设计的。

<table> 元素的作用是显示表格化的数据。

使用<table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式。

什么是响应式 Web 设计？

RWD 指的是响应式 Web设计
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

——————————————————————————

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

——————————————————————————

框架

通过使用框架，可以在同一浏览器窗口中显示不止一个页面。每份 HTML 文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的 HTML 文档
很难打印整张页面

框架结构标签（<frameset>）

框架结构标签（<frameset>）定义如何将窗口分割为框架。
每个 frameset 定义了一系列行或列。
rows/columns 的值规定了每行或每列占据屏幕的面积。

编者注：frameset 标签也被某些文章和书籍译为框架集。

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

基本的注意事项 - 有用的提示：

假如有一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：

noresize="noresize"。

为不支持框架的浏览器添加<noframes>标签。

重要提示：不能将<body></body>标签与<frameset></frameset>标签同时使用！假如添加包含一段文本的<noframes>标签，就必须将这段文件嵌套于<body></body>标签内。

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

添加 iframe 的语法

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

url 指向隔离页面的位置。

iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如“80%”）。

<iframe src="demo.html" width="200" height="200"></iframe>

iframe - 删除边框

frameborder 属性规定是否显示iframe 周围的边框。

设置属性值为“0”就可以移除边框。

<iframe src="demo.html" frameborder="0"></iframe>

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo.html" name="iframe_a"></iframe><p><a href="http://www.baidu.com" target="iframe_a">百度</a></p>

——————————————————————————

好的背景使站点看上去特别棒。

——————————————————————————

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。

<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif"><body background="img/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
提示：如果打算使用背景图片，需要谨记以下几点：

背景图像是否增加了页面的加载时间。小贴士：图像文件不应该超过10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？

基本的注意事项 - 有用的提示：

<body>标签中的

背景颜色（bgcolor）
背景（background）
文本（text）

属性在最新的 HTML 标准（HTML 4 和 XHTML）中已被遗弃。

应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

——————————————————————————

JavaScript 使 HTML 页面具有更强的动态和交互性。

——————————————————————————

HTML script 元素

script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”

<script type="text/javasript">document.write("Hello World!")</script>

<noscript> 标签

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">document.write("Hello World!")</script><noscript>你的浏览器无法支持JavaScript！</noscript>

———————————————————————————————————————————————————

HTML <head> 元素

<head> 元素时所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处找到样式表，提供元信息，等等。

以下标签都可以添加到head部分：<title>、<base>、<link>、<mate>、<script>以及<style>。

———————————————————————————————————————————————————

HTML <title> 元素

<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果的页面标题

HTML <base> 元素

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

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /><base target="_blank" /></head><body><p><a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。</p><p><a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。</p></body></html>

最后结果两个链接，都在新窗口中加载。

HTML <link> 元素

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

HTML <style> 元素

可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。

HTML <meta> 元素

元数据（metadata）是关于数据的信息。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键字），或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

——————————————————————————

HTML 中的预留字符必须被替换为字符实体。

——————————————————————————

HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。

字符实体类似：

如需显示小于号，我们必须这样写：< 或 <

提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有的实体名称（对实体数字的支持却很好。）

不间断空格

HTML 中的常用字符是不间断空格（ ）。

浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的9个。如果需要在页面中增加空格的数量，需要使用   字符实体。

HTML 统一资源定位器

URL 也被称为网址。

URL 可以由单词组成，比如“www.baidu.com”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。

URL - Uniform Resource Locator

当点击 HTML 页面中的某个链接时，对应的<a>标签指向万维网上的一个地址。

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。

网址，比如 http://www.w3school.com.cn/html/index.asp ，遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

HTML URL 字符编码

——————————————————————————

URL 编码会将字符转换为可通过因特网传输的格式。

——————————————————————————

URL - 统一资源定位器

web 浏览器通过URL 从web 服务器请求页面。

URL 是网页的地址，比如 https://www.baidu.com。

URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用“%” 其后跟随两位数的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

——————————————————————————

<!DOCTYPE> 声明帮助浏览器正确地显示网页

——————————————————————————

<!DOCTYPE> 声明

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是<!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

常见的声明

HTML 5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE> 声明帮助浏览器正确地显示网页

0 0