本文创建时间：2018-06-16
HTML元素
开始标签 + 内容 + 结束标签
eg: <h1> h1是一级标题 </h1> //这是双标签元素
eg: <img src="image.png" > //这是单标签元素
在HTML中成对出现的结构就可以称为元素，但并不是所有的HTML元素都有成对的标签，HTML元素总是伴随着HTML属性出现，属性总是出现在元素的开始标签
HTML元素
HTML注释
<!-- 这就是注释，这里面放注释说明--> //这样的注释方式是HTML特有的注释方式
<!-- // 注释开始
.... // 注释内容 大多是对代码的说明
--> // 注释结束
HTML属性
HTML属性
一般属性都具有以下特征：
- 每个属性之间或与元素名之间都有一个空格隔开
- 属性名后面紧跟等号
- 属性值使用双引号包裹
但也有一些属性只有属性名，没有属性值，这种属性我们称之为布尔属性，如下disabled就是布尔属性，表示是否禁用，有该属性则为禁用：
<input type="text" disabled>
除此之外，我们还可以自定义属性来存储我们的一些数据以便 JS 使用。具体可参考：HTML data-* 属性。
属性分类（可分为以下三类）：
- 全局属性（只要是元素就可以有）：class 、 id 、 title 、 style
- 可用于某一类元素的，如form表单相关元素的name、value属性
- 只用于某一个元素的，如alt属性只用于img元素
几个属性的介绍：
class---
用来设置元素的一个或多个类名，这样以后的 CSS 或 JS 就可以方便对该元素进行操作。具有以下特点：
* 类名不能以数字开头（一定要牢记）
* 类名可以设置多个值，以空格分开，如<div class="box box--menu"></div>
* 不同的元素可以有相同的类名
id---
设置元素的唯一性，经常用于JS操作或CSS操作，也可用于定义锚点。具有以下几个特点：
* 在整个HTML文档中必须是唯一的，也就是说一个HTML文档中不能出现两个一样的id值
* 不可以和class 那样设置多个值 ⚠️
title---
用来设置元素的额外信息，鼠标悬停在元素上会显示title属性的内容
<a title="我等你就是为了告诉你我是title属性里面的内容" href="#">链接文字很多...</a>
style---
用于设置元素的行内样式，一般用于 JS 动态改变元素的样式
更多全局属性参考
另附 HTML 属性参考手册一份：HTML 属性参考。
常用基本元素
1. div元素：常用来分区
2. span元素：被用来组合文档中的行内元素
3. 段落元素 <p></p>
<p>定义段落，每一个<p>标签都默认另起一行。
4. 图片元素 <img>
<img>标签用来在网页中嵌入图片，<img>标签没有结束标签。
--像这种只有一个标签的元素都可以称之为“空元素(empty element)
<img>标签有两个必需的属性：src属性和alt属性。其中src属性为图片地址，alt属性为如果图片加载失败显示的替换文字。除了必须属性外，还可以添加控制大小的属性width和height。
eg：<img src="图片地址" alt="图片加载失败后显示的文字" width="150" height="150">
5. 链接元素 <a></a>
<a>标签定义超链接，用于网页之间的跳转（从一个网页到另一个网页），它有一个重要的属性href，用来指定链接的目标。 另一个属性target用来定义链接的打开方式。
<a href="www.baidu.com" target="_blank">
6. 列表元素 ---无需列表和有序列表
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
7.
了解更多HTML元素，参考：
- HTML 元素参考 | MDN
- HTML 参考手册 | w3school
- HTML 元素的 wiki 文档：HTML element - Wikipedia
参考资料传送门🚪请进门
上一章节：认识HTML、深入了解head元素
下一章节： HTML 字符实体
网友评论