HTML5-02 元素 - 世俗孤岛_H5之家 - 中国HTML5教程资源分享第一站

概述 HTML 文档主要由元素组成，且主要分为两大部分：头部和主体。如图：

头部

概述

<head> 元素包含了所有的头部标签。<head> 元素中通常包含脚本（scripts），样式文件（CSS），及各种 meta 信息。

头部可包含的元素标签

<style> body

<base>，定义了该 HTML 文档中，所有链接的默认链接（基本的链接地址/链接目标，基地址）

<title>，定义文档标题。该标题作用于显示在浏览器工具栏的标题，显示在收藏夹的标题，显示在搜索引擎结果页面的标题

<title>HTML Document</title>

主体

标题（ <h1> ~ <h6> ）

作用

搜索引擎使用标题来为网页的结构和内容编制索引

使用标题来呈现文档结构，可以使用户通过标题来快速地浏览网页

注意

示例

<h1>这是一个主标题</h1> <h2>这是一个次标题</h2>

段落（ <p> ）

作用

将 HTML 文档分割成一个一个段落

注意

块级元素，浏览器会自动地在段落的前后添加空行

嵌套使用 <p> 不会有期望的缩进效果

示例

<p>这是一个段落</p>

链接（ <a> ）

作用

与网络上的另一个链接建立联系

类型

内部链接

链接到新的文档

外部链接

链接到当前文档的某个部分

链接的显示样式

target 属性的属性值（你可以暂时跳过该部分内容）

_blank

浏览器总在一个新打开、未命名的窗口中载入文档

_self

默认目标值，将目标文档载入并显示到相同的框架或者窗口中。需要和文档标题标签中的 target 属性一起使用

_parent

将文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者顶级框架中，那么它与 _self 等效

_top

将文档载入到包含这个超链接的窗口。会清楚所有被包含的框架并将文档载入整个浏览器窗口

常用的链接（内部链接和外部链接）

普通链接

世俗孤岛</a></p>

图片链接（即元素内容是一张图片）

电子邮件链接

世俗孤岛</a></p>

注意

href 属性的属性值（即链接地址），应当始终将正斜杠添加到子文件夹。如下：

href=""  href=""

图像（ <img> ）

作用

在 HTML 文档中显示一个图像

src 与 alt 属性

src 属性

指定图像的 url 地址

alt 属性

定义一串预备的可替换文本，当无法加载图像时，提示用户图片的信息。通常推荐使用该属性。

示例

其他

关于如何设置图片的其他属性，如何创建图片映射等，在此不做阐述，后续时间会补充该部分内容

列表（ <ol> <ul> <dl>）

作用
定义一个项目列表，每个项目可以使用不同的标示（例如：粗体圆点）进行标记

类型

有序列表

项目是有序的

项目标示类型

示例

item 0item 2

效果图

无序列表

项目是无序的

项目标示类型

示例

item 0item 2

效果图

定义列表

定义列表包含项目，及项目的注释

示例

苹果香蕉

效果图

表格（ <table> ）

作用

定义一个表格，使用 <tr> 定义表格中的行，使用 <td> 定义表格中的单元格，使用 <th> 定义表格的表头

与表格相关的标签和属性，请查阅一下内容

HTML5-01 简介

示例

ContactNameE-mail1829871867@qq.com

效果图

表单（ <form> ）

作用

用于搜集不同类型的用户输入。表单使用表单标签 <form> 来设置，通常包含输入标签 <input>，<form> 标签的 type 属性指定输入类型

表单的类型

示例

AppleBananaOrangeLemon

效果图

其他

拆行（ <br> ）

示例

<br>

水平线（ <hr> ）

示例

<hr>

注释（  ）

示例