参考视频：黑马程序员前端Html5教程，前端必备基础

📚web标准

📚HTML认识

🐇HTML的概念

🐇开发工具

🐇HTML标签基础

⭐️HTML骨架标签

⭐️HTML元素标签分类

⭐️HTML标签关系（主要针对双标签）

⭐️文档类型

⭐️页面语言lang

⭐️字符集

🐇常用标签

⭐️排版标签

⭐️文本格式化标签

⭐️标签属性

⭐️图像标签img

⭐️链接标签

⭐️注释标签：

📚路径

🐇相对路径

🐇绝对路径

📚表格

🐇创建表格

🐇表格属性

🐇表头单元格标签th

🐇表格标题标签

🐇合并单元格

📚表单

🐇表单控件

⭐️input控件

⭐️label标签

⭐️textarea空间（文本域）：常用于留言板

⭐️select下拉列表

🐇表单域

🐇列表

⭐️无序列表

⭐️有序列表（了解）

⭐️自定义列表（理解）

📚web标准

浏览器：谷歌应用最广

主要构成：

结构（structure) ：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。类似于人的身体。
表现（presentation) ：表现用于设置网页元素的版式，颜色，大小等外观样式，主要知道是CSS。类似于人的着装。
行为（behavior)：行为是指网页模型的定义及交互的编写，咱们主要学的是Javascript。类似于人的行为文件。

📚HTML认识

🐇HTML的概念

HTML是超文本标记语言(Hyper Text Markup Language)
- 所谓超文本，因为它可以加入图片，声音，动画，多媒体等内容（超越文本限制）
- 它也可以从一个文件跳转到另一个文件（超级链接文本）
HTML不是一种编程语言，而是一种标记语言（Markup Language)
标记语言是一套标记标签(markup tag)
网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析，就可以显示给用户了。

🐇开发工具

sublime(轻量级）生成html骨架小技巧
- 双击打开软件
- 新建文件（Ctrl+n）
- 保存（Ctrl+s)，保存为：文件名.html
- 生成页面骨架结构
  - html:5 按下tab键
  - ！按下tab键
- 在浏览器中预览：直接右键在浏览器中打开
- sublime快捷操作emmet语法
  - 生成标签，直接输入标签名，按tab键即可。比如 div 然后tab 键，就可以生成 <div></div>。
  - 如果想要生成多个相同标签，加上 * 就可以。比如 div*3 就可以快速生成3个div。
  - 如果有父子级关系的标签，可以用 >。比如 ul > li就可以了。
  - 如果有兄弟关系的标签，用 + 就可以了。比如 div+p。
  - 如果生成带有类名或者id名字的，直接写 .demo 或者 #two，tab 键就可以了。
  - 如果生成的div 类名是有顺序的，可以用自增符号 $。

🐇HTML标签基础

⭐️HTML骨架标签

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

<html></html>：HTML标签，页面中最大的标签，我们称为根标签。
<head></head>：文档的头部，注意在head标签中我们必须要设置的标签是title。
<title></title>：文档的标题，让页面拥有一个属于自己的网页标题。
<body></body>：文档的主体，元素包含文档的所有内容，页面内容基本都是放到body里面去的。
团队约定，HTML标签名，类名，标签属性和大部分属性值统一用小写。

⭐️HTML元素标签分类

常规元素（双标签）：<标签名>内容</标签名>
空标签（单标签）：<标签名/>

⭐️HTML标签关系（主要针对双标签）

嵌套关系（父子关系）
- 如果连个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab键是4个空格）
并列关系（兄弟关系）

⭐️文档类型

<!DOCTYPE html>
这个声明位于文档中的最前面的位置，用于告诉浏览器按照html 5的标准

⭐️页面语言lang

<html lang="en"> 用于指定html语言种类
常见：en定义语言为英文，zh-CN定义语言为中文

⭐️字符集

<meta charset="UTF-8">这句话非常关键！！
常见字符集

🐇常用标签

HTML标签的语义化：在合适的地方给一个最为合理的标签，让结构更清晰

⭐️排版标签

标题标签：为了使网页语义化

段落标签：<p>文本内容<\p>
水平线标签：<hr />
换行标签：<br />，强制换行

换行标签和段落标签的对比

段落标签<p>内容</p>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4.3 段落标签</title>
    </head>
    <body>
        <h2>木兰花·拟古决绝词</h2>
        <p>人生若只如初见，何事秋风悲画扇。</p>
        <p>等闲变却故人心，却道故人心易变。</p>
        <p>骊山语罢清宵半，泪雨零铃终不怨。</p>
        <p>何如薄幸锦衣郎，比翼连枝当日愿。</p>
    </body>
</html>

换行标签<br />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4.3 段落标签</title>
    </head>
    <body>
        <h2>木兰花·拟古决绝词</h2>
        <p>人生若只如初见，何事秋风悲画扇。<br />
            等闲变却故人心，却道故人心易变。<br />
            骊山语罢清宵半，泪雨零铃终不怨。<br />
            何如薄幸锦衣郎，比翼连枝当日愿。</p>
    </body>
</html>

div和span标签（结合css使用）
- 语法格式：<div>这是头部</div> <span>今日价格</span>
- 他们两个都是盒子，用来装我们网页元素的，只不过他们有区别。
  - div标签是用来布局的，但是现在一行只能放一个div
  - span标签是用来布局的，一行上可以放好多个span

⭐️文本格式化标签

就基本上都用后面的那个

⭐️标签属性

<标签名属性1="属性值1" 属性2="属性值2"...>内容</标签名>

⭐️图像标签img

<img src="图像URL"/>
基本属性
示例
width和height同理跟后边就好了，注意，一般width和height只改一个

⭐️链接标签

语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href跳转：必须要写，用于跳转
- 外部链接：需要添加http://
- 内部链接：直接链接内部页面的名称即可

如果当时没有确定链接目标，通常将链接标签的href属性定义为"#",表示该链接暂时为一个空链接。

不仅可以创建文本链接，在网页中各种网页元素都可以添加超链接。
举例
target设置：用于指定链接页面的打开方式，其中self 为默认值，_blank为在新窗口中打开

⭐️注释标签：

注释是给人看的，帮助回忆这段代码有什么用，程序是不执行这个代码的。

快捷键：ctrl+/
注释约定，放在待注释代码的上方

📚路径