前端Html的全新认识

介绍
zhy
引入
项目研发（项目储备）
1. estore (电子商城)
  1. 后台管理子模块
    数据来源（数据库）
    后台管理系统
    分类管理（
    商品管理
    品牌管理
    订单管理
    …
  2. 购物子模块
    浏览首页
    筛选
    列表页面
    查看商品详情
    添加购物车
    提交订单
    …
2. estore - 企业级要求
  架构
  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
思考
什么是前后台分离开发
什么是大前端开发，大前端开发中包含了哪些东西
如果你是一个项目经理，你如何去调度资源来进行开发？
婚纱摄影
婚纱照
公众号（宣传）
预约下单
会员管理
支付对接
文件传递
插件（提升工作效率）

大厂（BAT）
JavaEE（综合实力）
后台 - 前端

创业
各个体系比较熟悉
课程安排（大前端基础）
html5
css3
android基础（cordova,weex）
js基础
Html基础
1. 环境搭建
  1. 编辑器环境
    轻量级的编辑
    sublime(emmet插件)
    vscode *
  2. 浏览器环境（测试）
    firefox
    google chrome
    opera
    safari
    ie8+ 兼容性
2. hello world
  编写代码 -> 运行测试 -> 交付（部署）【网站】
  1）部署在tomcat中( 动态服务器- 慢)
  tomcat/webapps/
  hello.html
  2) 部署在静态服务器（apache/nginx）
  阿里云（ubuntu16.04）134.175.154.93
  jdk
  mysql
  apache
  /var/www/html
  tomcat
  
  编写代码 -> 编译代码 ->测试 -> 打包（jar/war）
  目录管理
  d:/briup
  javaee
  eclipse
  tomcat
  maven
  workspace
  …
  webui
  html
  css
  js
3. html结构
  超文本标记语言
  超级文本（文本,超级链接,图片，视频，音频…）
  doctype声明
  HTML5:
  
  HTML4:
  
  html主体结构
```
    </head><body></body></html>
```
  xml
  标签是可以自定义的
  html
  所有的标签都是内置的
  
  一级标题
  
  语法
  html由各种元素组成，一个元素通常包含开始标签，结束标签，内容
  在开始标签中可以添加属性
```
 <div class="content" id="one"><span>hello world</span></div>属性1) 核心属性：id、title、style、class绝大多数元素都具备的属性2) 特有属性某些元素中特有的属性a      href targetimg  src width height
```
4. html那些事
  Java
  编译型语言
  .java -> .class -> jvm
```
 隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的语法升级    拉姆达jvm升级（解释java代码）效果升级 springboot写完代码之后如何部署1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压2) 打包成为jar,直接运行jar(内置了tomcat)
```
  html
  解释型语言
  .html -> 浏览器
```
 网页编程标准，w3ch4 -> h5语法升级    废弃掉 strong frameset ...新增       header article section...解释器火狐，谷歌，欧朋...容错性非常棒效果升级
```
5. 标签
  学什么？
  标签含义
  如何使用标签(语义)
  默认样式重置 h1
  1. 块级别标签
    作用：搭建网页的结构
    特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
    
    div 【容器】无意义的块元素（无招胜有招）
    h1~h6 标题
    p 段落
    ul>li 【容器】列表
    ol>li 【容器】列表
    dl>dd,dt 【容器】列表
  2. 行级别标签
    作用：填充网页
    特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本
    
    span 无意义的行内元素
    a 超链接
    href
    target
    img 图片
    src
    alt 当图片找不到的时候的文本替代
    strong b em i sub sup d …
    
    hello
    百度一下
6. css入门
  三要素：
  1) html (网页骨架) 块，行（table/form）
  2) css（页面装饰，布局，动画过渡效果）
  原则：对于动画效果能用css实现的绝对不用js
  3) Javascript（树莓派）
  动态DOM, 类似于jstl
  数据交互
  如何在html中使用css(3种方式)
  1) 嵌入在标签内部
  将css代码写在了html中，较为混乱
  复用性较低
```
         好处：优先级高，简单直接（修改别人代码的时候，weex rn）2) 集中嵌入在style标签中3) 将css独立写在外部的css文件中，并且通过link导入进来适用于企业级开发
```
  css语法
  选择器 {
  /规则/
  color:#ffffff;
  background-color:pink;
  }
7. css选择器 (jQuery选择器)
  1. 核心选择器
    用法：选择较大范围
    1. 标签（元素）选择器
      div {}
      h1 {}
    2. id选择器
      #one {}
      
      one
      
      two
    3. class选择器
      .first {}
      
      one
      
      two
      
      one
      
      two
      
      p
    词穷！！！
    1. 并且选择器
      div.first {}
      p#five {}
    2. 或者选择器
      div,.first {}
    3. 普遍选择器
  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
8. 规则
  字体
  网络字体（字体图标可）
  文本
  列表
  盒子
  背景
9. css布局

前端
1. 底层【打扫卫生，手动打扫卫生】
html css Javascript
模态框、提示框、表格、列表…
dom操作（使用js控制css/html）
让模态框显示
var dom = document.getElementById(“one”);
dom.style.visible = true;
2. 中层【手扶着吸尘器打扫卫生】
jsp (html js jquery)
基于dom操作，dom驱动框架
jquery、easyui(组件)
$("#one").css(“visible”,true);
3. 高层【保姆】1500平大别墅（森林公园）3亿
移动互联（前后台分离开发）
java 写服务端语言
|
android/ios 写界面语言
H5 写界面的语言（web,混合式）（webview）
vue/angular/react 【脱离dom操作】
1. 获取数据 ajax，交互
2. 将数据绑定到页面中（vue-dom操作）
3. 当数据改变后页面更新（vue）

在html中声明的charset表示什么意思？
告诉浏览器你应该使用charset指定的字符编码进行解码
在html中声明的viewport表示什么意思？在移动设备中调整字体显示,相对单位电脑 1400 * 1240 14寸手机 1400 * 1240 6寸

前端Html的全新认识相关推荐

2022年学Web前端怎么样？还有发展前景吗？
Web前端工程师不论是薪资还是工作环境都是很让人羡慕的,因此有不少的小伙伴想要加入到前端领域中去.因此,很多想要学Web前端的小伙伴们就会询问:2022年学Web前端还有发展前景吗?下面我们就和小千一 ...
太阳花浏览器_一道浏览器面试题，就能看出你的前端功底
作为前端工程师,几乎每天都要和浏览器打交道. 理解浏览器是如何工作的,对我们做业务的技术选型.架构设计等都有非常重要的作用,让我们可以准确评估 Web 开发项目的可行性,站在更高维度审视页面,以及在快 ...
Docker将会在Windows和MAC平台本地化
对Linux用户来说,Docker一直是一个本地化的应用程序,但是对于Windows和MAC来说并不是.好消息是,Docker马上将要发布两个新的测试版本:Docker for Mac and Doc ...
从野蛮生长到元年爆发，细数RPA的百年风雨
"据调查显示,2020年中国RPA市场规模约为17.4亿元,与2019年相比,增长率达到47.5%,预计2025年中国RPA市场规模可以达到38.2亿元. 大数据产业创新服务媒体 --聚焦数 ...
你真正了解什么是接口测试么？接口实战一“篇”入魂
最近在工作中,看到一些新手测试同学,对接口测试存在很多疑问,甚至包括一些从事软件测试3,5年的同学,在聊到接口时,也是一知半解:今天借着这个机会,对接口测试做个实战教学,顺便总结一下经验,分享给大家. ...
浏览器之间的斗争梗，笑死 skr
浏览器的反应速度昨儿,艿艿看到这么一张图,讲的是浏览器的反应速度,哈哈哈哈哈,笑skr,实在嘲讽. 如果没看懂的,请..... 说到浏览器,大家肯定会想到前端.渲染.JS之类的,不过随着技术的快速迭 ...
上周热点回顾（7.13-7.19）
热点随笔: · 10年工作经验老程序员推荐的7个开发类工具(James Li) · 为了理想,我放弃了一切!(李玉宝) · 一次面试引发的思考(中小型网站优化思考)(奇民) · (博客园首发)开源框架 ...
基于 iframe 的全新微前端方案
作者:damyxu,腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点, ...
css3新动_10款重量级CSS3的全新特效实现超酷前端动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

前端Html的全新认识

一级标题

前端Html的全新认识相关推荐

最新文章

热门文章