4.前端基础HTML+CSS
简述
一个网站的前端主要是两个部分，界面和交互，界面就是长什么样，有的好看，有的丑。交互此处指的是与后端的交互，传递接收数据。
本篇主要是讲述html css js以及jquery使用。前端主要是这么几个部分，html写页面结构，css写样式，js写各种交互，jquery是常用的一个js框架封装了简化的函数。
html
html就是页面的结构，骨干。主要的几个部分，以及常用标签
标签分两种形式
，
结构
头，此处通常
1.引入css
引入js文件
2.网站标题等利于SEO搜索引擎优化
网站标题
以及描述网站关键词
身体，写网站的结构，这一块是显示什么，另一块显示什么
为什么要从外部引入css,js，写在当前html文件也是可以的，但是有些公共的css，js，你不能每个页面html都写一遍吧，所以公共css，js，在需要的页面引入即可调用。当前页面的css，js也可以采用如下写法，写在特定区域内
注释，html中注释写法不同于//，如下所示
块
之前提到了，html就是网站的结构。有head头，有body身体，像一个人，但是人身上很多个部位，胳膊，有腿，有手，有脚，这一个个的部位就像是html的一个个块
html也一定的结构块，比如博客，这一块可能是网站的导航栏，那一块是网站的文章内容，另一块可能是作者信息。这个块用什么区分，就是div
1.
相当于容器，把各种各样的其他元素写在这里面，如表格table，img图像，文章等。
div可以很大，可以很小，就是一块块的，一个大div里面可以有很多小div
2.
一般用来放文本
html结构
也就是这个网站的结构，区块。最开始是产品经理设计好网站展示的大致内容，如这一块显示用户信息，另一块显示用户的订单，简单草图，原型图，然后是专门的UI设计师，美化这个界面，这一块什么颜色，另一块样式是圆的还是方的，ps之类工具做出UI设计图
前端拿到UI图后，就要转成实际显示网页html css文件
1.开始思考结构，头部，躯干，脚部，先看这三块，最上面，最下面，中间。根据具体UI图，然后每一块布局怎么写，比如躯干，又分为左边，右边，这每一边，又可能是上中下，总之是一块一块的。思考大块，每一块的大致包含内容。
如博客页面，最上面，导航栏，中间是各种文章，最下面网站备案信息。先把最明显的div分出来，然后中间文章，又好几个文章，每一个文章又分为左边，预览图，右边标题简介。
2.细化结构，这一块，用什么标签来写。完成之后，你的网站大致样子就出来了，就是比较丑
3.写好了网站的结构，该做美化了，就是写css，写布局，具体边距是多大，这一块外边框是原型，另一块颜色用红色，这一块显示一个logo图片等等等
补充下，通常拿到ui要进行切图和标注
切图，就是比如UI设计了一个很好看的logo，你怎么把这个图片从psd的设计图里面弄出来，变成一个单独的小图片png
标注，就比如ui规定，你这个块内容，就多长多宽，多高，和周围的其他块的距离是多大
现在借助各种工具，如蓝湖，pxcook等，切图标注自动生成
常用标签
标签就是代表这一块是怎么显示，因为浏览器接收到了存在服务器的html文件，是不是要加载，浏览器怎么知道怎么加载，每一块怎么显示？因为有一套国际标准，遵守这套标准即可
属性，标签是可以有属性的，用来指定这个标签的信息，多是 键值对形式
属性名name="属性的值" ，如a标签，点击跳转到新页面
文字类
1.h 1234标题系列
h1标题内容
h2标题内容
还有h3,h4等等等
写在这类标签里面的字体 加粗，变大
2.
显示一个水平横线，常用来显示内容分割，比如这一段写完了，加一个横线，帮助用户区分内容
3. 段落内容 段落
一般是一篇文章，里面好几个段落
4.
相当于word里面你打回车，换下一行
链接
内容如文字，按钮等
点击内容部分可能是按钮，也可能是文字，打开新的链接地址url
常用target="_blank"
如下
内容
在浏览器的新窗口打开新的页面，不加这个是当前的窗口
表格
表格就像是excel表，展示数据很常用。尤其是各种后台管理系统，显示各种列表，订单列表，用户列表
用户id
用户名
1
用户1名字
2
用户2名字
1.
这一行的内容 2.这里th td是啥， 这都是列，一个就是一列。
3.th td什么区别，想想excel表格，最上面第一行（th）是不是写的这一列代表什么数据，就是表头，如这一列是id，另一列是用户名。那么剩下的很多内容，列就是td了
列表
这个列就像是你的 任务清单列表，一行一行的
通常写网站导航
- 第一项
- 第二项
图像、音频、视频
1.图片
src写图片的url地址
alt写这个图片内容，鼠标放上去，会有个小提示，就是alt的内容
音频，视频为html5标准提供的，就是最新的html标准，简称h5
2.音频
3.视频
通常音频，视频会使用第三方封装的插件，解决不同浏览器兼容性，文件格式解码之类的各种问题
图表类
这类一般借助第三方插件实现，如echarts，展示各种折线图，柱状图，散点图，饼图各种各样的图表，后台数据统计使用比较多
表单
以上全部，都是展示类的标签，展示文字，图片，表格等，把内容展示给用户看。另一类是属于交互类，比如你参加一个调查问卷，提交信息，需要你输入填写信息的，这个就是表单
method为post形式时，通常为提交信息，填了一个问卷，填了一个订单信息，填了一个用户信息，一个商品。如后台管理 ，创建一个新商品
为get时，常用来做查询操作，加入各种筛选条件，如商品分类，关键词等
通常
1.input
input就是输入框，input主要几个元素
type，name，value
type就是这个input框的形式，可以显示为文本输入，也可以选择框
text为输入文本，最常见的文本框，如输入用户名，其他文本
password输入密码，输入了会以* 星号
number只能输入数字，如限定输入金额等，只能是数字
radio，这是单选框，二选一，或者多选一，必须只能选一个
Male
Female
同一组的radio单选框，name是相同的，name是啥，这个和后端交互，发送数据相关。发送的数据是不是要告诉后端这个数据是干什么的，和value是一对，如果只发送male男，不知道这是什么意思吧，如果发送sex=male男，是不是就知道这个数据是性别，男。结合前面php基础部分，接收请求。
注意，表单输入，必须都有一个name，表示当前输入的参数名称
checked代表当前被选中
checkbox，多选框，可以选打勾好几个
I have a bike
I have a car
同上name和value
此外有些属性如 checked，代表选中，还有disabled禁止输入，readonly不能修改，value默认值，placeholder 默认展示的内容，提示。等很多
2.下拉列表select
点击后，展示下拉列表，就是这些option选项，单选
很常用的选择形式，适用于较多选择内容。如果固定就几个值，性别这种2个选项，用input radio单选框
3.文本域textarea
适合输入文章，等大段内容。
但是对于要求格式，内容的大段文字，图文输入，通常使用各种editor插件，如百度的ueditor，支持各种格式，下划线等，可以直接插入图片
4.按钮button
type为button，就是普通按钮。如果为submit，则提交当前form表单。
此处onclick，引出事件这个东西，事件是什么，就是用户的操作，点击了某个元素，改变onchange了某个值，按下键盘onkeydown，失去焦点onblur。这里面表明的是，用户进行该操作（触发事件），执行什么js代码。
这个地方是click点击后，alert弹出一个对话框hello word。
alert通常用来弹出提示，有时用来调试，看输出的内容对不对，是不是执行了代码。建议用console.log，在浏览器的console看，因为显示数据全面
5.文件上传file
点击后弹出一个文件选择框，选择文件，确定或取消
此处accept属性，代表接受的文件类型，这里是图片png和jpeg形式的图片
multiple属性也常用，表示多选上传
也有很多上传upload插件供选择，如百度uploader
标签定位选择器
同一个html里面，是不是很多个标签，比如按钮button可能好几个，都叫button，你怎么确定是哪一个，这就需要选择器来定位是哪一个，就是起一个名字，要么叫做id，要么叫做class
1.通过id="" ，id属性的值是唯一的。一般用来给标签元素绑定一个行为事件，就比如点击之后执行js代码。通过 # 获取id的标签元素
2.通过class="" ，class的值可以重复，很多个标签都叫这个class。一般是写css定位，不同的标签样式不一样，同一类class的标签，同样的css样式style。用来绑定行为事件执行js也可以。通过 . 点 获取该class名字的标签元素
通常用于
1.写css代码，绑定样式。
2.用户操作触发事件，方便js代码操作数据，获取或者修改标签的数据
CSS
css就是页面标签元素的样式，位置，间距，大小，形状，颜色等一系列样式。
掌握基本的css布局写法，以及样式调试。
.btn {
display: block; // class为btn的元素，display属性为block
}
写法
采用3种写法引入css样式，
1.引入外部css文件
2.写在特定区域内，内部样式
3.写在标签里面，style="" ，作为一个属性。内联样式
优先级
一个项目内同一个标签很可能有多种样式，最终怎么显示，是有一个优先级的问题。
写在标签里面的样式优先级最高>id选择器>class选择器>标签元素选择>浏览器默认样式
id选择器，class选择器，是之前提到的标签定位选择器部分。
标签元素选择，指选中 同一类的标签，比如button，指代全部按钮button元素
css布局
传统的布局，主要是盒模型。三种形式，文档流，定位（相对、绝对），浮动布局
布局基础
提到布局，要知道是怎么布局，有一个关键css属性
1.display
每一个标签元素都有一个display属性
display:block，就是块级元素，从新的一行开始，独占一整行。像是写文章，不管你这段话多少字。
从新的一行开始，这一行就被占满了
后面的只能在下一行显示了
常见有些标签元素是默认块级元素
,,,