HTML5-02 元素

概述

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

头部

  • 概述

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

  • 头部可包含的元素标签

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

      <link rel="stylesheet" href="mystyle.css">

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

      <!-- 内联样式表 -->
<style>
	body {background-color: yellow;}
</style>
<!-- 外部样式表 -->
<link rel="stylesheet" href="mystyle.css">

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

      <!-- 内联脚本 -->
<script>
	document.getElementById("p").innerHTML = "段落被修改";
</script>
<!-- 外部脚本 -->
<script src="my_jquery_functions.js"></script>

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

      <base href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">

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

      <!-- 网页描述内容 -->
<meta name="description" content="Free Web tutorials on HTML and CSS">
<!-- 网页作者 -->
<meta name="author" content="Hege Refsnes">
<!-- 网页刷新频率(每 30 秒刷新一次) -->
<meta http-equiv="refresh" content="30">
<!-- 搜索引擎 定义关键词 -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

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

      <title>HTML Document</title>

主体

  • 标题（ <h1> ~ <h6> ）

    • 作用

      • 搜索引擎使用标题来为网页的结构和内容编制索引
      • 使用标题来呈现文档结构，可以使用户通过标题来快速地浏览网页

    • 注意

      • HTML 标题标签，应该只作用于标题；而不是用来改变文本的样式。
      • 通常情况使用 <h1> 表示主标题，<h2> 表示次标题，依次为： <h3> …… <h6>
      • 块级元素，浏览器会自动地在段落的前后添加空行

    • 示例

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

  • 段落（ <p> ）

    • 作用

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

    • 注意

      • 块级元素，浏览器会自动地在段落的前后添加空行
      • 嵌套使用 <p> 不会有期望的缩进效果

    • 示例

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

  • 链接（ <a> ）

    • 作用
      • 与网络上的另一个链接建立联系
    • 类型
      • 内部链接
        • 链接到新的文档
      • 外部链接
        • 链接到当前文档的某个部分
    • 链接的显示样式
      • 未访问的连接，蓝色字体并带有下划线
      • 访问过的连接，紫色字体并带有下划线
      • 被点击的连接，红色字体并带有下划线
    • target 属性的属性值（你可以暂时跳过该部分内容）
      • _blank
        • 浏览器总在一个新打开、未命名的窗口中载入文档
      • _self
        • 默认目标值，将目标文档载入并显示到相同的框架或者窗口中。需要和文档标题 标签中的 target 属性一起使用
      • _parent
        • 将文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者顶级框架中，那么它与 _self 等效
      • _top
        • 将文档载入到包含这个超链接的窗口。会清楚所有被包含的框架并将文档载入整个浏览器窗口
    • 常用的链接（内部链接和外部链接）

      • 普通链接

        <!-- 普通链接 -->
<p>访问：<a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">世俗孤岛</a></p>

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

        <!-- 图片链接 -->
<p>访问：<a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/"><img src="island.png" alt="世俗孤岛"></a></p>

      • 电子邮件链接

        <!-- 电子邮件链接 -->
<p>联系：<a href="mailto:li_yun_peng_man@163.com">世俗孤岛</a></p>
    • 注意

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

        <!-- 推荐写法 -->
href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/"
<!-- 不推荐写法，原因是：这样会发生两次请求。第一次请求，服务器会将反斜杠添加到子文件夹后；第二次请求，使用添加反斜杠后的 href 属性值再次请求。 -->
href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld"

  • 图像（ <img> ）

    • 作用

      • 在 HTML 文档中显示一个图像

    • src 与 alt 属性

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

    • 示例

      <img src="island.png" alt="世俗孤岛的头像">

    • 其他

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

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

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

      • 有序列表

        • 项目是有序的

        • 项目标示类型

          • 默认：阿拉伯数字
          • "A"：大写英文字母
          • "a"：小写英文字母
          • "I"：大写罗马数字
          • "i"：小写罗马数字

        • 示例

          <!-- 使用大写罗马数字标示的有序列表 -->
<ol type="I">
	<li>item 0</li>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ol>

        • 效果图

      • 无序列表

        • 项目是无序的

        • 项目标示类型

          • "disc"：实心圆点
          • "circle"：空心圆点，默认
          • "square"：实心方框

        • 示例

          <!-- 使用实心圆点标示的无序列表 -->
<ul type="disc">
	<li>item 0</li>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>

        • 效果图

      • 定义列表

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

        • 示例

          <!-- 定义列表 -->
<dl>
	<dt>苹果</dt>
	<dd>酸酸甜甜</dd>
	<dt>香蕉</dt>
	<dd>物美价廉</dd>
</dl>

        • 效果图

  • 表格（ <table> ）

    • 作用

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

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

    • 示例

      <!-- 表格 -->
<table border="1px">
	<caption>Contact</caption>
	<tr>
		<th>Name</th>
		<td>Island</td>
	</tr>
	<tr>
		<th rowspan="2">E-mail</th>
		<td>li_yun_peng_man@163.com</td>
	</tr>
	<tr>
		<td>1829871867@qq.com</td>
	</tr>
</table>

    • 效果图

  • 表单（ <form> ）

    • 作用

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

    • 表单的类型

      • "text"，文本域
      • "password"，密码字段
      • "radio"，单选按钮
      • "checkbox"，复选框
      • "submit"，提交按钮
      • "select"，下拉菜单

    • 示例

      <form action="">
	<select name="fruit" id="">
		<option value="apple">Apple</option>
		<option value="banana">Banana</option>
		<option value="orange" selected>Orange</option>
		<option value="lemon">Lemon</option>
	</select>
</form>

    • 效果图

其他

  • 拆行（ <br> ）

    • 示例

      <br>
  • 水平线（ <hr> ）

    • 示例

      <hr>
  • 注释（ <!-- --> ）

    • 示例

      <!-- 这是注释 -->
  • 空格和换行
    • 注意
      • 当渲染 HTML 文档时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。因此，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

声明

博客中，并没有详细的介绍每一个元素，及与元素相关的标签的使用方法。该博客旨在建立 HTML5 的宏观的概念，使你快速地 HTML5 的基础，从而快速上手项目开发。在此，会以该模式介绍与 HTML5 密切相关的 CSS3 和 JavaScript 或者 JQuery 等。至于细节，会在之后的博客中结合 CSS3，JavaScript 等，来作为专题介绍。

可能有很多人都觉得，相关内容太多，没有办法或没有必要记住每一个元素，每一个标签的含义和使用细节。是的，我很多时候也是这样认为。但是，我建议大家对这个看似庞大的知识体系进行分类梳理，用自己的思维再次组织这些知识，从而在实际的开发中快速的抽取和组织相关知识来实现具体的功能。这样做吧，相信你很快就会受益匪浅，很快就会体会到一个牛人真正牛的是他的思维。博客中多有不足，请不吝赐教。
posted @ 2016-04-29 09:13  世俗孤岛  阅读(419)  评论(0)  编辑  收藏  举报