Web前端开发：初识HTML

阅读：评论：0

Web前端开发：初识HTML

Web前端开发：初识HTML 由David发表在天码营

HTML也就是我们常说的网页。浏览器从服务器获取HTML文件，并显示给用户。

HTML（HyperText Markup Language，超文本标记语言）是为了创建网页而设计的语言。HTML是用一系列的HTML标签写成的，每种HTML标签都有对应的语义和大致的外观。html文件通常以.html作为后缀名。

接下来的介绍基于HTML5标准。

一个简单的HTML文件是这样的：

<html>
<head><title>Hello, Catty!</title>
</head><body><p>I like fruits!!!</p>
</body></html>

可以看到HTML是由成对的标签构成的。比如<p>和</p>、<body>和</body>。HTML文件的所有内容都应包含在<html>标签之中，<head>中的内容用来描述当前文件，<body>中的内容则被显示在页面上。

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

<title>中的内容显示在了标题栏中，而<p>（passage，段落标签）之间的内容显示在了页面上。<body>中只有一个<p>标签，接着我们来试试其他的标签！

除了上述的<p>标签之外，HTML提供了多种多样的标签来显示相应的内容，比如<h1>和<h2>标签：

...
<body><h1>Catie's Homepage</h1><h2>i am a little, </h2><p>I like fruits!!!</p>
...

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

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

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

...
<img src="./catty.jpeg">
...

同样保存后刷新浏览器，你会看到：

注意

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

你可能看到<img>标签并没有对应的关闭标签，这是因为<img>属于空元素，它不需要关闭标签。

HTML标签分为常规元素（normal element）和空元素（void element）。其中空元素是自关闭的（self-closing），不需要成对地添加关闭标签。

空元素包括：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source,track, wbr。

<ul>是无序列表（unordered list），用来显示一组<li>（list item）：

  <ul><li>Cherry</li><li>Peach</li><li>Strawberry</li></ul>

效果如下：

HTML中，常规元素都是可嵌套的，比如上述的<li>中，可以加一个超链接<a>标签。同时，我们把<ul>和<p>放在一个<div>（division，区域）下

<div><p>I like fruits!!!</p><ul><li>Cherry</li><li>Peach</li><li><a href=''>Strawberry</a></li></ul>
</div>

第三项的Strawberry将会显示为一个指向百度的超链接：

我们把上述的标签都放在一起，形成最终的页面：

所有的文件可以在本课的参考代码中找到。

HTML标签还有哪些呢？下面列举一些重要的HTML标签：

如果你好奇一共有多少HTML标签，或者某个标签的使用方法，请参见：.asp

更多文章请访问天码营网站

本文发布于:2024-02-01 04:29:19，感谢您对本站的认可！

标签：Web HTML

留言与评论（共有 0 条评论）