HTML5-02 元素 - 世俗孤岛

      2020-06-30 05:40      HTML5

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

头部

概述

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

<link>,描述 HTML 文档链接的外部资源的地址。通常用于链接到样式表。如下:

<style>,指定了 HTML 文档样式文件的引用地址。该元素的内容用来渲染 HTML 文档(通常情况下,我们会使用单独的 CSS 文件来渲染 HTML 文档)。如下:

<!-- 内联样式表 --><style>body

<script>,标示所要加载的脚本文件。在大多数的项目中,我们会使用外部脚本

.

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

<meta>,定义了只被浏览器解析,而不显示在界面上的元数据。通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。重要作用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务

<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 属性值再次请求。 -->href=""

图像( <img> )作用在 HTML 文档中显示一个图像src 与 alt 属性src 属性指定图像的 url 地址alt 属性定义一串预备的可替换文本,当无法加载图像时,提示用户图片的信息。通常推荐使用该属性。

示例

其他关于如何设置图片的其他属性,如何创建图片映射等,在此不做阐述,后续时间会补充该部分内容列表( <ol> <ul> <dl>)作用
定义一个项目列表,每个项目可以使用不同的标示(例如:粗体圆点)进行标记类型有序列表项目是有序的项目标示类型

示例

item 0item 2

效果图

无序列表项目是无序的项目标示类型

示例

item 0item 2

效果图

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

示例

苹果香蕉

效果图

表格( <table> )作用定义一个表格,使用 <tr> 定义表格中的行,使用 <td> 定义表格中的单元格,使用 <th> 定义表格的表头与表格相关的标签和属性,请查阅一下内容HTML5-01 简介

示例

[email protected]

效果图

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

示例

AppleBananaOrangeLemon

效果图

其他拆行( <br> )

示例

<br>

水平线( <hr> )

示例

<hr>

注释( <!-- --> )

示例