学习笔记（一）——HTML基础标签

最新推荐文章于 2024-07-17 18:42:40 发布

weixin_47366357

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量197

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_47366357/article/details/105832796

版权

什么是HTML？

HTML（Hyper Text Markup Language）是指超文本标记语言，是一种用来描述网页的语言。它本身不是编程语言，而是标记语言（makeup language），使用标记标签（makeup tag）来描述网页。“超文本”就是指页面里可以写上非文字元素，如图片、链接、声音、视频等，并且它可以从一个文件跳到另外一个文件，与世界各地主机的文件连接。网站是网页的集合，网页是HTML格式文件，HTML文档是以.html为扩展名的文件，通过浏览器来阅读。HTML标签是由尖括号包围的关键词，通常成对出现，也有少数单标签。

HTML基本结构标签

这是每个HTML文档都会具备的基本标签，用HBuilder创建新项目以后会自动生成：

标签名	说明
<html></html>	页面中最大的标签，根标签，把所有的代码都写在里面
<head></head>	文档头部，包括网页标题，简单的样式声明等
<title></title>	文档标题，即网页标题
<body></body>	文档主体，包含网页的所有内容，相当于一个容器，把需要显示的全部放进去，而内容如何摆放整齐精美，这部分不关注

最简单的网页代码如下：

<html>
	<head>
		<title>我的第一个网页</title>
	</head>
	<body>
		真好看
	</body>
</html>

在这里插入图片描述

HTML常用标签

1.标题标签

标题标签一共分六级，从h1到h6字号逐级减小，标题本身就有加粗功能，并且需要注意标题独占一行，无论标题后面还有多少显示空间，后面再编辑的内容都会放到下一行显示。在实际开发中，根据需求自己选择标题大小即可。代码段和效果如下所示：

<html>
	<head>
		<title>标题标签</title>
	</head>
	<body>
		<h1>我是一级标题</h1>
		<h2>我是二级标题</h2>
		<h3>我是三级标题</h3>
		<h4>我是四级标题</h4>
		<h5>我是五级标题</h5>
		<h6>我是六级标题</h6>
	</body>
</html>

在这里插入图片描述

2.段落标签

标签名：<p></p>
作用：将文字分段，段落会根据浏览器的大小自动换行，值得注意的是段落间会默认自带空隙

3.换行标签（单标签）

标签名：<br />
作用：强制换行，换行以后文字间不会有空隙

4.文本格式化标签

标签名	说明
<strong></strong>或<b></b>	字体加粗
<em></em>或<i></i>	字体倾斜
<del></del>或<s></s>	删除线
<ins></ins>或<u></u>	下划线

5.布局标签

布局标签很常用，网页里的内容基本上都可以看做一个个盒子，在盒子里面放各种东西。布局标签<div>和<span>标签本身是没有语义的，只是框定了一个范围来装东西。

标签名	说明
<div></div>	大盒子，典型的块元素，一行是能放一个div，后面还有内容会默认放到下一行显示
<span></span>	小盒子，属于行内元素，一行可以放多个span

6.图像标签（单标签）

标签名：<img src=“图像路径或图像名”>
作用：插入图片，后面跟的属性之间没有顺序
属性介绍：

属性名	属性值
src	该属性为必须属性，表示图像路径或图像名，路径分为绝对路径和相对路径，当图片与文档在同一目录下时，用相对路径
alt	替换文本，当src中的图片不存在或无法显示时，用alt="替换文字"中的文字替换
title	提示文本，鼠标放在图片上显示的信息
width	设置图像宽度
height	设置图像高度，宽度和高度一般只设置一个，等比缩放
border	给图片设置某个像素的边框

7.超链接标签

标签名：<a href=“跳转目标” target=“目标窗口的弹出方式”>文本/图像等</a>
作用：设置超链接
href属性（必须属性）：表示目标链接，属性值类型如下

链接类型	说明
外部链接	例如href=“https://www.baidu.com”
内部链接	同一操作目录下直接写文件名即可，例如href=“index.html”
空链接	href="#"
下载链接	如果地址是文件或压缩包需要下载，同一级目录下直接写压缩包的名字即可，例如href=“img.zip”
网页元素链接	例如点击图片可跳转到百度网页：<a href=“https://www.baidu.com”><img src=“img.jpg”/>&l/a>
锚点链接	作用是点击链接直接定位到当前页面中的某一位置，方法是在链接文本的href属性中设置属性为“#名字”的形式，例如<a href="#live">个人生活</a>，同时在目标位置添加id属性，<h3 id=“live”>个人生活</h3>

target属性：
- _self：该属性值为默认值，表示点开超链接以后在当前窗口打开，覆盖当前窗口
- _blank：如果想要在新窗口打开链接，就要设置这个属性

weixin_47366357

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（一）——HTML基础标签

什么是HTML？HTML（Hyper Text Markup Language）是指超文本标记语言，是一种用来描述网页的语言。它本身不是编程语言，而是标记语言（makeup language），使用标记标签（makeup tag）来描述网页。“超文本”就是指页面里可以写上非文字元素，如图片、链接、声音、视频等，并且它可以从一个文件跳到另外一个文件，与世界各地主机的文件连接。网站是网页的集合，网页...
复制链接

扫一扫