HTML 21 天入门：初识 HTML

admin

2024年10月19日 22:10 本文热度 359

HTML 页面构成

还记得咱们前面运行的 Hello World 页面代码吗？咱们一起来看看它的结构。

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>我的第一个页面</title>   </head>    <body>     Hello World, Updated   </body> </html>

除了第一行有一个全大写的DOCTYPE，其它都是小写。

DOCTYPE 指定此文件的格式为 html。

HTML 文件里出现的节点称为 HTML 元素，它本身不区分大小写。比如，最顶层的元素，写成 HTML 或 html 都可以，但是约定俗成用小写。

一个 HTML 文件里不可或缺的元素，是 head 和 body。基本结构如下：

<html>   <head></head>   <body></body> </html>

如果把一个 HTML 页面理解成一个人的话，头(head)和身体(body)是必须的，但同时还有一些其它东西也是必须的。我们一个一个说。

head 元素

网页的 head 元素就像人的头一样，包含了一些内容。但要知道，这些内容并不会真正体现在网页显示上，但它们也非常重要。

title 元素

网页标题元素，它不显示在网页中，而是显示在浏览器最上面的。下面截图里显示的“我的第一个页面”。

<title>我的第一个页面</title>

除了 title 元素之外，可以添加在 head 里的重要元素还有: <link>, <style>, <script>, <meta>。

link 元素

字面意思是链接，理解为把要在这个网页使用的资源链接过来，以便当前网页能找到并使用。

当然，不是所有的资源都能链接到网页使用，这里常用是样式表(CSS)文件和网站图标(favicon)文件。

下面引用了外部一个路径为 css/style.css 的文件。

<link rel="stylesheet" href="css/style.css" type="text/css" />
下面链接了一个网站图标。默认情况下，把名称为 favicon.ico 的图片放到网站的根目录，即可使用网站图标。但如果你有多个图标想在不同的设备上使用，那么可以通过如下的方式链接多个网站图标进来。

<link rel="shortcut icon" href="/favicon.ico" />

style 元素

样式元素，用于在当前网页编写只被当前网站使用的样式。

<style>   body {     font-size: 12px;   } </style>

script 元素

脚本元素，用于引用 javascript 脚本，有两种方式使用

引用外部脚本文件

<script   type="text/javascript"   src="js/jquery/jquery.min.js?ver=3.6.0" ></script>

引用外部的 jquery 脚本文件。

直接在当前网页编写脚本代码
```
<script>   alert("message from page"); </script> 
```
在当前网页里执行的脚本代码。

meta 元素

描述了一些基本的元数据，不会显示在页面上，但是会被浏览器解析。

通过使用 meta 元素对网页所展示的内容进行描述，而这些信息会被搜索引擎识别并收录，在其它用户使用搜索引擎搜索时展现。

SEO（Search Engine Optimization）即搜索引擎优化，可以通过对 meta 元素里的描述信息进行有针对性的改进，以便获得在搜索引擎里的高排名。这么做帮助我们的站点被正确收录和展示，能提高站点的曝光，从而获得更多的访问。

<meta   name="keywords"   content="为搜索引擎定义关键词，以逗号分割。比如：HTML, CSS" /> <meta name="description" content="为网页定义描述内容。比如：免费的HTML教程。" /> <meta name="author" content="定义该网页的作者。比如：北果子" />

body 元素

刚才说了那么多 head 元素，在 body 里，它能使用的元素更多，这些元素，都是用来在网页上显示内容的。

比如说，用于显示文章标题的 h1,h2,h3,h4,h5,h6，用于显示图片的 img 元素，用于显示表格的 table 元素等等。

这些元素本身都有着丰富的属性，在接下来的章节里，会逐一讲解每一个常用的元素，通过练习，熟悉这些元素的使用。

HTML 元素

以上说的都是 HTML 元素，元素有自己特定的写法和要求。当我们谈论一门编程语言的时候，常常说到语法，如果说 HTML 也有语法的话，那它的语法就指的是元素的语法。

元素有起始标签和结束标签，比如:

<html>是起始标签，它的结束标签是</html>。
<p>是起始标签，它的结束标签是</p>。
<h1>是起始标签，它的结束标签是</h1>。

注意到了吗，元素的结束标签，就是在起始标签字母前加上斜杠符号 /。

显示在网页上的内容，是元素起始标签和结束标签之间的内容。
特殊的元素有空内容，比如<hr>代表一条分割线，它不需要内容。
空元素在开始标签中关闭。也就是说上面提到<hr>元素，不需要写成<hr></hr>，而只需要写<hr>即可，简单不啰嗦，对吧。
绝大多数的元素有属性。属性的具体下面讲。
元素嵌套使用。从最简单的示例上就能看到 head 元素是出现在 html 元素里，这就是一种嵌套使用。

HTML 属性

属性为元素提供附加信息，它的形式也很简单，以 name="value"的方式出现在元素里。

<a href="http://www.baidu.com">这是一个链接示例</a>

这里的 href 就是属性，它的值是 http://www.baidu.com，为链接这个元素提供了链接的地址信息。

不同的元素有着自己的一些属性，而有些属性则是元素之间都具有的，如下：

属性	描述
class	定义元素的一个或多个样式类名(class name)
id	定义元素的唯一身份标识(id)
style	指定元素的内联样式(inline style)
title	描述元素的信息，作为提示使用。

具体的使用示例：

<h1   id="header"   class="h1"   title="这是一个指定了id为header，样式类为h1，指定了内联样式（文字颜色为红色）的h1元素。"   style="color: red" >   这是一个指定了id为header，样式类为h1，指定了内联样式（文字颜色为红色）的h1元素。 </h1>

展示

咱们把本章节的示例合并在一个文件 2-1.html 里，展现运行效果如下：

首先看到来自网页的消息。

接着便看到了一排红色的字，而且看到它下面显示了一排小的和它一样的文字，这便是来自于<title>的描述了，它只有当鼠标停留在内容上一会儿的时候才会显示。

总结

🍑 HTML 页面由 HTML 元素构成。
🍑 HTML 元素的根元素是 html，其次是 head 和 body。元素的使用是嵌套的。元素有起始和结束标签，也有不需要内容的空标签。
🍑 head 元素内的元素不体现在网页内容上。

该文章在 2024/10/22 12:37:49 编辑过

关键字查询

html

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。