HTML教程 - 基本元素/标签及属性

http://blog.csdn.net/pipisorry/article/details/37764877

HTML元素介绍

HTML 文档由 HTML 元素定义。HTML 文档由嵌套的 HTML 元素构成

"HTML 标签" and "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素:<p>This is a paragraph.</p>

开始标签常被称为 起始标签(opening tag),结束标签常称为 闭合标签(closing tag)元素的内容是开始标签与结束标签之间的内容。

Note:即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>This is a paragraph

以上实例在浏览器中也能正常显示,因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。在未来的 HTML 版本中,不允许省略结束标签。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3CSchool 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

其他标签

<hr> 标签在 HTML 页面中创建水平线。可用于分隔内容。

<br> 标签定义换行。<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

HTML 注释:<!-- 这是一个注释 -->

[HTML 标签列表(字母排序)]

[HTML 标签列表(功能排序)]



HTML 属性
属性是 HTML 元素提供的附加信息。
HTML 元素可以设置属性;属性一般描述于开始标签;属性总是以名称/值对的形式出现,比如:name="value"。

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

Note: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

HTML属性列表

New : HTML5 新属性。
属性描述
accesskey设置访问元素的键盘快捷键。
class规定元素的类名(classname)。为html元素定义一个或多个类名(classname)(类名从样式文件引入)
contenteditableNew规定是否可编辑元素的内容。
contextmenuNew指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*New用于存储页面的自定义数据
dir设置元素中内容的文本方向。
draggableNew指定某个元素是否可以拖动
dropzoneNew指定是否将数据复制,移动,或链接,或删除
hiddenNewhidden 属性规定对元素进行隐藏。
id规定元素的唯一 id
lang设置元素中内容的语言代码。
spellcheckNew检测元素是否拼写错误
style规定元素的行内样式(inline style)
tabindex设置元素的 Tab 键控制次序。
title规定元素的额外信息(可在工具提示中显示, 作为工具条使用)
translateNew指定是否一个元素的值在页面载入时是否需要翻译



HTML 标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的.<h1> 定义最大的标题。 <h6> 定义最小的标题。

Note:

1. 浏览器会自动地在标题的前后添加空行。

2.请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。



HTML 段落
可以将文档分割为若干段落。段落是通过 <p> 标签定义的。

Note:浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)



HTML 文本格式化

HTML 文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

Note:

1. 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而,这些标签的含义是不同的:<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。

2. ins/del 标记删除文本和插入文本

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

My favorite color is blue red!

HTML "计算机输出" 标签

{不同的"计算机输出"标签的显示效果,这些标签常用于显示计算机/编程代码}

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

{}

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。
Note:

1. abbr:在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。pop-up显示。

2. address:在 HTML 文件中写地址。应该相当于将文本格式化成英文地址的格式化写法。

3. bd0:改变文字的方向:<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p> 

     This paragraph will go right-to-left.
4. blockquote/q 实现长短不一的引用语:

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

WWF's goal is to:Build a future where people live in harmony with nature.We hope they succeed.


Examples:

文本格式化b/i/code/br/sub/sup

<html>
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>
输出: 加粗文本

斜体文本

电脑自动输出

这是 下标上标

预格式文本Pre标签

<!DOCTYPE html>
<html>
<body>

<pre>
    春眠不觉晓,
      处处闻啼鸟。
        夜来风雨声,
          花落知多少。
</pre>

</body>
</html>

输出:
    春眠不觉晓,
      处处闻啼鸟。
        夜来风雨声,
          花落知多少。

实现缩写或首字母缩写

<html>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
</body>
</html>



HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,或其他 HTML 元素。您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

href 属性描述了链接的目标。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带上下划线
  • 点击链接时,链接显示为红色并带上下划线

Target 属性

你可以定义被链接的文档在何处显示。

target="_blank", 链接将在新窗口打开。

target="_top",跳出框架,假如你的页面被固定在框架之内。

id属性

可用于创建在一个HTML文档书签标记。书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

在HTML文档中插入ID:
<a id="tips">Useful Tips Section</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">Visit the Useful Tips Section</a>

从另一个页面创建一个链接到"有用的提示(id="tips")部分":

<a href="http://www.w3cschool.cc/html_links.htm#tips">Visit the Useful Tips Section</a>
example:
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
...
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
Note:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3cschool.cc/html/"。
style属性
没有下划线的链接。style="text-decoration:none;"
example:如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>
Note:

1. Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

2. 更加复杂的邮件链接
<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
</p>



HTML头部<head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>.

<title> 标签

定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必须的。

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时,显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

<base> 标签

描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.w3cschool.cc/images/" target="_blank">
</head>

<link> 标签

定义了文档与外部资源之间的关系。常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> 标签

定义了HTML文档的样式文件引用地址.在<style> 元素中你需要指定样式文件来渲染HTML文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<meta> 标签

描述了一些基本的元数据。提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta>一般放置于 <head>区域

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:

<meta name="author" content="Hege Refsnes">

每30秒中刷新当前页面:

<meta http-equiv="refresh" content="30">
<script>标签

用于加载脚本文件,如: JavaScript。

from:http://blog.csdn.net/pipisorry/article/details/37764877

ref:http://www.w3cschool.cc/html/html-elements.html


转载于:https://my.oschina.net/u/3579120/blog/1507957

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值