HTML基本标签
标题标签
1.<h1>-<h6>定义标题标签;
2.标题标签属于块元素,即浏览器会自动在标题的前后添加空行;
3.<h1>定义最大的标题,<h6>定义最小的标题,逐级递减;
<!-- 标题标签,用于设置一级到六级的标题 -->
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
</body>
段落标签
1.<p></p>标签定义段落;
2.用于将一段文字包裹起来,可以设置其他各种样式,
3.属于块级元素,是双标记标签
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
换行标签
<br>标签用来在不产生新段落的情况下实现换行,多用于 写地址或诗歌。是一个自结束标签
<body>
<h1>红豆<h1/>
<p>
红豆生南国,<br>
春来发几支。<br>
愿君多采撷,<br>
此物最相思。<br>
</p>
</body>
水平线标签
<hr>标签用于在HTML页面中创建水平线,用于分割内容。是一个自结束标签,也属于块级元素
<body>
<p> 水平线:</p>
<hr />
<p>段落1</p>
<hr />
<p>段落2</p>
<hr />
<p>段落3</p>
</body>
图像标签
<img/>标签可以用来在网页中插入图片,实际上是将图片的链接插入到了网页中,也是一个自结束标签,该标签常用的属性有以下几条:
属性 | 作用 |
src | 引用图片的路径 |
alt | 如果因为某种原因导致图片看不到,用文本替代该指定图片。 |
width | 图片的宽 |
height | 图片的高 |
<body>
<h2>引用网络上的一张图片</h2>
<img src="https://img.tukuppt.com/ad_preview/00/04/15/5c98b99bce3ad.jpg" alt="黑板报" width="500px">
<h2>引入本地上的一张图片</h2>
<!-- 路径有两种写法:相对路径和绝对路径
相对路径: 相对的是当前文件所在的文件夹。 当前文件夹,当前文件夹的表达方式 ./(可以省略)
绝对路径:一般指的就是项目的根或者是磁盘的盘符开始写。
-->
相对路径写法:<img src="./images/易烊千玺.jpg" alt="yyqx">
绝对路径写法:<img src="D:\A实训资料\01-HTML&CSS\code\images\合照.jpg" alt="合照">
</body>
超链接标签
<a>标签是一个超链接标签,是一个双标记标签,内容体可以是文本也可以是图片,它的属性如下:
属性 | 描述 |
href | 必需,目标链接的URL |
rel | 可选,规定当前文档和被链接文档的关系 |
title | 可选,鼠标在超链接上显示的内容 |
target | 可选,决定链接在浏览器中怎么打开 _blank:在新的标签页打开该链接; _self:在当前标签页打开链接 |
<h1>文字链接</h1>
<a href="https://www.taobao.com">点我进入淘宝网站</a>
<h1>图片链接</h1>
<a href="https://www.weibo.com/tfent?from=myfollow_group&is_all=1" title="TFBOYS组合的微博" target="_blank">
<img src="./images/合照.jpg" alt="组合" width="300">
</a>
<h1>锚点链接:跳转到本页面的某一个位置</h1>
<!--
href的值,必须是#开头, 如果只有#表示跳转到当前页面的最顶端
如果是#配合id值,则是跳转到id值所在位置
-->
<a href="#c4">点我跳转到章节4</a>
<h1> 章节1</h1>
<p> 段落的内容</p>
<h1> 章节2</h1>
<p> 段落的内容</p>
<h1> 章节3</h1>
<p> 段落的内容</p>
<h1 id="c4"> 章节4</h1>
<p> 段落的内容</p>
<h1> 章节5</h1>
<p> 段落的内容</p>
<a href="#">回到最顶端</a>
按钮标签
<button>标签是按钮标签,在该元素内部,可以放置文本或图像,是双标记标签。建议: 添加type属性,指定属性值为button
<body>
<button type="button" onclick="alert('橙海不会暗')">
<img src="./images/合照.jpg" alt="合照">
</button>
</body>