html 基础知识
1.网页是由什么内容组成
只要是网页，就由 3 部分内容组成，并且采用纯文本进行描述
任何编辑器都可以创建 html 文档
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 文本内容 | 网页上显示的文字内容，比如段落，导航，标题，按钮上的文本，QQ/微信，联系方式等 |
| 2 | 其他资源的引用 | 比如：图片，视频，音频，动画，特效，css，js，脚本等 |
| 3 | 标记或标签 | 对文本内容和其他资源引用的描述 |
演示如下
<p>这里是文本内容</p><!-- p就是标记 --><img src="这里是图片的地址" alt="log" /><!-- 这里是其他资源引用，其他资源引用都是单标签，img就是标记，标签的内容是通过一个属性指示出来的(上面的代码中，src就是属性) -->
2.html 的设计思想
页面看到全部内容都叫元素，元素是由标签进行描述
标签就类似于停车场的每一辆汽车，他们都有不同的车牌号，通过车牌号等信息找到自己的汽车（这里车牌号就类似于标签）
网页上的每一个内容，想要识别出来，就需要给他设置不同的标签，方便快速识别和明确标记
html 是超文本编辑语言，不是编程语言
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 超文本 | 是指包括了超链接的文本（如<a href="http://php.cn">php 中文网</a>） |
| 2 | 预定义标记/内置标签 | 用来描述内容的固定标签（可以自定义标签） |
| 3 | 语言 | html 是标记语言，不是编程语言（编程语言是定义数据类型，变量等）他只是书写 html 文档的工具 |
3.html 的基本页面结构
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action="1.php" method="get"><label for="my-email">邮箱</label><input type="tetx" placeholder="email:" required id="my-email" /><button>提交</button><button>提交;/button></form></body></html>
| 序号代码 | 解释 |
|---|---|
<!DOCTYPE html> |
通知浏览器这是一个 html5 的文档结构（也就是给浏览器介绍这个文档） |
<html> </html> |
根标签，也叫根元素，整个 html 文档内容必须写到这对根标签里面 |
<html lang="en"> |
告诉浏览器 html 文档的当前语言是英文，如果是中文简体，就把 en 改成 zh-CN |
<head> </head> |
头部，head 的内容是不展示给用户看的，是给浏览器/开发者看的 |
<meta charset="UTF-8" |
通知浏览器我当前文档使用的字符集使用的编码是 utf-8 |
<meta name="viewprot" content="winth=device-width,initial-scale=1.0"> |
viewpeor：视口（可视区屏幕）描述当前页面的宽度等于当前设备显示的宽度相匹配。注意：高度是无限的。initial-scale 的意思是缩放 1.0 就是一比一，不容许浏览器缩放页面 |
<title> </title> |
当前页面的标题，在浏览器的标签页显示 |
<body> </body> |
页面的主体内容，展示给用户的内容 |
<!-- --> |
注释,注释内容不会显示给用户看，会显示在 html 文档代码中，用于程序员 自己想描述的东西，或者隐藏的东西 |
4.元素，属性和值
4-1:元素与标签
| 元素 | 标签 | 描述 |
|---|---|---|
| 非空元素 | 双标签 | <p>努力学习</p> |
| 空元素 | 单标签 | <img src="php.jpg" alt=""> 来自外部的一个引用，文件，资源 |
4-2：属性和值
属性写在启始标签中
值:预定义值（规定好的值，不能自定义），字符串（可以自定义）指定格式
- 布尔值：只要在元素中出现这个属性，他就是 true，如果你不需要就不要写
元素的三大属性
| 序号 | 属性名 | 描述 | 举例 |
|---|---|---|---|
| 1 | id |
元素的唯一标识 | <div id="wrap"> </div> |
| 2 | class |
给元素添加类样式 | <div class="box"> </div> |
| 3 | style |
设置当前元素样式 | <div style=" "> </div> |
- 这 3 个属性，几乎可以用到所有元素上
附加信息
- 浏览器 F12 对应的单词的意思
- Elements 查看当前页面元素
- Console 控制台,加载代码的，是浏览器默认的一个就是解释器
- Soures 页面调试，js 的函数执行
- Network 处理 htpp 请求的
5.层级关系
— 元素中允许包含另一个元素,被包含的元素叫做子元素, 子元素又可以继承包含其它元素,依此类推
- 元素层级结构中, 必须保持正确的嵌套关系
- 简单比喻一下子如下
<form action="1.php" method="get"><label for="my-email">邮箱</label><input type="tetx" placeholder="email:" required id="my-email" /><button>提交</button></form><!-- form是 label和input和 button的副元素 -->
6.网页中的实体字符
- 空白的处理：空白就是空格，制表符，换行符，无论写几个，都是显示一个的
| 序号 | 字符 | 描述 | 转义字符 | 实体编号 |
|---|---|---|---|---|
| 1 | ' ' |
空格 | nbsp; |
|
| 2 | < |
小于 | < |
< |
| 3 | > |
大于 | > |
> |
| 4 | & |
&符号 |
& |
& |
| 5 | " |
双引号 | " |
" |
| 6 | © |
版权 | © |
© |
| 7 | ® |
已注册商标 | ® |
® |
| 8 | × |
乘号 | × |
× |
| 9 | ÷ |
除号 | ÷ |
÷ |
7.文件和文件夹
- 全部使用小写（在 html 文档里面全部是小写）
.html,不能是.html- 文件名:如 admin.php（注意文件名不能用下划线’_‘，要用连接线’-‘)
8.URL
URL 介绍：统一资源定位符，就好比你有一个服务器，URL 定位到你的服务器的某个文件，互联网上的任何一个文件/资源必须有一个唯一的访问地址
URL 的语法：https://www.php.cn/course/1088.html（http是协议/模式，www.php.cn是域名也就是主机名，course/1088.html是资源的路径）
9.html 元素的默认样式
- 不同的浏览器默认样式是不同的，我们要我们的网页在每一个浏览器打开显示的都一样，那么就需要自定义样式（样式重置），优先级要高于默认样式
课程总结
认识了 html 的基本语法，内容，结构，标签，双标签，emmt 生成 html /css 的快捷语句(<a href="http://php.92fk.cn/emmt.html"> 老师看的时候请看源代码</a>)
元数据：解释数据的数据（为数据提供解释服务的数据）描述某种特定信息的数据
写 html 文档的规范
手写html代码如下（字有点难看）
