前端入门笔记

大前端开发

一.引入
项目研发
例: estore (电子商城)
1.

  1. 后台管理子模块
    1.1. 数据来源 (数据库)
    1.2. 后台管理系统
    1.2.1. 功能划分:
    分类管理
    商品管理
    品牌管理
    订单管理
    2. 购物子模块
    2.1. 功能划分:
    浏览首页
    信息筛选
    列表页面
    查看商品详情
    添加购物车
    提交订单
    3.estore的 - 企业级要求
    3.1. 架构
    springboot
    spring
    springmvc
    mybatis
    mybatis-generator
    mysql
    poi (excel)
    fastdfs (分布式附件服务器)
    spring security(自己封装 jwt)
    git版本控制(svn)
    github 代码中央仓库(团队协作)
    大前端(web + 移动互联 + 小程序公众号)
    html/css/js
    android
    jquery h5api
    vue vuex vuerouter
    cordova
    weex
    前端入门笔记_第1张图片
    二. 思考
    1. 什么是前后台分离开发?
    https://www.jianshu.com/p/bf3fa3ba2a8f
    简单来说就是根据对数据的不同操作来进行职责的划分
    2.什么是大前端开发,大前端开发中包含了哪些东西?
    简单来说就是前端技术的一个统一,大前端最大的特点在于一次开发,同时适用于所有平台.
    注:具体的精确且详细的理解请关注一个月后的博文.
    三. 课程安排(大前端基础)
    html5
    css3
    android基础(cordova,weex)
    js基础

1.Html基础
1.1. 环境搭建
1) 编辑器环境 轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境(测试)
firefox
google chrome
opera
safari
ie8+ 兼容性
1.2. 编写hello world网页
编写代码 -> 运行测试 -> 交付(部署)【网站】
1) 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/hello.html
2) 部署在静态服务器(apache/nginx)
阿里云(ubuntu16.04)47.112.126.92
jdk
mysql
apache /var/www/html
tomcat
编写代码 -> 编译代码 ->测试 -> 打包 (jar/war)
3. html结构
html是一种超文本标记语言
什么是超级文本?(文本,超级链接,图片,视频,音频…特点:自带样式,自带效果) doctype声明 :


```yaml
HTML5:
    <!DOCTYPE html>  			
HTML4:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
    html主体结构 			>
    				>
    					<!--源信息 -->
    					
    				>
    				>
    					<!--可以显示在网页中的内容-->
    				

注:
xml 标签是可以自定义的
html 所有的标签都是内置的

4.html 语法
html由各种元素组成,一个元素通常包含开始标签,结束标签,内容 ;在开始标签中可以添加属性

> >hello world> >

5.html属性

  1. 核心属性:id、title、style、class等绝大多数元素都具备的属性
  2. 特有属性:某些元素中特有的属性
a 标签:
	://www.w3school.com.cn">W3School>
    		href :用于指定超链接目标的 URL。
    			 绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm")
    			 相对 URL - 指向站点内的某个文件(href="index.htm")
                 锚 URL - 指向页面中的锚(href="#top"):1.如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性。
    		   2.被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)。
    		   3.> 标签中必须提供 href 属性或 name 属性。
    		target:规定在何处打开链接文档。
    			_blank 	在新窗口中打开被链接文档。
				_self 	默认。在相同的框架中打开被链接文档。
				_parent 	在父框架集中打开被链接文档。
				_top 	在整个窗口中打开被链接文档。
				framename 	在指定的框架中打开被链接文档。
    						
   img 标签-----向网页中以链接的形式嵌入一幅图像,没有结束标签.
   例:上海鲜花港 <span class=- 郁金香" />
    		src="该图像的文件的的绝对路径或相对路径"
    		width:宽 可用 px   %
    		height:
  1. html那些事
    Java 编译型语言 : .java --编译----> .class —运行----> jvm
    隶属于sun/oracle公司的,有具体的公司及团队维护,所有的标准oracle说了算,jvm也是oracle开发的,所以,当Java需要进行语法升级的时候 ,jvm也会随之升级(解释java代码)从而达到一个良好的效果升级.
    springboot写完代码之后如何部署
    1) 打包成为war,直接抛在tomcat/webapps,war就会自动解压
    2) 打包成为jar,直接运行jar(内置了tomcat)
    html 解释型语言 : .html —运行—> 浏览器
    当 网页编程标准,w3c 要将h4标准 升级到h5时,只是语法标准的升级,浏览器对于新标准的解析可能迟迟达不到要求,从而导致更新标准的复杂性.

    1. html标签
      学什么?
      标签含义?
      如何使用标签(语义)?
      1. 块级别标签
        作用:搭建网页的结构
        特点:宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
  1. 行级别标签
    作用:填充网页
    特点:默认宽高由内容决定;宽高无法指定;所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素,只允许放文本
		span 			无意义的行内元素
		a 				超链接    href    target
		img 			图片     src      alt 	当图片找不到的时候的文本替代
		strong b em i sub sup d ...
		<span>hello</span>
			<a href="">百度一下</a>
  1. css入门
    6.1.三要素:
    1) html (网页骨架) 块 ,行 (table/form)
    2) css(页面装饰,布局,动画过渡效果)
    原则:对于动画效果能用css实现的绝对不用js
    3) Javascript(树莓派)
    动态DOM, 类似于jstl
    数据交互
    6.2.如何在html中使用css(3种方式)
    1) 嵌入在标签内部
    缺点:将css代码写在了html中,较为混乱,复用性较低.
    优点:优先级高,简单直接(修改别人代码的时候,weex rn)
    2) 集中嵌入在style标签中
 >
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*字体图标库*/
        ul>li::before{
            content:"*";
        }
    >

3).将css独立写在外部的css文件中,并且通过link导入进来,适用于企业级开发

<!DOCTYPE html>
>
>
    -8">
    -width, initial-scale=1.0">
    >cssy引入>
    >
>
    >
        hello world!
    >
    >
        hello css!
    >
>
>

6.4.css语法

selector {
				/*规则*/
				color:#ffffff;
				background-color:pink;
			}

6.5. css选择器 (jQuery选择器)

1) 核心选择器
用法:选择较大范围
			1. 标签(元素)选择器
				div {}
				h1 {}
			2. id选择器
				#one {}
				
>one>
>two> 3. class选择器 .first {}
>one>
>two>
>one>
>two>

>p> 容易造成词穷!!! 4. 并且选择器 div.first {} p#five {} 5. 或者选择器 div,.first {} 6. 普遍选择器 * 2) 层次选择器【一般不超过5层】 1. 子代选择器 .top_nav > ul > li 选中class为top_nav的元素的直接后代ul元素的直接后代li元素 2. 后代选择器 .top_nav li 3. 下一个兄弟选择器 .top_nav li + * 4. 之后所有兄弟选择器 .top_nav li ~ * 3) 过滤器 用法:对已经选择到的元素进行过滤 1. 属性过滤器 selector[name] 已选择到的元素具有name属性 selector[name=v] 已选择到的元素具有name属性,并且name属性的值为v selector[name^=v] 已选择到的元素具有name属性,并且name属性的值以'v'开头 selector[name$=v] 已选择到的元素具有name属性,并且name属性的值以'v'结尾 selector[name*=v] 已选择到的元素具有name属性,并且name属性的值中包含了'v' 2. 伪类过滤器 以:开头的 selector:first-child 过滤出已选择元素中的是第一个孩子的元素 selector:last-child selector:nth-child(2) selector:nth-child(even) selector:nth-child(odd) selector:nth-child(3n+1) selector:only-child selector:not(selector) ... selector:hover selector:active selector:visited selector:focus 3. 伪元素过滤器 可以产生出来一个虚拟元素(行内元素) 以::开头的 div::before { } div::after { } > ::before >one> >two> ::after >

你可能感兴趣的:(前端入门笔记)