目录
写在前
开发和运行是两个独立的部分切忌搞混！
开发：程序员的电脑上完成的写代码的过程。
运行：在用户的电脑上完成的具体的程序，将程序运行起来的过程。
当下主流的浏览器：
1.IE：早期windows自带的，现在已经变成了edge
2.chrome:当下最强的浏览器。
3.firefox：知名浏览器。
4.safari:苹果系统上自带的浏览器。
5.Opera：相对于小众的浏览器。
前端开发使用的开发环境主要有以下两个：
1.JB系列（JB-- JetBrains）
(1)专业版的IDEA本身就是支持前端的，JB提供的WebStorm（收费用）
(2)VSCode 体验感差于WebStorm
VSCode Visual Studio不是一种东西！
前者属于[轻量级开发工具]
后者属于[重量级开发工具]
HTML结构
认识HTML标签
1.html的代码是通过标签来组织的，形如<html></html>用尖括号组织的，成对出现的这个东西就是”标签“（tag）,也可以叫做”元素“（element）
2.一个标签通常是成对出现的，少数标签只有开始标签，称为”单标签“
开始标签<html>内容</html>结束标签
3.标签是可嵌套的
一个标签内容可以是其他的一个或者多个标签，此时，这些标签就构成了一个”树形结构“
4.可以在开始标签中，给标签赋值属性（Attribute）
属性相当于是键值对，可以有一个或者多个
HTML文件基本结构
html：这是一个html文件最顶层标签，树根节点
head:存放这个页面的一些属性（元数据，meta data）
body:存放这个页面包括哪些内容
快速生成代码框架：
！+ Tab键补齐
HTML常见的标签
注释标签
注意：注释的内容不会在页面中现实，但是按下鼠标右键-查看网页源代码，此时是可以看到注释的。
VSCode中注释的快捷键：ctrl+r
标题标签h1-h6
h1为最大最粗
h6为最小最细
每个标题标签都是独占一行的，这个独占一行是和代码编程无关的！
在html中标签是否换行，和代码编程无关，和标签自身有关（有的独占，有的不独占）
在html源代码中写的”换行“会被忽略；写的空格，多个连续的空格会被视为一个（有的时候忽略，有的时候视为一个）
段落标签p
自动生成一段随机的文本：Lorem
把一个段落粘在html中，会发现并没有分成段落，加上p标签后，每个段落之前不仅要换行，同时还有一个明显的段落间距。（但是这里没有首行缩进两个字符，这需要CSS才能调节）
换行标签br
1.br是break的缩写，表示换行
2.br是一个单标签，不需要结束标签‘
3.br标签不像p标签那样会带有很大的空隙
4.规范写法<br/>,不建议写成<br>
格式化标签
加粗：strong;b
倾斜：em;i
删除线：del;s
下划线：ins;u
图片标签img
网页上，是可以显示图片的，包括报纸上也是可以有图片的。
img有个核心属性，src（必填项）
src：描述该图片的路径（路径可以是一个本地的绝对路径，也可以是网络路径）
此时，要把1.jpg这个图片文件放到和html的同级目录中。
img标签的其他属性：
alt：替换文本，当文本不能正确的显示时，替换为alt=" "中的文字
title:提示文本，鼠标放到图片上，会显示出提示
width/height:控制高度和宽度（一般修改一个即可，另外一个会等比缩放，否则可能会失衡）
border:边框，参数是宽度的像素，但是一般由CSS设定
注意：
1.属性可以有多个，不能写到标签之前
2.属性之间用空格分割，可以是多个空格，也可以是换行
3.属性之间不分先后顺序
4.属性使用”键值对“的格式来表示
关于目录的结构：
1.相对路径：以html所在的位置为准，找到图片位置
同级目录：直接写文件名即可（或者./）
下一级目录：image/1,jpg
上一级目录：../image/1.jpg
2.绝对路径：一个完成的磁盘路径或者网络路径
超链接标签a
”链接“ link(快捷方式)
”超“链接跳转到的页面，可以是在当前网站之外的
还有一个属性，target
一般写作target = "_blank"，就可以打开一个新的标签页（而且不会替换原有的页面）
表格标签
table 表示整个表格
tr表示一行
td表示一个单元格
th表示表头中的一个单元格
列表标签
有序列表 ol (ordered list)
无序列表ul (unordered list)
列表项（li）list item
表单标签
form标签
使用form进行前后端的交互，把页面上，用户进行的操作/输入提交到服务器上
后续更。。
input标签
有很多形态，能够表现成各种用户用来输入的组件
1.单行文本框--text
2.专门输入密码的单行文本框--password
3.单选框--radio
对于单选框，需要加"name"属性，name属性值相同的单选框，选择的值之间是互斥的
属性”checked“设置默认选中的
4.复选框--checkbox
5.普通按钮--button
6.提交按钮--submit
7.清空按钮-- reset
8.选择文件
lable标签
搭配input使用
select标签
下拉菜单
textarea标签
多行编辑框
文本阈中的内容就是默认内容，注意：空格会产生影响
rows和cols也都不会直接使用，都是CSS改的
无语义标签
div（块级元素）
独占一行，是一个大盒子
span（行内元素）
不独占一行，是一个小盒子
扫一扫
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
