HTML标签

双标签

双标签也称为体标记,是指有开始和结束两个标记符组成的标记

<标记名> </标记名>

常见的双标签有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<h2></h2>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
<ol></ol>
<dt></dt>
<mark></mark>
<iframe></iframe>
1
<a href='https://albert-5.cn'>博客</a>

单标签(单标记)

单标记也称为空标记,是指用一个标记即可完成地描述某个功能的标记,基本语法格式为:

<标记名/>

常见的标签有:

1
2
3
4
<br/> <!--换行-->
<hr/> <!--水平分割线-->
<meta />
<img />

标签的关系

  • 嵌套关系

    1
    2
    3
    4
    <head>
    <title>
    </title>
    </head>
  • 并列关系

    1
    2
    <head></head>
    <body></body>

HTML的固有结构

1
2
3
4
5
6
7
<html>
<head>
<title>网页名称</title>
</head>
<body>
</body>
</html>

HTML样式

==通过style属性更改HTML的样式==

样式–背景颜色

1
2
3
4
5
6
<html>
<body>
<p style='background-color:red'>albert</p>
</p>
</body>
</html>

注:background-color属性值的设置来给背景设置颜色的

样式–字体、颜色和尺寸

1
2
3
4
5
<html>
<body>
<p style="font-family:arial;color:green;font-size:50ox;">albert</p>
</body>
</html>

注:通过对style属性值的设置来设置字体,通过对color属性值的设置来设置颜色,通过对font-size属性值的设置来设置字体大小

样式–文本对齐

1
2
3
4
5
<html>
<body>
<p style='text-align:center'>albert</p>
</body>
</html>

注:标题 albert 相对于页面居中对齐

HTML链接

链接可以是一个字、一个词、或者一组词,也可以是一幅图像,可以点击内容来跳转到新的文档或者当前文档中的某个部分。鼠标指针移动到网页中的某个链接时,箭头会变成一只小手。

==通过使用标签在HTML中创建链接==

  • 通过使用href属性创建指向另一个文档的链接
  • 通过使用name属性创建文档内的书签
1
<a href='https://albert-5.cn'>我的博客</a>

注:点击上方的 我的博客 这个链接就会跳转到我的博客首页。暂时没有确定链接目标时,通常将标签内的href属性值设定为"#",即表示为一个空链接

通过name属性创建锚点链接,可以定位到目标内容(比如页面的某个小节)。创建锚点分为两步:

  • 使用<a href='#id名'>链接文本</a>创建链接文本
  • 使用相应的id名标注跳转目标的位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<p>
<a href=‘#winter>查看冬天</a>
</p>
<h2></h2>
<p>万物复苏</p>
<h2></h2>
<p>夏日绵绵</p>
<h2></h2>
<p>秋高气爽</p>
<h2><a name='winter'></a></h2>
<p>白雪皑皑</p>
</body>
</html>

target属性:用于指定链接页面的打开方式,其取值有==self==和==blank==两种,其中==_self==是默认值,==_blank==为在新窗口中打开方式

1
<a href='https://albert-5.cn' target="_blank">albert</a>

注:target默认属性值为:_self,使得目标文档载入并显示在相同的框架或者窗口中作为源文档