一.基本概念

1.网页和网站

1.网站有N个网页组成

2.网页中包含：文字，图片，视频，音频，链接，程序...

3.网页的内容由HTML技术实现

4.网页的后缀都是.html

2.浏览器和渲染引擎

1.常见的浏览器：谷歌，火狐，IE，Safari,欧朋

2.不同的浏览器有不同的内核（渲染引擎），现在不需要记

3.网页三层结构

1.结构层：使用HTML技术实现，说白了，就是给网页提供内容

2.样式层：给网页提供样式（布局，美化）

3.交互层：使用JS实现，JS是前端程序员最最最在需要掌握的技术

4.开发工具

1.推荐使用Vs code工具，好处：小巧，插件多

5.快捷键

2.shift+alt+向下箭头=>复制上一行

3.tab=>向后移动代码

4.shift+tab=>向前移动代码

5.！+tab=> html基本骨架 !是英文的！

6.div.wraper+tab=>生成一个带名字的div

7.鼠标中间+向下拽=>同时选中多行

8.键盘上的del键=>删除文件

9.F2=>重命名

10.shift+alt+f=>格式化代码

11.ctrl+f=>查找并替换内容

6.标签，属性，元素

1.标签都是使用<>包起来，分单标签和双标签，分男标签，女标签和人妖标签

2.标签与标签之间是有关系的，分兄弟关系和父子关系

3.属性:写在开始标签中，以xxx=“xxx”这种形式出现，一个标签中可以有N个属性

4.属性也分两类：公有属性，特有属性

5.公有属性：class,id,title,style

6.元素：标签+属性+标签之间的内容

二.HTML的基本骨架

1.文档声明

HTML5的文档声明，告诉浏览器，以什么样的标准来解析我们写的代码

2.html元素

1.是一个网页的根元素，只有这一个

2.lang属性：指定网页的语言 zh-CN表示中文

3.head元素

1.网页的头部：基本上在对网页的设置，都会在head实现

2.title属性：指定网页的标题的

3.meta属性：charset="utf-8"如果不指定，会出现乱码

4.body元素

1.网页的主要内容都是写在body中的

三.常用标签

1.h系列-标题标签

1.h1-h6逐级递减

2.p标签，段落标签

1.浏览器会自动适用换行

3.换行标签

1.强制换行

2.单标签

4.文本格式化

1.加粗****或者****

2.倾斜**>或者**

3.删除线~~~~>或者~~~~

4.下划线>或者

5.无语义标签

1.div

2.span

6.图片标签

1.属性

1.src:图片的路径（来源）

2.alt:当图片加载错误时显示的文字

3.title:当鼠标悬停在图片上显示的文字

4.width:图片的高度

5.height:图片的宽度

6.border:图片的边框

2.属性的特点

1.属性之间不分先后顺序

2.属性名与属性值之间以键值对形式存在

3.属性名与属性值之间以等号分隔属性值要以引号包裹；

7.路径和链接

1.路径

1.相对路径

1.在同一个文件夹直接找名字

2.向上一级../

3.向下/

2.绝对路径

2.链接标签

1.外部链接写完整的协议，域名，网址

2.内部链接直接写文件名即可

3.属性

（1）href:指定跳转的页面

（2）title：鼠标悬停显示的文字

（3）target-self(默认会覆盖原来的窗口)-blank（会以新的窗口打开）窗口打开方式

（4）#：会阻止页面跳转但是会刷新页面

3.锚点

1.链接使用#

2.目标标签id值与链接#号后面一致

8.注释与特殊字符

编译器使用Ctrl+/快捷键

四.列表类标签

1.无序列表

2.有序列表

3.自定义列表

五.表格类标签

1.标签

表格

2. 行

3. 单元格

4.表头加粗加黑自动居中

5. 表格的标题写在内部显示外部居中

6. 结构头

7. 结构体

8. 结构底

2.属性

1.border:表格的边框默认的O

2.width:宽度

3.height:高度

4.cellspacing:单元格与单元格之间的距离

5.cellspadding:单元格与内容之间的距离

6注意:当给表格设置居中整个表格会居中(文字不会居中)当指定tr 或者td 文字居中

7.align: left/center/right

8.colspan:列合并

9.rowspan:行合并

六.表单类标签

1.input属性

1.text:文本框

2.password:密码框

3.radio:单选按钮

4.checkbox:复选框

5.button:普通按钮

6.reset:重置按钮需要配合form表单才有作用

7.submit:提交按钮

8.image属性src

9.file文件按钮上传图片

2.name属性

1.发送后台.....

2.name的标识对于单选按钮只能选择一个

3.value:文本框默认显示的文字

4.可以写一个属性也可以属性名=属性值 echecked:默认选中

3.label用法

1.请输入

2.请输入

3.文本域: textarea:用户留言

4.下拉列表

请选择苹果香蕉橘子

下拉列表的模式选中：selected

4.form表单

1.主要的作用:是收集用户信息发送后台

2.action:提交后台的地址

3.method="get/post”提交（传输)后台的方式

4.name ="a”告诉服务器由哪个表单提交过来的

HTML总结