title: 二、HTML学习笔记(HTML标签-上)
date: 2024/02/02
HTML 语法规范
基本语法概述
-
HTML 标签是由
尖括号
包围的关键词,如:<html>
-
绝大部分标签是成对出现的,我们称之为
双标签
,第一个称为开始标签
,第二个称为结束标签
,并且结束标签
需要加/
,如:<html></html>、<div></div>
-
有一些特殊标签是单个出现的,无需结束标签,我们称之为
单标签
,只需要自身添加/
即可,如:<br />
-
01-HTML 语法规范.html
<html></html> <div></div> <br />
标签关系
标签关系可以分为两类:
包含关系
和并列关系
-
包含关系
<head> <title></title> </head>
-
并列关系
<head></head> <body></body>
HTML 基本结构标签
第一个 HTML 网页
每个网页都会有一个基本的结构标签(骨架标签),页面内容也是在这些基本标签上书写。
HTML 页面也被成为 HTML 文档
表签名 | 定义 | 说明 |
---|---|---|
<html> | HTML标签 | 页面中最大的标签,称为根标签 |
<head> | 文档的头部标签 | 其中必须包含 title 标签 |
<title> | 文档的标题标签 | 设置网页标题 |
<body> | 文档的主体标签 | 元素包含文档的所有内容,页面内容基本都是放到 body 标签中 |
-
02-第一个页面.html
<html> <head> <title>我的第一个页面</title> </head> <body> 键盘敲烂,月入过万 </dody> </html>
网页开发工具( Visual Studio Code)
VSCode 的使用
-
双击打开软件
-
新建文件(Ctrl + N)
-
保存文件(Ctrl + S),注意保存为
html
格式 -
输入
!
生成页面骨架结构,注意是英文的感叹号
-
右键选择
Open In Defult Browser
或Open In Other Browser
03-vscode创建页面.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>我利用vscode创建的第一个页面</title> </head> <body> 键盘敲烂,月入过万 </body> </html>
VSCode 插件以及快捷键
略
新增标签含义
-
<!DOCTYPE>
标签, 文档类声明,作用就是告诉浏览器使用哪个版本的 HTML 来解析代码 -
<html lang="en">
,lang=“en"
作用是定义当前文档的显示语言,en:英文、zh-CN:中文
-
<meta charset="UTF-8">
,charset="UTF-8"
作用是定义当前文档使用的字符集,UTF-8、GB2312、GBK、BIG5
,其中UTF-8
被称为万国码
HTML 常用标签
标签语义
学习标签是有技巧的,重点是记住每个标签的语义,简单理解就是记住每个
标签的含义
,即这个标签是用来做什么的
根据标签的语义,在合适的地方合理使用标签,可以让页面结构更加清晰
标题标签
为了使网页更具有语义化,我们通常会在页面中使用到
标题标签
,HTML 提供了6
种不同等级的标题标签,从大到小依次是<h1> ~ <h6>
<!-- 标题标签独占一行,显示的时候不与其他标签显示在一行-->
<h1>我是一级标题标签</h1>
语义
:在页面中作为标题使用,根据标题大小和重要程度递减
-
04-标题标签.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>标题标签</title> </head> <body> <h1>标题一共六级选</h1> <h2>文字加粗一行显</h2> <h3>由大到小一词减</h3> <h4>从重到轻随之变</h4> <h5>语法规范书写后</h5> <h6>具体效果刷新见</h6> </body> </html>
段落标签和换行标签
段落标签
在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示,在 HTML 标签中,
<p>
标签用于定义段落
,它可以将整个网页分为若干段落
<p>我是一个段落标签</p>
语义
:可以吧 HTML 文档分割为若干段落
换行标签
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,才会自动换行,如果需要强制换行,则需要使用
<br />换行标签
<br />
语义
:强制换行
-
05-段落标签和换行标签.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>段落标签和换行标签</title> </head> <body> <p>第一段<br />第一段</p> <p>第二段</p> <p>第三段</p> </body> </html>
-
06-体育新闻案例.html
略
文本格式化标签
在网页中,有时我们需要对文字格式进行设置,比如
加粗
、倾斜
、、删除线
下划线
等效果,这时就需要 HTML 中的文本格式化标签,使文字以特殊的形式显示
标签 | 作用 | 说明 |
---|---|---|
<strong> 或<b> | 加粗 | 推荐使用<strong> |
<em> 或<i> | 倾斜 | 推荐使用<em> |
<del> 或<s> | 删除线 | 推荐使用<del> |
<ins> 或<u> | 下划线 | 推荐使用<ins> |
语义
:突出文字重要性
-
07-文本格式化标签.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>文本格式化标签</title> </head> <body> 我是<strong>加粗</strong>文字 我是<em>倾斜</em>文字 我是<del>删除线</del>文字 我是<ins>下划线</ins>文字 </body> </html>
盒子标签
在编写 HTML 页面的时候,如果将所有代码都编写到一起,会显得代码结构混乱,此时应使用
<div>
或<span>
标签来对页面结构进行划分,使页面结构更加清晰。它们俩没有具体的语义,只是用来装内容的
<!-- div 标签独占一行,显示的时候不与其他标签显示在一行-->
<div></div>
<!-- span 标签显示的时候可以与其他标签显示在一行-->
<span></span>
-
08-盒子标签.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>盒子标签</title> </head> <body> <div>我是 div 标签,我自己独占一行</div> <div>我是 div 标签,我自己独占一行</div> <span>百度</span> <span>新浪</span> <span>搜狐</span> </body> </html>
图像标签和路径
图像标签
在 HTML 中,可以使用
<img>
标签向页面中添加图片
<!-- src 是 img 标签的必须属性,它用于指定所要显示的图片的路径 -->
<img src="图片路径" />
属性 | 值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 当图片加载失败无法显示,显示此文字 |
title | 文本 | 图片的标题,当鼠标移入图片,显示此文字 |
width | 像素 | 图片宽度 |
hight | 像素 | 图片高度 |
border | 像素 | 图片边框粗细 |
-
09-图像标签.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>图像标签</title> </head> <body> <img src="img.jpg" /> <img src="img1.jpg" alt="图片加载失败" /> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" /> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" width="500" /> <!-- 在实际开发中,宽度和高度一般只设置其中一个,另一个会等比例进行调整--> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" width="500" hight="200" /> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" width="500" border="15" /> </body> </html>
路径
页面中的图片往往会有很多,如果都与 HTML 文件放到统一文件夹下,会显得很乱,所以需要把图片文件放到其他指定文件夹中,而在添加图片时,就需要编写图片路径来指定图片位置
-
相对路径
以当前文件所在文件夹为参考,目标文件相对于向前文件位置的路径
路径 符号 说明 同一级 ./
或不写
如 <img src="./img.jpg" />
或<img src="img.jpg" />
下一级 /
如 <img src="./img/img.jpg" />
上一级 ../
如 <img src="../img/img.jpg" />
-
绝对路径
目标文件相对于盘符的路径,或者网络路径
-
11、12、13-相对路径和绝对路径.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>图像标签</title> </head> <body> <!-- 同一级 --> <img src="./img.jpg" /> <img src="img.jpg" /> <!-- 下一级 --> <img src="./img/img.jpg" /> <!-- 上一级 --> <img src="../img/img.jpg" /> <!-- 绝对路径 --> <img src="D:\html\img\img.jpg" /> <!-- 网络路径 --> <img src="http://www.itcast.cn/images/logo.gif" /> </body> </html>
超链接标签
在 HTML 中,
<a>
标签用来定义超链接标签,作用是从一个页面跳转至另一个页面
超链接的语法规范
<a href="跳转目标地址" target="目标窗口的打开方式">文本或图片</a>
属性 | 说明 |
---|---|
href | 必须属性 ,制定目标网页的地址 |
target | 指定目标页面的打开方式,默认是 _self(当前窗口) ,还有 _blank(新开窗口) |
链接的分类
-
外部链接:跳转至自身网站以外的网页
-
内部链接:跳转至自身网站内部的其他网页
-
空链接:
href="#"
,可以点击,但不会跳转 -
下载链接:目标地址是一个文件地址,而不是网页地址
-
网页元素链接:标签内不仅可以添加文本,也可以插入图片、表格、音频、视频等,都可以将其变为超链接
-
锚点链接:内面内部跳转至指定页面位置,
href="#目标元素id"
-
14-超链接标签.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>超链接标签</title> </head> <body> <!-- 外部链接,当前窗口打开 --> <a href="https://www.baidu.com" target="_self">百度</a> <!-- 外部链接,新开窗口打开 --> <a href="https://www.baidu.com" target="_blank">百度</a> <!-- 内部链接,新开窗口打开 --> <a href="./09-图像标签.html" target="_blank">图像标签</a> <!-- 空链接 --> <a href="#">空链接</a> <!-- 下载链接 --> <a href="./img.zip">空链接</a> <!-- 图片链接 --> <a href="https://www.baidu.com"> <img src="./img.jpg" /> </a> <!-- 锚点链接 --> <div id="head"></div> <a href="#head">锚点链接</a> </body> </html>
HTML 中的注释和特殊字符
注释
如果需要在 HTML 文档中添加一些便于阅读和理解的文字,但又不想这些文字显示在页面上,就可以使用
注释标签
,HTML 中的注释以<!-- 文字内容 -->
表示,快捷键:Ctrl + /
特殊字符
在 HTML 中,有一些字符是无法直接显示在页面上,或者显示有问题,这时就需要特殊字符来帮助显示
特殊字符 | 代码 |
---|---|
| |
< | < |
> | > |
& | & |
¥ | ¥ |
© | © |
® | ® |
° | ° |
± | ± |
× | × |
÷ | ÷ |
² | ² |
-
16-注释标签和特殊字符.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>注释标签和特殊字符</title> </head> <body> <!-- 这段话不会显示在页面上 --> 百 度 1 < 2 <p>是段落标签 </body> </html>