Fork me on GitHub

html基础教程

html是什么

超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

简单来说,我们可以用HTML来创建网页

1.html文件的创建

html文件创建非常简单,只需要建立一个后缀为html的文件(可以使用新建记事本改后缀)
打开该文件即可进行编辑,如果要进行预览,可以在浏览器中打开该文件

html的基本格式

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

如上就是html的基本格式,可以很清楚地发现,主体是包含在 <html></html> ,
通常,html中一个元素有开始标记和结束标记,格式总是 <xxx></xxx> ,
(这里的<!DOCTYPE html>是DOCTYPE声明,也就是对浏览器进行声明文档类型)
我们把没有内容的HTML元素称为 空元素 ,空元素在开始标签中进行关闭(无需结束标志)
而每个元素(如上面的<xxx>)的”xxx”就叫这个元素的 标签
每个元素也有自己的属性,称作 属性头(头部)

了解了这么多,我们就可以开始讲每一个元素了

2.html网页标题

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
</body>
</html>

这里我们使用 <title>Hello World!</title> 声明了此网页的标题

注意:title一定要加在 <head></head> 中 (body是网页显示主体部分,而head是头部)

3.html标题

html标题是通过 <h1>-<h6> 标签进行定义的(数字1-6)
这些可见的元素我们就需要写入body中,例如:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>123</h1>
<h3>abc</h3>
</body>
</html>

如果没有错误的话,用浏览器打开就会显示出一个h1和h3标题

4.html链接

html链接是通过标签 <a> 来定义的, <a> 元素有一个属性头部 href ,例如:(以下代码都只展示body部分)

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

以上示例创建了一个标签 <a> ,在浏览器内单击它,就可以跳转到 百度 的网址

5.html图像

html图像是通过标签 <img> 来定义的,它包含属性src(图片链接),width(显示高度)和height(显示宽度)

1
<img src="https://www.baidu.com/img/bd_logo.png" />

在上面的示例中,创建了一个标签 <img> ,能够显示 百度 的logo,其中的 “https://www.baidu.com/img/bd_logo.png“ 是图片所在链接

通过上面的基础教程,可以了解到:

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性