# HTML的概述
## HTML的概念
**HTML** 全称为 HyperText Markup Language,译为**超文本标记语言**。
HTML 不是一种编程语言,是一种描述性的**标记语言**。
**作用**:HTML是负责描述文档**语义**的语言。
## 概览:超文本
所谓的超文本,有两层含义:
(1)图片、音频、视频、动画、多媒体等内容,成为超文本,因为它们超出了文本的限制。
(2)不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件进行连接。即:超级链接文本。
## 概念:标记语言
HTML 不是一种编程语言,是一种描述性的**标记语言**。这主要有两层含义:
(1)**标记语言是一套标记标签**。比如:标签``表示超链接、标签` `称为开始标记 ,` 内容`表示图片、标签`
`表示一级标题等等,它们都是属于 HTML 标签。
说的通俗一点就是:网页是由网页元素组成的,这些元素是由 HTML 标签描述出来,然后通过浏览器解析,就可以显示给用户看了。
(2)编程语言是有编译过程的,而标记语言没有编译过程,HTML标签是直接由浏览器解析执行。
## HTML是负责描述文档语义的语言
HTML 格式的文件是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述语义,这些标签在浏览器页面上是无法直观看到的,所以称之为“超文本标记语言”。
接下来,我们需要学习 HTML 中的很多“标签对儿”,这些“标签对儿”能够给文本不同的语义。
比如,面试的时候问你,`
` 标签有什么作用?
- 正确答案:给文本增加主标题的语义。
- 错误答案:给文字加粗、加黑、变大。
关乎“语义”的更深刻理解,等接下来我们学习了各种标签,就明白了。
# HTML的历史

其中,我们专门来对XHTML做一个介绍。
**XHTML介绍:**
XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。
XHTML的主要目的是为了**取代HTML**,也可以理解为HTML的升级版。
HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是**严格的、纯净的**HTML。
我们稍后将对XHTML的编写规范进行介绍。
# HTML的专有名词
- 网页 :由各种标记组成的一个页面就叫网页。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记: 比如`
我是三级标题
我是超链接,可以点击一下
```
标签写完之后,我们用 chrome 浏览器打开上面这个`test.html`文件,看看页面效果:
到此,第一个简单的 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我是一个小段落
自古情深留不住
总是套路得人心
``` 属性介绍: - `align="属性值"`:设定线条置放位置。属性值可选择:left right center。 - `size="2" `:设定线条粗细。以像素为单位,内定为2。 - `width="500"`或`width="70%"`:设定线条长度。可以是绝对值(单位是像素)或相对值。如果设置为相对值的话,内定为100%。 - `color="#0000FF"`:设置线条颜色。 - `noshade`:不要阴影,即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。 # 换行标签`` 含义:将保留标签内部所有的空白字符(空格、换行符),原封不动地输出结果(告诉浏览器不要忽略空格和空行)。 说明:真正排网页过程中,``标签几乎用不着。 # 字体标签 ## 特殊字符(转义字符) - ` `:空格 (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`属性给那个特定的位置起个名字。效果如下: ```htmlDocument 顶部回到顶部 ``` 上图中解释: 第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 我是超链接 ``` 效果如下:  `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
```  相对路径的面试题。现有如下文件层级图:  问题:如果想在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://`开头的文件,这个是完全错误的!