HTML5-02 元素

最新推荐文章于 2021-02-23 20:43:47 发布

agah91620

最新推荐文章于 2021-02-23 20:43:47 发布

阅读量107

点赞数

文章标签：人工智能 xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/5442906.html

版权

概述

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">

<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="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> 定义表格的表头
与表格相关的标签和属性，请查阅一下内容
- HTML5-01 简介

示例

<!-- 表格 -->
<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 等，来作为专题介绍。

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

转载于:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/5442906.html