您的位置：首页 > Web前端 > HTML

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

2016-08-17 00:12 337 查看
HTML版本

HTML标签

HTML元素

HTML属性

HTML文档头
标题

水平线

注释

段落

换行

超链接

图片
map标签

area标签

格式化文本

地址

缩写

改变文字方向

引用文字

定义项目

著作标题

计算机输出

代码

预格式文本

变量

打字机输出

表格

列表

定义列表

块级元素与内联元素

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

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

HTML版本

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013
文档类型声明：声明采用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, radiuscircle
x1, y1, x2, y2rect
x1, y1, x2, y2, …, xn, ynpoly
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的博客)或者为这篇文章点赞，谢谢！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html
相关文章推荐
新的分享
章节导航