当前位置：首页 > news >正文

HTML零基础自学笔记（上）-7.18

news 2025/7/5 17:25:58

HTML零基础自学笔记（上）

- 参考：pink老师
- 一、HTML, Javascript, CSS的关系是什么?
- 二、什么是HTML?
- - - 1、网页，网站的概念
    - 2、THML的基本概念
    - 3、THML的骨架标签/基本结构标签
- 三、HTML标签
- - - 1、THML标签介绍
    - 2、常用标签
    - - 图像标签（单标签）
      - 链接标签
- 四、特殊字符

参考：pink老师

一、HTML, Javascript, CSS的关系是什么?

举一个很平常的列子，在我们平时上网冲浪在浏览器中搜索一个关键词时。也同时调用了他们，打个比方我要使用百度该网页来查询今天天气。
当我们打开百度网页时，所看到的首页的基本结构就是由HTML文件所书写的，在有了基本结构的基础上前端人员会在使用CSS为基础结构再次润色对基本结构的颜色样式进行设置，这一步会使所展示在我们面前的网页更加的美观。除此之外，我们要在百度网站上进行搜索，点击，等操作与该页面进行一个交互，这就时JavaScript的范畴了。
总结一下：将前端拟人化来看，HTML就是人的骨架组成，CSS是人的外观展示，（样貌、肤色等），JavaScript则是进行具体的动作

二、什么是HTML?

1、网页，网站的概念

网站是网页的集合体。拿百度网站举例:https://www.baidu.com/ 是百度网站，可以通过该网站搜索词条，查看新闻，查看视频图片，这些通过百度网站所点击，搜索的网页都是被百度网站的子集。
本质上来说网页是文本、图片、视频、音频等元素的集合。

2、THML的基本概念

HTML是超文本标记性语言(Hyper Text Markup Language) ，是一种用来描述网页的语言。
上面说到，网页是文本、图片等元素的集合。而HTML的作用就是编写想要呈现到网页上的元素的一种语言。网页实际上就是html文件，用户通过浏览器的可以直接看到html文件所呈现出的数据。

3、THML的骨架标签/基本结构标签

在这里插入图片描述
要想书写HTML文件，首先得搞清楚HTML的骨架标签的含义是什么才知道该从哪里入手。

<！DPCTYPE> 表示文件类型，文档类型声明标签。
<html>页面中的最大标签，也称为根标签。后面的lang代表该HTML页面的书写语言，zh-CN定义语言为中文。
<meta charset> meta标签是用来描述文档[[元数据]]的元素标签。charset定义文档的字符编码 UTF-8为万国码，基本上的字符都可以被识别。
<head> 文档的头部，在head标签中必须要设置的是title标签
<title>文档的标题–页面的网页标题
<body>文档的主体，页面基本内容都是放在body标签中

三、HTML标签

1、THML标签介绍

标签的语法规范以及标签类型：标签大多数都为双标签，有一首部分的标签为单标签。
双标签其语法格式为<html> </html> 第一个尖括号为开始标签，第二个尖括号结束标签
单标签语法格式：<br /> 只有一个标签
标签关系
标签关系分为包含关系和并列关系（也成为父子关系和兄弟关系）

<head><title> </title>
</head>
<body>
</body>

其中<head>标签与<body> 标签为兄弟关系；<head> 标签与<title> 标签为父子关系。

2、常用标签

标签名称	标签类型	标签释意
标题标签	双标签	h1~h6,将文本格式变成标签格式从1-6字体依次减小语法格式:`<h1> ...</h1>`
段落标签	双标签	将文本设置为一个段落，段落与段落之间会有空行隔开。语法格式:`<p>...</p>`
换行标签	单标签	该标签所在行将进行换行，强制重启一行。语法格式: `<br+空一格+/>`
`<div>&<span>标签`	双标签	该标签是一个盒子标签，无语义，用来装饰页面的可以存放图片等。语法格式：`<div>...</div>&<span>...</span>`
图像标签	单标签	用来定义在html文件中的图像`<img src="图像URL" />`（详情可下滑查看）
链接标签	双标签	用来连接可以跳转的文本或者图像`<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>`（详情可下滑查看）

文本格式化标签（标签名,为双标签）	标签释意
加粗	使文本加粗`<strong></strong>或<b></b>`
倾斜	使文本倾斜`<em></em>或<i></i>`
删除线	使文本效果增加删除线`<del></del>或<s></s>`
下划线	使文本效果增添下划线`<ins></ins>或<u></u>`

图像标签（单标签）

解释：在HTML标签中<img>标签用来定义在html文件中的图像。
语法：<img src="图像URL" /> 在书写img标签时 /可以不用加,在HTML5中去掉/也可以正确显示。
属性，属性含义：该标签的特性

属性名	属性含义及用法
src	图片路径，img标签的必须属性。图片路径可以跟相对路径和绝对路径 `<img src="图像URL" /`
alt	当图片无法显示时，将会显示alt中的文本 `<img src="图像URL" alt = "..."/>`
title	当鼠标悬停在图片上时将出现title属性定义的文本 `<img src="图像URL" title = "..."/`
width	设置图像的宽度，定义宽度值的单位为像素 `<img src="huanhuan.png" width="500" >`
heigth	设置图像的高度，单位为像素，语法同上
border	设置图像边框的粗细，单位为像素，语法同上

图像路径/文件路径

链接标签

属性：
- href:用于指定跳转目标的URL地址，语法格式： <a href="跳转目标" > 文本或图像 </a> （点击文本或图像即可跳转到设定的跳转目标。
- target：用来设置跳转链接的打开方式，默认在本页面打开_self,在新页面打开为_blank 语法格式：<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
- #：代表空链接，空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a >
链接分类

四、特殊字符

在这里插入图片描述