一、简介
1、前端最核心技术
HTML (犹如骨架，毛坯房)
CSS（装潢，把页面渲染更好看）二
二、基础内容
1.基础总结
1.内核划分
谷歌 火狐 ie 360浏览器 苹果浏览器 欧朋浏览器等等这些浏览器分别对应不同内核，
想让其浏览器识别css代码，需要使用其对应前缀
2.HTML前世今生
HTML (Hyper Text Markup Language) 超文本标记语言，标签
不是编程语言
标记 图片 文本 超链接 视频 音频 属于HTML
我们通过使用html标签，来让浏览器解析成我们想让用户看到的网页
1995年 HTML2.0 ---HTML4.0(规范 标签需要严格遵循规则)--HTML5(包容度会更高
例如： 少一个/ 浏览器依然能够正常的解析，大小写不分。我们html5也能包容，在浏览器
解析的时候 会把你解析成正常的标签)
是谁制定了HTML标准？W3C (World Wide Web Consortium万维网联盟)
XHTML 早期有人想取代HTML5，为什么？
有人觉得XHTML 更加的规范，但是由于有很多人已经都在使用HTML5,这时候再把准备改了，
会导致很多的网页报错，权衡利弊之后就没有改了，就一直使用HTML5。
3.编辑工具
Vscode
轻量级，主流，你需要什么插件，就用什么插件，不强制，免费，早期是微软给C#这个编程软件用
Dreamweaver
可以拖拽 不用写代码（粗糙了chatGPT 淘汰了一大批的文职岗位
文案 你好 帮我写一个婚礼策划书 使用代码 代码容易 看不懂 不太维护）
Ui工程师 用ps画出高保真的图
Webstorm
一度成为 web工程师的标配软件，缺点：收费 启动太慢（里面有很多插件 会跟着启动）
配置太多
Idei 收费 一年一年 知识付费
Txt 高手用 没有任何提示 纯手写
HBuilder 用来混合开发app使用 可以生成 APP（安卓，ios）
2.HTML基础语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个HTML页面</title>
</head>
<body><p>body元素的内容会显示在浏览器中。</p><p>title元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
html
<html>定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
head
标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。
title
<head><meta charset="UTF-8"><title>我的第一个HTML页面</title>
</head>
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
4.title写和你网页相关的关键词有利于SEO优化。
meta
元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面，比如文档的描述和关键词，它只可以放在head中，属于元信息标签。
常见的meta有：
keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么
<meta name="keywords" content="我要学前端"> |
description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="小猪"> |
服务器发送文件类型,在HTML5中被精简为了以下代码：
<meta charset="UTF-8"> |
一个完整的网页，分三部分：结构、样式、行为。而我们学习的html主要用来写页面的结构，css用来写页面的样式，javascript规定行为。
body
body 元素定义文档的主体，所有用户可直接看到的元素都在这里。
HTML基础语法 代码详解
<!-- 规范声明 声明要遵循w3c组织的标准 -->
<!DOCTYPE html>
<!-- html把所有内容都包裹了 叫根标签
标签一般情况下是成对出现 <html lang="en">开放标签 </html>闭合标签
没有闭合标签的元素叫自闭合标签 例如：<meta charset="UTF-8" />
xhtml 规范更加严谨 现在遵循的表示html5 所以包容度比较高 可以不加/
标签上是存在 属性和属性值 属性（lang）=“属性值（en）”
lang 语言 en 英文 表示咱们的这个html文档使用的是英文 zh-CN zh表示html文档使用的是中文
lang="en"的网页 页面上会出现 一个让你翻译成中文的提示 想让提示消失 可以直接删除lang="en" 或者改成zh-CN zh
-->
<html lang="en">
<!-- 头部 头部的内容是不会显示在页面的上 -->
<!-- meta（媒体标签）title（tab页的标题）style（内部css样式）link（引入外部的css样式）script(写js的标签) -->
<head><!-- charset字符集（把各个国家的语言能让浏览器识别出来 展示出各个国家的语言） UTF-8(包括全世界的所有字符集) 别的字符集：GBK2312(识别中文 认识的字符不够全面)--><meta charset="UTF-8"><!-- name="keywords" 关键字标签 比如：在搜索引擎中搜索的那个关键字 --><!-- seo 网站的搜索的排名 一般情况下是花钱 找百度竞价 提高网站搜索出来的优先级 --><meta name="keywords" content="动力节点"><!-- name="description" 是网站的详细描述信息 会出现在没有广告的网址下面--><meta name="description" content="动力节点 是IT培训的黄埔军校"><!-- title标签的内容 显示在tab页的头部 --><title>MY HOME</title><!-- 1.可定义文档的标题。2.它显示在浏览器窗口的标题栏或状态栏上。3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。4.title写和你网页相关的关键词有利于SEO优化。-->
</head>
<!-- 主体部分 --><!-- 作者：张三 时间：2023年3月9号 功能：认识HTML文档--><!-- 注释 shift+alt+a(不管使用html代码 还是css代码 最后还是js代码 单行注释或多行注释 都可以使用这个快捷键 ) -->
<!-- 帮助我们认识代码 会显得特别的清晰 方便维护 产品经理要改需求 方便很多-->
<!-- 暂时用不到的代码可以注释起来 方便需要的时候再解开注释（选中代码 shift+alt+a 解开注释） 使用 可以提高效率 -->
<!-- shift+alt+a 多行注释 -->
<!-- ctrl+/ 单行注释 --><body>我的第一个网页
</body>
</html>HTML常用标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
<br>换行标签
自闭和标签
<hr>水平线标签
自闭和标签
<h1>-<h6>标题标签
语义化标题，h1-h6标签利于seo（搜索引擎优化---网站的排名靠前）
<p>段落标签
语义化表示段落 用于新闻的正文。
<pre>标签
表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。
※块元素和行内元素
HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
块元素特点：
独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
块元素内部可以容纳其他块元素或行元素；
※常见块元素有：h1~h6、p、hr、div等。
行内元素特点：
可以与其他行内元素位于同一行；
行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
※常见行内元素有：strong、b、em、i、span 、u、sub、sup等。
HTML样式标签
em、i斜体标签
在语义化上 还有强调的意思 i斜体
在开发的过程中 span不带样式 可以换em标签来使用（css的方式把斜体样式去掉，当成一个普通标签来使用），em和i 在开发的过程中，常常被用来显示小图标。
u 下划线标签
行内元素
标签都是可以嵌套的，块元素里面包含行内块标签<h1><u>一头猪</u></h1>del标签
<del>标签 HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。
sup、sub上标文本 和 下标文本
一般使用不多 如果有特殊的 平方的数学场景 可以使用 行内元素
HTML其他标签
img标签和其他属性
<!-- width 设置图片的宽度 在web页面中使用像素单位（px）height 设置图片的高度 --><!-- display:inline 表示行内样式 不会独占一行 不会换行 除非一行排列不下的情况 不可以设置宽高 宽高由里面的实际内容决定--><!-- img是特殊的行内样式 特殊在于可以设置宽和高 --><!-- title 属性是 当你的鼠标移动到图片上 会出现的提示文字 --><!-- width属性：设置图像的宽。如果只设置宽度属性，则高度会等比例缩放。height属性：设置图像的高。如果只设置高度属性，则宽度会等比例缩放。 等比例缩放可以让图片不变形 显示的更加自然--><img src="./images/1.png" alt="" width="500px" height="350px" title="我爱你我的中国">我爱中国a 超链接标签
跳转，语义化为超链接，可跳转
<-- 默认是target="_self" 在本页面内跳转 --><!-- target="_blank" 打开一个新的tab页进行跳转 --><!-- <a href="./success2.html" target="_blank">跳转到本地页面</a> --><!-- a链接还可以包裹别的标签进行跳转 比如img a链接可以嵌套标签来使用 -->还可以使用锚点功能，例如跳转底部
<!-- 在本页面的A位置 点击a链接 跳转到了本页面的B位置 a链接的锚点功能锚点 带#号的关键字--><!-- http://127.0.0.1:5500/07-%E8%AE%A4%E8%AF%86%E8%B6%85%E9%93%BE%E6%8E%A5a%E6%A0%87%E7%AD%BE.html#tips --><!-- 使用了锚点之后 链接就多了#tips --><!-- 第一步 设置锚点 --><a href="#tips">在本页面中找到豪车图片</a><a href="#bottom">找到底部</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 第二部 做一个锚点的标记 得使用name属性 name的值不需要加#号 需要和设置锚点的值相对应--><a name="tips"><img src="https://pic.616pic.com/photoone/00/05/81/618e2652d1d1c1567.jpg" alt="" width="300px"></a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 尽量使用块元素包裹行内元素 不要使用行内元素包裹块元素 --><h1><!-- 必须要是用a链接 --><a name="bottom">底部</a></h1>span 标签
行内元素，用的最多的标签 语义化上 span表示强调的意思
开发者喜欢没有样式的标签，因为网页的样式多数需要自己来实现准确(这个无样式可以通过后面实现)
<span>我表示强调</span><span>我表示强调</span><span>我表示强调</span><span>我表示强调</span>div 块元素
自带无样式，后期可添加
可定义文档中的分区或节，标签可以把文档分割为独立的、不同的部分，它可以作为元素的组织工具。
5.特效插件和内联标签
插件：power mode
内联标签Iframe标签引用
6.字符标签
空格 --->  
大于号、小于号 ---> >、<
引号
英镑
等等。。。
7.列表标签
分为三种：
无序标签（常用）ul li
有序标签ol li
定义列表dl dt dd
8.表格标签和属性
很久以前，没有移动互联网时，很多页面都是使用table表格布局来写的。
table 表格的容器display:table 表格元素
特点：自动对齐，会平均分布
构成：表格（行==>单元格 [组成了列]）表头 表主体
table>thead>tbody>tr>th、td 都称为表格元素
table | 表格 |
thead | 表头 |
tbody | 主体 |
tr | 行 |
th和td | 都表示单元格（列），但th有加粗效果 |
9.特效插件和内联标签
插件：power mode
内联标签Iframe标签引用
10.字符标签
空格 --->  
大于号、小于号 ---> >、<
引号
英镑
等等。。。
11.列表标签
分为三种：
无序标签（常用）ul li
有序标签ol li
定义列表dl dt dd
12.表格标签和属性
很久以前，没有移动互联网时，很多页面都是使用table表格布局来写的。
table 表格的容器display:table 表格元素
特点：自动对齐，会平均分布
构成：表格（行==>单元格 [组成了列]）表头 表主体
table>thead>tbody>tr>th、td 都称为表格元素
table | 表格 |
thead | 表头 |
tbody | 主体 |
tr | 行 |
th和td | 都表示单元格（列），但th有加粗效果 |
table表格属性设置：
borde
边框
属性设置会标红，因为html5不推荐
cellspacing
合并边框
cellpadding
设置单元格内间距
让单元格的宽度变宽
特点：设置一个宽度，整列的宽度都变宽了
让单元格的高度变高
特点：设置一个高度，整行的高度都变高了
Tr单元格属性设置
在tr里面设置居中，只会影响当前行，如果想让整个内容（主体部分）都居中，就给tbody
给当前行加一个标题 caption
13.简易版本表格
table 行tr 列td（单元格）
Chrome效果
注意：浏览器解析后会自动把以上内容放在tbody中
原因：xhtml（xml升级版【取代html5（不规范）】）是由xml（规范【写错一个标签就不行】）演变过来的， html5没有被取代是因为用的人太多了
总结：html5 具有较高的包容的和兼容性，比如大小写不分，在浏览器解析的时候，浏览器会帮你解析成正确的格式
14.单元格跨列跨行
1) colspan跨列
Chrome效果：
2) rowspan跨行
Chrome效果
15.表单标签
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。
表单标签form
表单标签集合
1) text文本框
其中value里面的值可以自定义
placeholder是一个提示，里面的内容不会被提交到后台
maxlength“字符的个数”，是限制用户所输入字符的最大个数
2) radio单选框
（lable的for和input的id相同）
单选默认选中效果: checked
我们会把Value的值发送给后台，比如和后台约定value等于1时表示男，等于2时表示女。
Chrome效果：
3) checkbox复选框
特点：可以多选
4) file文件上传、文件域
默认不可以多选的，不过可加multiple属性支持多选文件
之前的文本框、密码框、单选框、复选框，实际上传给后台的是字符串
上传文件要设置action，加上enctype=“multipart/form-data”,才能把文件转成二进制
Method请求方式：（get、post）
form 没有设置method的情况下默认是method=“get”，是get请求
而设置post可以用来传输大文件、安全性强、数据加密。
5) select下拉列表
option列表项
默认选择：在option后加 selected
隐藏字段hidden
用户不可见，后台可见，是传输给后台的。
6) textarea文本域
使用场景：让用户输入意见等大量文字的场景。
7) reset重置按钮
重置恢复为表单默认选择，按钮默认显示“重置”
更改显示值，更value的值就好了
8) submit提交按钮
9) image图片按钮
配合form的action做提交按钮用
前端x轴和y轴的方位
10) 只读和禁用
readonly只读
disabled禁用
Submit按钮必须配合form表单使用
