前端HTML（一）—— HTML简介、网页的三要素：文本、图片、超链接

一、HTML简介

1、HTML：hyper text markup language
（1）HTML概念
html是超文本标记语言，用来描述网页的一种语言，专门用于写前端代码。
html不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markup tag）
html文档包含了html标签及文本内容，也叫做web页面。

二、HTML标签

1、html标签是由尖括号包围的可以被浏览器识别的并且定义的特殊单词或单词组，并且是成对出现的，比如和，第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被成为开放标签和闭合标签。
格式。

<标签>内容<标签>

2、HTML示例

（1） 标签：标签有助于浏览器正确显示网页。DOCTYPE声明不区分大小写

（2） 标签：描述了文档类型，表名这是一个按照html规范来书写的html文档；
（3） 标签：主要用于藐视页面的头部信息，包括但不限于页面设置；
（4） 标签：主要用于设置页面的基础信息，比如此处设置页面的编码格式为UTF-8，标签除了设置编码外，还可以设置更多其他属性；
（5） ；
（6） 标签：是网页标中最重要的标签，主要用于展示要在网页显示的内容；
（7） 网页注释：是一个特殊标记，主要用于对网页内容进行注释。/* */也可以注释；
（8） 单标签：只有开始标签，没有结束标签，单标签只有属性，没有内容；
（9） 双标签：又开始标签和结束标签，并且属性写在开始标签里面，内容写在两个标签中间。
（10） 背景颜色：使用background设置。

三、网页的三要素之文本标签(font)

1、文本是指需要处理网页的文本样式，使用标签

需要处理的文本

标签需要和属性一起使用才会有样式的效果，如：

需要处理的文本

2、属性是用于描述事物的特征，属性共有下几种：
（1）设置字体的颜色color；
（2）设置字体的大小size，取值范围1-7；
（3）设置字体的样式face，face的值只能够是能够识别的文本字体，如楷体、宋体等。

没有设置的字体

红色，1号，楷体

蓝色，7号，宋体

绿色，4号，微软雅黑

得到如下结果

3、其他标签
换行：
或者

加粗：需要加粗的文字或者需要加粗的文字
斜体：需要处理斜体的文字
下划线：需要下划线的文字
段落：

段落，会自动换行

标记语言：标记语言：是和css配合使用设置文本属性的
标题大小：

~~

，如

1号标题

，

1号标题

分割线：

---

需要加分割线的文字

需要加粗的字体没有加粗的字体需要加粗的字体

需要处理斜体的字体

加上下划线的字体
段落，会自动换行
能不能自动换行
1号标题
6号标题

得到

4、标签嵌套
① 位置一定要前后对应，采用镜面模式。
② 字体默认黑色、3号、微软雅黑。

四、网页的三要素之图像标签(img)

1、图片标签是一个单标签，是空标签，只包含属性，并且没有闭合标签。

2、语法

① 在img标签里面，必须要和src属性一起使用，才会产生一张图片。

3、src源属性：src是"source"，指存储图像的位置，源属性的值是图像的url地址。

4、url地址：分为相对路径和绝对路径。
绝对路径：以http或者https开头的网络服务器资源路径，对网络要求比较高。
相对路径：一存储在当前本地工程里面，可以通过自身文件为基准，找到对应的图片资源。
url地址不直接是盘符地址，不能被识别（保证安全性）。
（1） 如果图片资源和自身html文件在同一个目录下，url地址可以直接使用图片名，如：

或者

（2）如果图片资源和自身html文件在同一个目录的子目录下，则写成如下格式：

（3）如果图片资源和自身html文件不再同一个目录下，那么需要加上…/，如：

…/的作用是返回自身文件的上一层

5、width宽度属性和height高度属性

一般在开发的时候，为了保证图片的原样，高度和宽度只设置一个，因为图片会自动等比例缩放。

6、alt属性：设置当图片加载不出来的时候，文本提示。

7、title属性：设置当鼠标移动到图片上，显示的文字

五、网页的三要素之超链接

1、用于网页之间的跳转，使用超链接。

百度一下
eg1：绝对位置
百度一下
eg2：相对位置
百度一下

2、超链接其他的属性：target设置在点击超链接之后是否开启一个新的页面标签
（1）target = “_blank”，则点击超链接的时候，会打开一个新的超链接，默认是打不开的。
（2）target = “_self”，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
（3）target = “_parent”，属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
（4）target = “_top”， 属性作用使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
（5）target = “framename”，在指定的框架中打开被链接文档。

百度一下