HTML基本标签

小趴菜。。

已于 2022-07-19 15:20:04 修改

阅读量127

点赞数

分类专栏： HTML基础文章标签： html 前端

于 2022-07-19 15:06:34 首次发布

本文链接：https://blog.csdn.net/wzqybz/article/details/125866058

版权

HTML基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.<div>：用来布局的，没有具体含义。

可用于组合其他HTML 元素的容器。
可用于对于大的内容块设置样式属性。
文档布局。取代了使用表格定义布局的老式方法。

代码：

 <!--1.div:用来布局，没具体含义。层-->
	<div>
		abc
		<div>def</div>
	</div>

效果：

2.<hx>：标题，从1级到6级，1级标题最大，6级标题最小，会自动加粗,有默认字号

h1~h6，定义不同级别的标题。
网页中，h1最重要，标准的写法一个HTML文件中只能出现一次h1标签。

代码：

<!--2.hx:标题，从1级到6级，1级标题最大，6级标题最小，会自动加粗,有默认字号-->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h6>六级标题</h6>

效果：

3.<p>：表示段落，相当于一个回车。

定义段落结构，段落标签独占一片区域。
注意：浏览器会自动在段落的前后添加空行。

代码：

<!--3.p:表示段落。相当于一个回车-->
<p>我不羡慕别人的笑容，
   因为我知道他们和我一样，
   背后也有不为人知的酸楚。
   我不羡慕别人的财富，
   因为我知道他付出的代价，
   忙不完的工作，说不出的辛苦。</p>

效果：

4.<br>：换行标签，单标签。

代码：

<!--4.br:换行标签，单标签-->
<p>我不羡慕别人的笑容，<br/>
   因为我知道他们和我一样，<br/>
   背后也有不为人知的酸楚。<br/>
   我不羡慕别人的财富，<br/>
   因为我知道他付出的代价，<br/>
   忙不完的工作，说不出的辛苦。</p>

效果：

5.<hr>：在HTML页面中创建水平线，用于分割内容，单标签。

6.<a>：超链接标签，实现链接跳转的标签。

a.语法：<a href="" target="">点击跳转的地方（文本内容/图片）</a>

b.常用属性：

href：链接的地址

target：规定在何处打开新的链接文档，默认是在当前页面打开。

_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self：这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

代码：

<!--7.a:实现链接跳转-->
       <a href="http://baidu.com" target="_blank">baidu</a>
       <a href="https://hao.360.com/" target="_self">360搜索</a><hr/>

效果：

7.<base>：改变链接的默认行为（如target的值），单标签。

写在头部<head>中，<base target="_blank">

8.<img>：用于申请图片的插入，单标签。

a.语法：<img src="" alt="" title="" />

b.常用属性：

src：引入图片的地址（本地图片网络图片）。
alt（alternative）：图片出现问题的时候，可以显示一段有好的提示文字，图片没有问题，文字不显示。
title：定义图片的标题，鼠标移动到图片时显示。（鼠标停留几秒才显示）

代码：

<!--8.img:用来加载外部图片、图像。src:用来设定加载的图片或图像的路径，单标签。-->
<img src="https://hao2.qhimg.com/t01b27bb76e133d0ee1.png" alt="360搜索" title="360" />
<img src="https://hao2.qhimg.com/t01b27bb76e3d0ee1.png" alt="360搜索" title="360" />

效果：

9.<span>：与<div>一样，都是用来布局，不同的是<div>会单独占一行，而<span>不会，用于行内布局。

代码：

<!--9.span:用于布局-->
<div>div1</div>
<div>div2</div>

<span>span1</span>
<span>span2</span>

效果：

10.<ul>和<ol>：列表，前者是无序列表，后者是有序列表，列表内容使用<li>标签。

代码：

<!--10.<ul>和<ol>：列表，前者是无序列表，后者是有序列表，列表内容使用<li>标签。-->
<ul>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
</ul>
<ol>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
</ol>

效果：