HTML 基础

在这里插入图片描述

HTML是什么

这是百度的解答:HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它不是一种编程语言,而是一种标记语言(markup language),用于描述网页的结构和内容。HTML 使用“标签”(tags)来定义网页中的元素,如段落、标题、链接、图片、列表等。这些标签告诉浏览器如何显示网页内容。

说到前端,人们就会想到 HTML、CSS、JavaScript这三剑客,HTML 定义了网页的结构和内容;CSS 负责网页的样式和布局;JavaScript 实现了网页的动态功能和交互性。

本篇文章将为大家介绍关于 HTML 的知识。注:因为本人主攻后端,所以文章中写到的知识都是最基本的知识,没有特别的深入。

HTML结构

认识HTML标签

HTML 代码是由“标签”构成的,例如:<body>hello</body>

  • 标签名会放在 <> 之间
  • 大部分标签成对存在,<body>为开始标签,</body>为结束标签
  • 少数标签只有开始标签,称为“单标签”
  • 开始标签和结束标签之间,写的是标签的内容
  • 开始标签中可能会带有“属性”,用来控制标签中的格式和行为

HTML文件基本结构

<html>
	<head>
		<title>标题</title>
	</head>
	<body>
		hello
	</hello>
</html>
  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

在这里插入图片描述

标签层次结构

HTML 的标签之间存在两种关系:父子关系和兄弟关系。上面的代码中 head 标签和 body 标签是 html 标签的子标签,也就是 html 标签是 head 标签和 body 标签的父标签;title 标签是 head 标签的子标签;而 head 标签和 body 标签则是兄弟关系。

标签之间的结构关系,构成了一个 DOM(Document Object Mode ) 树:

在这里插入图片描述
在很多集成编译环境中,往往可以使用 ! + … 来快速生成一个 HTML 主体框架,在 VScode 中使用 ! + enter,在 idea 中使用 ! + Tab。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE html> 称为 DTD(文档类型定义),描述当前的文件是一个 HTML5 的文件
  • <html lang=“en”> 其中 lang 属性表示当前页面是一个“英语页面”。这里暂时不用管,有些浏览器会根据此处的声明提示是否进行自动翻译
  • <meta charset=“UTF-8”> 描述页面的编码方式,没有这一行可能会导致中文乱码
  • <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    • name="viewport"指的是设备的屏幕上能用来显示我们的网页的那一块区域
    • content=“width=device-width”,init-scale=1.0 在设置可视区和设备宽度等宽,并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些)

HTML常见标签

注释标签

在学任何一个新的语言的时候,首先想到的肯定就是注释了,在 HTML 中使用 <!-- 注释 --> 来达到注释的目的。可以使用 CTRL + / 来达到快速注释的目的。

标题标签

标题标签有六个,从 h1 到 h6,数字越大,字体越小:

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

在这里插入图片描述

段落标签

当我们给一段非常长的文字的时候,如果直接使用文本形式的话,那么这些文字可能就会称为一整段,这样看着就会不好看,在 HTML 中 <p> 标签可以将文本形成段落。

例如这下面这些文字:

在这里插入图片描述
如果不使用 <p> 标签分段的话,就会成为一段:

在这里插入图片描述
然后使用 <p> 标签就是下面的结果:

在这里插入图片描述

  • p 标签之间会存在一行空隙
  • p 标签的段落不会有缩进,但是后面结合css可以实现缩进
  • 自动根据浏览器宽度决定排版
  • html 内容首尾处的换行,空格均无效
  • 在 html 的文字之间输入多个空格只相当于一个空格
  • html 中直接输入换行不会真的换行,而是相当于一个空格

换行标签

换行表标签 br 是 break 的缩写,是换行的意思/

  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样带有一个很大的空隙
  • <br/> 是规范写法,不建议写成 <br>

在这里插入图片描述

格式化标签

  1. 加粗:strong 标签和 b 标签
  2. 倾斜:em 标签和 i 标签
  3. 删除线:del 标签和 s 标签
  4. 下划线:ins 标签和 u 标签
<strong>string 加粗<br/></strong>
<b>b 加粗<br/></b>
<em>em 倾斜<br/></em>
<i>i 倾斜<br/></i>
<del>del 删除线<br/></del>
<s>s 删除线<br/></s>
<ins>ins 下划线<br/></ins>
<u>u 下划线<br/></u>

在这里插入图片描述

图片标签

当我们想要在前端显示图片的时候,往往需要借助 img 标签来实现。img 标签必须带有 src 属性,来指定图片路径。

我将图片放在 html 文件的同一级目录下:

在这里插入图片描述

<img src="bear.jpg">

在这里插入图片描述
如果图片不在当前 html 文件的同一级目录下的话,可以使用 .. 表示当前 html 文件的上一级目录,.表示当前目录,也可以使用图片的绝对路径来表示,图片的网络地址也是可以的:

    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.6a00de959b5801108793b344ef2988ad?rik=OlQAB0P4J80yTA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50070%2f5999.jpg_wh860.jpg&ehk=nUrNDlAkDzUbcZyyRIpSCFDeeTPjyJnuR14jdQ%2fbE2w%3d&risl=&pid=ImgRaw&r=0">

在这里插入图片描述
img 标签的其他属性:

  • alt:替换文本。当文本不能正常显示的时候,会显示一个替换的文字
  • title:提示文本。鼠标放到图片上面的提示词
  • width/height:控制宽度和高度。高度和宽度一般改一个就行了,另外一个会等比例缩放,否则图片就会失衡
  • border:边框,参数是宽度的像素,但是一般用 CSS 来设定
<img src="bear666.jpg" alt="图片不存在,请检查后重试">

当前不存在 bear666.png,所以当我们访问这个 html 的时候就会显示后面的替换文字:

在这里插入图片描述

<img src="bear.jpg" title="这是一只北极熊哦">

在这里插入图片描述

<img src="bear.jpg" width="2000px">

在这里插入图片描述

<img src="bear.jpg" height="600px">

在这里插入图片描述

<img src="bear.jpg" border="5px">

在这里插入图片描述
如果一个标签中存在多个属性的话,这些属性没有先后顺序。

超链接标签

超链接标签 <a> 就是当我们点击的时候会跳转到指定的位置。

<a href="http://www.baidu.com">这是一个超链接</a>

在这里插入图片描述
在这里插入图片描述

  • href:必须具备,表示点击之后会跳转到哪个页面
  • target:打开方式,默认是 _self,如果是 _blank 则用新的标签打开

这里的 href 可以是其他网站的链接,也可以是我们项目内部页面的链接:

在这里插入图片描述

<a <
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不能再留遗憾了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值