1.什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页2.HTML 文档 = 网页
HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
使用水平线 (< hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。
注意:
创建图像映射 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
<html> <body> <p>请点击图像上的星球,把它们放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> </body> </html>什么是响应式 Web 设计?
RWD 指的是响应式 Web 设计(Responsive Web Design) RWD 能够以可变尺寸传递网页 RWD 对于平板和移动设备是必需的使用 Bootstrap
另一个创建响应式设计的方法,是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>W3School Demo</h1> <p>Resize this responsive page!</p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </div> </body> </html>http://www.w3school.com.cn/html/html_frames.asp#more_examples 7.1 框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
框架结构标签(frameset)
框架结构标签(<frameset>)定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积7.2 HTML Iframe iframe 用于在网页内显示网页。
1.添加 iframe 的语法
<iframe src="URL"></iframe>URL 指向隔离页面的位置。
2.Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素,但也可以用百分比来设定(比如 “80%”)。 实例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>3.Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 “0” 就可以移除边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>4.使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性:
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>HTML script 元素
<script>标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”:
<script type="text/javascript"> document.write("Hello World!") </script><noscript>标签
标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:
<script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript>1.HTML<head>元素
<head>元素是所有头部元素的容器。<head>内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script>以及<style>。
2.HTML<title>元素
<title>标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够:
定义浏览器工具栏中的标题 提供页面被添加到收藏夹时显示的标题 显示在搜索引擎结果中的页面标题一个简化的 HTML 文档:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>3.HTML <base>元素
<base>标签为页面上的所有链接规定默认地址或默认目标(target):
<head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head>4.HTML<link>元素
<link>标签定义文档与外部资源之间的关系。
<link>标签最常用于连接样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>5.HTML<style>元素
<style>标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>6.HTML<meta>元素
元数据(metadata)是关于数据的信息。
<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="w3school.com.cn"> <meta name="revised" content="David Yang,8/1/07"> <meta name="generator" content="Dreamweaver 8.0en"> </head> <body> <p>本文档的 meta 属性标识了创作者和编辑软件。</p> </body> </html><meta>标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 针对搜索引擎的关键词 重定向用户
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> </head> <body> <p> 对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a> </p> <p>您将在 5 秒内被重定向到新的地址。</p> <p>如果超过 5 秒后您仍然看到本消息,请点击上面的链接。</p> </body> </html>一些搜索引擎会利用 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 属性的作用是描述页面的内容。 7.HTML <script>元素
<script>标签用于定义客户端脚本,比如 JavaScript。
URL - Uniform Resource Locator
当您点击 HTML 页面中的某个链接时,对应的 标签指向万维网上的一个地址。
统一资源定位器(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 - 定义文档/资源的名称编者注:URL 的英文全称是 Uniform Resource Locator,中文也译为“统一资源定位符”。
<!DOCTYPE>声明
Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。 带有 HTML5 DOCTYPE 的 HTML 文档:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>http://www.w3school.com.cn/html/html_forms.asp