5分钟了解HTML的核心知识

最新推荐文章于 2021-06-03 23:06:41 发布

天码营

最新推荐文章于 2021-06-03 23:06:41 发布

阅读量533

点赞数

分类专栏：天码营教程 Java Web开发全栈工程师之路文章标签： html html5 java web java

本文链接：https://blog.csdn.net/sinat_30389651/article/details/50771647

版权

天码营教程同时被 2 个专栏收录

82 篇文章 1 订阅

订阅专栏

Java Web开发全栈工程师之路

43 篇文章 2 订阅

订阅专栏

由David发表在天码营

HTML（HyperText Markup Language，超文本标记语言）也就是我们常说的网页。浏览器从服务器获取HTML文件，并显示给用户。HTML是为了创建网页而设计的语言。

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

编写 HTML

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

<!DOCTYPE html>
<html>
<head>
  <title>Hello, Catty!</title>
</head>
<body>
  <p>I like fruits!!!</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>（二级标题）标签：

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

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

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

img 标签

<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 标签

<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='http://www.baidu.com'>Strawberry</a></li>
  </ul>
</div>