1.1 一个基础例子

一个基础的HTML例子:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>page name</title>
</head>
<body>
	<h1>title 1</h1>
	<h2>sub title</h2>
	<p>paragraph text</p>
	<h1>title 2</h1>
	<p>paragraph text</p>
</body>
</html>

整个文件由html标签包着,其中由分为首部和主体两部分,分别用head标签和body标签包裹。

首部告诉浏览器关于网页的信息,如页面标题,首部包括<head>和</head>之间的所有内容。其中的title标签定义了网页的标题,meta标签指定了字符编码。

主体包含网页的所有内容和结构,也就是在浏览器直接看到的部分,主体包括<body>和</body>之间的所有内容。其中的h1标签和h2标签分别是一级标题和二级标题,p标签则是段落。

保存为HTML文件,在浏览器打开后,页面效果如下:

html_example

此外,还可以在HTML的首部里增加一些样式,就是style标签。style标签有一个可选的属性type,一般指定为"text/css"。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>page name</title>
	<style type="text/css">
		body {
			background-color: #d2b48c;
			margin-left: 20%;
			margin-right: 20%;
			border: 2px dotted black;
			padding: 10px 10px 10px 10px;
			font-family: sans-serif;
		}
	</style>
</head>
<body>
	<h1>title 1</h1>
	<h2>sub title</h2>
	<p>paragraph text</p>
	<h1>title 2</h1>
	<p>paragraph text</p>
</body>
</html>

style标签中的body表示这段配置应用于主体中的body标签。

保存刷新后看到页面效果:

html_example_1

可以看到通过增加style标签,给页面加了背景颜色、边框、字体。

1.2 标签

HTML标签是由尖括号包围、成对出现的关键词,如<p> 和 </p>,分别为开始标签和结束标签。HTML标签大小写不敏感,但推荐使用小写。

1.3 元素

HTML元素是开始标签到对应的结束标签的所有代码,HTML元素可以嵌套包含其他HTML元素。

html元素定义整个HTML文档,head元素定义文档的首部,body元素定义文档的主体。空元素没有内容,在开始标签中关闭,如br元素应当在开始标签添加斜杠:<br />。

1.4 属性

HTML属性在开始标签中设置,以名称/值对name=“value"的形式出现。属性和属性值大小写不敏感,但推荐小写。

以下是大多数HTML元素的属性:

  1. class:规定元素的类名(classname),不同的元素可以有相同的类名
  2. id:规定元素的id,元素的id在HTML文档中是唯一的,其他a标签可以通过href="url#label"定位到此网页的该元素处
  3. style:规定元素的行内样式(inline style)
  4. title:规定元素的额外信息

以下是几个属性的实例:

  1. HTML链接的地址:

       <a href="http://www.google.com">This is a link</a>
       
  2. HTML标题的对齐方式:

       <h1 align="center">
       
  3. HTML表格的边框信息:

       <table border="1">
       

1.5 字符实体

若要在HTML文本中展示<和>,又不想和标签区分开,可以转化为字符实体,用来表示特殊字符。

特殊字符 字符实体 说明
空格 &nbsp;
< &lt;
> &gt;
& &amp; 在&用于实体字符时转化,一般可直接用&
" &quot;
' &apos;

1.6 标准

现在最新的标准是HTML5,可以通过 The W3C Markup Validation Service 检查网页是否符合HTML标准。

2. 标签

2.1 首部

html标签包裹整个HTML文件,其中又分为head元素和body元素表示首部和主体。

<html>
<head>
</head>
<body>
</body>
</html>

以下是几个专门用于首部的标签。

标题

title标签指定网页标题。

<title>page name</title>

默认链接

base标签为所有链接规定默认地址。

<base href="http://www.google.com/" />
<base target="_blank" />

外部资源

link标签定义外部资源。

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

样式

style标签定了HTML文档的样式信息。

<style type="text/css"></style>

数据

meta标签定义元数据,如页面描述、修改时间、字符编码等。

<meta charset="utf-8">

2.2 基础标签

注释

<!-- This is a comment -->

标题

通过 h1 - h6 标签进行定义不同等级的标题,h1最大,h6最小。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

段落

浏览器会忽略HTML文档中的制表符、回车和大部分空格,根据标记来确定换行或分段。

<p>This is a paragraph.</p>

换行

显示页面时,浏览器会移除源代码多余的空格和空行,连续的空格或空行会被算作一个空格,因此需要用此标签来换行。

<br />

水平线

创建水平线用于分割内容。

<hr />

链接

href属性指定链接地址,标签中间为显示的文本。

target属性定义链接文档的显示位置,默认在当前窗口打开,target="_blank"表示在新窗口打开。

id属性或name属性定义锚(anchor),id=“label”,在同一文档创建链接<a href="#label">,或者其他页面创建链接<a href="url#label">,点击后直接跳转到该锚。

将显示文本替换为img元素,可以展示一个可以点击的图像。

<a href="url">text</a>

图像

属性指定了图像的名称和尺寸。

src属性指定图片地址,可以是本地图片地址或网络图片地址。

width、height属性指定图片宽高,默认为按实际图片大小显示,可以为具体像素值也可以为百分比,如width="300"width="300px"width="50%"

alt属性定义替换的文本,无法载入图片时显示。

<img src="abc.jpg" width="104" height="142" />

2.3 文本格式

粗体文本

<b>text</b>

斜体字

<i>text</i>

强调

<em>text</em>

大号字

<big>text</big>

小号字

<small>text</small>

下标字

<sub>text</sub>

上标字

<sup>text</sup>

删除线

<del>text</del>

下划线

<ins>text</ins>

代码格式

<code>a = 1;</code>

2.4 引用

短引用

单行的引用,会用引号包围。

<q>text</q>

长引用

会对整个元素进行缩进。

<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来,WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家,并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

缩略词

对缩写进行标记,为浏览器、搜索引擎提供信息。

<abbr title="World Health Organization">WHO</abbr>

联系信息

定义文档或文章的联系信息(作者/拥有者)。

<address>
	Written by Donald Duck.<br> 
	Visit us at:<br>
	Example.com<br>
	Box 564, Disneyland<br>
	USA
</address>

著作标题

<cite>The Scream</cite>

2.5 表格

一个表格用table标签定义,每一行用tr标签定义,行的每个单元格用td标签定义。第一行表头可用th标签定义,显示为粗体居中。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table标签的border属性定义边框。

一个表格的例子:

<table>
	<tr>
		<th>Heading</th>
		<th>Another Heading</th>
	</tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

2.6 列表

不同的列表可以嵌套使用,即在li元素中定义新的列表。

li = list item

ul = unordered list

ol = ordered list

无序列表

用圆点列出每个项目。

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

也可以直接用li标签包裹每个元素:

<li>Coffee</li>
<li>Milk</li>

有序列表

用数字列出每个项目。

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

定义列表

用给定文本列出每个项目,列表的每一项都有dt标签和dd标签。

<dl>
	<dt>Coffee</dt>
	<dd>Black hot drink</dd>
	<dt>Milk</dt>
	<dd>White cold drink</dd>
</dl>

2.7 块

使用div元素定义块,用于组合其它HTML元素,以对文档布局,将文档分割为独立的分区或节。

用id或class属性标记div元素,和css一起使用,用于对内容块设置样式。

<div style="color:#00FF00">
	<h3>This is a header</h3>
	<p>This is a paragraph.</p>
</div>

用span元素来组合行内的文本,再通过样式来格式化它们。span标签本身没有固定的格式表现,需要对它应用样式。

<p><span>some text.</span>some other text.</p>

2.8 内联框架

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

属性width和height规定框架的宽度和高度,默认单位为像素,也可以是百分比。

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

2.9 JavaScript

在head元素或body元素内,使用script标签定义JavaScript脚本。

<script>
	document.write("Hello World!");
</script>

也可以通过src属性,使用外部脚本文件。

<script src="./js/example.js"></script>

2.10 表单

使用form标签定义HTML表单,收集用户输入。

表单元素内,input标签定义输入,其中<input type="text">是输入文本框,*<input type="radio">是单选按钮,<input type="submit">是提交按钮。

如下例子:

<form>
	input 1:<br>
	<input type="text" name="input 1"><br />
	input 2:<br>
	<input type="text" name="input 2"><br />
	<input type="radio" name="sex" value="male" checked>Male<br />
	<input type="radio" name="sex" value="female">Female<br />
	<input type="submit" value="submit">
</form>

在网页中显示如下:

html_form

点击提交按钮,会讲上面文本框和单选按钮输入的key=value对,传给网页参数发送请求,例如会发送一个请求a.html?input+1=val1&input+2=val2&sex=male

form标签的action属性定义提交表单时执行的动作,如<form action="action_page.php">将会指定某个服务器脚本来处理被提交的表单,不指定action属性则设置为当前网页处理表单。

form标签的method属性规定提交表单用的HTTP方法为GET或POST,如<form action="action_page.php" method="GET">指定为GET方法。

2.11 画布

canvas元素使用JavaScript在网页上绘制图像。

3. HTML5

3.1 语义元素

非语义元素div和span,无法提供关于内容的信息,通过id和class包含信息,如<div class="header"><div id="footer">

HTML5提供的语义元素能清楚地描述意义,明确表示网页的不同部分,可以将上面的换为<header><footer>

HTML5语义元素对应的网页结构:

html5_semantic_element

header

文档的页眉。

nav

定义导航链接集合。

main

定义文档的主内容。

section

文档中的节,是有主题的内容组,通常具有标题。

article

独立的自包含的内容,常用于论坛、博客、新闻。

section元素和article元素是可以包含对方或者自包含的。

aside

除了页面主内容外的内容,与周围内容相关,如侧栏。

footer

文档或节的页脚,通常包含作者、版权信息、联系信息等。

4. 样式

可以通过首部的style标签,将样式添加到HTML元素中,或者通过CSS进行定义。

4.1 内部样式表

在HTML首部添加style标签,给指定元素定义样式。以下例子分别给HTML主体中的body元素和p元素指定了样式。

<head>
	<style type="text/css">
		body {background-color: red}
		p {margin-left: 20px}
	</style>
</head>

4.2 外部样式表

当同一个样式需要被应用到很多页面的时候,可以选择外部样式表,定义一个公共的css文件来杯多个HTML文件引用,在每个HTML文件首部引用该css文件。

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

4.3 内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式,为对应的元素添加style属性,只应用于该元素。

<p style="background-color: green;">This is a paragraph.</p>

4.4 指定元素使用样式

style标签指定对特定类型标签应用样式:

<head>
	<style type="text/css">
		p {
			background-color: #a0a0a0;
		}
	</style>
</head>
<body>
	<h1>title</h1>
	<p class="text" id="t1">paragraph text</p>
	<p class="text" id="t2">paragraph text</p>
	<p class="message" id="t3">paragraph text</p>
</body>

style元素内的css分为选择器和声明块两部分,如p {background-color: #a0a0a0;}中p为选择器,指定HTML文档主体中特定的元素,{}中的部分为声明块,为若干个设置。

css写成p {}表示对所有p元素设置样式。css还可以写成.text {}指定对所有类text设置样式,或者用p.text {}对p元素的类text设置样式。写成#t1 {}指定对特定id t1设置样式。

参考

Last updated 10 Oct 2024, 00:11 +0800 . history