38.超文本标记语言HTML详解（上）

来源：互联网发布：无地自容知乎编辑：程序博客网时间：2024/06/08 07:41

- - HTML版本
  - HTML标签
  - HTML元素
  - HTML属性
  - HTML文档头
    - 标题
    - 水平线
    - 注释
    - 段落
    - 换行
    - 超链接
    - 图片
      - map标签
      - area标签
    - 格式化文本
    - 地址
    - 缩写
    - 改变文字方向
    - 引用文字
    - 定义项目
    - 著作标题
    - 计算机输出
    - 代码
    - 预格式文本
    - 变量
    - 打字机输出
    - 表格
    - 列表
    - 定义列表
    - 块级元素与内联元素

转载请注明原始出处：http://blog.csdn.net/a464057216/article/details/52226285

HTML(Hyper Text Markup Language)是超文本标记语言，不是编程性语言。使用标记标签标记纯文本。

HTML版本

版本发布时间 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013

文档类型声明：声明采用HTML 5的语句是<!DOCTYPE html>，这个语句不属于HTML语言，只告诉浏览器HTML文档使用的HTML版本，并且这个语句不区分大小写。

HTML标签

使用尖括号包围的关键词称为标签。标签一般成对出现，如<p>和</p>，分别称为开始标签（opening tag）和结束标签（closing tag），或者开放标签和闭合标签，不成对出现的标签如<br />。
HTML标准推荐所有标签使用小写，HTML所有标签可以参考这里。

HTML元素

HTML元素由开始标签、元素内容及结束标签组成，有的HTML元素具有空内容，称为空元素。
空元素在开始标签中进行关闭，并且加上空格和斜杠，如<br />，空元素没有结束标签。
HTML元素可以嵌套存在。

HTML属性

HTML属性为HTML元素提供更多信息，在开始标签中设置，格式为name="value"。
HTML标准推荐属性使用小写，并且始终为属性值添加引号，一般使用双引号，如果值本身含有双引号，需要使用单引号。
HTML的所有属性可以参考这里。

HTML文档头

要在网页中正常显示中文或其他UTF-8编码，可以在 <head>元素中添加：<meta charset="utf-8" />
<head>元素中必须包含<title>标签，表示文档标题，这个标题会用在搜索引擎的搜索结果展示、浏览器标签标题、收藏夹标题。
<base href="地址" target="_blank/_self/_top/_parent/iframe_name" />：为页面上的所有链接规定默认地址和默认目标，只能放在<head>元素中，并且只能有一个。如果超链接标签<a>中提供的href属性或图片标签<img>中提供的src属性是绝对路径，则base的设置无效。
<link rel="关系" type="类型" href="URL">：定义文档与外部资源的关系，只能放在<head>元素中，不过可以出现数次。比如引用CSS文件：
<link rel="stylesheet" type="text/css" href="sample.css" />
<meta>标签用于为网页提供元数据，比如网页的描述、关键词、作者等等：
<meta name="keywords" content="Love,Peace,World" />：定义网页关键词。
<meta name="description" content="This page is about love and peace." />：定义网页描述。
<meta name="author" content="mars loo" />：定义网页作者。
<meta http-equiv="refresh" content="5" />：定义页面5秒钟刷新一次。

标题

<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>：用来标记1~6级标题，块级元素。数字越小，标题级别越高（越重要）。

水平线

<hr />：水平线标记，块级元素，表示文档内容变化。

注释

：为HTML文档添加注释，可以跨越多行。

段落

<p></p>：标记段落，块级元素。

换行

<br />：用于换行，行内元素。浏览器渲染页面时，会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格显示。如果需要显示多个空格，使用多个 表示。

超链接

<a></a>：标记超链接，内联元素。

href属性指向链接地址
target属性说明在什么位置显示链接文档：
- _blank：在一个新打开、未命名的窗口中载入链接文档。
- _self：在相同的框架中打开链接文档。
- _parent：在父框架中打开链接文档。
- _top：在顶级框架中打开链接文档。
- iframe_name：在指定的iframe中打开链接文档。
download属性表示不跳转链接，而是以指定的文件名直接下载文件，浏览器会自动确认文件的后缀。
id属性（HTML5不支持使用name属性创建锚）可以创建本页面内的锚，然后使用href属性定义到转到这个锚的超链接：

<a id="anchor">这里</a><a href="#anchor">锚</a>

超链接可以用于邮件发送，比如(使用%20代替空格)：

<a href="mailto:mars@loo.com?cc=sample@example.com&bcc=xxx@qq.com&subject=Hello%20Mars&body=你好%20博越！" style="text-decoration:none">写信给mars</a>

可以把图像作为超链接元素的内容，比如：

<a href="#">    <img src="sample.gif" width="50px" height="25px" /></a>

图片

<img src="图片地址" width="宽度" height="高度" alt="图片无法加载时的显示信息" />：显示图片，内联元素。

src属性指向图片地址(本地地址或网络URL)。
width和height属性分别控制宽和高。

使用图片作为地图：

<img src="china.jpg" width="145" height="126" alt="China" usemap="#chinamap"><map name="chinamap" id="chinamap">  <area shape="rect" coords="0,0,82,126" alt="Beijing" href="Beijing.html">  <area shape="circle" coords="90,58,3" alt="Tianjin" href="Tianjin.html"></map>

map标签

<map>标签的name和id属性哪个生效取决于浏览器，所以HTML5规定必须同时提供name和id属性。

area标签

如果提供了href属性，则必须提供alt属性。
coords属性和shape属性配合使用：

coords属性 shape属性 x,y, radius circle x1, y1, x2, y2 rect x1, y1, x2, y2, …, x_n, y_n poly

target属性同样可以指定在何处打开新的链接。

格式化文本

<sub> </sub>：下标标记，下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。
<sup> </sup>：上标标记，上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。
<ins cite="url" datetime="insert_time"> </ins>：插入字标记，通常会显示下划线效果，cite属性指向一个解释为什么插入的URL，datetime属性说明插入的时间，格式为YYYY-MM-DDThh:mm:ssTZD，比如2016-08-15T22:55:03Z，其中TZD（时区指示器time zone designation)中的Z表示是格林威治时区。
<del cite="url" datetime="delete_time"> </del>：删除字标记，通常会显示为删除效果，cite属性指向一个解释为什么删除的URL，datetime属性说明删除的时间，格式如<ins>标签。
<strong> </strong>：重要文本。
<em> </em>：强调文本。

地址

<address> </address>：如果在<body>元素内定义，表示HTML文档的作者/拥有者的联系信息；如果在<article>元素内定义，表示文章的作者/拥有者的联系信息，块级元素。不要使用这个标签表示邮政编码信息，除非这些信息是联系信息的组成部分。

缩写

<abbr title="全称"> </abbr>：定义缩写，title属性定义鼠标悬浮在单词上时弹出的全称是什么，行内元素。

改变文字方向

<bdo dir="方向"> </bdo>：定义文字显示方向，dir属性取值有两个：ltr（从左到右）、rtl（从又到左），行内元素。

引用文字

<blockquote cite="引用的地址"> </blockquote>：定义长引用，块级元素。
<q cite="引用的地址"> </q>：定义短引用，行内元素。

定义项目

1.如果dfn标签自己包含title属性，则title属性定义项目。
<dfn title="定义内容">定义</dfn>：定义项目或缩写的定义
2.如果dfn标签包含abbr元素，则abbr元素中的title属性定义项目。
<dfn><abbr title="World Health Organization">WHO</abbr></dfn>
3.否则，<dfn>文本内容即是项目，并且父元素包含定义。
<p><dfn>WHO</dfn> World Health Organization </p>
<dfn>是行内标签。

著作标题

<cite>标题</cite>：表示著作标题，行内元素。

计算机输出

<samp>示例</samp>：可以把计算机的输出内容放在这两个标签之间，但是换行还是需要是用<br />元素。

代码

<code>代码</code>：显示计算机代码。
如果要保留代码中的缩进，需要使用<pre>标签。

预格式文本

<pre>格式文本</pre>：显示预格式文本，且为等宽显示。

变量

<var>变量名</var>：定义计算机变量。

打字机输出

<tt>打字机输出</tt>：表示打字机输出。

表格

<table border="1"></table>：用来创建一个表格，块级元素。border属性值只允许为1（有边框）或""（无边框）。
<tr></tr>：用来表示表格的行。
<td></td>：用来表示每个单元格，内联元素。
<th></th>：用来定义表头，语义上讲是表格某一行或某一列的标题。
<caption></caption>：定义表格标题。
表格中常用的属性如colspan可以定义表格的元素跨越几列，rowspan定义跨越几行，cellpadding定义单元格内容与边框之间的留白，cellspacing定义单元格之间的距离。
这里写图片描述
效果如下：

<colgroup span="列数"></colgroup>：用于将表格的列分组，span属性定义列的数目：

效果如下：

<col span="列数"></col>：在colgroup中实现更精细控制：

效果如下：

<thead></thead>：定义表头，<tfoot></tfoot>：定义表格的页脚，<tbody></tbody>：定义表格的主体。在使用时，这三个标签必须作为<table>的子标签，位于<caption>和<colgroup>之后，且三个标签的顺序是<thead>-><tfoot>-><tbody>：
这里写图片描述
效果如下：

列表

<ul></ul>：定义无序列表，块级元素。HTML5中ul标签的属性已经被废弃，应该用CSS控制项目符号的形状，如style="list-style-type:disc"表示使用实心圆形，circle表示使用空心圆形，square表示使用实心正方形。
<ol></ol>：定义有序列表，HTML5中已经废弃了ol标签的属性，控制列表的起始值、项目符号样式应该使用CSS控制。
<li></li>：定义每一条列表项
比如：
这里写图片描述
效果如下：

定义列表

<dl></dl>：用于定义列表，其中：
<dt></dt>：表示自定义列表项。
<dd></dd>：表示自定义列表项的定义，比如：
这里写图片描述
效果如下：

块级元素与内联元素

定义块级元素：<div></div>
定义内联元素：<span></span>
使用<div>和<span>配合CSS进行页面布局和渲染，而不是使用<table>。

如果觉得我的文章对您有帮助，欢迎关注我(CSDN:Mars Loo的博客)或者为这篇文章点赞，谢谢！

1 0