web前端-html基础

 

简单介绍

html是超文本标记语言,是一种标记语言而不是编程语言,是用来描述网页的。

标记语言就是一套标记标签,使用标记标签来描述网页。

html文档也叫做web页面,包含html标签和文本内容。

html标签通常都是成对出现的,第一个标签是开始标签,第二个标签是结束标签,如<br> </br>

开始标签和结束标签也叫做开放标签和闭合标签。

浏览器的作用

浏览器是用来读取html文档的,读取后将其作为网页显示,并不会直接显示html标签,而是通过使用的标签来决定如何向用户展示html文档的内容。

html的网页结构:

DOCTYPE:

DOCTYPE 声明了文档的类型 ,有助于在浏览器中正确地显示网页,它不是一个html标签,是用来告知Web浏览器页面使用了哪种 html版本。

1
<!DOCTYPE html>

head标签:

head标签包含了文档的元(meta)数据,如定义网页编码格式为utf-8。 在html页面的头部声明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。

title标签:

title标签定义文档的标题 。

body标签:

body标签定义文档的主体,即网页可见的页面内容,该标签的结束标志为 。

html空元素

html空元素即为没有内容的 HTML 元素,html空元素应该在开始标签中关闭。

html空元素的关闭方法是在开始标签中添加斜杠,如br标签就是一个空元素,用于定义换行。

html换行

该标签定义为一个换行符,它可以理解为简单的输入一个空行,而不是用来对内容进行分段 。

1
<br />

html属性

属性就是为html元素提供的附加信息,属性一般位于开始标签内。

属性是以名称=值的方式存在的,如下,连接的地址就是在href属性中指定的。

1
<a href="https://www.baidu.com">这是一个链接</a>

注:属性值应该始终被包括在引号内,双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号

html标题

html的标题是通过<h1>---<h6>标签来定义的。是英文header标题的缩写。

h1是主标题,h2是副标题,h3、h4、h5、h6 依次递减字体的大小。

运行结果:

html段落

html的段落是通过标签p来定义的,是英文paragraph段落的缩写。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</body>
</html>

运行结果:

html链接

html链接是通过a标签来定义的,a标签也叫做anchor(锚点 )元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。

使用了href属性来描述链接的地址

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个标题</title>
</head>
<body>
<a href="https://www.baidu.com">点击跳转到百度</a>
</body>
</html>

运行结果:

html图片

HTML 图像是通过标签img来定义的。使用img元素来为你的网站添加图片,使用src属性指向一个图片的具体地址。

注:img元素是自关闭元素,不需要结束标记。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个标题</title>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2019/03/17/03/52/night-4060264_1280.jpg" width="600" height="400" />
</body>
</html>

运行结果:

html水平线

hr标签就是在html页面中创建水平线。可以用来分割内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个标题</title>
</head>
<body>
<p>第一个段落</p>
<hr />
<p>第二个段落</p>
<hr />
<p>第三个个段落</p>
<hr />
</body>
</html>

运行结果:

html注释

可以将注释插入html代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

1
<!-- 这是一个注释 -->