4.前端基础HTML+CSS
简述
一个网站的前端主要是两个部分，界面和交互，界面就是长什么样，有的好看，有的丑。交互此处指的是与后端的交互，传递接收数据。
本篇主要是讲述html css js以及jquery使用。前端主要是这么几个部分，html写页面结构，css写样式，js写各种交互，jquery是常用的一个js框架封装了简化的函数。
html
html就是页面的结构，骨干。主要的几个部分，以及常用标签
标签分两种形式
<xx></xx>，<xx/>
结构
<html>
<head>头，此处通常
1.引入css
<link rel="stylesheet" type="text/css" href="xxxx.css路径地址">
引入js文件
<script type="text/javascript" src="xxx.js路径地址"></script>
2.网站标题等利于SEO搜索引擎优化
<title>网站标题</title>
以及<meta>描述网站关键词
</head>
<body>身体，写网站的结构，这一块是显示什么，另一块显示什么</body>
</html>
为什么要从外部引入css,js，写在当前html文件也是可以的，但是有些公共的css，js，你不能每个页面html都写一遍吧，所以公共css，js，在需要的页面引入即可调用。当前页面的css，js也可以采用如下写法，写在特定区域内
<style type="text/css">
//当前html中，写css样式代码的区域
</style>
<script type="text/javascript">
//当前html中，写js代码的区域
</script>
注释，html中注释写法不同于//，如下所示
块
之前提到了，html就是网站的结构。有head头，有body身体，像一个人，但是人身上很多个部位，胳膊，有腿，有手，有脚，这一个个的部位就像是html的一个个块
html也一定的结构块，比如博客，这一块可能是网站的导航栏，那一块是网站的文章内容，另一块可能是作者信息。这个块用什么区分，就是div
1.<div>内容</div>
相当于容器，把各种各样的其他元素写在这里面，如表格table，img图像，文章等。
div可以很大，可以很小，就是一块块的，一个大div里面可以有很多小div
2.<span></span>
一般用来放文本
html结构
也就是这个网站的结构，区块。最开始是产品经理设计好网站展示的大致内容，如这一块显示用户信息，另一块显示用户的订单，简单草图，原型图，然后是专门的UI设计师，美化这个界面，这一块什么颜色，另一块样式是圆的还是方的，ps之类工具做出UI设计图
前端拿到UI图后，就要转成实际显示网页html css文件
1.开始思考结构，头部，躯干，脚部，先看这三块，最上面，最下面，中间。根据具体UI图，然后每一块布局怎么写，比如躯干，又分为左边，右边，这每一边，又可能是上中下，总之是一块一块的。思考大块，每一块的大致包含内容。
如博客页面，最上面，导航栏，中间是各种文章，最下面网站备案信息。先把最明显的div分出来，然后中间文章，又好几个文章，每一个文章又分为左边，预览图，右边标题简介。
2.细化结构，这一块，用什么标签来写。完成之后，你的网站大致样子就出来了，就是比较丑
3.写好了网站的结构，该做美化了，就是写css，写布局，具体边距是多大，这一块外边框是原型，另一块颜色用红色，这一块显示一个logo图片等等等
补充下，通常拿到ui要进行切图和标注
切图，就是比如UI设计了一个很好看的logo，你怎么把这个图片从psd的设计图里面弄出来，变成一个单独的小图片png
标注，就比如ui规定，你这个块内容，就多长多宽，多高，和周围的其他块的距离是多大
现在借助各种工具，如蓝湖，pxcook等，切图标注自动生成
常用标签
标签就是代表这一块是怎么显示，因为浏览器接收到了存在服务器的html文件，是不是要加载，浏览器怎么知道怎么加载，每一块怎么显示？因为有一套国际标准，遵守这套标准即可
属性，标签是可以有属性的，用来指定这个标签的信息，多是 键值对形式
属性名name="属性的值" ，如<a href="href表明这个的网址url">a标签，点击跳转到新页面</a>
文字类
1.h 1234标题系列
<h1>h1标题内容</h1>
<h2>h2标题内容</h2>
还有h3,h4等等等
写在这类标签里面的字体 加粗，变大
2.<hr /> 水平线
显示一个水平横线，常用来显示内容分割，比如这一段写完了，加一个横线，帮助用户区分内容
3.<p></p> 段落
<p>段落内容</p>
一般是一篇文章，里面好几个段落
4.<br /> 换行
相当于word里面你打回车，换下一行
链接
1.<a></a> 链接
<a href="地址url">内容如文字，按钮等</a>
点击内容部分可能是按钮，也可能是文字，打开新的链接地址url
常用target="_blank"
如下
<a href="地址" target="_blank">内容</a>
在浏览器的新窗口打开新的页面，不加这个是当前的窗口
表格
表格就像是excel表，展示数据很常用。尤其是各种后台管理系统，显示各种列表，订单列表，用户列表
<table>
<tr>
<th>用户id</th>
<th>用户名</th>
</tr>
<!-- 上面th是表头 -->
<!-- 下面td是表格内容 -->
<tr>
<td>1</td>
<td>用户1名字</td>
</tr>
<tr>
<td>2</td>
<td>用户2名字</td>
</tr>
</table>
1.<tr>就是行，row，一个表是不是很多行， <tr>这一行的内容</tr>
2.这里th td是啥， 这都是列，一个就是一列。
3.th td什么区别，想想excel表格，最上面第一行（th）是不是写的这一列代表什么数据，就是表头，如这一列是id，另一列是用户名。那么剩下的很多内容，列就是td了
列表
这个列就像是你的 任务清单列表，一行一行的
通常写网站导航
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
图像、音频、视频
1.图片
<img src="url" alt="文字内容"/>
src写图片的url地址
alt写这个图片内容，鼠标放上去，会有个小提示，就是alt的内容
音频，视频为html5标准提供的，就是最新的html标准，简称h5
2.音频
<audio controls>
<source src="xxx.mp3" type="audio/mpeg">
</audio>
3.视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
通常音频，视频会使用第三方封装的插件，解决不同浏览器兼容性，文件格式解码之类的各种问题
图表类
这类一般借助第三方插件实现，如echarts，展示各种折线图，柱状图，散点图，饼图各种各样的图表，后台数据统计使用比较多
表单
以上全部，都是展示类的标签，展示文字，图片，表格等，把内容展示给用户看。另一类是属于交互类，比如你参加一个调查问卷，提交信息，需要你输入填写信息的，这个就是表单
<form action="xxx.php表单提交给哪个后端文件处理" method="POST形式">
<input type="text" name="name">
<!-- form这里面写各种input框，按钮等 -->
</form>
method为post形式时，通常为提交信息，填了一个问卷，填了一个订单信息，填了一个用户信息，一个商品。如后台管理 ，创建一个新商品
为get时，常用来做查询操作，加入各种筛选条件，如商品分类，关键词等
通常
1.input
input就是输入框，input主要几个元素
type，name，value
type就是这个input框的形式，可以显示为文本输入，也可以选择框
text为输入文本，最常见的文本框，如输入用户名，其他文本
password输入密码，输入了会以* 星号
number只能输入数字，如限定输入金额等，只能是数字
radio，这是单选框，二选一，或者多选一，必须只能选一个
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
同一组的radio单选框，name是相同的，name是啥，这个和后端交互，发送数据相关。发送的数据是不是要告诉后端这个数据是干什么的，和value是一对，如果只发送male男，不知道这是什么意思吧，如果发送sex=male男，是不是就知道这个数据是性别，男。结合前面php基础部分，接收请求。
注意，表单输入，必须都有一个name，表示当前输入的参数名称
checked代表当前被选中
checkbox，多选框，可以选打勾好几个
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
同上name和value
此外有些属性如 checked，代表选中，还有disabled禁止输入，readonly不能修改，value默认值，placeholder 默认展示的内容，提示。等很多
2.下拉列表select
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>、
</select>
点击后，展示下拉列表，就是这些option选项，单选
很常用的选择形式，适用于较多选择内容。如果固定就几个值，性别这种2个选项，用input radio单选框
3.文本域textarea
<textarea name="message" rows="10" cols="30">
输入大段文字
</textarea>
适合输入文章，等大段内容。
但是对于要求格式，内容的大段文字，图文输入，通常使用各种editor插件，如百度的ueditor，支持各种格式，下划线等，可以直接插入图片
4.按钮button
<button type="button" onclick="alert('Hello World!')">点击</button>
type为button，就是普通按钮。如果为submit，则提交当前form表单。
此处onclick，引出事件这个东西，事件是什么，就是用户的操作，点击了某个元素，改变onchange了某个值，按下键盘onkeydown，失去焦点onblur。这里面表明的是，用户进行该操作（触发事件），执行什么js代码。
这个地方是click点击后，alert弹出一个对话框hello word。
alert通常用来弹出提示，有时用来调试，看输出的内容对不对，是不是执行了代码。建议用console.log，在浏览器的console看，因为显示数据全面
5.文件上传file
<input type="file" name="avatar" accept="image/png, image/jpeg">
点击后弹出一个文件选择框，选择文件，确定或取消
此处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.写在特定区域内，内部样式
<style type="text/css"></style>
3.写在标签里面，style="" ，作为一个属性。内联样式
优先级
一个项目内同一个标签很可能有多种样式，最终怎么显示，是有一个优先级的问题。
写在标签里面的样式优先级最高>id选择器>class选择器>标签元素选择>浏览器默认样式
id选择器，class选择器，是之前提到的标签定位选择器部分。
标签元素选择，指选中 同一类的标签，比如button，指代全部按钮button元素
css布局
传统的布局，主要是盒模型。三种形式，文档流，定位（相对、绝对），浮动布局
布局基础
提到布局，要知道是怎么布局，有一个关键css属性
1.display
每一个标签元素都有一个display属性
display:block，就是块级元素，从新的一行开始，独占一整行。像是写文章，不管你这段话多少字。
从新的一行开始，这一行就被占满了
后面的只能在下一行显示了
常见有些标签元素是默认块级元素
<div>,<h系列>,<table>,<form>
display:none
通常被用来在不删除元素的情况下隐藏元素
display:inline，内联元素，和其他标签元素在一行，共同占一行，大小间距不能设置，一般就是内部包含的元素大小。常见
<a>、<span>、<lable>等
display:inline-block，内联块状元素，和其他标签元素在一行，大小间距可设置
<img>、<input>
2.盒模型
一个标签元素就像是一个盒子，如果这个标签里面或者外面还有套的盒子，那是不是会有边距。
这个盒子和他外层盒子，是不是外边距。他内层套的盒子，是不是内边距。另外这个盒子是不是也有个厚度，有的盒子厚，有的薄，这就是边框
同时这个边距是分上下左右这几个方向的。
想象你有三个快递盒子，小盒子的放在了中等大的盒子里，中等大的盒子 又放在大盒子里。对于这个在中间的快递盒子来说，和小盒子这个就是内边距，和大盒子就是外边距。
外边距margin
内边距padding
边框border
随便打开浏览器开发者模式，element->styles，选中某个元素后，css旁边会显示一个 方框，中间这个实体黑框就是这个盒子，和外面的间距是margin外边距，内部间距就是padding内边距，盒子本身厚度边框border
了解盒模型，帮助理解写css布局的时候，与周围标签元素间距离问题。
padding:20px 10px 15px 30px; 这种表示边距的写法，顺序为上、右、下、左(顺时针)
或者与四个边间距单独写，XXX -top,如margin-top,或者 -bottom，-left,-right
px是个啥，是个长度单位，就好比cm厘米，米。表示间距大小，或者字体大小，长宽高大小，此外还有类似单位rem，rpx（微信小程序），以及百分比%
三种传统布局
1.文档流布局display
之前提到display，块级独占一行，内联共享占一行。
网页加载就像是写文章，一行行的往下写
块级，display:block元素直接独占一行
内联, display:inline的都挤在同一行，从左到右水平显示
2.浮动布局Float
之前的独占一行是不是太浪费空间了，可能一个元素很小一部分，也独占一行，只是占了一点点地方，他右边是不是大片空白。
怎么让他下边的块级元素也跟着上来，他俩并排显示，让他俩占一行，一个左边，另一个靠着他在他右边
div{
float:left; //float属性，left左浮动，往左边放，right右浮动，放到右边
}
比较常用的布局方法，让不同块级标签元素，都在同一行并排显示
3.定位布局Position（相对relative、绝对absolute、固定fixed）
这个定位布局，属于层模型，原来不都是文档流，一行行往下写。现在有新的需求，增加了一个层的概念。
就好比写文章，你在文章上 贴一个贴画，贴在文字上面。这个贴画是不是和文章不在同一层，他在上一层，因为贴在上面了。
分为是相对定位，绝对定位这几种。
这个定位是不是得有个参照物才能进行定位，有个对比参照。是和哪一个标签的位置对比的
相对定位
相对定位是相对于原来的位置，就是原来在这个文档流里面的位置，此时还在这一层里面，简单说，他原来的位置依然保留，不会被占用。
好比写文章，写到这里，该配一个插图。但是不想放这里，我想相对与这个应该在的原来位置，放的往左边，往上边挪动一点。剩下的文章会绕过插图原来所在的位置，继续写
div{
position:relative; /*相对定位*/
left:10px;
top:10px;
}
绝对定位
绝对定位，是相对于他最近的具有定位属性position的父级块状元素（左上角），如果没有，就是相对于body或者相对于浏览器。这个相当于不在原来的层里，到了上一层，不占用原来的位置了，剩下的内容占用他的位置继续。
比如说写文章，写了一段文字，这一段文字得贴个贴画，绝对定位，就是相对于这段文字的位置来。贴画原来的空间位置被占用，剩下文章从他原来的位置继续写。如下left为在距离这段文字（父级块状元素）左边10px，距离上边10px。如果没有这段文字，那就是相对于你这一页纸（浏览器窗口）
div{
position:absolute; /*绝对定位*/
left:10px;
top:10px;
}
子绝父相是一种常用布局方式，relative与absolute组合使用。父级元素使用相对定位，继续保留占位置，子元素用绝对定位，相对于父级进行定位，子元素不占位置，不影响其他子元素。
固定定位
相对于浏览器，固定在某一位置。不管页面滑动，保持相同位置。
常用来，比如返回顶部按钮，是固定住的
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
常用样式
边框
border
border-radius 边框圆角弧度
阴影
box-shadow
背景
background-image 背景图片
字体
font-family 字体名，微软雅黑之类
font-weight 粗细
font-size字体大小
颜色
color
宽
width
max-width
高
height
max-height
上下左右边距
外边距margin
内边距padding
UI框架
网站通常风格界面是相似的，自己都实现，一个个的写css是不是很麻烦，就出来了UI框架，如最知名的Bootstrap，提供各种样式的 按钮，表格，轮播图常用组件等，用户引入后即可使用。
另一个是响应式布局， 因为不同用户设备大小不一样，你的电脑14寸，他的12寸，分辨率也不同，所以要根据不同大小适配不同样式。这类框架通常提供栅格布局解决这类响应式问题，在不同大小设备小，显示不同内容，保证效果
PC端
常见的
Bootstrap
很多网站都是基于bootstrap来写的，尤其是很多后台管理
建议使用bootstrap这种使用人数多，有长期维护更新团队管理的项目，有些小项目，可能个人维护，一段时间忙后面就不管了，出了bug也没人解决
layui
尤其是layer弹出层，比较常用，很多后台admin也是基于layui
element-ui
很不错的风格，饿了么团队开发的，尤其适合vue项目
iview ui
也是基于vue的ui组件库，也有移动版，小程序版的
amazeui等
移动端
vant
有赞推出，很适合开发移动端商城，有weapp小程序版
weui
微信官方项目，微信风格，支持小程序
mint ui
vux
cube ui
滴滴团队开发的移动端ui库
UI框架，要会用，多看看官方手册。很多时候，没必要自己写UI，尤其是没有专门的UI情况下，自己写的大多丑，别人封装的好看，符合大众审美风格，调用也简单。
网友评论