- 什么是HTML?
- HyperTextMark-up Language,即超文本标记语言,是网页文档的主要语言。即:网页中主要都是一些 HTML 代码;(标记:<关键字> )(超:关键字、固定的格式来书写文本)
- 是解释执行语言,有浏览器解释执行;(赋值、for循环、等都是没有的),用什么来翻译解释HTML 语言呢?答:浏览器,IE、火狐。
- HTML 语言主要由 HTML 标签组成;
- HTML 标签可以描述文字、图像、动画、声音、表格、链接等;
- 静态网页也称为 HTML 页面或 HTML 文档,后缀为 html、htm。两者的区别:有的操作系统不认识四位的,一般是 3 位的,现在常用html。注意:文件保存时后缀名要一致,否则可能会出现错误。
- HTML 的补充
- HTML 语言有版本之分,最新的版本的 HTML5;
- 不同版本的 HTML 支持的标签有所不同;(因为:浏览器的内核不同)
- 不同的浏览器对不同版本的 HTML 支持情况也不同;
- 统一标签,不同的浏览器的解释也可能不一样;
- 同一个页面,在不同的浏览器中看到的效果可能不同。这就是 浏览器的兼容性问题。
- HTML的标签
- HTML 标签由尖括号包围的关键词构成,如:<html>;
- HTML 标签由成对出现的(双标签),也有单个出现的(单标签);如:双标签 <head> 内容 </head>; 单标签 <br> 换行 。⚠️ 双标签必须有</xxx>
- 例:<p> 互联网,你好!</p> 段落标签 ;
- <br/> 换行标签
- HTML 标签对 中的第一个标签是开始标签,第二个是结束标签。
- HTML 标签尽量用小写,所有单个标签都会以 / 结束。
- HTML 属性
- 属性为 HTML 标签提供附加信息;
- (1)HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多信息;
- (2)标签中可以有多个属性,但,属性总是以 名称/值 对的形式出现,如:name=“value”。
- (3)属性总是在 HTML 元素的开始标签中规定;
- (4)属性的值要始终加引号:双引号是最常见的,使用单引号也是没问题的。
例:<link href="
/assets/v2/bootstrap/css/bootstrap.css?6.16.1”rel=“stylesheet"/>,其中 :href= 是属性,
/assets/v2/bootstrap/css/bootstrap.css?6.16.1”rel=“stylesheet为属性的值。
- HTML 固定格式
- 例: HTML 链接由<a>标签定义,链接的地址在href 属性中指定:<a href=“http://www.mldn.cn”>魔乐科技</a>
- HTML 页面的基本结构
- HTML 页面的结构包括头部(Head)和主体(Body)两大部分。头部描述浏览器所需要的信息;主体包含所要说明的具体内容。基本结构如下:
<html>
<head>地址栏题目(标示),头部信息在这里设置,声明和标示(<title> 我们的第一个界面 </title>) </head>
<body> 内容,HTML文件的正文写在这里,和网页有关的内容 </body>
</html>
⚠️标签是可以相互嵌套的,我们需要知道谁是父级标签,谁是子级标签。
- HTML 页面结构说明
- 经常,在HTML 页面的第一行带有HTML 版本信息,版本信息也可以省略。
- HTML5 语法: <!doctype html> 或者<!DOCTYPE HTML>
- HTML4.0 版本的声明: <!DOCTYPE HTML PUBLIC “..//W3C//DTD HTML 4.0 Transitional//EN”>。HTML5 的声明已经简化了,变成了 <!doctype html>。
- 代码讲解
- <html> </html> 之间的文本 描述网页
- <body> </body> 之间的文本是 可见的页面内容
- <head> </head> 之间的文本 描述网页头信息
- <title> </title> 之间的文本 被显示为网页的标题
- <h1> </h1> 之间的文本 被显示为正文的一级标题
- <p> </p> 之间的文本 被显示为段落,即:换段标签。
⚠️ 保存的文本打开时乱码。解决办法:修改文本的编码方式为
Unicode (UTF-8) 即可。
- 标题标签(h)
- 标题是通过<h1> - <h6> 等标签进行定义的;
- <h1> 定义最大的标题,<h6> 定义最小的标题。它是成堆出现的。
- ⚠️确保将标题标签只用于标题,不要为了产生粗体或者大号的文本而实用标题。搜索引擎使用标题为您的网页结构和内容编制索引。
- 基本标签
- 段落标签(p):<p> 标签在HTML页面中创建段落,它是成对出现的。
- 水平线标签(hr):<hr>标签在HTML 页面中创建水平线,它是单个出现的。用途:是来分隔文章中的小节的一个办法。
- 换行标签(br):单个出现
- 空格标签( )
- 注释(!<-- -->):其间的内容为注释,可以提高HTML页面的可读性。
- 例子:
<p>第一段内容</p> <hr/>
<p>第二段内容</p> <hr/>
<p>第三段内容</p>
⚠️在HTML中没有换行的概念,所有的换行都是由<p>和<br>标签组成。也可以在软件中设置自带的换行功能。
- 图像标签(img)
- <img>标签:用于在HTML页面中创建图像。⚠️<img>标签是单标签,不写属性是不能正常使用的。
- <img>标签的常用的属性有:(1)src:设定图像的存储位置;(2)alt:为图像定义一串预备的可替换的文本,在浏览器中无法载入图像时,浏览器将显示这个代替性的文本。(3)width:设定图像的宽度,height:设定图像的高度。
- 路径
- 路径分 绝对路径和相对路径, 分 网络目录 ‘/'和硬盘物理路径’\'。
- 普通网站做链接的都是相对路径;
- 同级别:直接写文件名
- 上级别:../文件名
- 下级别: 目录名/文件名