HTML是一种标记语言,这意味着它用来标记文档中的各个部分,已指定文档在打印件或者显示器上的显示方式。简单来说,HTML就是超文本标记语言。
这里补充一些东西,可能大家初学不知道,html
在哪里运行的,我习惯在vscode
上面写该语言。当然,也可以在记事本
里面运行。还有一点,HTML文档中大小写无严格规定。
HTML中的基本语法单位称为标签。一般来说,标签用于指定内容的类别。标签的语法是利用一对尖括号“ This is simple stuff.<>
”将标签名称包围起来。
注意:大部分标签都是成对出现,当然也有单标签,后面我们会学到。
如下是一行简单的代码:
解释:
(1)即为开始标签,
/
”符号;HTML文档和程序里面注释一样重要。浏览器会忽略掉HTML注释,这些注释只对人有用。注释的格式,如上图所示,可以单行和多行。
注意:除注释外,还有一些其他类型的文本出现在文档中,也会被浏览器忽视。会忽略掉无法识别 的标签,这里的标签就像其他高级语言里面的关键字,是规定约束好 的。此外还忽略掉 空行,如果要在显示结果里面显示空行,需要加上特定的标签。
1、每个HTML文档的第一行都是一个DOCTYPE
命令,它指定了该文档所遵循的特定SGML文档类型定义,这个地方,不是很好理解,通俗的来讲,就是在这个命令里面定义许多规则,写完整体代码之后,它会把代码和命令里面定义对比一下,看看有没有错误。
DOCTYPE html>
2、文档中必须有以下四个标签:
。
:在最开始的部分,
:在末尾部分。
而在里面会有一个特性
lang
,用于指定当前所用的语言,英语是“en
”,中文简体是“zh-cn
”,这里的cn
也是域名,这里在计算机网络里面会讲。
演示:
解释:
一个HTML文档包含两部分,头(head)部分和主体(body)部分。元素包多了文档的头部分,该部分提供了文档的相关信息,而没有提供文档内容。它总是包含两个简单元素:一个标题元素和一个
meta
元素。meta元素用来提供关于文档的额外信息。它不包含任何内容,而是通过特性指定信息。也就是所能表达的范围是8位,通常表达是UTF-8,也可以是16为32位,分别把8换成16和32。
<meta charset="utf-8">
这里面的反斜杠表示没有结束标签——开始标签和结束标签合为一个,即为我们之前提到的单标签。注意,也可以把斜杠去了。
我们来看一个基本的格式:
DOCTYPE html>
<html>
<head>
<title> 标题 title>
<meta charset="utf-8">
...
head>
<body>
...
body>
html>
我们来学习一些有哪些标签,它们是什么意思,又怎么用。
在文本前后加上即可。
演示:
DOCTYPE html>
<html>
<head>
<title> 标题 title>
<meta charset="utf-8">
head>
<body>
<p>
hello everyone
we begin to study
p>
body>
html>
大家有没有发现一个奇怪的现象,我在代码中打的既有多个空格,又有换行但是只显示空格,并且是一个空。这里就是我们之前讲的,在浏览器显示时候,会忽略掉HTML文档里面的空格和换行,需要用特定的标签来约定。
大家可以把下面代码写在自己的环境下试一下:
DOCTYPE html>
<html>
<head>
<title> 标题 title>
<meta charset="utf-8">
head>
<body>
<p>
<i>Hello,everyone.i>
p>
<p>
<b>Hello, <br>ereryone b>
p>
body>
html>
那么怎么样可以将文本原封不动的打印出来呢,我们引入pre
标签。
来看下面代码:
DOCTYPE html>
<html>
<head>
<title> Hi title>
<meta charset="utf-8">
head>
<body>
<pre>
<b>
你
们
好
啊
!b>
pre>
body>
html>
注意:我们要区分两个标签,一个是title
,另一个就是我们现在讲的标题——
.
这里的标签,最后显示出来的效果在这个位置:
而我们现在讲的标签,标题一共分为六级,它们按照数字的变化而导致字号的改变,来看一下代码:
DOCTYPE html>
<html>
<head>
<title> Hi title>
<meta charset="utf-8">
head>
<body>
<h1>hanmzh1>
<h2>hanmzh2>
<h3>hanmzh3>
<h4>hanmzh4>
<h5>hanmzh5>
<h6>hanmzh6>
body>
html>
<body>
<p>
<font size="5"> hanmzhifont>
p>
<p>
<font size="20"> hanmzhifont>
p>
body>
利用
标签,注意,这里依然是单标签,我们到现在,已经学到了两种单标签了,一个是行中断:
,另一个就是现在这个。
最常用的两种图片格式:可交换的图像格式(GIF)、联合图像专家组格式(JPEG)。
当前浏览器中绝大部分都是这两种格式,并且这两种格式文件可以压缩,能节约存储空间,通过Internt传输也比较快。
GIF图片文件扩展名为.gif
,JPEG图片文件扩展文件为.jpg 或者 .jepg
。最近还日趋流行的另一种图片格式为PNG,把它压缩后,并没有降低图片的清晰度,因而内存要占比前两种多。
是一个行内元素,用于指定将要显示在文档中的图片。注意,这个元素没有内容,所有要在开始标签中带有一个斜杠,并没有结束标签,也是为单标签。
元素里面包含了两个特性:
src
和alt
。
解释:
src
:可以指定包含的图片文件
alt
:当图片无法显示时,在本应显示图片的位置出现的文本。
看一下列子:
DOCTYPE html>
<html>
<head>
<title> Hi title>
<meta charset="utf-8">
head>
<body>
<img src="han.jpg",alt="图片显示错误">
body>
html>
效果如下:
可以看见,图片显示出来了。
这里需要有两个注意点:
(1)图片格式,没有完全显示出,需要借助滚动来看,这样子过于麻烦,那么如何减小像素呢?
(2)这点非常重要,一定要把该图片文件,放到你建立的html文件里面,否则显示不出,如下图所示:
img
里面还有另外两个可选特性:width
、height
。
加上两行代码就可以了:
大家先思考一下:html
和网页之间是什么关系?
解答:html
是一种超文本标志语言,最中运行环境是浏览器的网页。
书上的解释过于复杂,我来简化一下:
所有链接通过锚元素中的特性指定,这也是一个行内元素。
格式:
href
后面url地址是绝对地址,就是根目录开始的路径,而后面的圣诞节这三个字是在html运行后,在页面上显示的超文本链接,点击就可以进去,也相当于重命名。