5分钟了解HTML的核心知识

点击上面“天码营”,加入我们,快速成长~

「内容简介」HTML(HyperTextMarkupLanguage,超文本标记语言)也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。HTML是为了创建网页而设计的语言。

HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以.html作为后缀名。下文中HTML的相关内容均基于HTML5标准来介绍。

编写HTML

HTML是一种用于创建网页的语言,用HTML语言编写的网页我们称为HTML文件,一般以.html后缀来命名。一个最简单的HTML文件可以是这样的:

!DOCTYPEhtmlhtmlheadtitleHello,Catty!/title/headbodypIlikefruits!!!/p/body/html

我们对上述代码稍作解释。第一行DOCTYPE声明并非页面的一部分,它属于浏览器指示,像浏览器说明当前HTML文件使用的HTML语言版本。

接着是一个html标签,标签要用尖括号包含起来,该标签与文件尾的/html成对。一对标签之间的内容均为该标签的子元素,比如html标签有两个子元素:head和body。

其中head包含的内容往往用来设置HTML的元信息(metadata)。比如外部样式表、页面脚本、文件编码、视口信息等。

body中的内容则被显示在页面上。上述body标签包含一个子标签p,它表示一个段落(paragraph)。

查看HTML文件

把上述文本保存为hello.html,使用浏览器打开它,你会看到:

title中的内容显示在了标题栏中,而p(passage,段落标签)之间的内容显示在了页面上。body中只有一个p标签,接着我们来试试其他的标签!

h标签

大多数HTML标签都是用来显示和输入信息的,它们被用在body标签之中。除了上述的p标签之外,HTML提供了多种多样的标签来显示相应的内容,比如h1(一级标题)和h2(二级标题)标签:

...bodyh1CatiesHomepage/h1h2iamalittle,cutecatie.../h2pIlikefruits!!!/p...

把它们添加到我们的hello.html中并刷新浏览器,便能看到这样的效果:

事实上,除了上述的h1和h2,HTML提供了一共六级标题标签。

img标签

img标签用来显示图片,其src属性用来指定图片的路径。在p前面加入一个img:

...imgsrc=./catty.jpeg...

同样保存后刷新浏览器,你会看到:

你要保证hello.html所在目录下存在一个catty.jpeg文件。它可以是任何图片文件,你可以去本节课的参考代码中下载。

细心的读者可能已经发现了,img标签并没有对应的关闭标签,这是因为img属于空元素,它不需要关闭标签。

HTML标签分为常规元素(normalelement)和空元素(voidelement)。其中空元素是自关闭的(self-closing),不需要成对地添加关闭标签。空元素包括:area,base,br,col,


转载请注明:http://www.aierlanlan.com/rzgz/828.html