HTML的入门世界(2)
程序员文章站
2022-04-29 10:54:26
...
HTML的部分标签认识
标签介绍
1.排版标签
1.1标签语法
- 字体标签
<font>文本</font>
- 标题标签
<hn>标题</hn> <!--n的范围[1,6],分别表示一级标题,二级标题,...,六级标题-->
- 段落标签
<p>段落内容</p
- 粗体标签
<b>内容</b> 将文本内容加粗
- 斜体标签
<i>内容</i>
- 换行标签
<br/>
- 下划线标签
<hr/>
1.2 案例
案例要求:将各类标签功能在网页中展示出来
思路: 1.在IDEA里创建一个HTML文件 2.在标签中写入相应内容 3.在浏览器显示HTML文件(网页)
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排版标签展示</title>
</head>
<body>
<h1>这是一个一级的标题标签</h1>
<font color=red> 这是一个带有颜色属性(红色)的字体标签</font>
<p> 我爱中国,我爱家乡(这是一个段落标签)</p>
<b> HelloWorld(这是一个粗体标签)</b>
<i>你好,世界(这是一个斜体标签)</i>
<br/> 换行啦!
<hr/>下划线
</body>
</html>
页面展示:
2.图片标签
2.1图片标签语法及页面展示
语法:
<img src="图片路径" with="图片宽度" height="图片高度" alt="图片描述" title="用于告诉浏览器,当页面停在图片上时,需要弹出的描述框中显示什么内容" />
img标签中的img是英文image的缩写,img标签的作用是告诉浏览器我要显示一张图片.
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
<img src="img/ad.jpg" width="500px" height="300px" alt="旅游" title="GGGGG" />
</body>
</html>
页面展示:
2.2 路径
-
相对路径 : 从.html文件所在的文件夹开始查找图片, 我们称之为相对路径
1.同级 :图片存储路径和".html"文件存储路径在同一个文件夹中. 格式: src=“a.jpg” 含义:在.html文件所在的文件夹中查找名称叫做a.jpg的图片
2.上级 : “存储图片的位置"和"储存代码的文件夹"在同一个文件夹中. 格式: src=”…/a.jpg" 含义:在.html文件所在的文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹找到名称叫做a.jpg的图片,其中,"…/"代表当前文件夹的上一级文件夹.
-
绝对路径 : 从指定的盘符开始查找
注意:1.路径中不要出现中文,否则可能出现未知问题 2.如果是通过相对路径指定图片位置,不能跨盘符. 例如.html文件在c盘,那么不能去d盘查找图片
3.列表标签
3.1 无序列表
语法:
<ul type="类型">
<li>需要显示的条目内容</li>
...
</ul>
<!--注意: 1.ul标签和li标签是一个整体,不会单个出现
2.type属性列表的类型 circle:空心圆 square:实心的正方形 不写type类型默认为实心圆-->
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<h1>无序列表</h1>
<ul>
<li>文章内容</li>
<li>文章寓意</li>
<li>作者生平</li>
</ul>
</body>
</html>
页面展示:
3.2 有序列表
语法:
<ol type="类型" start="起始索引">
<li>需要显示的条目内容</li>
...
</ol>
<!--start属性: 起始的索引(默认是第1个).
type属性: 列表类型; 1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字-->
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<h1>有序列表</h1>
<ol type="a" start="3">
<li>文章内容</li>
<li>文章寓意</li>
<li>作者生平</li>
</ol>
</body>
</html>
页面展示:
4.超链接标签
语法:
<a href="指定需要跳转的目标路径" target="打开的方式">需要展现在页面上的内容</a>
<!--target的属性值: _blank:新页面打开 _self:当前页面(默认)-->
超链接标签的作用:用于控制页面与页面之间的跳转.
示例代码(点击跳转到百度页面):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面跳转</title>
</head>
<body>
<h1>页面跳转</h1>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
页面展示:
未点击***百度*** 前:
点击***百度*** 后:跳转到百度页面