首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML学习——第0篇

HTML学习——第0篇

作者头像
zy010101
发布2019-05-25 19:54:56
4030
发布2019-05-25 19:54:56
举报
文章被收录于专栏:程序员程序员

版权声明:本文为博主原创文章,转载请注明博客地址: https://cloud.tencent.com/developer/article/1433334

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>元素来创建段落,浏览器在显示段落的时候,通常会空一行。

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

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

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

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

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

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年01月22日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档