HTML基础

HTML是什么？官方给出的答案：超文本标记语言。很多人看了这个解释后，还是懵了。其实也没有这么复杂，你直接把HTML理解成是浏览器能识别的语言就行了。

第一个例子

新建index.html，并输入以下代码：

这个就是最简单的html结构

代码说明

1、 所有的HTML文档都应该有一个标签
2、 标签可以包含两个部分：

和
3、 标签包含整个文档的一般信息，比如：title、meta、link等
4、 页面上能看到的内容都是放在标签里

标签介绍

1、 有些标签是成对形式出现，有些是自闭合形式出现。如：

、等
2、 究竟哪些标签是成对出现，哪些是自闭合，这就需要平时我们死记了
3、 根据换行效果，可把标签元素划分为：行内元素和块级元素

块级元素

• div - 常用块级容易，也是css layout的主要标签

• p - 段落

• ul - 非排序列表

• table - 表格

• h1 - 大标题

• h2 - 副标题

• h3 - 3级标题

• h4 - 4级标题

• h5 - 5级标题

• h6 - 6级标题

• form - 交互表单

• hr - 水平分隔线

• pre - 格式化文本

• dl - 定义列表

• ol - 排序表单

div元素

---

段落元素

这是一个段落

---

列表元素

Coffee
 
Milk

浏览器效果：

• Coffee

• Milk

---

有序列表元素

Coffee
 
Milk

浏览器效果：

1. Coffee

2. Milk

---

行内元素

• a - 锚点

• br - 换行

• cite - 引用

• code - 计算机代码(在引用源码的时候需要)

• em - 强调

• i - 斜体

• img - 图片

• input - 输入框

• kbd - 定义键盘文本

• label - 表格标签

• select - 项目选择

• small - 小字体文本

• span - 常用内联容器，定义文本内区块

• strong - 粗体强调

• textarea - 多行文本输入框

HTML5新增标签

• header - 定义一个页面或一个区域的头部

• footer - 定义一个页面或一个区域的页脚

• nav - 定义导航链接

• section - 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

• article - 定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容

• aside - 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容

• audio - 定义音频内容，如音乐或其他音频流

• canvas - 定义图形，如图表和其他图像

• aside - 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容

• command - 标记定义一个命令按钮，比如单选按钮、复选框或按钮

• datalist - 定义选项列表，需与 input 元素配合使用，通过input 元素的 list 属性来绑定，用来定义 input 可能的值

• details - 用于描述文档或文档某个部分的细节。

• embed - 定义外部的可交互的内容或插件。

• figure - 定义一组媒体内容（图像、图表、照片、代码等）以及它们的标题

• hgroup - 定义文件中一个区块的相关信息，使用 hgroup 标签对网页或区段（section）的标题进行组合

• mark - 定义有标记的文本。请在需要突出显示文本时使用此标签。

元素的属性

元素的属性就是元素本身的东西。格式：属性名=‘值‘。属性间用空格分开。

说明

1、html属性分为：标准属性和用户自定义属性。
2、标准属性是由系统定义的， 比如：id、class、style、title。
（注意：base、head、html、meta、param、script、style 以及 title 元素等元素没有前面的属性。）
3、自定义属性是由用户自己定义，只要符合属性的格式就会生效。
在HTML5中添加了data-*的方式来自定义属性。比如：data-name=‘主容器‘