学前端应该听说过“前端三剑客”，html、css、js。如果能够精通这三剑客，那么恭喜你，前端对你来说已经易如反掌啦。今天这一章呢，我们就来学习一下三剑客中的第一个剑客——HTML
超文本标记语言HTML
HTML(Hypertext Markup Language)超文本标记语言，看它的名字我们就需要记住，HTMl不是编程语言，而是标记语言。它是由一系列元素构成的，接下来我们就要了解什么是元素？
- 元素：开始标签、结束标签与内容元素相结合就是完整的元素
- 开始标签：包含内容的符号
- 结束标签：与开始标签相比多了一个斜杠
- 内容：被开始、结束标签包裹的
//简单的一个元素
<div>我是元素的内容</div>
//<div>就是开始标签
//</div>就是结束标签这样一个简单的div元素就写出来啦
元素类别
- 内联元素：通常出现在块级元素中，不会导致文本换行，只能设置左右的margin
- 块级元素：以块的形式出现，单独成一行。可设置左右上下margin、padding等
- 空元素：空元素用来插入一些东西。它们的特点就是只有一个标签
换一种角度想，元素可以分为单标签和双标签。后续我们学习标签的时候需要记住常用的单标签和双标签。
<div></div> //双标签
<img /> //单标签 插入图片元素属性
属性是描述事物特征的，元素属性顾名思义就是描述元素的，比如一个div中class属性。属性必须包含 一个空格；一个属性值。对于一些标签而言，没有属性就达不到想要的效果，比如上面我们提出的单标签img，只有<img />是不会显现出图像必须加上url
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D3062469291%2C1117322059%26fm%3D253%26app%3D120%26f%3DJPEG%3Fw%3D1200%26h%3D800&refer=http%3A%2F%2Fimg2.baidu.com&app=2002&size=w300&q=a80&n=0&g=0n&fmt=jpeg?sec=1645152899&t=b01e64b367e565c5f6be148e21afc962">
src就是属性布尔属性
这里我们先了解一下布尔属性，上面我们举的例子都有属性值，对于布尔属性而言，它是可以没有值的，这里面最经典的就是disabled属性。
<input type="text" disabled>我们先记住布尔有两种值 true和false，具体的在学习js基本数据类型时候会学到。
属性值单引号、双引号都可以，但是不能混用。如果同时用时记住外双内单（双引号在外，单引号在内）
了解HTML文档
现在就让我们打开编辑器，写一个我们简单的页面。如果没有编辑器，可以新建一个txt文档，把代码敲好之后，把文件后缀名变成html，然后用浏览器打开即可。是不是觉得很方便。
<!DOCTYPE html> //声明文档类型
<html> //根元素 包含整个页面
<head> //不在页面展示的数据，比如css样式 title等
<meta charset="utf-8"> //编码类型 记住就完了
<title>第一个页面</title>//网页标题，就是地址栏的名称
</head>
<body> //里面内容就是页面展示的内容
<p>你好，世界！</p>
</body>
</html>特殊字符
对于一些字符我们需要特殊编码
< —— <
> —— >
" —— "
' —— '
& —— &
空格 ——  注释
最后我们了解一下注释，对于初学者来说注释非常重要，可以帮助我们更好的复习。说道注释让我想到了一个段子，程序员最烦的两件事，第一件 看别人代码没写注释 ；第二件 自己写代码注释。哈哈！
<div>没注释</div>
<!-- <div>注释掉了</div> -->html注释<!-- -->注释掉的在页面不显示
js注释 js注释也很重要 就是 //
日常开发中我们可以利用快捷键Ctrl+?键进行注释
扫一扫
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
