——————————————————————————
HTML 布局
——————————————————————————
使用 HTML5 的网站布局
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
使用表格的 HTML 布局
注释:<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用<table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式。
什么是响应式 Web 设计?
- RWD 指的是响应式 Web设计
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
——————————————————————————
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面
——————————————————————————
- 开发人员必须同时跟踪更多的 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>
frameborder 属性规定是否显示iframe 周围的边框。
设置属性值为“0”就可以移除边框。
<iframe src="demo.html" frameborder="0"></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>
——————————————————————————
好的背景使站点看上去特别棒。
——————————————————————————
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、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> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”
<script type="text/javasript">
document.write("Hello World!")
</script>
<noscript> 标签
<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> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用语链接样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<style> 标签用于为 HTML文档定义样式信息。
可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。
HTML <meta> 元素
元数据(metadata)是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta>标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键字),或其他 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> 声明帮助浏览器正确地显示网页
——————————————————————————
Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是<!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
常见的声明
HTML 5
<!DOCTYPE html>
<!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">