@xudongh
2016-05-22T10:24:23.000000Z
字数 7537
阅读 3877
前端设计
HTML 是用来描述网页的一种语言。
标题有-多种标签
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h1 align="center">heading</h1> 此标题居中对齐,但不赞成使用，请使用样式。
<hr /> 标签在 HTML 页面中创建水平线。
<hr>标签) 来分隔文章中的小节是一个办法。<p>This is a paragraph.</p>
<p></p>去插入一个空行，请使用<br /> 标签换行。<br /> 标签换行
若要在不产生一个新段落的情况下进行换行（新行）：
<p> This is <br /> a paragraph with line breaks</p>
<br>和<br />都可以换行，但使用<br />更好。<a href="http://www.w3school.com.cn">This is a link</a>
<img src="w3school.jpg" width="104" height="142" />
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号代替双引号。
<b></b>加粗
<strong></strong>貌似也是加粗
<big></big>变大
<small></small>变小
<i></i>斜体
<em></em>强调（与斜体效果貌似一样）
<sub></sub>上标（subscript）
<sup></sup>下标（superscript）
<pre></pre>预格式文本，保留空格和换行
<blockquote></blockquote>长引用
<q></q>短引用
<del></del>删除线
<ins></ins>下划线
<a href="/html/example.html" style="text-decoration:none">
其中，style="text-decoration:none"表示没有下划线。
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。
<head><style type="text/css">body {background-color: red}p {margin-left: 20px}</style></head>
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">This is a paragraph</p>
<a></a>定义超链接，a是指anchor（锚）。
<a href="http://www.w3school.com.cn/" title="W3Shool">Visit W3School</a>点击这个超链接会把用户带到 W3School 的首页。
title属性为鼠标悬停时显示的文本
有两种使用<a>标签的方式：
1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签
target属性：可以定义被链接的文档在何处显示。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>在新窗口打开链接。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，即在页面内跳转。
使用方法：
1. 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：<a name="word">文字</a>
2. 然后，我们在同一个页面中创建指向该锚的链接：<a href="word">文字</a>
3. 我们也可以在其他页面中创建指向该锚的链接：<a href="http://www.example.com/html.asp#word">w文字</a>
举例：
<p><a href="#C3">查看 Chapter 3。</a></p><h2>Chapter 1</h2><p>content 1:bla bla bla</p><h2>Chapter 2</h2><p>content 2:bla bla bla</p><h2><a name="C3">Chapter 3<a></h2><p>content 3:bla bla bla</p>
实例演示：http://www.w3school.com.cn/tiy/t.asp?f=html_link_locations
将<img>标签包含在<a>标签中
<a href="/html/example.html"><img src="/example.gif" /></a>
<a href="/index.html" target="_top">click</a>
使用target="_top"属性跳出框架。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
<img src="boat.gif" alt="Big Boat">
如果图像小于页面，图像会进行重复。
<body background="/.../background.jpg">
在文字中排列图片
<img src="/.../picture.gif" align="bottom">
align属性可为bottom、middle、top
实例：http://www.w3school.com.cn/tiy/t.asp?f=html_image_align
width属性和heigth属性
创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
实例：http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
http://www.w3school.com.cn/html/html_tables.asp
Unordered List
<ul><li>apple</li><li>banana</li></ul>
Ordered List
<ol><li>apple</li><li>banana</li></ol>
自定义列表以<dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd>开始。
<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>
显示为:
Coffee
Black hot drink
Milk
White cold drink
块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。
内联元素：内联元素在显示时通常不会以新行开始。
<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器，没有特定的含义。
<span>元素是内联元素，可用作文本的容器。没有特定的含义。
<html><body><form>名：<input type="text" name="firstname"><br />姓：<input type="text" name="lastname"></form></body></html>
http://www.w3school.com.cn/tiy/t.asp?f=html_inputfields
<html><body><form>用户：<input type="text" name="user"><br />密码：<input type="password" name="password"></form><p>请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。</p></body></html>
http://www.w3school.com.cn/tiy/t.asp?f=html_passwordfields
radio：单选钮
<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>
checkbox：复选框
<form><input type="checkbox" name="bike" />I have a bike<br /><input type="checkbox" name="car" />I have a car</form>
http://www.w3school.com.cn/html/html_forms.asp
通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
<frameset cols="25%,75%"><frame src="frame_a.htm" noresize="noresize"><frame src="frame_b.htm"><frame src="frame_c.htm"></frameset>
以上框架设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。
<frameset>：定义框架
<cols>：垂直框架
<rows>：水平框架
noresize属性：框架尺寸是默认可以调整的，此属性定义了框架尺寸不可调整
<iframe src="URL" width="200" height="200"></iframe>添加内嵌框架iframe
height和width属性用于规定 iframe 的高度和宽度。
frameborder="0"删除框架的边框
使用iframe作为链接的目标
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
以上链接点击后将在框架内显示
1.改变背景颜色
<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">
注意：标签属性为bgcolor而不是backgroundcolor
2.以图像作为背景
<body background="picture.gif">
如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML版本，浏览器才能完全正确地显示出 HTML 页面。这就是<!DOCTYPE>的用处。
<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
<!DOCYTYPE>是HTML5的版本声明
<head>元素是所有头部元素的容器。
<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到<head> 部分：<title>、<base>、<link>、<meta>、<script>以及 <style>。
<title>元素在所有 HTML/XHTML 文档中都是必需的。
<title>元素能够：
1. 定义浏览器工具栏中的标题
2. 提供页面被添加到收藏夹时显示的标题
3. 显示在搜索引擎结果中的页面标题
**HTML base 元素
<base>标签为页面上的所有链接规定默认地址或默认目标（target）
<head><base target="_blank" /></head>
<html><head><base href="www.xxx.com" />`</head><body><img> src=picture.gif /><p><a href="www.baidu.com">baidu</p><p><a href="http://baidu.com">baidu</p>
①由于在<head>部分规定了一个基准 URL，所以浏览器将在如下地址寻找图片：http://www.xxx.com/picture.gif
②而第一个链接，浏览器会链接到http://www.xxx.com/www.baidu.com
③而第二个链接，由于前面添加了http://，浏览器会链接到http://baidu.com
可参考实例：http://www.w3school.com.cn/tiy/t.asp?f=html_base_test
<link>标签定义文档与外部资源之间的关系。
<link>标签最常用于连接样式表。
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
<style>标签用于为 HTML 文档定义样式信息。
您可以在<style>元素内规定 HTML 元素在浏览器中呈现的样式。
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>
元数据（metadata）是关于数据的信息。
<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta>标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
略懂......
<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>
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
HTML实体符号参考手册：http://www.w3school.com.cn/tags/html_ref_entities.html
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
URL 也被称为网址。
当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
http://www.w3school.com.cn/html/html_media.asp
已学完