web前端基础html,css,js,jquery

目录

1 前端技术：

1.1 学习方法

1.1.1 前端要怎么学？

1.1.2 前端技术栈

1.2 HBuilderX

1.2.1 介绍

1.2.2 安装

1.2.3 主题

1.2.4 字体

1.2.5 去掉px转rem提示

1.2.6 备注字体颜色

1.2.7 项目结构

1.2.8 jQuery语法支持

1.3 Web概述

1.4 静态页面HTML

1.4.1 概念

1.4.2 结构

1.4.3 入门案例

1.4.4 语法

1.5 常用标签

1.5.1 标题标签

1.5.2 列表标签

1.5.3 图片标签

1.5.4 超链接标签

1.5.5 Input标签

1.5.6 表格标签

1.5.7 表单标签

1.5.8 其他标签

1.6 永和门店管理系统

1.7 H5播放视频

1.8 CSS技术

1.8.1 什么是CSS

1.8.2 CSS的用法

1.9 选择器

1.9.1 标签名选择器

1.9.2 class选择器

1.9.3 id选择器

1.9.4 分组选择器

1.9.5 属性选择器

1.10 盒子模型

1.10.1 margin（外边距）

1.10.2 border（边框）

1.10.3 padding（内边距）

1.11 元素类型的补充

1.11.1 块级元素

1.11.2 行内元素

1.11.3 行内块元素

1.12 永和门店系统

1.13 静态网页和动态网页

1.13.1 动态网页

1.13.2 网页是如何和后端交互的呢？

1.14 JS概述

1.14.1 什么是JS

1.14.2 名词解释

1.14.3 特点和优势

1.14.4 入门案例

1.15 HTML中引入JS

1.15.1 通过script标签引入JS代码

1.15.2 通过script标签引入外部的JS文件

1.16 JS语法

1.16.1 注释

1.16.2 基本数据类型

1.16.3 复杂数据类型

1.16.4 JS的变量

1.16.5 JS的运算符

1.17 JS语句

1.17.1 if…else语句

1.17.2 switch…case语句

1.17.3 循环语句

1.18 JS数组

1.18.1 JS数组的声明方式

1.18.2 数组需要注意的细节

1.18.3 数组的常见操作

1.19 JS函数

1.19.1 方式一：通过function关键字声明函数

1.19.2 方式二：通过函数直接量声明函数

1.20 JS对象

1.20.1 内置对象

1.20.2 自定义对象

1.21 DOM树的作用

1.21.1 组成

1.21.2 DOM树结构

1.21.3 dom.html

1.21.4 总结

1.22 console调试网页

1.22.1 Chrome

1.22.2 log

1.22.3 warn

1.22.4 table

1.23 异步请求局部刷新

1.23.1 架构

1.23.2 技术栈

1.23.3 执行过程

1.24 jQuery简介

1.24.1 什么是jQuery(了解)

1.24.2 jQuery的优势(了解)

1.24.3 jQuery有多简洁呢

1.24.4 jQuery引入

1.25 文档就绪函数

1.25.1 测试

1.25.2 问题

1.25.3 解决方式一

1.25.4 解决方式二

1.25.5 总结

1.26 jQuery事件绑定

1.26.1 什么是事件

1.26.2 方式1(js版)

1.26.3 方式2(js版)

1.26.4 方式3(jQuery版)

1.26.5 练习

1.27 jQuery选择器

1.27.1 基本选择器

1.27.2 练习

1.27.3 高级选择器-层级选择器

1.27.4 高级选择器-基本过滤选择器

1.27.5 其他选择器

1.28 json

1.28.1 概念

1.28.2 获取京东商品价格

1.28.3 格式化

1.28.4 转换

1.28.5 测试

1.28.6 jd-json.html

1.29 ajax

1.29.1 概念

1.29.2 格式

1.29.3 jd-ajax.html

1.30 扩展：

1.30.1 json和js对象的区别

1.31 NodeJS

1.31.1 简介

1.31.2 安装

1.31.3 查看安装路径

1.31.4 node-server.js

1.31.5 启动停止服务

1.31.6 测试

1 前端技术：
1.1 学习方法
1.1.1 前端要怎么学？
前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。

但从整体来看（前端占软件开发总量的百分之十左右，地位可见一斑）；从技术的含金量来看（如：业务功能是核心，远超UI的作用；分布式缓存redis的作用远超vue前端），从职业的发展路径来看（通向架构师之路，大都由后端工程师晋升的，前端几乎没有）；从薪资的天花板来看（随着年头的拉长，后端工程师的薪资是前端的几倍），后端优势远大于前端。所以对于大家而言，千万不要把重心放在前端技术上，会用，会查，会改才是正确的定位！

1.1.2 前端技术栈

l HTML超文本标记语言 实现页面展现，形成静态网页

l CSS层叠样式表 实现页面美化

l JS javascript脚本语言 实现页面前端和后端的数据交互，形成动态网页

l React facebook出品 前端、移动端JavaScript框架

l Angular google 出品 基于TypeScript的开源 Web 应用框架

l Vue 国人出品，阿里收购 构建用户界面的渐进式框架，自底向上开发

l NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

目前市场主流是ES6标准，但TypeScript可能会成为趋势，如Vue 3.0选用的语言则为TypeScript。TypeScript将带来JavaScript的华丽转身，迈入强语言行列，所以其发展趋势不容小觑。

Vue Element Admin 是通过Vue框架结合饿了吗的ElementUI，并在其基础上实现了后台管理的基本功能，企业在其基础上，直接二次开发，添加业务，实现敏捷编程。

说明: https://img1.tuicool.com/QbMj6nN.jpg!web

1.2 HBuilderX
1.2.1 介绍
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。

它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。

特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。

1.2.2 安装
官网：https://www.dcloud.io/hbuilderx.html

安装app版本，整体下来近600m。

1.2.3 主题

1.2.4 字体
默认字体i和l分不清，换成Verdana字体。

1.2.5 去掉px转rem提示
在写手机端的时候，要把px转换为对应的rem单位，日常PC端开发时不需要。

1.2.6 备注字体颜色
默认灰色看不清晰，可以换成黑色，直接编辑Default.xml，修改下面3行的颜色，重新启动HBuilderX即可。

1.2.7 项目结构

1.2.8 jQuery语法支持
HBuilderX对javascript、html、css、vue支持很好，这些无需选择默认支持，同时也对jQuery有很好的支持，但需要单独选择。

1.3 Web概述

1.4 静态页面HTML
1.4.1 概念
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

HTML历史上有如下版本：

l HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布

l HTML 2.0：1995年11月作为RFC 1866发布

l HTML 3.2：1997年1月14日，W3C推荐标准

l HTML 4.0：1997年12月18日，W3C推荐标准

l HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准

l HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手

1.4.2 结构
Ø 文档声明，用来声明HTML文档所遵循的HTML规范。

Ø 头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。

Ø 体部分，用来存放网页要显示的数据。

Ø 声明网页标题

Ø 用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

1.4.3 入门案例
<!doctype html>

<head>

   <title>quickstart</title>

   <!-- 防止中文乱码 -->

   <meta charset="UTF-8"/>

</head>

<body>

   hello html ~

   你好呀

   <!--

       ctrl c / v 复制粘贴

       ctrl x / d 删除

       ctrl 上/下 箭头 调整位置

   -->

</body>

1.4.4 语法
Ø HTML标签

HTML是一门标记语言，标签分为开始标签和结束标签，如。

如果开始和结束中间没有内容，可以合并成一个自闭标签，如 。

Ø HTML属性

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

如：

Ø HTML注释

格式：

注意：不能交叉嵌套！

Ø 如何在网页中做空格和换行

换行：

空格：在HTML中，多个空格会被当成一个空格来显示。 

1.5 常用标签
1.5.1 标题标签

<!doctype html>

<head>

   <title>01</title>

   <meta charset="utf-8"/>

</head>

<body>

   <!-- 标题标签:

       包括:h1~h6

   -->

   <h1 align=”center”>我是1号标题</h1>

   <h2>我是2号标题</h2>

   <h3>我是3号标题</h3>

   <h4>我是4号标题</h4>

   <h5>我是5号标题</h5>

   <h6>我是6号标题</h6>

</body>

1.5.2 列表标签

<head>

   <meta charset="utf-8">

   <title>标题标签</title>

</head>

<body>

   <!-- 列表标签:

       ol + li 有序

       ul + li 无序

       type 定义列表符号,默认是 disc 小圆点

    -->

   <ul type="circle">

       <li>中国</li>

       <li>美国</li>

       <li>小日本</li>

   </ul>

   <ul type="square">

       <li>中国</li>

       <li>美国</li>

       <li>小日本</li>

   </ul>

   <ul type="disc">

       <li>中国</li>

       <li>美国</li>

       <li>小日本</li>

   </ul>

</body>

1.5.3 图片标签

<head>

   <meta charset="utf-8">

   <title>标题标签</title>

</head>

<body>

  

   <!--   图片标签:

       img向网页中引入图片 (相对路径/绝对路径)

       border:边框

       width:宽度

       height:高度

    -->

   <img src="1.jpg" border="10px" width="50%" height="30%">

</body>

1.5.4 超链接标签

<head>

   <meta charset="utf-8">

   <title>标题标签</title>

</head>

<body>

  

   <!-- 超链接标签

       href 指定要跳转的位置

       target 指定要打开的方式

   -->

   <a href="http://www.baidu.com" target="_blank">点我</a>

   <a name="_top">java从入门到精通</a>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

       <h6>你好java</h6>

   <a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->

      

   <br><br><br><br>

</body>

1.5.5 Input标签
普通文本框

密码

男 单选框

数字值

日历

杨幂 复选框

1.5.6 表格标签

说明: C:\Users\ADMINI~1\AppData\Local\Temp\1620565605(1).png

<head>

   <meta charset="utf-8">

   <title>各种标签</title>

</head>

<body>

   <!--table表格标签

       tr 表格里的行

       td 表格里的列

       border:表格的边框

       cellspacing:单元格的间距

       bgcolor:背景颜色

       width:宽度

       align:位置

    -->

   <table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">

       <tr>

          <td colspan="2">11</td> <!-- colspan是列合并,合并2列-->

          <!-- <td>12</td> -->

          <td>13</td>

       </tr>

       <tr>

          <td>21</td>

          <td>22</td>

          <td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->

       </tr>

       <tr>

          <td>31</td>

          <td>32</td>

          <!-- <td>33</td> -->

       </tr>

   </table>

</body>

1.5.7 表单标签

<head>

   <meta charset="utf-8">

   <title>form表单</title>

</head>

<body>

   <!-- <form method="get"> -->

   <!-- post提交安全不显示数据 -->

   <form method="post">

       <table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">

          <th colspan="2">注册表单</th>

          <tr>

              <td>用户名:</td>

              <td><