前端认知、编辑器、HTML基础
后端 -> 操作数据
对数据进行处理 数据库
逻辑处理-> 接口
前端 -> 结构 样式 逻辑
结构 -> 盖房子 -> 搭建结构 -> 网页结构的走进前端之《HTML》篇
后端 -> 操作数据
对数据进行处理 数据库
逻辑处理-> 接口
前端 -> 结构 样式 逻辑
结构 -> 盖房子 -> 搭建结构 -> 网页结构的布局 -> html
样式 -> 装修房子 -> 结构的布局与装修 -> CSS
逻辑 -> 房子内的东西动起来 -> 网页动态交互 -> JS
HTML 负责网页结构搭建
CSS 负责网页样式呈现
javascript 负责网页动态交互
target 是目标
_blank 是新开一个空页签
title:
主页：网页名称+主要的关键字/关键字的描述
详情页：详情名称+网页名称+简介
列表页：分类名称+关键字+网页名称
文章页：标题+分类+网站名称
keywords 100个字符
网站名称+分类信息+网站名称
description 描述信息 80-120个汉字
综合title+keywords的简单描述
搜索引擎认知的优先级
title>description>keywords
三大件：title keyword description主要作用是迎合搜索引擎（爬虫）的喜好
物理性标签 和 语译性标签
虽然物理性标签意义相同，不过语译性标签更能迎合爬虫
zh-CN是简体中文
编码字符集：GB2312 GBK UTF-8
GB2312:中国信息处理国家标准码，这个码叫简体中文编码，主要是简体中文
GBK：汉字扩展规范 作用：1.以前的GB2312不认识繁体字
2.收录的汉字数量太少，少数民族的字不认识，GBK扩大了汉字的收录，增加了繁体中文 藏 蒙 维等少数民族的字体
UTF-8:就是个Unicode，万国码，优势是认识时间所有正在使用的文字
<!DOCTYPE html>不是一个标签，是一个声明主要是告诉浏览器要用什么版本的html
这是html5的一个声明方式
compat 是兼容性 compatMode 是兼容性模式
CSS1Compat是w3c的标准兼容新模式形式
BackCompat是浏览器的怪异兼容模式 使用浏览器自身的方式来对网页进行渲染 可能会出现bug 或者 显示异常的一个状态
CSS1Compat之下网页渲染也可能会有不一样，总比奇奇怪怪的渲染好点
<h1></h1>叫heading标签 也叫 标题标签
h1-h6的特性：1.独占一行 2.粗体 3.大小不一致
浏览器默认的像素大小为16像素
所以在默认的情况下2em就是2*16也就是32个像素
<h1 style="background-color:green">h1 </h1>
效果是这一行都标绿
<p>paragraph标签 段落标签 默认的字体大小是1em也就是16像素</p>
<p> 标签的特性是：1.独占一行
是空格的意思 空格每个浏览器的兼容性是不一样的
<p>paragraph标签 段落标签 默认的字体大小是1em也就是16像素</p>
<div style="width: 200px;height: 200px;border: 1px;solid:#000">
<p style="text-indent: 2em;">div是一个容器也叫盒子，在容器里面弄一个p标签
如果使用缩进2em的方式实现缩进</p>
</div>
strong 标签和 b 标签 strong 标签是语译标签 ，是搜索加强的，一般都用strong
标签不用b标签
em 和 i 标签都是斜体标签 ，不过em是语译标签，更好用 i 是物理标签 em是加强语气
<del>在文字上画一条横线的标签</del>
<ins>下划线标签</ins>
<del>在文字上画一条横线的标签</del>
<br>换行
<p style="text-decoration:line-through">效果和del标签一样</p>
<p style="text-decoration: underline">做到和ins表现一样的效果（下划线）</p>
<div style="width:200px;height: 200px;border: 1px solid #000" ></div>
创造一个200*200的边框
<div style="background-color:#000">11</div>
当不给边框大小的时候是独占一行
编辑器认识英文不认识中文，在输入中文的时候会把每个字都认为是一个单独的字符
在输入英文的时候每空格一次算一个字符，如果不空格会把整个单词串算一个字符
空格和换行都是文本分隔符号
HTML的实体字符
<p>我正在学习<div>标签</p>
解析：lt 是 less then 的缩写
gt 是 great then 的缩写
是空格的实体字符
分割线<hr />或<br />
提示：开发的时候禁用，不同的浏览器对<hr />的渲染都不一样<br />的距离也不一样
<img src = "" />
img 标签有两个属性src（必须）：用于指定图像的文件路径
alt（可选）：用于提供对图像的替代文本描述，
当图片无法加载时显示该文本描述，并且对于使用
辅助技术的用户来说，这个技术也很重要
title（可选）：这里面的文字，当鼠标放在图片上时会出现的文本，显示图片信息（你填写的）
元素：标签加内容就是元素
分类 内联元素（行间元素）（行内元素）：不独占一行，无法定义宽高 inline element
strong em del ins
块内元素：独占一行，可以定义宽高 block element
div p hx address
内联块级元素：不独占一行，但是可以定义宽高 inline——block element
img
anchor 标签（锚点）
1.超链接标签
2.打电话
<a href="https://www.baidu.com" target="_blank">百度</a>
target 是打开一个新页面
3.发邮件
<a href="mailto:[email protected]">发邮件</a>
4.锚点
5.协议限定符
<a href="javascript:alert('我是你爹')">打开标签</a>
标签嵌套问题
内联元素可以嵌套内联元素
块级元素可以嵌套任何元素
p标签不可以嵌套div
a标签不可以嵌套a标签
<!--这是一个注释-->
注释的目的有两个：1.方便后期的维护，增加代码的可维护度
2.找bug
快捷键为Ctrl+?
html标签发展的方向就是语义化
target 是目标
_blank 是新开一个空页签
title:
主页：网页名称+主要的关键字/关键字的描述
详情页：详情名称+网页名称+简介
列表页：分类名称+关键字+网页名称
文章页：标题+分类+网站名称
keywords 100个字符
网站名称+分类信息+网站名称
description 描述信息 80-120个汉字
综合title+keywords的简单描述
搜索引擎认知的优先级
title>description>keywords
三大件：title keyword description主要作用是迎合搜索引擎（爬虫）的喜好
物理性标签 和 语译性标签
虽然物理性标签意义相同，不过语译性标签更能迎合爬虫
zh-CN是简体中文
编码字符集：GB2312 GBK UTF-8
GB2312:中国信息处理国家标准码，这个码叫简体中文编码，主要是简体中文
GBK：汉字扩展规范 作用：1.以前的GB2312不认识繁体字
2.收录的汉字数量太少，少数民族的字不认识，GBK扩大了汉字的收录，增加了繁体中文 藏 蒙 维等少数民族的字体
UTF-8:就是个Unicode，万国码，优势是认识时间所有正在使用的文字
<!DOCTYPE html>不是一个标签，是一个声明主要是告诉浏览器要用什么版本的html
这是html5的一个声明方式
compat 是兼容性 compatMode 是兼容性模式
CSS1Compat是w3c的标准兼容新模式形式
BackCompat是浏览器的怪异兼容模式 使用浏览器自身的方式来对网页进行渲染 可能会出现bug 或者 显示异常的一个状态
CSS1Compat之下网页渲染也可能会有不一样，总比奇奇怪怪的渲染好点
<h1></h1>叫heading标签 也叫 标题标签
h1-h6的特性：1.独占一行 2.粗体 3.大小不一致
浏览器默认的像素大小为16像素
所以在默认的情况下2em就是2*16也就是32个像素
<h1 style="background-color:green">h1 </h1>
效果是这一行都标绿
<p>paragraph标签 段落标签 默认的字体大小是1em也就是16像素</p>
<p> 标签的特性是：1.独占一行
是空格的意思 空格每个浏览器的兼容性是不一样的
<p>paragraph标签 段落标签 默认的字体大小是1em也就是16像素</p>
<div style="width: 200px;height: 200px;border: 1px;solid:#000">
<p style="text-indent: 2em;">div是一个容器也叫盒子，在容器里面弄一个p标签
如果使用缩进2em的方式实现缩进</p>
</div>
strong 标签和 b 标签 strong 标签是语译标签 ，是搜索加强的，一般都用strong
标签不用b标签
em 和 i 标签都是斜体标签 ，不过em是语译标签，更好用 i 是物理标签 em是加强语气
<del>在文字上画一条横线的标签</del>
<ins>下划线标签</ins>
<del>在文字上画一条横线的标签</del>
<br>换行
<p style="text-decoration:line-through">效果和del标签一样</p>
<p style="text-decoration: underline">做到和ins表现一样的效果（下划线）</p>
<div style="width:200px;height: 200px;border: 1px solid #000" ></div>
创造一个200*200的边框
<div style="background-color:#000">11</div>
当不给边框大小的时候是独占一行
编辑器认识英文不认识中文，在输入中文的时候会把每个字都认为是一个单独的字符
在输入英文的时候每空格一次算一个字符，如果不空格会把整个单词串算一个字符
空格和换行都是文本分隔符号
HTML的实体字符
<p>我正在学习<div>标签</p>
解析：lt 是 less then 的缩写
gt 是 great then 的缩写
是空格的实体字符
分割线<hr />或<br />
提示：开发的时候禁用，不同的浏览器对<hr />的渲染都不一样<br />的距离也不一样
<img src = "" />
img 标签有两个属性src（必须）：用于指定图像的文件路径
alt（可选）：用于提供对图像的替代文本描述，
当图片无法加载时显示该文本描述，并且对于使用
辅助技术的用户来说，这个技术也很重要
title（可选）：这里面的文字，当鼠标放在图片上时会出现的文本，显示图片信息（你填写的）
元素：标签加内容就是元素
分类 内联元素（行间元素）（行内元素）：不独占一行，无法定义宽高 inline element
strong em del ins
块内元素：独占一行，可以定义宽高 block element
div p hx address
内联块级元素：不独占一行，但是可以定义宽高 inline——block element
img
anchor 标签（锚点）
1.超链接标签
2.打电话
<a href="https://www.baidu.com" target="_blank">百度</a>
target 是打开一个新页面
3.发邮件
<a href="mailto:[email protected]">发邮件</a>
4.锚点
5.协议限定符
<a href="javascript:alert('我是你爹')">打开标签</a>
标签嵌套问题
内联元素可以嵌套内联元素
块级元素可以嵌套任何元素
p标签不可以嵌套div
a标签不可以嵌套a标签
<!--这是一个注释-->
注释的目的有两个：1.方便后期的维护，增加代码的可维护度
2.找bug
快捷键为Ctrl+?
html标签发展的方向就是语义化
## 后端与前端
后端负责操作数据、对数据进行处理和逻辑处理，例如数据库和接口，而前端则负责网页结构、样式和交互逻辑。
具体来说，网页结构主要由HTML负责搭建，样式由CSS负责呈现，而网页动态交互则是JavaScript的职责。
## HTML基础
### HTML基本结构
HTML文档一般由以下组成部分：
- DOCTYPE声明，指定HTML版本
- HTML标签，包含HEAD和BODY标签
- HEAD标签，包含元数据，例如title、meta等
- BODY标签，包含网页内容
示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="UTF-8">
<meta name="keywords" content="关键词">
<meta name="description" content="网页描述">
</head>
<body>
网页内容
</body>
</html>
```
其中，DOCTYPE声明用于指定HTML版本和兼容模式，此处指定的是HTML5的标准模式（即`<!DOCTYPE html>`）。
meta标签用于指定网页的基本信息，例如字符集（charset）、关键词（keywords）和描述（description）等。
### HTML标签
HTML标签可以分为三种类型：
- 内联元素（行内元素）
- 块级元素
- 内联块级元素
内联元素一般不独占一行，无法定义宽高，例如`<strong>`、`<em>`、`<del>`和`<ins>`等。
块级元素一般独占一行，可以定义宽高，例如`<div>`、`<p>`、标题