简单地认识一下 HTML

时间 2019-12-08

标签简单认识一下 html 栏目 HTML 繁體版

原文原文链接

简单复盘一下 HTML。css

一、HTML

什么是 HTML？HTML 是 Hyper Text Markup Language 的简写，译成中文是「超文本标记语言」。html

顾名思义，超文本，就是不止于文本，视频、音频、图片等等均可以，说到底就是一种特殊的文档。HTML 构建了一个网页的基本骨架，TA 是用来描述网页的一种语言。浏览器

二、HTML 有多简单？

HTML 简单到只须要一个记事本就能编写。新建一个 msunh.txt 文档，输入「我是玖柒后」保存，将扩展名改成 .html ，浏览器打开就能直接看到左侧内容，F12 进入 Elements 看到如右侧内容：安全

红框内的 html、head、body 标签都是浏览器自动加上的，右键查看源代码或者编辑 msunh.html 文档，你会发现除了「我是玖柒后」这五个字以外并无其余内容。bash

固然，这里是不建议用记事本进行开发的，这是为了你的生命安全考虑（人生苦短）。建议使用 Visual Studio Code，舒服的一批。学习

三、HTML 的基本组成

一个简单的网页组成以下：网站

<!Doctype html>
<html>
  <head>
      <title>我是玖柒后</title>
  </head>
  <body>
    「我是玖柒后」
  </body>
</html>
复制代码

四、各类各样的零件

上面说的 html、head、title、body 被称之为 HTML 元素，也就是各类各样的零件、器官。ui

除了 <br/> 、<hr/>、<img/>、<input/> 等少部分自闭合标签外，元素的开始标签和结束标签必须成对出现，例如：<html></html>。搜索引擎

这些元素能够互相嵌套，这个“人”的全部部位都是嵌套而成，要想长得好，先把架子搭好。编码

关于 HTML 更多的介绍，能够去看一下网上的文档。这里给你们介绍一个网站：MDN。不吹不擂，看了你就知道了。

MDN 传送门：

HTML（超文本标记语言）

五、head 标签

标签被看作是网页的头。

TA 里面一般会有 title、meta、style、link、script 这几种标签，title 比较简单，就是在窗口处显示网页的名称。

meta 是比较重要的一个辅助标签，有点相似于我的档案，正常浏览咱们是不会在网页中看到的，一块儿了解一下 meta 标签常见形式：

// 定义页面的编码方式，国内一般都是用 UTF-8
<meta charset="UTF-8">
// 向搜索引擎说明网页的关键词
<meta name="keywords" content="我是玖柒后">
// 向搜索引擎说明站点的主要内容
<meta name="description" content="我是玖柒后">
// 表示页面的可见区域
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
// 说明主页制做所使用的文字以及语言
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
还有一些其余的属性，这里就不一一赘述了。
复制代码

style 和 link 同样，都是在在网页中引入 CSS 样式，后续会详细写 CSS，这里简单带过。

// 引入外部的 css 文件
<link href="style.css">
// 直接在网页中定义
<style>
    body {
        color: red;
    }
</style>
复制代码

script 是引入 JavaScript 的方式，和 CSS 同样，能够引入，也能够直接在网页中定义，引入的话后缀名为 .js，但不论是引入仍是直接定义都是用 script 元素。

// 引入外部 js 文件
<script src="index.js"></script>
// 直接定义
<script>
  console.log("我是玖柒后");
</script>
复制代码

六、其余标签

除了在 head 中的这些标签外，HTML 中还有不少其余标签，好比 div、span、img、table、a、p 等等。

这些标签能够用来展现文字、图片、表格等，TA 们之间还能够相互嵌套，例如：

<a class="title"><img src="photo.jpg" /></a>
复制代码

其中 a 标签是成对存在，因此是，而 img 是自闭和标签，结尾用上 / 便可，不写也没多大事，只是更规范一点。class 是 CSS 选择器，这个后面再说，src 表示引用的图片路径。

有些标签是自带样式的，上面那些标签可能看不出来，以 h1~h6 为例。（表示标题）

你会发现 TA 们的大小是不一样的，这个能够看作是“天赋”，就好用一样的力气比打屁股和打脸，感觉到的疼痛是不同的（好像这么形容有点牵强），反正是说不少标签是具备「语义」的。

七、H5 语义化标签

在 HTML5 当中新增了不少语义化的标签，例如：header、footer、nav、article、address 等等，是否是一看就大概知道是用来描述哪些部分了？

HTMl 标签语义化，简单来讲，就是让标签有含义，就比如直接告诉你这是个什么器官、什么部位，而不用再去用其余标签拼凑。

给某块内容用上一个恰当合适的标签，能使页面有良好的结构，也更容易看懂这块的内容是什么，且利于搜索引擎收录。

在之后的页面设计中，慢慢地将使用语义化标签养成习惯，方便本身也方便他人。

八、总结

这篇文章看完确定不能掌握 HTML，但了解 HTML 应该是没什么问题的，HTML 相比 CSS 和 JavaScript 来讲比较简单。

想要继续深刻学习 HTML，多看文档，重要的是还得多写，这个和抄书有点相似，抄的多了，肚子里天然多多少少会有点墨水。

最后就是实践了，实践是的最好的学习方式之一，也能更好地理解使用学到的知识。

本文为我的复盘，若有错误或者不完善的地方，欢迎留言批评指正!

公众号「我是玖柒后」首发，分享即学习！

1. 简单地认识一下 HTML
2. 简单认识一下ACL
3. 12-简单认识下margin
4. HTML认识一
5. JVM-简单认识(一)
6. jsp 简单认识
7. RabbitMQ简单认识
8. 来认识一下HTML中的标签~
9. CopyOnWriteArrayList简单认识
10. 简单认识JAVA
更多相关文章...
• ASP.NET Web Pages - HTML 表单 - ASP.NET 教程
• ASP.NET Web Forms - HTML 表单 - ASP.NET 教程
• Github 简明教程
• RxJava操作符（一）Creating Observables