1.html概述

平时我们打开一个网页,比如

​www.javayihao.top​

我们可以看到浏览器会展示一个有一定结构、好看的样式、动态效果的页面给我们,要想构成这样一个网页,需要的基本元素有三个,也被称为前端三剑客,即html+css+js

html简介_html

首先学习网页的基本结构——html,用来一个页面如何布局,有哪些东西(元素或者标签)的超文本标记语言,

什么是超文本标记语言?首先看看什么是文本?

我们打开记事本输入一句话,保存,这个文件就是一个文本。

我们再次打开将这句话用如下两个h1包裹,保存并将这个test.txt文件改为test.html

html简介_超文本_02

单击打开,出现加粗放大的效果

html简介_超文本_03

就是因为我们加入了h1(还有很多类似元素)这种文本——“超文本”,使得页面内可以出现标题(放大加粗),链接,甚至包含图片、音乐、视频等非文字元素,这里要强调的是这些超文本只是用来标记当前元素展示的形式,比如是标题还是链接或者图片,并不是描述当前元素的样式,即什么颜色、长宽、字体样式等,这些就是后面要学的css

test.html的文件是什么格式的文件?

可以简单的理解为html文件是一种网页文件,比如txt就是文本文件,png就是图片文件

 

 

HTML 标签

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

 

2.html完整结构

<!DOCTYPE html>
<html>
<head>
<meta>
<title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

html简介_超文本_04

                         公众号 java一号 更多java实战项目资料、技术干活。更重要的是小猿愿成为你编程路上的一个朋友!


首发公众号: java一号