基本概念
一.网页和网站：
1网页和网站：网站有N个网页组成
2.网页中包含：文字，图片，视频，音频，链接，程序....
3.网页的内容由HTML技术实现
4.网页的后缀通常都是.html
二.浏览器和渲染引擎:
1.常见的浏览器:谷歌，火狐，IE, Safari, 欧朋
2.不同的浏览器有不同的内核(渲染引擎)，现在不需要记 结构层:使用HTML技术实现，说白了，就是给网页提供内容
三.网页三层结构:
1.结构层：在html技术中实现，给网页提供内容
2.样式层: 给网页提供样式(布局美化)
3.交互层:使用JS实现，JS是前端程序员最最最最需要掌握的技术
推荐使用Vs Code工具，好处:小巧，插件多
四.开发工具：
1.shift + alt +向下箭头=>复制上一行
2.tab =>向后移动代码
3.shift + tab =>向前移动代码
4.! + tab => html基本骨架!是英文的!
5.div.wraper + tab =>生成一个带名字的div
6.鼠标中键+向下拽=>同时选中多行
7.键盘上的del键=>删除文件
8.F2 =>重命名
9.shift + alt + f=>格式化代码
10.快捷键 ctrl + f =>查找内容并替换内容
标签:标签都是使用<>包起来，分单标签和双标签，分男标签,女标签和人妖标签
五：标签，属性，元素:
1.标签与标签之间是有关系，分兄弟关系和父子关系
2.属性:写在开始标签中， 以xxx= "xxx "这种形式出现，一个标签中可以有N个属性
3.属性也分两类:公有属性，特有属性
4.公有属性: class, id, title, style
5.元素:标签+属性+标签之间的内容
HTML的基本骨架
一.文档声明：
1.<!DOCTYPE html> HTML的文档声明
2.告诉浏览器，以什么样的的标准解析我们的代码
二.html元素：
1.是一个网页的元素，只有一个
2.lang属性：指定网页的语言，zh-CN表示中文
三.head元素:
1.title属性：指定网页的标题的
2.meta属性：charset="UTF-8"如果不指定，会出现乱码
四.body元素：
1.网页的主要内容都是写在body中
常用标签
h系列-标签:
h1->h6 逐级递减
p标签:
段落标签,成行显示，块级元素 浏览器会自动适应换行
换行标签:<br/>
1.强制换行
2.单标签
文本格式化:
1.加粗：<strong></strong>或<b></b>
2.倾斜：<em> </em>或者<i> </i>
3.删除线：<del> </del>或者<s> </s>
4.下划线：<ins> </ins>或者<u> </u>
无语义标签:
<div></div> <span></span>
图片标签：<img/>
属性:
1.src:图片的路径(来源)
2.alt:当图片加载错误时显示的文字
3.title:当鼠标悬停在图片上显示的文字
4.width:图片的宽度
5.height:图片的高度
6.border:图片的边框
属性的特点：
1.属性之间部分先后顺序
2.属性名与属性值之间以键值对的形式存在常用标签.
3.属性名与属性值之间以等号分隔属性值要以引号包裹;
路径和连接：
路径：
1.相对路径：
(1)在同一个文件夹直接找名字
(2)向上一级../
(3)向下/
2.绝对路径
链接标签：<a></a>:
1.外部链接<a href= http://wwwqq.com.></a>写完整的协议域名网址
2.内部链接<a href= "index.html*></a>
属性:
(1)href:指定跳转的页面
(2)title:鼠标悬停显示的文字
(3)target:_ self(默认会覆盖原来的窗口) blank(会以新的窗口打开) 窗口的打开方式
(4)#: 会阻止页面跳转但是会刷新页面
锚点：
1.链接使用#
2.目标标签id值与连接#号后面一致
注释与特殊字符:
<!-我是注释-->。编辗器使用Ctrl+/ 快捷键
表单类标签
input属性：
1.文本框：text
2.密码框：password
3.单选按钮：radio
4.复选框：checkbox
5.按钮：button
6.重置按钮：reset需要配合form表单起作用
7.提交按钮：submit
8.image： 属性 src
9.文件按钮：file 上传图片
name属性:
1.发送后台... 2.name的标识对于单选按钮只能选择一个
value:
1.文本框默认显示的文字 2.可以写一个属性也可以属性名=属性值 checked: 默认选中
label标签用法：
1.<label>请输入<input type= "text"> <input type= "text"></label>
2.<label for="a">请输入</label><input type= "text" id="a">
文本域:
textarea: 用户留言
下拉列表：
下拉列表的默认选中: selected
<option>请选择</option>
<option >苹果</option>
<option selected>香蕉</option>
<option>橘子</option>
</select>```
form表单：
1.主要的作用:是收集用户信息发送后台 2.action:提交后台的地址 3.method="get/post"提交(传输)后台的方式 4.name ="a"告诉服务器由哪个表单提交过来的
表格类标签:
表格:<table> </table>
行：<tr></tr>
单元格：<td></td>
表头：<th> </th>
加粗加黑自动居中标签： <caption> </caption>表格的标题写在内部显示外部居中
结构头：<thead> </thead>
结构体：<tbody> </tbody>
结构底：<tfoot> </tfoot>
表格属性: 1.border:表格的边框默认的0
2.width:宽度
3.height:高度
4.cellspacing:单元格与单元格之间的距离
5.cellspadding:单元格与内容之间的距离
6.注意:当给表格设置居中整个表格会居中(文字不会居中)当指定tr或者td文字居中
7.align: left/center/right
8.colspan:列合并
9.rowspan:行合并
列表类标签:
1.无序列表:<ul><li></li></ul>
2.有序列表:<ol><li></li></ol>
3.自定义列表:<dI><dt></dt> <dd></dd></dl>
