HTML学习——第0篇

版权声明:本文为博主原创文章,转载请注明博客地址: https://blog.csdn.net/zy010101/article/details/85267209

HTML(HyperText Markup Language)译为“超文本标记语言”。现在已经发展到了第5个版本HTML5。这门语言由“W3C”维护。HTML写成的页面需要由web浏览器来解析,才能展现为我们看到的各种网页。实际的HTML发展是由各大web浏览器厂商在推动的。例如,微软,谷歌,苹果等厂商。

HTML语言的开发环境搭建是非常简单的,它只需要一个文本编辑器和一个web浏览器就足够了。我使用了notepad++这款文本编辑器以及Chrome浏览器。依照惯例,第一个HTML页面应该是下面这样的。

这只需要在new1.html这个文件中输入Hello World!,然后使用Chrome浏览器打开它即可。但是这并没有使用任何标记。HTML是超文本标记语言。

HTML的尖括号以及其内所写的字符(<>)表示一个“标签”。这就是所谓的标记。标签通常是成对出现的,即:开标签和闭标签。但是也有极少的是只有开标签。一对标签之间的内容是元素,浏览器呈现给我们的正是元素的内容。尖括号里面的文本解释了标签的作用。给上面的Hello World!加上标签变成下面这样。

<html>
Hello World!
</html>

保存以后再Chrome浏览器中刷新一下页面,发现什么变化都没有,这是因为Chrome浏览器把纯文本也当做HTML来解析。所以前后的结果不会发生任何变化。<html>表明了下面的元素是HTML,告知浏览器去按照HTML的方式解析。但是为了适合于所有的浏览器,应当在使用HTML的时候,这个页面的所有信息都包含在开标签<html>和闭标签</html>之间。

一般而言,一个页面存在两个主要部分,head和body。

<head>:元素:它是页面的头部,包含页面的信息。例如标题和一些页面描述。

<body>元素:它是页面的主题,是我们想让浏览器显示的信息。

我们一般会在head之中放入页面的标题以及页面的编码方式。指定编码方式使用如下标签

<meta charset=utf-8>

这样就将编码方式设置为Unicode了。有个问题是现在的Chrome和Firefox都不支持更改编码方式。我们需要一个浏览器插件来解决这个问题。Chrome浏览器的插件名称叫“set character encoding”。更改以后的代码如下:

<html>
<head>
<title>
我的第一个HTML页面
</title>
<meta charset=utf-8>
</head>
Hello World!
</html>

刷新页面以后,更改编码方式为gbk(国标),显示结果如下。

<html>,<head>以及<body>三个元素构成了一个HTML文档的框架,它们是所有网页构建的基础。

例如下面的页面

<html>
<head>
<title>
或者所谓春天
</title>
<meta charset=utf-8>
</head>
<body>
<h1>或者所谓春天</h1>
<p>
或者所谓春天也不过就在电话亭的那边<br /> 
厦门街的那边有一些蠢蠢的记忆的那边<br /> 
航空信就从那里开始<br />  
眼睛就从那里忍受<br />  
邮戳邮戳邮戳<br />  
各种文字的打击<br />  
或者那许多秘密邮筒已忘记<br />  
围巾遮住大半个灵魂<br />  
流行了樱花流行感冒<br />  
总是这样,四月来时先通知鼻子<br />  
回家,走同安街的巷子<br />  
</p>
<p>
或者在这座城里一泡真泡了十几个春天<br />  
不算春天的春天,泡了又泡<br />  
这件事,一想起来就觉得好冤<br />  
或者所谓春天<br /> 
最后也不过就是这样子:<br />  
一些受伤的记忆<br />  
一些欲望和灰尘<br />  
一股开胃的葱味从那边的厨房<br />  
然后是淡淡的油墨从一份晚报<br />  
报导郊区的花讯<br />  
</p>
<p>
或者所谓的老教授不过是新来的讲师变成<br />  
讲师曾是新刮脸的学生<br />  
所谓一辈子也不过打那么半打领带<br />  
第一次,约会的那条<br />  
引她格格地发笑<br />  
或者毕业舞会的那条<br />  
换了婚礼的那条换了<br />  
或者浅绯的那条后来变成<br />  
变成深咖啡的这条,不放糖的咖啡<br />  
想起这也是一种分期的自缢,或者<br />  
不能算那么残忍除了有点窒息<br />  
</p>
<p>
或者所谓春天也只是一种轻脆的标本<br />  
一张书签,曾是水仙或蝴蝶<br />  
书签在韦氏大字典里字典在图书馆的楼上<br />  
楼高四层高过所有的暮色<br />  
楼怕高书怕旧旧书最怕有书签<br />  
好遥好远的春天,青岛<br />  
的春天,盖提斯堡<br />  
的春天,布谷满天<br />  
苹果花落得满地,四月,比鞋底更底<br />  
比蜂更高鸟更高,比内战内战的公墓墓上的草<br />  
</p>
<p>
而回想起来也不见得就不像一生<br />  
</p>
<p>
所谓童年<br />  
所谓抗战<br />  
所谓高二<br />  
所谓大三<br />  
所谓蜜月,并非不月蚀<br />  
所谓贫穷,并非不美丽<br />  
所谓妻,曾是新娘<br />  
所谓新娘,曾是女友<br />  
所谓女友,曾非常害羞<br />  
所谓不成名以及成名<br /> 
所谓朽以及不朽<br />  
或者所谓春天<br /> 
</p>
											——余光中
</body>
</html>

这个页面显示了余光中的诗《或者所谓春天》。显示效果如下。

可以看到,标题有了,但是没有居中,段落也有了,但是并不是一行行显示的。这是因为HTML只是告诉了浏览器这是什么,并未给的显示的具体细节,这需要样式表来支持。否则浏览器根据它的默认方式来显示。实际上这已经是一个HTML文档所需要的所有基础了,HTML5使用<!DOCTYPE html>来表示这是一个遵循HTML5标准的网页。使用这个能保证你的网页永远以正确的方式渲染。

HTML提供了6个级别的标题,使用元素<h1>到<h6>。其中<h1>是最大的字体,<h6>是最小的字体。当然也可以使用CSS来覆盖任何元素的大小与样式。

使用<p>元素来创建段落,浏览器在显示段落的时候,通常会空一行。

使用<br>元素来创建换行,它后面的内容会换行显示。它没有对应的闭标签。因为它之后没有任何内容。不需要闭标签。为了区别于成对出现的标签,我们将<br>通常写成<br />。并称呼它为“空元素”。使用<br />来换行显得很蠢。我们可以使用<pre>标签来使得文本与它写在HTML文档之中的格式保持完全一致。这样就不会自动换行,以及不忽略多个空格。HTML的注释是从<!--开始,直到-->结束。

在<body>内的所有元素可以分为两类。

块级元素:块级元素会在它的开始和结束都有一个换行符。例如<h1>,<pre>,<p>等。

行内元素:它不会引起浏览器换行显示,它作用于本行之内。例如<b>,<i>,<small>等。

严格意义上,行内元素不能包含块级元素。并且只能位于块级元素内。同时块级元素可以包含其他块级元素,也可以包含行内元素。

加上背景图片就漂亮多了。

HTML是用来表达结构的,或者表达一些简单的样式。这是HTML的主要工作。样式的工作交给了CSS。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券