首页 前端知识 HTML基本标签

HTML基本标签

2024-04-01 10:04:39 前端知识 前端哥 637 527 我要收藏

文章目录

  • 前言
  • 一、HTML简介
  • 二、HTML标签介绍
    • 1.标题标签
    • 2.段落标签
    • 3.换行标签
    • 4.hr标签
    • 5.span标签
    • 6.div标签
    • 7.img标签
    • 8.超链接标签
    • 9.注释标签
    • 10.特殊字符
    • 11.格式化标签
    • 12.sup上标和sub下标
    • 13.pre预格式化标签
  • 三、行内元素、行内块元素和块级元素


前言

学习HTML之前,我们首先需要了解什么是HTML:

        HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。它不是一种编程语言,而是一种标记语言,使用标签来描述网页。HTML文档也叫做web页面。

一、HTML简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 
</body>
</html>

 实例解析:

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容

注意:doctype声明是不区分大小写的,用来告知web浏览器页面使用了那种HTML版本。

        对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。

二、HTML标签介绍

1.标题标签

代码如下(示例):

 <h1>一级标题</h1>
 <h2>二级标题</h2> 
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

运行结果: 

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

解析:

标题标签的默认样式是自动加粗的,字体一级标题最大,六级标题最小,每个标题标签独占一行。

标题标签是块元素

2.段落标签

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
		我是一段很长的话,
	</p>
	<p>
		我是一段很长的话,
	</p>
	<p>
		我是一段很长的话,
	</p>
</body>
</html>

运行结果:

我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话, 我是一段很长的话,

我是一段很长的话,

我是一段很长的话,

解析:

段落标签p,里面的内容是以段落的形式体现的,如果一个段落的文字太多,那么它会自适应浏览器窗口,一行显示不下,则会换行;如上面的运行结果。

它代表着一个自然段。

段落标签是块元素


3. 换行标签

 代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	第一行<br/>
	第二行<br/>
	第三行<br/>
</body>
</html>

运行结果:

第一行
第二行
第三行

解析:

换行标签br的作用是,强制换行,如上代码如果不加br标签。那么它就会在一行上显示i。br是单标签

4.hr标签

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	hr {
		margin: 50px;
	}
		div>hr {
			height: 20px;
			background-color:red;
		}
	</style>
</head>
<body>

	<hr>

	<div>
		<hr>
	</div>

</body>
</html>

运行结果:

解析:

hr标签:给页面添加一个分割线

hr标签,可以添加样式,如上图所示

5. span标签

 代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span>1234</span>
	<span>5678</span>
</body>
</html>

运行结果:

解析 :

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

<span>标签不同于<p>标签是一个行内元素(不独占一行)

6.div标签

 代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>这是一个div</div>
	<div>这是一个div</div>
	<div>
		<p>这是一个div</p>
	</div>
	<p>
		<div>z5343</div>
	</p>
</body>
</html>

运行结果:

解析:

<div>标签可以看出是一个盒子容器,这里面可以放别的标签

<div>标签是一个块元素

如上图控制台所示(打开控制台的方式:F12):<div>标签里面可以包含<p>标签,<p>标签,里面不可以放<div>标签

7.img标签

代码如下(示例):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

	<img src="smiley-2.gif" alt="Smiley face" width="100" height="100" 
    title="face">

</body>
</html>

运行结果:

解析:

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src的路径分为:网上的图片路径和本地的图片路径

8.超链接标签

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

解析:

作用:点击文字跳到链接的地方

a是行内元素

href:规定链接的目标URL

target:(链接窗口的打开方式)

  • _blank:新窗口打开。
  • _parent:在父窗口中打开链接。
  • _self:默认,当前页面跳转。
  • _top:在当前窗体打开链接,并替换当前的整个窗体(框架页)

9.注释标签

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 这是一行注释 -->
</body>
</html>

解析:

<!-- -->
1. 注释只是为了提醒程序猿,这个代码是干啥的,并不参与执行,不要随便乱写注释,注释能够被外面的有心人看到!!!
2. 注释可以直接通过 ctrl + / 来切换注释
3. 注释不能嵌套

10.特殊字符

空格(html中默认是不显示空格的,也就是说通过空格键加了空格也没有多个空格的效果,加多少个都是显示一个空格效果,需要这些特殊字符才能显示出空格效果)    &nbsp;
>    &gt;
<    &lt;
&    &amp;
¥    &yen;

11.格式化标签

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

运行结果:

解析:

<strong> 和 <b> 都是加粗文本,但是<strong>的语义更加强列

12.sup上标和sub下标

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>
		x<sup>2</sup>
	</p>
	<p>
		log<sub>2</sub>10
	</p>
</body>
</html>

运行结果 :

13. pre预格式化标签

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<pre>
		我是一个 有样式
		的文字
	</pre>
</body>
</html>

 运行结果:

 解析:

可以看出上面的代码和运行结果显示<pre>标签保留了文本中的空格和换行

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

三、行内元素、行内块元素和块级元素

HTML 可以将元素分类方式分为行内元素、块级元素行内块元素.

使用display属性能够将三者任意转换:


display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

 行内元素(inline element)

特点:

         1.不会独占一行,它是自左向右排列,一行排满再换行

         2.行内元素的宽和高,默认是被内容撑开的

         3.对 margin 仅设置左右方向有效,上下无效,padding 设置上下左右都有效

         4.不会自动进行换行

常用行内元素:span em strong a i ......
 

  行内块元素

特点:

         1.兼具块元素和行内元素特点

         2.不会独占一行,可自定义宽高

         3.默认排序方式为从左到右

  块元素(block element) 

特点:

        1.能够识别宽高

        2.margin 和 padding 的上下左右均对其有效

        3.独占一行

        4.多个块级元素标签写在一起,默认排序方式为从上至下

常用块元素:div h1-h6 p header footer nav......

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4359.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!