WEB前端(HTML、XML、CSS、JS)学习笔记

  • HTML

    • HTML: HyperText Markup Language 超文本标记语言。
    • HTML是最基础的网页语言。
    • HTML的代码都是由标签所组成。

    • HTML的基本格式


      存放属性的信息,辅助性的信息
      引入外部的文件(重要)
      会先加载


      存放的是真正的数据

    • 多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。

    • 想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
    • 属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。

    • MyEclipse 提供了安装包

      • 安装JDK,配置环境变量
      • 安装MyEclipse。

      • 配置

        • 配置工作空间的编码(采用UTF-8编码)(安装了myeclipse,先去配置)

        • Window—preferences—General–workspace—选择UTF-8编码

        • 创建HTML的文件后,如果不是UTF-8的编码,可以进行设置。

          • Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
        • 创建HTML的文件后,可以选择打开方式,设置默认的打开方式。

          • Window—preferences—General—Editors—File Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok
        • (编写HTML)创建web的项目

          • 创建web的项目

            • 右键 – 选择web project – 其名称 – 完成就ok。
          • 编写HTML的文件

            • 在WebRoot目录下 – 右键 – new – myeclipse – web – 选择html的基本模板 – 其名称 – 完成。
    • HTML的真正的标签

      • 排版的标签

        • HTML的注释

        • 换行标签

        • 一条水平线

        排版标签
        *
        换行
        *


        一条水平线
        * color: 颜色
        * 值的写法:两种
        1)直接写英文的单词(red green blue)
        2)RGB三原色(red green blue) #ab1255
        * width: 宽度
        * 值两种写法: 1) 200px;
        2) 可以写百分比
        区别:百分比跟着浏览器的大小而改变,像素值不会。

        * <p></p>   段落标签
            * 段落标签的开始和结束位置留一空行。
            * align:对齐方式
        
        * &nbsp;    代表空格
        
        
        * 在浏览器声明一块区域,区域中放入其他(文字,子标签)
        * <div></div>       +CSS+DIV在网页进行布局(美工)
        * <span></span>     
            * div块级元素(换行的符号)    
            * span标签不会换行    行内元素        
        
      • 字体标签

        • 字体的内容

        • 字体标签:

        • color: 颜色
        • size: 字体的大小
          • 最大值和最小值
            • 最小值是:1
            • 最大值是:7
          • 默认值: 3
            • 值的写法 +2 (3+2)
        • face: 字体的类型

        • 标题标签



          • 特点:逐渐缩小
        • 粗体

        • 斜体

          • 标签可以嵌套的
            文本的内容

        • 特殊字符

          • < <
          • > >
          • & &
        • 滚动的字幕(忘了吧)

      • 列表标签(*

        • 数据格式化列表

          上层项目
          下层项目
          下层项目
          * 自动对齐,缩进的
        • 有序列表和无序列表

          • 有序

            1. 数据的条目
            2. 数据的条目
            3. 数据的条目
            • ol的属性
              • type=”a”
              • start=”” 从哪开始
          • 无序(用的最多)

            • 数据条目
            • 数据条目
            • 数据条目
            • ul的属性
              • type=””
      • 图片标签(*

        • 属性:
          • src=”图片的地址”
          • width=”图片的显示宽度”
          • height:图片显示的高度
          • alt:图片的说明文字
      • 超链接标签(*

        • 写法:

        • 链接资源

          • 必须要指定属性:href=”链接的地址”
          • 需要编写协议
            • HTTP
          • 默认file文件的协议
            • 如果浏览器可以解析文件,默认会打开文件。
            • 如果浏览器不可以解析文件,弹出下载窗口。
          • 支持自定义协议
            • 浏览器解析不了的协议,默认找操作系统的引用程序。
        • 定位资源

          • name 定义锚点
          • 点击 href=”#锚点名称”
      • 表格标签(*

        • 把数据封装成表格。
        • 表格标签










          用户列表
          数据数据
          数据数据

        table的属性
        * border: 边框
        * width: 宽度
        * height: 高度

        tr的属性
        * align:中间的文字的对齐方式

        td获取th
        区别:th中间的内容粗体显示。
        th中间的内容默认居中。
        th一般用来表格的表头

        td的属性
            * width     宽度
            * height    高度
            * 合并单元格(值的写法:合并几个单元格,值就写几)
                * 行合并   rowspan=""
                * 列合并   colspan=""
        
        • 必须要写在table的中间
      • 表单标签(****

        • 收集用户输入的数据

        • 表单的标签

          • form的属性

            • action=”表单的提交路径”
            • method=”提交方式(默认是get方式)”(面试题)

              • form表单的提交方式有哪些?(get和post的区别)

                • 答:form表单提交方式有很多,常用的有两种post和get

                  • post和get提交方式的区别:
                    • get方式会把参数列表显示在地址栏上,post方式不会(请求体)。
                    • get方式说明网站安全级别较低,post安全级别较高。
                    • get方式不支持大数据,post支持大数据。
                • 推荐大家使用post方式。

          • 用户输入的内容

            • name属性必须要指定,value可以看情况指定
          • type=”text” 普通的文本框

            • name必须指定
          • type=”password” 密码框

              • name必须指定
          • type=”radio” 单选按钮

            • name必须指定 value必须指定
            • name的属性,值要相同
            • 默认值:checked=checked或者true
          • type=”checkbox” 多选按钮

            • name必须指定 value必须指定
            • 默认值:checked=checked或者true
          • type=”reset” 重置:恢复到最初的状态

          • type=”submit” 提交表单

            • 点击提交后,地址栏发生了变化(?sex=on)
            • 在普通的文本框上添加name属性 name=”username”之后,点击提交,地址栏发生了变化(?username=haha&sex=on)
              String str = “?username=haha&sex=on”;
            • ?username=zhangsan&password=123&sex=nan&love=zq
          • type=”file” 选择文件

            • name属性指定
          • type=”hidden” 隐藏组件

            • name指定 value指定
          • type=”button” 按钮

            • value=”显示的文字”
            • 和js(javascript) 绑定事件
          • type=”image” 图片

            • 提交 引入外部的一个文件(图片)
          • 声明选择框



          • 文本域

            • rows=”行”
            • clos=”列”
            • name属性指定
            • selected=”selected” 代表默认值
      • 框架标签(了解)

        • 对网页进行布局


        代表上半部分
        代表下半部分

        • 前提条件:不能写在标签的内部和下面
  • CSS
    * CSS的简介
    * CSS:cascading style sheet :层叠样式表。
    * 做什么用:设置网页的显示效果(设置样式)。
    * CSS将网页显示的效果和内容分离。(耦合性)

            超<font>文本</font>标签语言
    
        * HTML只需要把文本内容封装起来,不用属性,用CSS的代码来控制显示效果。
        * 如果开发了多套CSS的代码,都不用修改HTML的代码。
    
    * CSS和HTML的结合(*****)
        * CSS与HTML的结合方式(4种)
        * 在html的标签上,提供了一个(属性),style="CSS的代码"
        * 在HTML的文件,提供了一个(标签)    <style type="text/css">CSS的代码</style>,这个标签放在<head></head>的中间
    
        * 引入外部的文件的方式(引入CSS的文件,定义一个css文件(后缀名名  demo.css))(经常使用的方式)
            * @import url("CSS文件的地址");   属性必须要写<style></style>内部。大写和小写都没有问题。(注意:必须有;)
    
        * 引入外部文件的方式,通过一个<link>      写在<head></head>中间, 不要放在<style>中间(经常使用)
            * rel:代表当前和引入文件之间的关系
            * type:
            * href:引入CSS文件的地址
    
    
    * CSS的优先级(*****)和规范
        * 从上到下,由外到内,优先级是从低到高的。(一般情况下)(*****)
        * 标签名选择器 < 类选择器 < ID选择器 < style属性   (特殊情况下)(*****)
    
        * 规范
            * CSS的写法:   div{CSS的属性名:值;CSS的属性名:值;...}
            * 如果一个属性有多个值,值与值之间使用空格隔开
                * 例子 div{ xx:yy zz aa }
    
    
    * CSS的选择器(*****)
        * CSS的选择器
            * 告诉CSS的代码作用在哪个标签上。
                * 基本选择器
                    * 标签名选择器        div{}   span{}
                    * 类选择器:在HTML的标签上,提供了属性  class,定位到div的标签(美工经常使用的方式)
                        * 写法:   .class的名称   (.hehe{CSS的代码})
                        * 设置不同的标签,具有相同的样式
    
                    * ID选择器
                        * 在HTML的标签上,提供的属性 设置样式
                            * 写法:   #id的名称  (#haha{CSS的代码})
                        * 一般情况下:设置不同的ID
                            * 一般情况下给js语言来使用。
    
                * 扩展选择器
                    * 关联选择器:标签可以嵌套,标签与标签之间的关系。
                        * 写法:   中间用空格隔开 例子(div font{CSS的代码})
    
                    * 组合选择器:对多个不同的选择器进行相同的样式
                        * 写法:在多个不同的选择器之间用 , 隔开
    
                    * 伪元素选择器:   定义好的一些选择器,用就ok。
                        * 如果使用超链接伪元素选择器:使用顺序:   L V H A
    
    
    * CSS的布局(了解)(CSS+DIV进行布局)
        <div>
            <div>
                <img />
            </div>
            <div>
                <font>领导很忙</font>
            </div>
        </div>
    
    • JAVASCRIPT(JavaScript简写js,文件的后缀名也是 demo.js)(*

      • javascript的简介

        • js是基于对象和事件驱动的脚本语言,作用在客户端(浏览器)上。
        • js的特点:
          • 交互性
          • 安全性:(不可以访问本地的硬盘)
          • 跨平台性:因为浏览器就可以解析js的文件。
      • javascript和java不同(一点关系没有)(雷锋和雷峰塔)

        • Netscape(网景),静态的效果。livescript(javascript的前身)
        • java诞生了,升级了,改名(javascript),火了。
        • 巨头:自己开发一套(jscript)
        • 找一些公司推出的标准: SUN 微软 ECMA(欧洲计算机制造协会),联合推出现在的标准。

        • ECMAScript:标准。基础上扩展。

        • js的基于对象,java是面向对象。

        • js解析就可以执行,java先编译再执行。
        • js是弱类型的语言,java是强类型语言。
      • javascript语言的组成

        • ECMAScript 标准(js的语法,变量,函数)
        • BOM (Browser Object Model) 浏览器对象模型
        • DOM (Document Object Model) 文档对象模型
      • javascript的语法

        • 把js和HTML的结合一起。(2两种方式)

          • js和HTML的结合

            • HTML的文件提供了一个标签 ,标签可以放在HTML文件的任意位置上。

            • 引入外部的文件,有一个外部的文件。编写js文件。

              • 如果script通过src的属性引入了外部的文件,里面的js代码就不会执行了。(*
            • ,标签可以放在HTML文件的任意位置上。
      • 关键字

        • var 声明变量
      • 标示符

        • 和java一样
      • 注释

        • 和java一样
      • 变量

        • 声明变量,只使用一个关键字 var num = 12; var str = “abc”;
        • 5种基本数据类型

          • Undefined、Null、Boolean、Number 和 String

          • 5种基本数据类型

          • Undefined、Null、Boolean、Number 和 String

          • String 字符串类型

            • js中双引号和单引号都代表的是字符串
          • Number 数字类型
            • 不区分整数和小数
          • Boolean 布尔类型
          • Null 空,给引用赋值的
          • Undefined 未定义(声明变量,没有赋值)

          • 声明变量,使用var关键字

          • typeof() 判断当前变量是什么类型的数据
      • 运算符

        • js的运算符

          • 算术运算符
            • 0或者null是false,非0或者非null是true,默认用1表示。
              var num = 3710;
              alert(num/1000*1000);
              • 不区分整数和小数
          • 赋值运算符
            • 和java是一样的
          • 比较运算符
            • == 比较值是否相同
            • === 比较值和类型是否相同
          • 逻辑运算符

            • 和java中一样
          • 三元运算符
            条件?值1:值2

      • js的数组

        • js的数组
        • java String [] str = {};
        • 声明数组

          • var arr = [12,34,55];
          • var arr = new Array(5); 声明数组,长度是5
          • var arr = new Array(2,3,4); 声明数组,元素是2 3 4
        • 数组的属性

          • 长度:length
          • 数组的长度是可变的。
      • js的方法

        • java中 public String 方法名称(参数列表(int num,String str)){
          方法体;
          return null;
          }

        • js中,通过关键字function 声明方法。

          function 方法名称(参数列表 (num,str)){
          方法体;
          return;
          }

          • 参数列表:不能使用var关键字
          • 返回值:可写可不写的,如果有写返回值,如果没有,返回值可以省略不写。
        • 调用执行。

        • 在函数的内部,有一个数组,装传过来的参数的
          arguments

    • js的动态函数和匿名函数

      • js的动态函数和匿名函数

        • 动态函数
          function getSum(){
          return 50;
          }
          js提供了内置对象 Function

        • 匿名函数

          • 没有名称的函数
    • js的全局变量和局部变量

      • 全局变量:在
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值