黑马程序员技术交流社区

标题: [石家庄校区]HTML--CSS--JavaScript--BootStrap相关知识点 [打印本页]

---

作者: 黑马11期    时间: 2018-12-29 15:30
标题: [石家庄校区]HTML--CSS--JavaScript--BootStrap相关知识点
    HTML--CSS--JavaScript--BootStrap相关知识点

• 1)概念:客户端脚本语言,弱类型语言
  *运行在客户端浏览器中的,每一个浏览器都有JS的解析引擎
  *脚本语言:不需要编译,直接就可以被浏览器解析执行
  2)功能
  *可以增强用户和html的呼叫过程,可以控制heml元素,让页面有一些动态的效果,让用户增强体验
  

  ---

  EcmaScript:基础语法
  BOM:浏览器对象模型
  DOM:文档对象模型
  JavaScript = ECMAScript+JavaScript自己特有的东西(BOM+DOM)
  

  ---

  (一)ECMAScript
  1)基本语法 :
  
  
  • 与html结合方式
    
  1)内联式
      *定义<script>,标签体内容就是js代码
  2)外链式
      *定义<script>,通过src属性引入外部的js文件
  3)html加载顺序:从内到外,从上到下
  注意 :
      1)<script>可以定义在html页面的任何地方,但是定义的位置会影响执行任务顺序
      2)<script>可以定义多个
  3)行内式
  javascript
  
  • 注释
    
  1)单行注释 ://
  2)多行注释/* 注释内容*/
  
  • 数据类型
    
  1)原始数据类型(基本数据类型)
  *number : 数字 ---整数/小数/NaN(not a number 一个不是数字的数字类型)
  
  *string : 字符串 ---字符/字符串
  *boolean : true和false
  *null : 一个对象为空的占位符
  *undefined : 未定义.如果一个变量没有给初始化值,则会被赋值为undefined
  2)引用数据类型: 对象
  
  • 变量
    
  1)变量 : 一小块存储数据的内存空间
  2)Java语言是强类型语言,JavaStrip是弱类型语言
      *强类型:在开变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据
      *弱类型: 在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存储任意类型的数据
  3)语法 :
  *var 变量名 = 初始化值;
  
  • 运算符
    
  1)typeof:运算符有一个参数,即要检查的变量或值
  2)一元运算符 :只有一个运算数的运算符:+(正号),-(负号)
  *++,-- : 自增(自减)
  *注意 : 在JS中如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
  *其他类型转num
      (1)string转number : 按照字面值转换.如果字面值不是数字则转为NaN(不是数字的数字)
      (2)boolean转null : true转为1,false转为0
  3)算术运算符
  4)赋值运算符
  5)比较运算符
  *比较方式 : 返回的都是boolean类型值
      -类型相同 : 直接比较
       *字符串 : 按照字典顺序比较,按位逐一比较,知道得出大小为止
      -类型不同 : 先进行类型转换,在进行比较
       *===全等于 :在比较之前,先判断类型,如果类型不一样那么直接判断为false
  6)逻辑运算符
  *&& : 与(短路)
  *|| : 或(短路)
  *! : 非
      *其他类型转boolean :
    1)number转boolean : 0或NaN为假<false>,其他为真<true>
      2)string转boolean : 除了空字符串,其他都是true
      3)null&undefind转boolean : 都是false
      4)对象转boolean : 所有对象都为true,当对象为null时,为false
  *好处 : js中可以这样定义简化书写
  7)三元运算符
  *判断表达式的值,如果是true返回值1,如果是false返回值2
  
  • 流程控制语句
    
  1)if..else
  2)switch :
  *在Java中,switch语句可以接收的数据类型:byte,int,shor,char,枚举,String
  *在JS中,switch语句可以接收任何的数据类型,什么类型都可以
  3)while
  4)do..while
  5)for
  
  • 特殊语法
    
  1)语句以分号结尾,如果一行只有一行语句那么" ; "可以省略(不建议)
  2)变量的定义使用var关键字,也可以不使用
  *用var : 定义的变量是局部变量
  *不用var : 定义的变量是全局变量<也不建议>
  
  • document.write(变量名);输出到页面上
    

  ---

基本对象:

• Function:函数对象
  

Function:函数(方法)对象
1)创建
*创建方式1 :var fun = new Function(形式参数列表,方法体); --忘掉吧
*创建方式2 :function 方法名称(形式参数列表){ 方法体 };  -- 掌握
*创建方式3 :var 方法名 = function(形式参数列表){ 方法体 }; -- 掌握
2)方法
3)属性
*length :代表形参的个数
4)特点
*方法定义时,形参的类型不用写,返回值类型也不写
*方法是一个对象,如果定义名称相同的方法,会覆盖
*在JS中方法的调用值与方法的名称有关,和参数列表无关
*在方法声明中有一个隐藏的内置对象,是一个数组,arguments,封装所有的实际参数
5)调用
*方法名称(实际参数列表)

• Array: 数组对象
  

1)创建
*vae arr = new Array(元素列表);
*var arr = new Array(默认长度);
*var arr = [元素列表];
*var arr = new Array();创建了一个空的数组
2)方法
*join 参数: 将数组中的元素按照指定的拼接符拼接成字符串
*push: 向数组的末尾添加一个或者更多元素,并返回新的长度
3)属性
4)特点
*JS中数组元素的类型是可变的
*JS中数组的长度是可变的

• Date: 日期对象
  

1)创建 :
*var date = new Date ;
2)方法 :
*toLocaleString : 返回当前date 对象对应的时间本地字符串格式
*getTime:获取毫秒值,返回当前时间对象描述的时间到1970年1月1日零点的毫秒值差

• Math
  

1)创建:
*特点 : Math 对象不用创建直接使用
2)方法:
*random():返回0~1之间的随机数,含0不含1
*round(x) :四舍五入
*ceil : 对数进行向上舍入
*floor(x) :对数进项向下舍入
3)属性:
*PI : 圆周率

• RegExp : 正则表达式
  

1)正则表示: 定义字符串的组成规则
*定义单个字符 : [ab]-->a或者b [a-z]-->a到z
*特殊符号代表特殊含义的单个字符 :
    *\d : 单个数字字符 [0-9]
    *\w : 单个单词字符 [a-z]
*两次符号 :
    *:表示出现0次或者多次
    ?:表示出现0次或者1次
    +:出现一次或者多次
    {m,n} : 表示m<=数量 <=n
        /*m如果缺省 : 表示最多n次
        /*n如果缺省: 表示最多m次
    ^ : 代表开始
    $ : 代表结尾                              
2)正则对象 :
*创建 :    (2)var reg = /正则表达式/;
    (1)var reg = new RegExp("正则表达式");

(1) test(参数) :验证指定的字符串是否符合正则定义的规范,返回值为boolean类型

• Global
  

1)特点 :全局对象,这个Global中封装的方法不需要对象就可以直接调用
2)方法 :
    1.encodeURI : url 编码
       decodeURI : url 解码
    2.encodeURIComponent : url 编码 ,编码的字符更多
       decodeURIComponent : url 解码
    3.parseInt() : 将字符串转为数字
     *逐一判断每一个0
只要浏览器往外发送东西都要经过url编码
字符是否是数字,直到不是数字为止,将前边数字部分转为number
    4.eval : 解析字符串并把他作为脚本来执行
----------

• 概念 : 一个前端开发的框架
  

   *框架:一个半成品软件,开发人员可以再框架基础上,在进行开发,能简化代码
    *好处 :
       1)定义好了很多的css样式和js插件,我们开发人员直接可以使用这些样式和插件得到丰富法人页面效果
        2)响应式布局 :
         *同一套页面可以可以兼容不同分辨率的设备

• 响应式布局
  

1)同一套页面可以兼容不同分辨率的设备
2)实现: 依赖于栅格系统 : 将一行平均分成12个格子,可以指定元素占几个格子
3)步骤 :
    *定义容器:相当于之前的table
    -container :两边有留白
     -container-fluid : 每一种设备都是100%宽度
    *定义行:相当于之前的tr--row
    *定义元素:指定该元素在不同的设备上,所占的格子数--样式 :col-设备代号- 格子数目
      *设备代号 :
         (1)xs : 超小屏幕 手机(<768px)
         (2)sm : 小屏幕 平板
         (3)md : 中等屏幕 桌面显示器
         (4) lg : 大屏幕 大桌面显示器            
3)注意事项 :                  
*一行中如果格子数目超过12则超过部分自动换行
*栅格类属性,可以向上兼容
*如果真实设备的宽度小于了设置栅格属性的设备代码的最小值,会一个元素占满一整行

• CSS样式和JS插件
  

1)全局的CSS样式 :
*按钮
*图片
*表格
*表单
--组件
*导航条
*



web概念概述 :
*JavaWeb : 使用Java语言开发基于互联网的项目

---

软件架构
1)C/S : Dleent/Server : 客户端/服务器端
   *在用户本地有一个客户端程序,在远程有一个服务器端程序
   *如QQ,迅雷等等 ..
    *缺点 : 开发,安装,部署,维护麻烦
    *优点 : 用户的体验好
2)B/S : Browser/Server : 浏览器/服务器端
    *只需要一个浏览器,用户通过不同的网址(URL)可以访问远程不同的服务器端程序
    *缺点 :
      1)如果应用过大,用户的体验可能会受到影响
      2)对硬件要求过高
    *优点 : 开发,安装,部署,维护简单

• B/S : 依赖于服务器
• C/S : 维护复杂
  

服务器: 电脑
    *服务器电脑和普通电脑的区别 : CPU(稳定),主板,硬盘,内存,操作系统
    1)现在大多数用的是刀片式服务器 - 1U/2U
独立ip-带宽-域名-地址

---

资源分享 :

• 静态资源(数据全部写死的,不可更改)-浏览器自身就能对静态资源进行解析
  

    *使用静态网页开发技术发布的资源
    *特点
     1)所有用户访问,得到的结果是一样的
     2)如:文本,图片,音频,视频,HTML,CSS,JavaScript(按照浏览器解析的标准去写)
     2)如果用户请求的静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器中内置了解析引擎,可以展示静态资源

• 动态资源(涉及到数据的交互)-动态资源不能被直接解析,需要先转换为静态资源然后才能被浏览器解析执行
  

    *使用动态网页及时发布的资源
    *特点 :
     1)所有文虎访问,得到的结果可能不一样
     2)jsp/servlrt,php,asp..
     3)如果用户请求的是动态资源,那么服务器会去执行动态资源,转换为静态资源,在发送给浏览器
  *我们要学习动态资源必须先学习静态资源

• 静态资源 :
• HTML : 用于搭建基础网页,展示页面内容
• CSS : 用于美化页面,布局页面
• JavaSeript : 控制页面的元素,让页面有一些动态的效果
  

---

HTML : (核心 : 标签 -- 标签的功能 -- 标签属性 -- 标签怎么设置)
*概念: Hyper Text Msrkup Language超文本标记语言-是最基础的网页开发语言
1)超文本 : 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
2)标记语言 : 由标签构成的语言.<标签名称>如 : html,xml - 标记语言不是编程语言(标记语言没有任何逻辑性)

• 快速入门 :
  

语法:
    1)html文档后缀名 : .html或者.htm -> 根标签
    2)标签分为
     *围堵标签 :有开始标签和结束标签 ,如 : <html> -> </html>
        *
        *标签是可以嵌套的 :
        1)需要正确嵌套,不能你中有我,我中有你
        如 : 错误 : <a><b></a><b> - > 正确 : <a><b></b><a>
    *自闭和标签 : 开始标签和结束标签在一起,如<br/>(换行标签)
    *在开始标签中可以定义属性,属性是由键值对构成,值需要用引号(单双都可以)引起来
    *html的标签不缺分大小写 ,但是建议用小写

---

<html>  -->双边标签
    <head>   --> 双边标签
        <title>标题</title>  --> 双边标签   
    </head>
    <body color = 'red'>集体内容</body> <br/>
</html>
ps :
    1)内容 --?展示在页面上的
    2)color --> 标签的属性名称
    3)red --> 标签的属性值
    4)font --> 标签的名称
    5)<br> : /br 的斜杠可以省略,是单边标签
标签类型  :
    1)单边标签和双边标签
        单边 :  <br> , <hr>   -->开始和结束是一个
        双边 : <font> </font>-->有开始有结束
    2)行内标签和块级标签
     *行内 : 只占内容大小
     *块级 : 单独占了一块(多行)

---

标签学习 :

• 文件标签 : 构成html最基本的标签
  

*meat : 定义字符集 --> <meat charset = "utf-5"></meta>
*html : html文档的跟标签
*head : 头标签.用于指定html文档的一些属性,引入外部的资源
*title : 标题标签
*body : 体标签

• 文本标签 : 和文本有关的标签
  

*注释 : <!--注释内容--> :用来解释html代码的,不会被显示
*<h1>to <h6> : 标题标签h1~h6,随着数字增长字会逐渐减小,自带换行
*<p> : 段落标签
*<br> : 换行标签(单行标签)
*<hr> : 显示一条水平线(单行标签)
*<b> : 字体加粗
*<i> : 字体是斜体的
*<u> : 下划线
*<font> : 对应的字体标签 -->数字大小范围(1~7)
*属性定义 :
    *color :
     1)英文单词
     2)rgb(值1,值2,值3) :值得范围 :0 ~ 255 . 如 rgb<0,0,255>
     3)#值1值2值3 : 值得范围 :0~ FF之间 .如 : #FF00FF
    *width :
     1)数值 : width = '20',数值的单位,默认是px(像素)
     2)数值% : 占比相对于父元素的比例
    *center : 居中
特殊字符

• 图片标签 :
  

*img: 展示图片
*属性src : 指定图片的位置
*相对路径 : ./ : 代表当前目录   ./image/1.jpg
                    ../ : 代表上一级目录

• 列表标签 :
• (超)连接标签 :<a href = 链接地址>名称</a>
  

*a : 定义一个超链接
    *href : 定义访问资源的URL(资源的表现形式)
    -支持互联网路径
    -支持本地路径
    *target : 指定打开资源的方式 : _self:默认值,在当前页面打开,_blank:在空白页面打开

• 表格标签 : - > 对页面进行布局
  

1)table : 定义表格
    *width : 宽度
    *border : 边框
    *cellpadding : 定单元格之间的距离
    *cellspacing : 定义单元格之间的距离,如果直径为0 ,则单元格的线会合为一条
    *bgcolor : 定义背景色
    *align :对齐120 0方式
2)tr : 定义行
    *colspan : 合并列
    *rowspan : 合并行
3)td : 定义单元格
4)th : 定义表头单元格(居中加粗)
5)caption : 定义表格标题
6)thead : 表示表格的头部分
7)tbody : 表示表格的体部分
8)tfoot : 表示表格的脚部分

• 如果某一行只是用一个单元格,则使用表格的嵌套
  

规则:在td下面在写table --> tr --> td -->table

• 块标签 :
  

div : 没有任何样式,每一个div占满一整行,块级标签
span :没有任何的样式 文本信息在一行展示,行内标签,,内联标签

• 语义化标签 :HTML5为了提高程序可读性提供了一些标签
  

1<header> : 页眉
2<> : 页脚

• 表单标签
  

1）表单 ：
*概念 ： 用于采集用户输入数据的。用于和服务器进行交互。
*使用标签 ：form ->用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
*form属性 ：
       action：指定提交数据的位置，不写的话默认提交当前页面
       method：指提交方式 ，一共两种方式，在http中是七种
        *get ：
         1）请求参数会在地址栏中显示
         2）请求参数大小是有限制的
         3）不太安全
        *post ：
         1）请求参数不会再地址栏中显示，会封装在请求体中（HTTP后详细讲解）
         2）请求参数的大小没有限制
         3）较为安全
         4）文件上传指定方式只能是post
*问题 ： 表单项中的数据要想被提交，必须指定其name属性

• 表单项标签 ：input
  

1）input ：可以通过type属性值，改变元素展示的样式
*type属性：
    -text：文本输入框，默认值
    *placehholder ： 指定输入框的信息提示，当输入框的内容发生变化时，则会清空输入框
    -password ： 密码输入框
    -radio ：单选框
        *注意 ：
            1）要想让多个单选框实现单选的效果，则多个单选框的name必须一样
            2）一般都会给个value属性，指定其被选中后提交的值
            3）checked属性，可以指定默认值
    -checkbox：复选框（多选）
            1）要想让多选框实现单选的效果，则多选框的name必须一样
            2）一般都会给个value属性，指定其被选中后提交的值
            3）checked属性，可以指定默认值
    -文件选择框file
    -hidden：隐藏域，用于提交一些信息的，页面看不到，name，value必须有
    -reset ：重置
    -submit 提交-->把数据提交到form的action的连接去
     *submit：提交按钮
     *button ： 一个按钮，普通按钮->配合js使用
     *image ：图片提交按钮，可以提交表单
        -src：指定图片的路径
     *color ：取色器
     *date ：只有年月日
     *datetime-local：年月日小时分钟
     *email ：邮箱格式校验
     *number ：只能输入数字
2)label:指定输入性的文字默认信息
    注意 ：
    *label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点

---

2）select ：下拉列表
-option：指定列表项
-selected
3）textarea : 文本域

-cole：指定列数，每一行有多少字符
-rows ：默认多少行

---

CSS ： 页面美化和布局控制
一）概念 ： Cascading Style Sheets 层叠样式表
*层叠 ： 多个样式可以作用在同一个html上，而且同时生效
二）好处 ：
*功能比较强大
*将内容展示和样式控制分离
  1）降低耦合度
  2）让分工协作更容易
  3）提高开发效率
三）CSS的使用 ：CSS和html结合方式
*内联样式
    1）在标签内使用style属性指定CSS代码
*内部样式《行内式》
    1）在head标签内定义style标签，style标签的标签体内容就是CSS内容
*外部样式《外链式》
    1)在定义CSS资源文件
    2）在head标签内，定义link标签，引入外部的资源文件
四）注意 ：
1）1,2,3种方式CSS作用的范围越来越大
2）1方式不常用，后期2和3比较常用
3）第三种方式可以用 @import
*行内优先级最大，但是只能匹配一个标签

• 语法格式
  

格式：
1）选择器{
        属性值 ： 属性值；
        。。。 ： 。。。
        }
2）选择器：筛选具有相似特征的元素
3）注意事项： 每一对属性需要使用分号隔开，最后一对属性可以不加分号

• 选择器
  

1）分类：
*基础选择器：
    1）id选择器：选择具体的id属性值得元素
        *语法 ：#id属性值{}
        *建议 ：在一个html页面中id值唯一
    2）标签选择器 ： 选择具有相同标签名称的元素
        *语法：标签名称{}
        *注意：id选择器优先级要高于元素选择器
    3）类选择器：选择具有相同的class属性值得元素
        *语法：.class属性值{}
        *注意：类选择器的优先级高于元素选择器
*扩展选择器：
1）* ：表示所有元素
2）并集选择器：
    -选择器1，选择器2{}
3）后代选择器：筛选选择器1下的选择器2
    -选择器1 选择器2{}
4）子元素选择器：筛选选择器2父元素选择器1
    -语法：选择器1>选择器2{}
5)属性选择器:选择元素名称,属性名=属性值得元素
    -语法:元素名称[属性名="属性值"]{}
6)伪类选择器:选择一些元素具有得状态
    -语法:元素:状态{}
    *状态 :
        1.link : 初始化状态
        2.hover :鼠标悬浮状态
        3.active :正在访问状态
        4.visited:被访问过的状态

• 属性
  

1)字体,文本
*font-size:字体大小
*color :文本的颜色
*text-align :对齐方式
*line-heigh:行高
2)背景
*background:
3)边框
*border:设置边框,复合属性
4)尺寸
*1,width:宽度
*2,heigh:高度
5)盒子模型:控制布局的
*border:边框
*margin:外边距
*passing:内边距
-默认情况下,内边距会影响盒子大小
-解决方法:设置盒子属性,让width和height就是最终盒子的大小box-sizing:border-box
*float:浮动
-left
-right

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2