1.标题标签 <h1> - <h6>
特点:
- 使字号变大
- 一个标题独占一行
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
</body>
</html>
效果:
2.段落标签
特点:
- 文本在一个段落会根据浏览器窗口的大小自动换行
- 段落和段落之间有空隙
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html>
效果:
3.换行标签
特点:
- 单标签
- 只是单纯的换行,两行之间没有空隙
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>换行标签</title>
</head>
<body>
换行标签上
<br/>
换行标签中
<br/>
换行标签下
</body>
</html>
效果:
4.文本格式化标签
标签 | 语义 |
---|---|
<strong></strong> | 加粗 |
<em></em> | 倾斜 |
<del></del> | 删除线 |
<ins></ins> | 下划线 |
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化标签</title>
</head>
<body>
<strong>加粗</strong>
<br/>
<em>倾斜</em>
<br/>
<del>删除线</del>
<br/>
<ins>下划线</ins>
<br/>
</body>
</html>
效果:
5.盒子标签
标签 | 特点 |
---|---|
<div></div> | 大盒子标签,一行只能放一个div |
<span></span> | 小盒子标签,一行可以放多个span |
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子标签</title>
</head>
<body>
<div>大盒子</div>
<span>小盒子1</span>
<span>小盒子2</span>
<span>小盒子3</span>
</body>
</html>
效果:
6.图像标签
特点:
- 可以拥有多个属性,必须写在标签名后面
- 属性之间不分先后顺序,标签名与属性、属性与属性之间以空格分开
- 属性是用键值对的格式
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像标签</title>
</head>
<body>
<!-- 非正常显示的图片,需要显示后缀名 -->
<img src="images/pic_01" alt="图片显示不出来时显示的" title="图片的标题"/>
<br/>
<!-- 正常显示的图片,需要显示后缀名 -->
<img src="images/pic_01.png" title="图片的标题" border="10" width="100" height="100"/>
</body>
</html>
效果:
7.超链接标签
属性:
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址(必须属性) |
target | 用于指定链接页面的打开方式,_self在本窗口打开(默认方式),_blank在新窗口打开 |
分类:
类型 | 说明 |
---|---|
外部链接 | href填写项目外的url地址 |
内部链接 | href填写项目内的url地址 |
空链接 | href填写# |
下载链接 | href是一个文件或者压缩包时,会自动下载这个文件 |
网页元素连接 | 网页中的各种网页元素也可以添加链接 |
锚点链接 | 链接标签中href填写#id名;目标位置标签加id属性 |
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接标签</title>
</head>
<body>
<p><a href="http:www.baidu.com" target="_self">外部链接</a></p>
<p><a href="text9.html" target="_blank">内部链接</a></p>
<p><a href="#">空链接</a></p>
<p><a href="images.rar">下载链接</a></p>
<p><a href="http:www.baidu.com"><img src="images/pic_01.png" width="100"/></a></p>
<p><a href="#one">锚点链接</a></p>
<h1 id="one">跳到到锚点链接</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
<h1 >跳到到锚点链接1</h1>
</body>
</html>
效果:
8.文章参考链接
a. https://www.boxuegu.com/