HTML常用标签

最新推荐文章于 2023-10-17 20:18:53 发布

小白迷上java

最新推荐文章于 2023-10-17 20:18:53 发布

阅读量1k

点赞数

分类专栏： java前端技术文章标签： html 前端

本文链接：https://blog.csdn.net/Junsunnyl/article/details/122381581

版权

java前端技术专栏收录该内容

7 篇文章 8 订阅

订阅专栏

夯实HTML

HTTP和WEB工作原理

超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。

WEB 本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。

当你想进入一个网页，或者其他网络资源的时候，通常你要首先在你的浏览器上键入你想访问网页的统一资源定位符（Uniform Resource Locator)，或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是 URL 的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个 IP 地址。

接下来的步骤是给所要访问的网页，向在那个IP地址工作的服务器发送一个 HTTP 请求。在通常情况下，HTML 文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。

网络浏览器接下来的工作是把 HTML、CSS 和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了你所看到的“网页”。

大多数的网页自身包含有超链接指向其他相关网页，可能还有下载、源文献、定义和其他网络资源。像这样通过超链接，把有用的相关资源组织在一起的集合，就形成了一个所谓的信息的“网”。这个网在因特网上被方便使用，就构成了最早在 1990 年代初蒂姆·伯纳斯-李所说的万维网。

什么是HTML

HTML 就是万维网中的超文本，HTML 也叫做超文本标记语言。“超文本”就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。在Web服务中，信息一般是使用 HTML 格式以超文本和超媒体方式传送的，所使用的 Internet 协议是 HTTP 协议。

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。

HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
	</body>

</html>

HTML基础语法

`<!DOCTYPE html>`

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

格式二：<!DOCTYPE html> 推荐的方式 Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。

由于使用的场景或者版本的更替间，HTML 使用的标准不同，所以需要浏览器按照不同的标准来解析 HTML 文本内容，这就需要告知浏览器我当前的 HTML 页面是按照那种方式进行编写的。没有该声明，将是你 HTML 噩梦的开始。这行代码必须写且务必在文档首行。

<!DOCTYPE html><!-- 必须写在HTML文件首行 -->

`<html></html>`

<html> 标签用于 HTML 文档的最开始，用来标识 HTML 文档的开始。而 </html> 标志放在 HTML 文档的结束，用来标识 HTML 文档的结束，两个标志必须一块使用。

<!DOCTYPE html><!-- 必须写在HTML文件首行 -->

<html><!-- HTML文档的开始 -->
    
</html><!-- HTML文档的结束 -->

`<head></head>`

<head> 和 </head> 构成 HTML 文档的开头部分。<head> 和 </head> 标签之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。

在此标志对之间可以使用 <title></title>、<meta>、<link>、<script></script> 等标签。

<meta>：用来提供关于文档的信息，起始属性为：charset="utf8"。表示告诉浏览器页面采用什么编码解析文档，一般来说我们就用 utf8。当然，文件保存的时候也是 utf8，而浏览器也设置 utf8 即可正确显示。

<link>：用来引入 CSS 文件。

<style></style>：编写 CSS 代码。

<script></script>：用来引入 JS 文件或编写 JS 代码。

<!DOCTYPE html><!-- 必须写在HTML文件首行 -->

<html><!-- HTML文档的开始 -->
    
    <head><!-- HTML文档的开头部分 -->
        
        <meta charset="UTF-8"><!-- 文档属性 -->
        
		<title></title><!-- 文档标题 -->
        
        <link href="css文件的路径" /><!-- 引入css文件 -->
        
        <style></style><!-- 编写css代码 -->
        
        <script src="js文件的路径"></script><!-- 引入js文件或者编写js代码 -->
        
    </head><!-- HTML文档的开头结束 -->
    
</html><!-- HTML文档的结束 -->

`<title></title>`

<title> 定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

注意：<title> 标签位于 <head> 标签内，是 <head> 标签中唯一要求包含的东西。

`<meta></meta>`

<meta/> 用来提供关于文档的信息。

<!DOCTYPE html><!-- 必须写在HTML文件首行 -->

<html><!-- HTML文档的开始 -->
        
    <head><!-- HTML文档的开头部分 -->
        
        <!-- SEO搜索引擎优化策略 -->
        <!-- 网站标题 -->
        <title></title>
        <!-- 详细描述 -->
        <meta name="description" content="这里写网站内容描述" />
        <!-- 关键词 -->
        <meta name="keywords" content="这里写关键词" />
        
    </head><!-- HTML文档的开头结束 -->
    
</html><!-- HTML文档的结束 -->

以上三部分是SEO搜索引擎优化的主要部分。

`<body></body>`

一般情况下浏览器上显示的内容的都放在body中，不排除其他标签可以不用body，比如frameset框架集标签。

<body>和</body>是HTML文档的主体部分，在此标志对之间可包含 <p></p>、<h1></h1>、<br>、<hr> 等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。

<!DOCTYPE html><!-- 必须写在HTML文件首行 -->

<html><!-- HTML文档的开始 -->
        
    <head><!-- HTML文档的开头部分 -->
        
        <!-- SEO搜索引擎优化策略 -->
        <!-- 网站标题 -->
        <title></title>
        <!-- 详细描述 -->
        <meta name="description" content="这里写网站内容描述" />
        <!-- 关键词 -->
        <meta name="keywords" content="这里写关键词" />
        
    </head><!-- HTML文档的开头结束 -->
    
    <body><!-- HTML文档的主体部分开始 -->
        
    </body><!-- HTML文档的主体部分结束 -->
    
</html><!-- HTML文档的结束 -->

HTML常用标签和属性

HTML 页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即可。大致可分为如下几类：头标签、标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span、格式化文字的。

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定。

HTML标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<body>
    <!-- HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的 -->
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <h4>This is a heading</h4>
    <h5>This is a heading</h5>
    <h6>This is a heading</h6>
</body>

HTML段落

HTML 段落是通过 <p> 标签进行定义的。

<body>
    <!-- HTML 段落是通过 <p> 标签进行定义的 -->
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>

注意：浏览器会自动地在标题和段落的前后添加空行。

HTML水平线

<hr /> 标签在 HTML 页面中创建水平线。<hr /> 元素可用于分隔内容。

HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

HTML换行

<br />元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

<br> 还是 <br />您也许发现 <br> 与 <br /> 很相似。在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使 <br /> 在所有浏览器中的显示都没有问题，使用<br /> 也是更长远的保障。

HTML链接

HTML 链接是通过 <a> 标签进行定义的。

<body>
    <!-- HTML 链接是通过 <a> 标签进行定义的 -->
    <a href="http://www.shsxt.com">This is a link</a>
</body>

HTML图像

HTML 图像是通过 <img />标签进行定义的。

图像的名称和尺寸是以属性的形式提供的。

<body>
    <!-- HTML 图像是通过 <img /> 标签进行定义的 -->
    <img src="img/1.jpg" title="这是一个图片" />
</body>

HTML格式化(了解)

文本格式化标签。

标签	描述
`<b>`	定义粗体文本
`<big>`	定义大号字
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

HTML元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
`<p>`	This is a paragraph	`</p>`
`<a href="default.htm" >`	This is a link	`</a>`
`<br />`

注意：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<html>

	<body>
		<p>This is my first paragraph.</p>
	</body>

</html>

上面的例子包含三个 HTML 元素。

HTML 实例解释

`<p>` 元素

	<p>This is my first paragraph.</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：This is my first paragraph.

`<body>`元素

	<body>
		<p>This is my first paragraph.</p>
	</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

`<html>`元素

<html>

	<body>
		<p>This is my first paragraph.</p>
	</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签</html>。

元素内容是另一个 HTML 元素（body 元素）。不要忘记结束标签。

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。

<!-- 下面的写法不推荐 -->
<p>This is my first paragraph.
<p>This is my first paragraph.

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注意：未来的 HTML 版本不允许省略结束标签。

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br>标签定义换行）。

在未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML提示：使用小写标签

HTML 标签对大小写不敏感：<P>等同于<p>。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，在未来 HTML 版本中强制使用小写。

div和span

<div>是一个块级元素，通常与css配合使用，用于布局。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的class 或 id 应用额外的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML_div_span</title>
	</head>
	<body>
		<!-- 构建一个div 设置边框黑色1px 宽度200px高度200px 字体居中 -->
		<div style="border: 1px solid black;width: 200px;height: 200px;text-align: center;">这是一个div</div>
		
		<!-- 构建一个span 字体为红色 -->
		<span style="color: red;">这是一个span</span>
	</body>
</html>

标签的分类：HTML 中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素特点：元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
可通过浏览器查看是何种元素，后期也可以通过 CSS 进行修改。

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符  ，就可以将边框显示出来。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML表格</title>
	</head>

	<body>
		<!-- 表格标签 属性border="1" 添加表格边框粗细为1 -->
		<table border="1">
			<!-- 设置表格标题 -->
		    <caption><h3>这是一个表格</h3></caption>
			<!-- 定义行 -->
			<tr>
				<!-- th定义列 一般写在表格首行 内容会被加粗居中 -->
				<th>Heading</th>
				<th>Another Heading</th>
			</tr>
			<tr>
				<!-- td定义列 -->
				<td>row 1, cell 1</td>
				<td>row 1, cell 2</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>row 2, cell 2</td>
			</tr>
		</table>
	</body>

</html>

HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于<li>。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML列表</title>
	</head>

	<body>

		<h4>一个无序列表：</h4>
		<ul>
			<li>咖啡</li>
			<li>茶</li>
			<li>牛奶</li>
		</ul>

	</body>

</html>

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML列表</title>
	</head>

	<body>

		<h4>一个有序列表：</h4>
		<ol>
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>

		<ol start="50">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>

	</body>

</html>

HTML表单

`<form>` 元素

HTML 表单用于收集用户输入。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

表单用于向服务器传输数据。form 元素是块级元素。

常用属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送 form-data 的 HTTP 方法
name	Form_name	规定表单的名称

`<input>` 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

常用属性

属性	值	描述
alt	text	定义图像输入的替代文本
checked	checked	规定此 input 元素首次加载时应当被选中
disabled	disabled	当 input 元素加载时禁用此元素
readonly	readonly	规定输入字段为只读
maxlength	number	规定输入字段中的字符的最大长度
value	value	规定 input 元素的值
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

text 文本输入

<input type="text"> 定义用于文本输入的单行输入字段。

<form>
    First name:<br>
    <input type="text" name="firstname" />
    <br> Last name:<br>
    <input type="text" name="lastname" />
</form>

password 密码输入

<input type="password"> 定义密码字段。

<form>
    用户名：<input type="text" name="username" />
    <br />
    密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" />
</form>

radio 单选按钮输入

<input type="radio"> 定义单选按钮。

<form>
    <input type="radio" name="sex" value="male" checked />Male
    <br>
    <input type="radio" name="sex" value="female" />Female
</form>

checkbox 复选框

<input type="checkbox">定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

<form>
    <input type="checkbox" name="vehicle" value="Bike" />I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car" />I have a car
</form>

submit 提交按钮

<input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指

定。

action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

如果省略 action 属性，则 action 会被设置为访问当前页面。

<form action="http://www.shsxt.com">
    First name:
    <input type="text" name="firstname" value="Mickey" />
    <br/>
    Last name:
    <input type="text" name="lastname" value="Mouse" />
    <br/><br/>
    <input type="submit" value="Submit" />
</form>

select 下拉列表

定义一个下拉列表。

<select name="city">
    <option value="sh">上海</option>
    <option value="bj">北京</option>
    <option value="ah">安徽</option>
    <option value="zz">郑州</option>
</select>

textarea 文本域

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols 规定文本区内的可见宽度。rows 规定文本区内的可见行数。

<textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
</textarea>

button 按钮

<button>元素定义可点击的按钮。

常用属性

属性	值	描述
disabled	disabled	禁用该按钮
type	button、submit、reset	规定按钮的类型
value	text	规定按钮的初始值
name	button_name	规定按钮的名称

<button type="button">Click Me!</button>

label 标注标签

<label> 标签为input 元素定义标注（标记）。

label元素不会呈现任何的特殊效果。label 标签的 for 属性应当与相关元素的 id 属性相同。

<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>

HTML属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定。

HTML提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

<input name='Bill "HelloWorld" Gates' />

案例练习：人物简历

根据百度百科查询自己喜欢的人物，制作其人物简历。（css文件直接导入，按照文档样式说明使用）

<!--
	文档样式使用说明：
		id="body"给整个页面的盒子添加样式
		id="navigation"给导航的盒子添加样式
		class="word"给p标签内的文本添加缩进样式
		class="center"给标签添加居中样式
		class="margin"给标签添加间距样式
		id="copyright"给版权的盒子添加样式
-->

<!-- 必须写在HTML文件首行 -->
<!DOCTYPE html>
<!-- HTML文档的开始 -->
<html>

<!-- HTML文档的开头部分 -->
<head>
	<!-- 文档属性 告诉浏览器页面采用什么编码解析文档 -->
	<meta charset="UTF-8">
	<!-- 文档标题 -->
	<title>吴彦祖</title>
	<!-- 引入css文件 -->
	<link rel="stylesheet" type="text/css" href="css/resume.css">
<!-- HTML文档的开头结束 -->
</head>

<!-- HTML文档的主体部分开始 -->
<body>
	<!-- div盒子包含整个页面信息 -->
	<div id="body">
		<!-- h1标题标签 -->
		<h1>人物简历——吴彦祖</h1>
		<!-- div盒子包含导航信息 -->
		<div id="navigation">
			<!-- ul标签无序列表 -->
			<ul>
				<!-- li标签列表中的每一项 -->
				<li>
					<!-- a标签超链接 href="#info"表示使用锚点 -->
					<a href="#info">基本信息</a>
				</li>
				<li>
					<a href="#early">早年经历</a>
				</li>
				<li>
					<a href="#career">演艺经历</a>
				</li>
				<li>
					<a href="#prize">获奖记录</a>
				</li>
				<li>
					<a href="#contribution">社会活动</a>
				</li>
				<li>
					<a href="#contact">联系方式</a>
				</li>
			</ul>
		</div>
		<br />

		<!-- div盒子包含图片和视频 -->
		<div class="center">
			<img class="margin" src="img/Daniel_Wu.jpg" title="吴彦祖" width="200px" height="277px">
			<video class="margin" src="video/Daniel_Wu.mp4" controls height="277px" title="吴彦祖晒偶像照为其庆生"></video>
		</div>

		<!-- div盒子包含所有人物信息 -->
		<div class="margin">
			<!-- div盒子包含基本信息 -->
			<div id="info" class="word">
				<!-- h2标题标签 -->
				<h2>基本信息</h2>
				<!-- p文本标签 -->
				<p>
					吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。1998年出演了个人首部电影作品《美少年之恋》，从而踏入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员。2001年，主演文艺片《游园惊梦》。2003年，凭借动作片《旺角黑夜》提名第24届香港电影金像奖最佳男主角；同年，首次担任电影监制并主演了惊悚片《妖夜回廊》。
				</p>
			</div>

			<!-- div盒子包含早年经历信息 -->
			<div id="early" class="word">
				<h2>早年经历</h2>
				<p>
					吴彦祖出生于加利福尼亚州伯克利，并在奥林达长大 。6岁时，吴彦祖在看完功夫电影《少林寺》后，对武术产生了兴趣。11岁时，吴彦祖便拜一名北京艺人为师开始习武，教他的师父是吴彦祖的母亲找的，而此前，他的母亲还担心他学会了功夫跟人打架，但最后还是拗不过他对习武的热情。高中时，吴彦祖也曾叛逆过，经常在街上玩滑板，听的是朋克、重金属、饶舌等地下音乐，喜欢打架更甚于学习。这一切直至他的母亲因心脏病住院才有了彻底的改变。在母亲生病期间，吴彦祖白天在学校认真读书，下课后就到医院陪母亲。为此他甚至去学习了简单的气功疗法，用来辅助母亲的治疗。
				</p>
				<p>
					1993年，吴彦祖在美国俄勒冈大学攻读建筑系，并获得建筑副修奖学金。1994年，吴彦祖赢得California Martial Art Competitions的亚军，并在美国西岸排名第二位。同时，吴彦祖还成立了俄勒冈大学中国武术学会，并成为第一任教练，收了二十几个徒弟，一共教了五年。1995年，吴彦祖随师父到北京什刹海武校参加集训，并获得了北京国际武术比赛长拳组第五名，太极拳组第六名。
				</p>
				<p>
					1997年，毕业后的吴彦祖前往香港旅行，后在姐姐的建议下开始当模特。四个月后，导演杨凡在看到吴彦祖拍摄的服装广告后，与他接洽成为他下一部电影的演员，而吴彦祖表示自己没有表演经验而拒绝了。后来杨凡天天给吴彦祖打电话并说服了他。
				</p>
			</div>

			<!-- div盒子包含演艺经历信息 -->
			<div id="career">
				<h2>演艺经历</h2>
				<!-- table表格标签 align="center"表格居中 cellspacing="0"双线合并变单线 -->
				<table border="1" align="center" cellspacing="0">
					<!-- tr行标签 -->
					<tr>
						<!-- th列标签 具有加粗居中效果 -->
						<th width="100px">时期</th>
						<th>经历</th>
					</tr>
					<tr>
						<!-- td列标签 无任何效果 -->
						<td class="center">1998年</td>
						<td>《美少年之恋》，他在片中饰演帅气十足的警察Sam</td>
					</tr>
					<tr>
						<td class="center">1999年</td>
						<td>吴彦祖与成龙、舒淇合作主演的爱情喜剧片《玻璃樽》上映</td>
					</tr>
					<tr>
						<td class="center">2000年</td>
						<td>首次与林超贤导演合作，并出演了警匪动作片《重装警察》</td>
					</tr>
					<tr>
						<td class="center">2001年</td>
						<td>与古天乐合作出演了动作片《野兽之瞳》，在片中饰演一对拳击兄弟</td>
					</tr>
					<tr>
						<td class="center">2002年</td>
						<td>吴彦祖与杨千嬅首次合作，并出演了爱情喜剧片《新扎师妹》</td>
					</tr>
					<tr>
						<td class="center">2004年</td>
						<td>与张柏芝合作，出演由尔冬升执导的动作剧情片《旺角黑夜》 </td>
					</tr>
					<tr>
						<td class="center">2005年</td>
						<td>吴彦祖与梁家辉、郑秀文合作，主演了根据同名小说改编的爱情片《长恨歌》 </td>
					</tr>
					<tr>
						<td class="center">2006年</td>
						<td>吴彦祖执导并担任编剧的个人电影处女作《四大天王》上映</td>
					</tr>
					<tr>
						<td class="center">2016年</td>
						<td>由邓肯·琼斯执导的奇幻动作片《魔兽》在中国内地上映，吴彦祖在片中饰演了狡猾又残忍的古尔丹</td>
					</tr>
					<tr>
						<td class="center">2017年</td>
						<td>吴彦祖主演的功夫美剧《荒原第二季》在美国AMC电视台首播</td>
					</tr>
					<tr>
						<td class="center">2018年</td>
						<td>与艾丽西亚·维坎德主演的动作奇幻片《古墓丽影：源起之战》在美国和中国内地同步上映</td>
					</tr>
				</table>
			</div>

			<!-- div盒子包含获奖记录信息 -->
			<div id="prize" class="word">
				<h2>获奖记录</h2>
				<p>作业：请参照<a href="https://baike.baidu.com/item/%E5%90%B4%E5%BD%A6%E7%A5%96/182990?fr=aladdin#1" target="_blank">吴彦祖百度百科</a>完成获奖记录的表格</p>
			</div>

			<!-- div盒子包含社会活动信息 -->
			<div id="contribution" class="word">
				<h2>社会活动</h2>
				<p>2006年底，在香港“SuperStars”影展及摄影集慈善义卖活动上，余文乐、吴彦祖、郭富城等300多位明星为慈善活动所拍摄的裸照曝光。</p>
				<p>2008年6月4日，吴彦祖录制爱心视频并参与了周迅发起的“星星之火，传爱四川”行动 。</p>
				<p>2009年2月，吴彦祖为四川地震灾区彭州小鱼洞的群众修建永久性房屋；5月10日，吴彦祖参加了“壹家人壹起走——纪念5.12汶川行”活动 ；7月6日，吴彦祖向四川地震灾区出资捐建5间房屋，并且表示每年都会抽出几次时间去四川探访 ；9月20日，吴彦祖携手吴君如在香港出席了“仁人家园义工周”的公益活动 。</p>
				<p>2013年11月1日，“2014爱·家庭慈善月历”在香港推出，包括吴彦祖等在内的12个明星家庭齐心推动此公益活动。</p>
			</div>

			<!-- div盒子包含联系方式信息 -->
			<div id="contact" class="word">
				<h2>联系方式</h2>
				<form action="mailto://124059770@qq.com">
					<p>请将你想告诉我的话发送至我的邮箱：</p>
					<textarea></textarea><br />
					<input type="submit" value="提交">
				</form>
			</div>

			<!-- div盒子包含返回顶部超链接 -->
			<div class="center">
				<a href="#">返回顶部</a>
			</div>
		</div>

		<!-- div盒子包含版权信息 -->
		<div id="copyright">
			<!-- p标签文本标签 -->
			<p>©2018 Baidu 使用百度前必读 | 百科协议 | 隐私政策 | 百度百科合作平台 | 京ICP证030173号</p>
		</div>
	</div>

<!-- HTML文档的主体部分结束 -->
</body>
	
<!-- HTML文档的结束 -->
</html>

resume.css

/* 采用什么编码解析文件 */
@charset "utf-8";

/*
 * 使用id选择器渲染id="body"标签的样式
 */
#body {
	/* 
	 * 上外边距是 0px
	 * 右外边距是缩进15%
	 * 下外边距是 0px
	 * 左外边距是 0px
	 */
	margin: 0 15%;
	background: #F0F0F0;/* 背景色#F0F0F0 */
}

/*
 * 使用元素选择器渲染所有h1标签的样式
 */
h1 {
	height: 70px;/* 高度70px */
	background: cornflowerblue;/* 背景色矢车菊蓝德国国花 */
	line-height: 70px;/* 行间距70px */
	color: white;/* 字体白色 */
	text-indent: 70px;/* 段落缩进70px */
}

/*
 * 使用id选择器渲染id="navigation"标签的样式
 */
#navigation {
	text-align: center;/* 居中 */
}

/*
 * 使用id选择器定位到id="navigation"标签
 * 然后渲染其子标签li的样式
 */
#navigation li {
	/* inline-block将li元素变为行内块元素 */
	display: inline-block;
	width: 100px;/* 宽100px */
	height: 30px;/* 高30px */
	line-height: 30px;/* 行间距30px */
	background-color: cornflowerblue;/* 背景色矢车菊蓝 */
	border: cornflowerblue 1px solid;/* 边框1px 颜色为矢车菊蓝 */
	border-radius: 0 10px;/* 边框左下角和右上角变圆10px */
}

/*
 * 使用id选择器定位到id="navigation"标签
 * 然后渲染其子标签li的子标签a的样式
 */
#navigation li a{
	color: white;/* 字体白色 */
	text-decoration: none;/* 移除超链接下划线样式*/
}

/*
 * 使用id选择器定位到id="navigation"标签
 * 然后渲染其子标签li的子标签a的样式(渲染方式鼠标移动至标签后)
 */
#navigation li a:hover {
	font-weight: bold;/* 字体加粗 */
}

/*
 * 使用类选择器渲染所有class="center"标签的样式
 */
.center {
	text-align: center;/* 居中 */
}

/*
 * 使用类选择器渲染所有class="margin"标签的样式
 */
.margin {
	margin: 0 30px;
}

/*
 * 使用类选择器渲染所有class="word"标签的样式
 * 然后渲染其子标签p的样式
 */
.word p {
	text-indent: 32px;/* 段落缩进32px */
}

/*
 * 使用元素选择器渲染所有textarea标签的样式
 */
textarea {
	width: 100%;/* 宽100%于父标签 */
	height: 100px;/* 高100px */
}

/*
 * 使用id选择器渲染id="copyright"标签的样式
 */
#copyright {
	height: 70px;/* 高70px */
	background: cornflowerblue;/* 背景色矢车菊蓝 */
	text-align: center;/* 居中 */
	color: white;/* 字体白色 */
	line-height: 70px;/* 行间距70px */
	font-size: 12px;/* 字体大小12px */
}