HTML–常用标签
HTML元素(标签)分类
- 块元素(行元素)
- 内联元素(行内元素)
HTML–块元素(行元素)
特点: 单个块元素在浏览器中默认独占一行 块元素可以设置宽高等属性.
块元素之标题标签
==表示文档的标题==
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
|
块元素之段落标签
==表示文档中的一个文字段落==
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
逢雪宿芙蓉山主人
</p>
<p>
日暮苍山远，天寒白屋贫。
柴门闻犬吠，风雪夜归人。
</p>
</body>
</html>
|
块元素之通用块容器标签
==表示文档中一块内容==
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>
逢雪宿芙蓉山主人
</div>
<div>
日暮苍山远，天寒白屋贫。
柴门闻犬吠，风雪夜归人。
</div>
</body>
</html>
|
HTML–内联元素(行内元素)
内联元素之图片标签
==在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置==
1
2
3
4
5
| <head>
</head>
<body>
<img src="test.png" alt="百度">
</body>
|
- src属性主要是添加要展示的图片地址
- alt属性的作用:
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.
内联元素之超链接标签
==链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线==
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 超链接设置 -->
<a href="#">默认链接</a>
<a href="01.html">第一个网页</a>
<a href="http://www.google.com">itcast</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""> </a>
<!-- 这个会在新窗口打开内容 -->
<a href="www.baidu.com" target="_blank">新tab打开界面</a>
</body>
</html>
|
a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:
不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
如果想要跳转到当前页面的最上方时, 可以使用 #
a 标签有 target 属性
- 如果不设置该属性, 在当前页面打开新页面
- 如果设置该属性, 则会在新窗口中打开新页面
内联元素之通用内联容器标签
==我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式==
1
2
3
4
5
6
7
8
| <!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
公历12月25日是<span style="color:red">圣诞节</span>
</body>
|
特殊标签
空格: 在html中, 空格一般会用 表示
回车: 在html中回车换行一般用<br>表示
小于号( < ): 在html中一般用<表示
大于号( > ): 在html中一般用>表示