# HTML的概述 ## HTML的概念 **HTML** 全称为 HyperText Markup Language,译为**超文本标记语言**。 HTML 不是一种编程语言,是一种描述性的**标记语言**。 **作用**:HTML是负责描述文档**语义**的语言。 ## 概览:超文本 所谓的超文本,有两层含义: (1)图片、音频、视频、动画、多媒体等内容,成为超文本,因为它们超出了文本的限制。 (2)不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件进行连接。即:超级链接文本。 ## 概念:标记语言 HTML 不是一种编程语言,是一种描述性的**标记语言**。这主要有两层含义: (1)**标记语言是一套标记标签**。比如:标签``表示超链接、标签``表示图片、标签`

`表示一级标题等等,它们都是属于 HTML 标签。 说的通俗一点就是:网页是由网页元素组成的,这些元素是由 HTML 标签描述出来,然后通过浏览器解析,就可以显示给用户看了。 (2)编程语言是有编译过程的,而标记语言没有编译过程,HTML标签是直接由浏览器解析执行。 ## HTML是负责描述文档语义的语言 HTML 格式的文件是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述语义,这些标签在浏览器页面上是无法直观看到的,所以称之为“超文本标记语言”。 接下来,我们需要学习 HTML 中的很多“标签对儿”,这些“标签对儿”能够给文本不同的语义。 比如,面试的时候问你,`

` 标签有什么作用? - 正确答案:给文本增加主标题的语义。 - 错误答案:给文字加粗、加黑、变大。 关乎“语义”的更深刻理解,等接下来我们学习了各种标签,就明白了。 # HTML的历史 ![image-20241215153322926](./01.初识HTML/image-20241215153322926.png) 其中,我们专门来对XHTML做一个介绍。 **XHTML介绍:** XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。 XHTML的主要目的是为了**取代HTML**,也可以理解为HTML的升级版。 HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。 XHTML与HTML4.0的标记基本上一样。 XHTML是**严格的、纯净的**HTML。 我们稍后将对XHTML的编写规范进行介绍。 # HTML的专有名词 - 网页 :由各种标记组成的一个页面就叫网页。 - 主页(首页) : 一个网站的起始页面或者导航页面。 - 标记: 比如`

`称为开始标记 ,`

`称为结束标记,也叫标签。每个标签都规定好了特殊的含义。 - 元素:比如`

内容

`称为元素. - 属性:给每一个标签所做的辅助信息。 - XHTML:符合XML语法标准的HTML。 - DHTML:dynamic,动态的。`javascript + css + html`合起来的页面就是一个 DHTML。 - HTTP:超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP:邮件传输协议,FTP:文件传输协议。 # 书写第一个 HTML 页面 我们打开 VS Code 软件,新建一个文件,名叫`test.html`(注意,文件名是`test`,后缀名是`html`),保存到本地。 - vscode下载地址:https://www.123865.com/s/BKNfTd-SUXKA提取码:6666 紧接着,在文件里,输入`!`,然后按一下键盘上的`Tab`键,就可以自动生成如下内容: ```html Document ``` 上面的内容,就是 html 页面的骨架。我们在此基础之上,新增几个标签,完整代码如下: ```html Document

我是三级标题

我是超链接,可以点击一下 ``` 标签写完之后,我们用 chrome 浏览器打开上面这个`test.html`文件,看看页面效果: 到此,第一个简单的 HTML 页面就写完了。是不是很有成就感? # HTML结构详解 HTML标签通常是成对出现的(**双边标记**),比如 `
` 和 `
`;也有少部分单标签(**单边标记**),如:`
`、`
`和``等。 属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。 ## html骨架标签分类 | 标签名 | 定义 | 说明 | | ------------------ | :--------: | :------------------------------------------------------ | | `` | HTML标签 | 页面中最大的标签,我们成为根标签 | | `` | 文档的头部 | 注意在head标签中我们必须要设置的标签是title | | `` | 文档的标题 | 让页面拥有一个属于自己的网页标题 | | `` | 文档的主体 | 元素包含文档的所有内容,页面内容 基本都是放到body里面的 | ## 快速生成html的骨架 在 VS Code 中新建 html 文件,输入`!`,按 `Tab`键后,自动生成的代码如下: ```html Document ``` # 标题标签 标题使用`

`至`

`标签进行定义。`

`定义最大的标题,`

`定义最小的标题。具有align属性,属性值可以是:left、center、right。 代码举例: ```html Document

H1:学前沿IT,到英格科技!

H3:学前沿IT,到英格科技!

H3:学前沿IT,到英格科技!

H4:学前沿IT,到英格科技!

H5:学前沿IT,到英格科技!
H6:学前沿IT,到英格科技!
``` # HTML 注释 HTML 注释的格式如下: ```html ``` # 段落标签`

` 段落,是英语“paragraph“缩写。 **作用**:可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来,离不开段落标签。就如同我们平常写文章一样,整个网页也可以分为若干个段落。 代码举例: ```html

This is a paragraph

This is another paragraph

``` 属性: - `align="属性值"`:对齐方式。属性值包括left center right。 HTML标签是分等级的,HTML将所有的标签分为两种: - **文本级标签**:p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。(a标签里不能放a和input) - **容器级标签**:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。 从学习p的第一天开始,就要牢牢记住:**p标签是一个文本级标签,p里面只能放文字、图片、表单元素**。其他的一律不能放。 错误写法:(尝试把 h 放到 p 里) ```html

我是一个小段落

我是一级标题

``` 浏览器不允许你这么做,我们使用Chrome的F12审查元素发现,浏览器自己把p封闭掉了,不让你去包裹h1。 PS:Chrome浏览器是HTML5支持度最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。 # 水平线标签`
` > horizontal 单词的发音:[ˌhɒrɪˈzɒntl]。 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。 代码举例: ```html Document

自古情深留不住


总是套路得人心

``` 属性介绍: - `align="属性值"`:设定线条置放位置。属性值可选择:left right center。 - `size="2" `:设定线条粗细。以像素为单位,内定为2。 - `width="500"`或`width="70%"`:设定线条长度。可以是绝对值(单位是像素)或相对值。如果设置为相对值的话,内定为100%。 - `color="#0000FF"`:设置线条颜色。 - `noshade`:不要阴影,即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。 # 换行标签`
` 如果希望某段文本强制换行显示,就需要使用换行标签。 ```html This
is a para
graph with line breaks ``` # `
`和``标签 div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。想必你应该听说过“div + css”布局。 ## div和span的介绍 - **div标签**:可以把标签中的内容分割为独立的区块。必须单独占据一行。 - **span标签**:和div的作用一致,但不换行。 div标签的属性: - `align="属性值"`:设置块儿的位置。属性值可选择:left、right、 center。 ## div和span的区别 ``和`
`唯一的区别在于:``是不换行的,而`
`是换行的。 如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。 div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。 div标签是一个**容器级**标签,里面什么都能放,甚至可以放div自己。 span也是表达“小区域、小跨度”的标签,但只是一个**文本级**的标签。 就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。 span举例: ```html

简介简介简介简介简介简介简介简介 详细信息 购买

``` div举例: ```html
``` 这种模式叫做“**div+css**”:**div标签负责布局、结构、分块,css负责样式**。 # 内容居中标签 `
` 此时center代表是一个标签,而不是一个属性值了。只要是在这个标签里面的内容,都会居于浏览器的中间。 到了HTML5里面,center标签不建议使用,建议使用css布局来实现。 # 预定义(预格式化)标签`
`

含义:将保留标签内部所有的空白字符(空格、换行符),原封不动地输出结果(告诉浏览器不要忽略空格和空行)。

说明:真正排网页过程中,`
`标签几乎用不着。

# 字体标签

## 特殊字符(转义字符)

- ` `:空格	(non-breaking spacing,不断打空格)
- `<`:小于号(less than)
- `>`:大于号(greater than)
- `&`:符号`&`
- `"`:双引号
- `'`:单引号
- `©`:版权`©`
- `™`:商标`™`
- `绐`:文字`绐`。其实,`#32464`是汉字`绐`的unicode编码。

要求背诵的特殊字符有:` `、`<`、`>`、`©`。

比如说,你想把`

`作为一个文本在页面上显示,直接写`

`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到**转义字符**。应该这么写: ```html 这是一个HTML语言的<p>标签 ``` 字符代码查询表 | 特殊字符 | 描述 | 字符的代码 | | :------- | :------------- | :--------- | | | 空格符 | ` ` | | < | 小于号 | `<` | | > | 大于号 | `>` | | & | 和号 | `&` | | ¥ | 人民币 | `¥` | | © | 版权 | `©` | | ® | 注册商标 | `®` | | ° | 摄氏度 | `°` | | ± | 正负号 | `±` | | × | 乘号 | `×` | | ÷ | 除号 | `÷` | | ² | 平方2(上标2) | `²` | | ³ | 立方3(上标3) | `³` | ## 下划线、中划线、斜体 - ``:下划线标记 - ``或``:中划线标记(删除线) - ``或``:斜体标记 ## 字体标签``(已废弃) 属性: - `color="红色"`或`color="#ff00cc"`或`color="new rgb(0,0,255)"`:设置字体颜色。 设置方式:单词 \ #ff00cc \ rgb(0,0,255) - `size`:设置字体大小。 取值范围只能是:1至7。取值时,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。 - `face="微软雅黑"`:设置字体类型。 举例: ```html vae ``` ## 上标`` 下标`` 上小标这两个标签容易混淆,怎么记呢?这样记:`b`的意思是`bottom:底部` 举例: ```html O2 53 ``` # 超链接 ## 外部链接:链接到外部文件 举例: ```html 点击进入另外一个文件 ``` a是英语`anchor`“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。 href(hypertext reference):超文本地址。读作“喝瑞夫”,不要读作“喝夫”。 当然,我们也可以直接点进链接,访问一个网址。举例如下: ```html 点我点我 ``` ## 锚链接 **锚链接**:给超链接起一个名字,作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就可以利用锚链接。 首先我们要创建一个**锚点**,也就是说,使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下: ```html Document 顶部






















    
回到顶部 ``` ![image-20241217102544576](./01.初识HTML/image-20241217102544576.png)上图中解释: 第11行代码表示,顶部这个锚的名字叫做name1。 然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了`#name1`)。注意**上图中红框部分的`#`号不要忘记了**,表示跳到名为name1的特定位置,这是规定。如果少了`#`号,点击之后,就会跳到name1这个文件或者name1这个文件夹中去。 如果我们将上图中的第28行代码写成: ```html 回到顶部 ``` 那就表示,点击之后,跳转到`a.html`页面的`name1锚点`中去。 说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的。 ## 邮件链接 代码举例: ```html 点击进入我的邮箱 ``` 效果:点击之后,会弹出outlook,作用不大。 ## 超链接的属性 - `href`:目标URL - `title`:悬停文本。 - `name`:主要用于设置一个锚点的名称。 - `target`:告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值: - `_self`:在同一个网页中显示(默认值) - `_blank`:**在新的窗口中打开**。 - `_parent`:在父窗口中显示 - `_top`:在顶级窗口中显示 `title`属性举例: ```html 我是超链接 ``` 效果如下: ![image-20241217102937417](./01.初识HTML/image-20241217102937417.png) `target`属性举例: ```html 链接的内容 ``` blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,无需解释。 也就是说,如果不写`target=”_blank”`那么就是在相同的标签页打开,如果写了`target=”_blank”`,就是在新的空白标签页中打开。 ## 案例1 分清楚img和a标签的各自的属性 区别如下: ```html ``` ## 案例2 a是一个文本级的标签 比如一个段落中的所有文字都能够被点击,那么应该是p包裹a: ```html

段落段落段落段落段落段落

``` 而不是a包裹p: ```html

段落段落段落段落段落段落

``` a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。 # img标签介绍 ## 介绍 img: 英文全称 image(图像),代表的是一张图片。 如果要想在网页中显示图像,就可以使用img 标签,它是一个单标签。语法如下: ```html ``` ## 能插入的图片类型 - 能够插入的图片类型是:jpg(jpeg)、gif、png、bmp等。 - 不能往网页中插入的图片格式是:psd、ai等。 HTML页面不是直接插入图片,而是插入图片的引用地址,所以要先把图片上传到服务器上。 ## img标签的`src`属性 这里涉及到图片的一个属性: - `src`属性:指图片的路径。英文名称 source。 在写**图片的路径**时,有两种写法:相对路径、绝对路径 ### 图片的相对路径 相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和上一层目录。 举例1: ```html ``` 相对路径不会出现这种情况: ```html aaa/../bbb/1.jpg ``` `../`要么不写,要么就写在开头。 举例2: ```html ``` 上方代码的意思是说,当前html页面有一个并列的文件夹`images`,在文件夹`images`中存放了一张图片`1.jpg` 效果: ```html ``` ![image-20241217104528260](./01.初识HTML/image-20241217104528260.png) 相对路径的面试题。现有如下文件层级图: ![](./01.初识HTML/20170630_1133.png) 问题:如果想在index.html中插入1.png,那么对应的img语句是? 分析: 现在document是最大的文件夹,里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面,上一级就是work文件夹,上两级就是document文件夹。通过document文件夹当做一个中转站,进入photo文件夹,看到了1.png。 答案: ```html ``` ### 图片的绝对路径 绝对路径包括以下两种: (1)以盘符开始的绝对路径。举例: ```html ``` (2)网络路径。举例: ```html ``` ### 相对路径和绝对路径的总结 相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的。相对路径使用有一个前提,就是网页文件和你的图片,必须在一个服务器上。 问题:我的网页在C盘,图片却在D盘,能不能插入呢? 答案: 用相对路径不能,用绝对路径也不能。 注意:可以使用file://来插入,但是这种方法,没有任何意义!因为服务器上没有所谓c盘、d盘。 下面的方法是行的,但是没有任何工程上的意义,这是因为服务器没有盘符,linux系统没有盘符: ```html ``` **总结一下**: 无论是在 a 标签还是 img 标签上,如果要用路径。只有两种路径能用,就是相对路径和绝对路径: - 相对路径从自己出发,找到别人。 - 绝对路径,就是`http://`或者`https://`开头的路径。 - 绝对不允许使用`file://`开头的文件,这个是完全错误的!