前端

最新推荐文章于 2020-11-15 22:29:09 发布

qq_40152819

最新推荐文章于 2020-11-15 22:29:09 发布

阅读量95

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_40152819/article/details/109522522

版权

前端

资源

静态资源

使用三大件开发的，HTML+CSS+JS
所有人看到的是一样的，
如果用户请求静态资源，那么服务器直接发送给浏览器，浏览器内置了静态资源的解析引擎用于展示

动态资源

每个人看到的不一样
技术如：jsp，servlet，php，asp
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

HTML

文件标签
- html：html文档的根标签
- head：指定文档的一些属性，引入外部资源
- title：标题标签
- body：体标签
- ：定义文档是html
文本标签
- <!–注释–>
- <h1> to <h6>：六级标题
- <p>：段落
- <br>：换行，闭合不闭合都可以
- <hr/>：显示一条水平线
- <b>：加粗
- <i>：斜体
- <font>：字体标签，有color，size，face属性
- <center>: 文本居中
- 颜色的格式：1.rgb(值1，值2，值3) 2.#值1值2值3，使用十六进制
- width：1.使用数值，默认是px像素 2.%占比相对于父元素的比例
图片标签
- <img src=“路径” align=“位置” alt=“替换文字” width\height=""/>
- 相对路径：默认是./代表当前目录， …/代表后退上一级目录
列表标签
- 有序列表：<ol> <li> 无序列表：<ul> <li>
- <ol>中的type可以设置列表标号类型，比如数组，字母，罗马数字
- <ol>中的start可以设置列表标号从第几个开始
- <ul>中的type可以设置列表标号形状，如disc，square，circle
链接标签
- <a href=“URL” target="_blank">在空白页面打开指定链接
- href中还可以写本地资源或者邮箱
- href="javascript:void(0)"让标签可以被点击但是又不跳转
- href的属性值不写的话点击会刷新
块标签
- 块标签没有样式，方便与CSS结合控制样式
- <span>：信息在一行展示，行内标签，内联标签
- <div>：每一个div占满一整行，块级标签
语义化标签
- 标签中加入id=""用于标记控制，html4之前
- 语义化标签：<header>,<footer>等，没有样式，方便阅读
表格标签
- <table border=“边框” width=“表格宽度” cellpadding=“内容和单元格距离” cellspacing=“单元格距离，若为0，格线合并” bgcolor=“背景色”>：定义表格
- <tr>：定义行，有bgcolor，align等属性
- <td rowspan=“2” colspan=“3”>：定义单元格,占了2行3列
- <th>：定义表头单元格，会默认加粗居中
- <caption>：定义表格标题，默认在表格中居中
- <thead>，<tbody>，<tfoot>：表格的三个部分，没样式，增加可读性
- 如果一行有多个单元格，采用表格的嵌套
表单标签
- 采集数据，用于和服务器交互
- <form action=“指定提交数据的URL” method=“提交方式,常用get和post”>：定义了一个采集数据的范围，没样式
- get和post：get请求参数会在地址栏中显示，url的长度有限制，不太安全；post的请求参数会封装在请求体中，请求参数大小没有限制，比较安全
- <input name="" type=“样式” check=“选框指定默认值” placeholder=“提示信息”>：表单的数据如果想被提交，必须指定name属性
- type样式：text,password,radio(单选框),checkbox(复选框),file(文件选择),hidden(隐藏域),submit(提交),button,image,color(取色器),date,datetime-local(带时分的),email,number
  - 如果想让多个单/复选框实现单选的效果，则多个单/复选框的name属性必须一样
  - 一般会给单/复选框value值，指定其被选中后提交的值
  - 如果type为image，可通过src属性指定图片路径，点击即提交
- <label for=“和input的id对应”>：指定输入项的文字描述信息
- <select>：下拉列表
- <option selected默认被选中 value="">：列表项
- <textarea cols=“列数” rows=“行数”>：文本域

CSS

样式
- 内联样式：在标签内使用style属性指定css代码，style中键值对构成，冒号连接，分号隔开
- 内部样式：在head标签内定义style标签
- 外部样式：定义css文件，head标签内定义link标签引入样式，如：
- <link rel=“stylesheet” href=“css/a.css”>
- 使用/* */注释
css语法
- 格式：选择器{属性:属性值; 属性:属性值; 属性:属性值}
- 选择器
  - 基础选择器(优先级：id>类>元素)
    1. id选择器：#id值{}
    2. 元素选择器：标签名{}
    3. 类选择器：.class值
  - 扩展选择器
    1. *{}选择所有元素
    2. 并集选择器：选择器1，选择器2{}
    3. 子选择器：选择器1 选择器2{} 选择1下的2
    4. 父选择器：选择器1>选择器2{} 选择2的父标签1
    5. 属性选择器：元素名称[属性名=“xx”]{}
    6. 伪类选择器：元素:状态{} 有link,hover,active,visited四种状态，如鼠标点击超链接
css属性
- 字体文本
  - font-size：字体大小，要写px
  - color：文本颜色
  - text-align：对齐方式
  - line-height：行高，要写px
- 背景：background:url("") no-repeat center;
- 边框：border:1px solid red;
- 尺寸
  - width：宽度，要写px
  - height：高度，要写px
- 盒子模型
  - margin：外边距，要写px
  - padding：内边距，要写px
    - 默认情况下内边距会影响整个盒子的大小
    - box-sizing: border-box;设置盒子的属性，让宽高就是最终盒子大小
  - float：浮动，包括左浮动和右浮动

JavaScript

基本语法
- 与html结合方式
  - 内部JS：<script>可放在任意位置，但会影响执行顺序，可以定义多个，下同
  - 外部JS：<script src="">引入外部js文件
- 数据类型
  - 原始数据类型(基本数据类型)
    1. number：整数/小数/NaN
    2. string：字符/字符串，单引双引都可以
    3. boolean
    4. null：typeof()判断的是object类型
    5. undefined：未定义，变量没有给初始化值则赋值为undefined
  - 引用数据类型；对象
- 注释：同Java
- 变量
  - Java是强类型，JS是弱类型(开辟变量存储空间时，不定位将来的存储数据类型，可以存放任意类型数据)
  - document.write()进行输出
  - typeof(变量)进行变量类型判断
- 运算符
  - 一元运算符
    - 在js中，如果运算数不是运算符要求的类型，那么js引擎会自动的将运算数进行类型转换
    - string转number，按照字面值转换，如果不是数字，则转为NaN
  - 算数运算符
  - 赋值运算符
  - 三元运算符
  - 比较运算符
    - 类型相同，直接比较；类型不同，先进行类型转换再比较
    - ===是全等于，在比较之前，先判断类型，如果类型不同直接返回false
  - 逻辑运算符
    - 其他类型转boolean：
      1. number：0或NaN为假，其他为true
      2. string：除了空字符串""，其他都是true
      3. null&undefined：都是false
      4. 对象：所有对象都为true
- 流程控制语句
  - 在JS中，switch可以接收任意数据类型
- 特殊语法
  - 变量的定义可以使用var，也可以不使用。用的话是局部变量，不用的话是全局变量
基本对象
- Function：函数对象
  - 创建
    1. var 方法名 = new Function(参数列表,方法体); //不常用
    2. function 方法名称(参数列表){} //参数列表的形参类型可以不写
    3. var 方法名 = function(参数列表){}
  - 属性
    - length：代表方法形参的个数
  - 特点
    - 参数列表的形参类型可以不写，返回值类型也不写
    - 方法是一个对象，如果定义名称相同的方法，会覆盖
    - 在JS中，方法的调用只和方法的名称有关，和参数列表无关
    - 在方法声明中有一个隐藏的内置对象(数组),arguments，封装所有的实际参数
- Array：数组对象
  - 创建
    1. var arr = new Array(元素列表);
    2. var arr = new Array(默认长度);
    3. var arr = [元素列表];
  - 特点
    - JS中，数组元素的类型是可变的，长度也是可变的
  - 属性
    - length：代表数组的长度
  - 方法
    - join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
    - push()：向数组末尾添加元素，返回新的长度
- Date：日期对象
  - 创建
    - var date = new Date();
  - 方法
    - toLocaleString()：返回当前date对象对应的时间本地字符串格式
    - getTime()：返回当前时间到1970.1.1的毫秒值差
- Math：数学对象
  - 创建
    - Math对象不用创建，直接使用。Math.方法名();
  - 方法
    - random()：返回[0,1)之间的随机数
    - ceil(x)：上舍入
    - floor(x)：下舍入
    - round(x)：四舍五入
- RegExp：正则表达式对象(定义字符串的组成规则)
  - 正则表达式
    - 单个字符：
      1. [a],[ab],[a-z],[0-9a-z]
      2. \d：单个数字字符[0-9]
      3. \w：单个单词字符[a-zA-Z0-9_]
    - 两次符号
      1. ?：表示出现0次或1次
      2. *：表示出现0次或多次
      3. +：表示出现1次或多次
      4. {m,n}：表示数量在[m,n]中间
    - 开始结束符号
      1. ^：开始
      2. $：结束
  - 正则对象
    - 创建
      1. var reg = new RegExp(“正则表达式”); 注意转义的问题
      2. var reg = /正则表达式/; 比较常用
    - 方法
      - test(参数)：验证指定的字符串是否符合正则定义的规范
- Global
  - 特点：全局对象，Global中封装的方法不需要对象可以直接调用
  - 方法
    - encodeURI()：url编码
    - decodeURI()：url解码
    - encodeURIComponent()：url编码，编码的字符更多
    - decodeURIComponent()：url解码，解码的字符更多
    - parseInt()：将字符串转为数字；逐一判断每一个字符是否为数字，直到不是数字为止，将前面的转为number
    - isNaN()：NaN进行比较判断结果肯定为false，只能通过此方法判断是否为NaN
    - eval()：将JS字符串转为脚本来执行
BOM
- 浏览器对象模型；将浏览器的各个组成部分封装成对象
- 组成：
  - Window：窗口对象
    - 特点
      1. 不需要创建对象，可以直接使用，window.方法名();
      2. window引用可以省略，方法名();
    - 方法
      - 与弹出框有关的：
        alert()：消息+一个确认按钮
        confirm()：消息+一个确认按钮(返回true)+一个取消按钮(返回false)
        prompt(“请输入…”)：用户输入框，返回用户输入的值
      - 与打开关闭有关的：
        open(“url”)：打开一个新的浏览器窗口，返回值是该窗口的window对象
        close()：谁调用就关谁，配合open返回的窗口对象使用
      - 与定时器有关的：
        setTimeout(“JS代码”/方法对象,毫秒值)：指定时间后执行代码；返回值唯一标识，用于取消定时器，循环定时器同
        clearTimeout()：取消上述定时器
        setInterval(“JS代码”/方法对象,毫秒值)：每隔指定时间执行一次代码
        clearInterval()：取消上述循环定时器
    - 属性
      - 获取其他BOM对象：history,navigator,screen,location
      - 获取DOM对象：document
  - Navigator：浏览器对象
  - Screen：显示器对象
  - History：历史记录对象
    - 方法
      - back()：加载hist列表中的前一个URL
      - forward()：加载hist列表中的下一个URL
      - go(参数)：加载hist列表中某个具体页面，参数代表前进/后退几个历史记录
    - 属性
      - length：返回档期那窗口历史列表中的URL数量
  - Location：地址栏对象
    - 方法
      - reload()：重新加载当前文档，刷新
    - 属性
      - href：设置或返回完整的url
DOM
- DOM简单学习
  - 控制html文档的内容，获取页面标签对象 Element
  - document.getElementById(“id”);通过元素id值获取元素对象
  - 操作Element对象
    - 修改属性值，如x.src=“xxx”;
    - 修改标签体内容，如x.innerHTML=“新的内容”
- 事件简单学习
  - 绑定
    1. 在html标签指定事件的属性，属性值是js代码
    2. 通过js获取元素对象，指定事件属性，设置函数
- 概念：文档对象模型，将标记语言文档的各个部分封装为对象，使用对象进行CRUD
- 组成
  - 核心DOM
    - Document：文档对象
      - 方法
        获取Element
        getElementById()：根据id获取元素对象
        getElementsByTagName()：根据元素名称获取元素对象们，返回值是数组
        getElementsByClassName()：根据class获取元素对象们
        getElementsByName()：根据name获取元素对象们
        
        创建其他DOM对象
        createAttribute(name)
        createComment()
        createElement()
        createTextNode()
    - Element：元素对象
      - 通过document获取和创建
      - 方法
        removeAttribute(“属性名”)：删除属性
        setAttribute(“属性名”,“属性内容”)：设置属性
    - Attribute：属性对象
    - Text：文本对象
    - Comment：注释对象
    - Node：节点对象，其他5个的父对象
      - 特点：所有DOM对象都可以被认为是一个节点
      - 方法
        appendChild()：向节点的子节点列表结尾添加新的子节点
        removeChild()：删除(并返回)当前节点指定子节点
        replaceChild()：用新节点替换一个子节点
      - 属性
        parentNode()：返回节点的父节点
  - XML DOM
  - HTML DOM
    - 标签体的设置和获取：innerHTML，常用+=
    - 使用html元素对象的属性
    - 控制样式
      - 使用style属性控制：元素对象.style.border=“1px solid red”;
      - 如果有font-size这样的，要变成fontSize
      - 提前定义好类选择器的样式，通过元素的className来设置属性值
- 事件
  - 概念：组件被执行了某些操作后，触发某些代码执行，比如单击、双击、按键盘等
  - 常见事件
    - 点击事件
      - onclick：单击
      - ondblclick：双击
    - 焦点事件
      - onblur：失去焦点，用于表单验证
      - onfocus：元素获得焦点
    - 加载事件
      - onload：一张页面或一张图像完成加载
    - 鼠标事件
      - onmousedown：鼠标被按下
        定义方法时，定义一个形参，接收event对象，event的button属性可以获取是哪个鼠标按钮
      - onmouseup：鼠标被松开
      - onmousemove：鼠标被移动
      - onmouseout：鼠标从某元素移开
      - onmouseover：鼠标移到某元素之上
    - 键盘事件
      - onkeydown：键盘被按下
        同鼠标有event，keyCode属性可以知道是哪个键
      - onkeyup：键盘被松开
      - onkeypress：键盘被按下并松开
    - 选择和改变
      - onchange：域的内容被改变
      - onselect：文本被选中
    - 表单事件
      - onsubmit：确认按钮被点击，调用的函数如果返回false，则阻止表单提交
      - onreset：重置按钮被点击

BootStrap

入门

3个meta标签放在最前面,在head里面，link引入css，Bootstrap 的所有JS插件都依赖jQuery，所以必须放在前边

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="/css/bootstrap.min.css" rel="stylesheet">

  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

响应式布局：同一套页面可以兼容不同分辨率的设备
- 实现：依赖于栅格系统(将一行分成12个格子，可以指定元素占几个格子)
- 步骤：
  1. 定义容器，相当于之前的table
    - container：两边留白
    - container-fluid：每一种设备都是100%宽度
  2. 定义行，相当于之前的tr。样式：row
  3. 定义元素，指定该元素在不同设备上占的格子数目。样式：col-设备代号-格子数目
    - xs：超小屏幕手机(<768px)：col-xs-12
    - sm：小屏幕平板(>=768px)
    - md：中等屏幕桌面显示器(>=992px)
    - lg：大屏幕大桌面显示器(>=1200px)
- 注意：
  - 一行中如果格子数超过12，则超出部分自动换行
  - 栅格类属性向上兼容，例：如果在三个元素在手机分别占了四个格子，那么在电脑端也是
  - 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行
CSS样式和JS插件
- 全局CSS样式：
  - 按钮
    - class=“btn btn-default”
  - 图片
    - class="img-responsive"让图片在任意尺寸都占100%
    - class="img-rounded/circle/thumbnail"可以设置图片形状
  - 表格
    - table，table-bordered，table-hover：悬浮变颜色
  - 表单
    - 给表单项添加：class=“form-control”
- 组件
  - 导航条
  - 分页条
- 插件
  - 轮播图

XML

概念功能
- 可扩展标记语言；可扩展：标签都是自定义的
- 功能：存储数据，如配置文件、在网络中传输
- xml与html区别
  1. xml标签都是自定义的，html是预定义的
  2. xml语法严格，html语法松散
  3. xml是存储数据的，html是展示数据的
语法
- 基本语法
  - 第一行必须定义为文档声明：<?xml version’1.0’ ?>
  - xml文档中有且仅有一个根标签
  - 属性值必须用引号引起来
  - 标签必须正确关闭
  - 标签名称区分大小写
- 组成部分
  1. 文档声明
    - 格式：<?xml 属性列表 ?>
    - 属性列表：
      - version：版本号，必须的属性
      - encoding：编码方式，告知解析引擎当前文档使用的字符集，默认的是ISO-8859-1
      - standalone：是否独立，yes依赖其他文件，no不依赖
  2. 指令
    - 结合css：<?xml-stylesheet type=“text/css” href=“a.css” ?>
  3. 标签：标签名称自定义
    - 规则：
      - 名称可以包含字母、数字以及其他的字符
      - 名称不能以数字或者标点符号开始
      - 名称不能以字母xml或者它的大小写开始
      - 名称不能包含空格
  4. 属性
    - id属性值唯一
  5. 文本
    - CDATA区：在该数据区内的内容会被原样展示，不需要转义
    - CDATA区样式：<![CDATA[ ]]>
约束：规定xml文档的书写规则
- 分类
  1. DTD：一种简单的约束技术
    - 内部dtd：约束规则定义在xml文档中，不常用
      - <!DOCTYPE 根标签名 [ 约束 ]>
    - 外部dtd：约束规则定义在外部的dtd文件中
      - 本地：<!DOCTYPE 根标签名 SYSTEM “dtd文件的位置”>
      - 网络：<!DOCTYPE 根标签名 PUBLIC “dtd文件名字” “dtd文件URL”>
  2. Schema：一种复杂的约束技术(***要会读懂***)
解析：操作xml文档，将文档中的数据读取到内存中
- 操作xml文档
  1. 解析(读取)：将文档中的数据读取到内存中
  2. 写入：将内存中的数据保存到xml内存中。持久化的存储
- 解析xml的方式
  1. DOM：将标记语言文档一次性加载进内存，在内存中形成一颗DOM树
    - 优点：操作方便，可以对文档进行CRUD操作
    - 缺点：占内存
  2. SAX：逐行读取，基于事件驱动
    - 优点：不占内存
    - 缺点：只能读取，不能增删改
- xml常见的解析器
  1. JAXP：sun公司提供，支持DOM和SAX两种思想，不常用
  2. DOM4J：DOM方式的
  3. Jsoup：可解析HTML
  4. PULL：Android内置，SAX方式的
- Jsoup解析器
  - 快速入门
    - 步骤
      1. 导入jar包
      2. 获取Document对象
      3. 获取对应的标签Element对象
      4. 获取数据
```
String path=JsoupDemo.class.getClassLoader().getResource("xxx.xml").getpath;
Document document = Jsoup.parse(new File(path),"utf-8");
Elements elements = document.getElementsByTag("标签名");
```
  - 对象的使用
    - Jsoup：工具类，可以解析html或xml文档，返回Document
      - parse(File in,String charsetName)：解析xml或者html文件
      - parse(String html)：解析xml或者html字符串
      - parse(URL url,int timeoutMillis)：通过网络路径获取文档对象
    - Document：文档对象，代表内存中的DOM树
      - 获取Element对象
        getElementsByTag(String tagName)
        getElementsByAttribute(String key)
        getElementsByAttributeValue(String key,String value)
    - Elements：元素Element对象的集合，可以当作ArrayList<Element>使用
    - Element：元素对象
      - 获取子元素对象
      - 获取属性值
        String attr(String key)：根据属性名称获取属性值
      - 获取文本
        String text()：获取文本内容
        String html()：获取标签体所有内容，包括子标签的标签和文本
    - Node：节点对象
  - 快捷查询方式
    - selector：选择器
      - Elements select(String cssQuery)
    - XPath：
      - 使用Jsoup的Xpath需要导入额外的jar包
      - 查询w3cschool参考手册，使用XPath语法完成查询