html 标签和元素

标签vs元素

html 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如和

标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签

html 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）（img标签）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
<!— xxx —> 表示文档注释

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 不用关闭标签-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>有开始和结束标签</p>

</body>
</html>

head

标签用于定义文档的头部，它是所有头部元素的容器
可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

title

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

HTML 属性概述

HTML 属性
1. HTML 元素可以设置属性
2. 属性可以在元素中添加附加信息
3. 属性一般描述于开始标签
4. 属性总是以名称/值对的形式出现，比如：name=“value”。

示例

<p id="1">有开始和结束标签</p>

<img src="images/a1.png">

<a href="http://www.baidu.com">

属性注意事项
1. HTML 属性常用引用属性值属性值应该始终被包括在引号内。
2. 双引号是最常用的，不过使用单引号也没有问题。
3. 提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotGun” Nelson’
4. HTML 提示：使用小写属性
5. 属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

h(x)

标题（Heading）是通过 h1 - h6 标签进行定义的.
h1 定义最大的标题。 h6 定义最小的标题。

实例

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

注释: 浏览器会自动地在标题的前后添加空行。

p(段落标签)

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

实例

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

注意：
1. 浏览器会自动地在段落的前后添加空行。（是块级元素）不要忘记结束标签
2. 即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

实例

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

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。注释: 在未来的 HTML 版本中，不允许省略结束标签。

span

用户自定义标签
没有样式,用于用户在css中自定义样式

块级元素和行级元素

块级元素有自己独立的块
1. h(x)
行级元素没有自己独立的块
1. p

空元素

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

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

hr 水平横线

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 br 标签：

实例:

```
	<p>这个<br>段落<br>演示了分行的效果</p>
```

br 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

pre 原样输出

按照编写内容的原本格式输出，比如我们要输出一段python代码：

```
<pre>
    def f():
        a = 1
</pre>
<hr>
def f():
a = 1
```

HTML 实体(特殊字符)

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
如需显示小于号，我们必须这样写：< >
HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。

显示结果	描述	实体名称
空格	空格	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
“	引号	&quot
‘	撇号	&apos

HTML 列表

有序列表	无序列表
1. 第一个行	· 第一行
2. 第二个行	· 第二行
3. 第三个行	· 第三行

HTML 列表标签表

元素	描述
ol	定义有序列表
ul	定义无序列表
li	礼拜内容
dl	自定义列表
dt	列表项目描述
dd	列表项目描述

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 ul 标签。每个列表项始于 li 标签。

```
<body>
	<h4>无序列表:</h4>
	<ul>
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Milk</li>
	</ul>
</body>

```

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li> 标签。列表项项使用数字来标记。

```
<body>
	<h4>无序列表:</h4>
	<ol start=’50’>
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Milk</li>
	</ol>
</body>

```

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

	<dl>
	    <dt>a</dt>
	    <dd>a1</dd>
	    <dd>a2</dd>
	    <dt>b</dt>
	    <dd>b1</dd>
	    <dd>b2</dd>
	    <dt>c</dt>
	    <dd>c1</dd>
	    <dd>c2</dd>
	</dl>

a标签超链接（链接）

HTML使用标签 a来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签a 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。
链接的 HTML 代码很简单。它类似这样：
1. 标签用于连接
  
  <a href=“url”>链接文本</a>
2. 也可以用于下载
  
  <a href=“url” download>链接文本</a>
3. href 属性描述了链接的目标。
```
实例
<a href=“http://www.baidu.com/”>访问百度搜索</a>
```
  上面这行代码显示为：访问百度搜索点击这个超链接会把用户带到百度的首页。 HTML 链接 - target 属性使用 target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：
```
<a href=“http://www.baidu.com/” target=“_blank”>访问百度!</a>
```
4. 也可以直接跳转到某个标签上面
```
<a href="#c2">跳转到c2</a>
<dl>
    <dt>a</dt>
    <dd>a1</dd>
    <dd>a2</dd>
    <dt>b</dt>
    <dd>b1</dd>
    <dd>b2</dd>
    <dt>b</dt>
    <dd>b1</dd>
    <dd>b2</dd>
    <dt>b</dt>
    <dd>b1</dd>
    <dd>b2</dd>
    <dt>b</dt>
    <dd>b1</dd>
    <dd>b2</dd> 
    <dt>c</dt>
    <dd>c1</dd>
    <dd id="c2">c2</dd>
</dl>
```

img标签图片链接

<img src="" alt="" title=""/>

其中src表示图片的路径,alt表示如果无法显示图像则用文字替换,title表示鼠标悬浮在图片上时图片的标题

路径中相对路径: 用 …/ 表示回到上一层级

#HTML5标签和元素

html 标签和元素

标签vs元素

html 标签

html 元素

HTML 元素语法

head

title

HTML 属性概述

meta

h(x)

p(段落标签)

span

块级元素和行级元素

空元素

pre 原样输出

HTML 实体(特殊字符)

HTML 列表

HTML 列表标签表

无序列表

HTML 有序列表

HTML 自定义列表

a标签超链接（链接）

img标签图片链接

猜你喜欢

#HTML5标签和元素

html 标签和元素

标签vs元素

html 标签

html 元素

HTML 元素语法

head

title

HTML 属性概述

meta

h(x)

p(段落标签)

span

块级元素和行级元素

空元素

pre 原样输出

HTML 实体(特殊字符)

HTML 列表

HTML 列表标签表

无序列表

HTML 有序列表

HTML 自定义列表

a标签 超链接（链接）

img标签 图片链接

猜你喜欢

a标签超链接（链接）

img标签图片链接