Html&&css 学习总结 and JavaScript & TypeScript总结

<!--
    bgcolor 是背景颜色属性
    onclick 表示单击(点击)事件
    alert()是JavaScript语言提供的一个警告框函数
    它可以接受任意参数,参数就是警告框的函数信息
    font标签是字体标签,它可以用来修饰文本的字体,颜色,大小
    color属性修改颜色
    face属性修改字体
    size属性修改文本大小
-->
<!-- 特殊字符

    <br> 换行标签
    常用的特殊字符
    <  ===>>>>  &lt;
    >  ===>>>>  &gt;
    空格  ===>>>>   &nbsp;
-->
<!-- 标题标签
    h1 - h6 都是标题标签
    h1 最大 , h6 最小
        align 属性是对齐属性
            left   左对齐
            right  右对齐
            center 居中
-->
<!-- a 标签是超链接
    href 属性设置连接的地址
    target 属性设置那个目标进行跳转
        _self  表示当前页面
        _blank 表示打开新页面来进行跳转
    exp:<a href="http://localhost:8080" target="_self">本地</a>
-->
<!--
    ol是有序列表
    ul是无序列表
        type属性可以修改列表项前面的符号
        exp:<ul type = "null">
            </ul>
    li 是列表项
-->
<!--
    img标签是图片标签,用来显示图片
        src属性可以设置图片的路径
        width属性设置图片的宽度
        height属性设置图片的高度
        border属性设置图片边框的大小
        alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
        在web中相对路径:
            .        表示当前文件所在的目录
            ..        表示当前文件所在上一级的目录
            文件名   表示当前文件所在目录文件,相当于./文件名
            绝对路径:
            http://ip:port/工程名/资源路径
-->
<!--
    table标签是表格标签
        border设置表格标签
        width设置表格宽度
        height设置表格高度
        align 设置表格相对于页面的对齐方式
        cellspacing 设置单元格间距
    tr 是行标签
    th 是表头标签
    td 是单元格标签
        align 设置单元格文本对齐方式
    b 是加粗标签
    colspan 属性设置跨列
    rowspan 属性设置跨行
    exp:<td colspan = "2" rowspan = "2"></td>  表示跨2行2列
-->
<!--
    iframe 标签可以在页面上开辟一个小区域显示一个单独的页面
        iframe和a标签组合使用:
            1.在iframe标签中使用name属性定义一个名称
            2.在a标签的target属性设置iframe的name的属性值
    <iframe src="地址" width="500" height="400"></iframe>
    <a href = "http://localhost:8080" target = "abc"> 本地连接</a>
-->
<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset = "UTF-8">
        <title>表单的显示</title>
    </head>
    <body>
        <!-- 创建一个个人信息注册的表单界面,包含用户名,密码,确认密码,性别,兴趣爱好(多选),国籍(下拉列表),自我评价,重置,提交
        form 标签就是表单
            action 属性设置提交的服务器地址
            method属性设置提交的方式是GET(默认值)或是POST
            GET请求的特点:
                1、浏览器地址栏中的地址是:action属性[+?+请求参数]
                2、不安全
                3、有数据长度的限制
            POST请求的特点:
                1、浏览器地址栏中只有action属性值
                2、相对GET安全
                3、理论上来说没有长度的限制
        表单提交的时候,数据没有发送给服务器的三种情况:
            1、表单项没有name值
            2、单选,复选(下拉列表中的option标签) 都需要加value属性
            3、表单项不在form标签中

            input type = text 是文件输入框 , value设置默认值显示内容
            input type = password 是密码输入框 ,value设置默认是显示内容
            input type = radio  是单选框 ,name属性可以对其进行分组 checked = "checked"表示默认选中
            input type = checkbox 是复选框 ,checked = "checked"表示默认选中
            select标签是下拉列表框
                option标签是下拉列表框中的选项 selected = "selected"设置默认选中
            textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值)
                row 属性设置可以显示几行高度
                cols 属性设置每行可以显示几个字符宽度
            input type = reset是重置按钮 value 属性修改按钮上的文本
            input type = submit 是提交按钮 value 属性修改按钮上的文本
            input type = botton 是按钮
            input type = file 是文件上传域
            input type = hidden 是隐藏域 当我们要发送某些信息,而这些信息不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)
-->
    <form >
        用户名称:<input type = "text" value="默认值"/><br/>
        用户密码:<input type = "password" value="abc"/><br/>
        确认密码:<input type = "passeord" value="abc"/><br/>
        性别:<input type = "radio" name = "sex"/>男
            <input type = "radio" name = "sex" checked = "checked">女
        兴趣爱好:<input type = "checkbox" checked = "checked" />Java
            <input type = "checkbox" checked = "checked" />JavaSCript
        <input type = "checkbox" checked = "checked" />C++
        国籍:<select>
            <option>--请选择国籍--</option>
            <option selected = "selected">中国</option>
            <option>美国</option>
            <option>小日本</option>
        </select>
        自我评价:<textarea row = "10" cols = "20">默认值在这</textarea>
        <input type = "reset" value = "hahah" />  
        <input type = "submit" />
        <input type = "botton"/>
        </form>
    </body>
</html>
<!--
    隐形参数 arguments
    在function函数中不需要定义,可以直接使用的变量,操作类似数组
    对象的定义:
        var 变量名= new object();
        变量名.属性名 = 值;
        变量名.函数名 = function();
    对象的访问:
        变量名.属性/函数名();
    var 变量名 ={
        属性名: 值,
        属性名: 值
        函数名:function(){}
    };

-->
<!--
    常用事件:
    onload 加载完成事件                    页面加载完成之后,常用于做界面js代码初始化事件
    onclick 单击事件                     常用于按钮的点击响应事件
    onblur 失去焦点事件                    常用于输入框失去焦点后验证其输入内容是否合法
    onchange 内容发生改变事件              常用于下拉表和输入框内容发生改变后的操作
    onsubmit 表单提交事件                    常用于表单提交前,验证所有表单项是否合法

    事件的注册又分为静态注册和动态注册:
        告诉浏览器,当事件响应后要执行那些代码,叫做事件注册或者事件绑定
        静态注册事件:
            通过html标签的事件属性直接赋予事件响应后的代码,为静态注册
        动态注册:
            指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名 = function(){},这种形式赋予事件响应后的代码,为动态注册
        动态注册基本步骤:
            1.获取标签对象
            2.标签对象.事件名 = function(){}

    -->
<!--
    div、span、p标签
    div标签 默认独占一行
    span标签 它的长度是封装数据的长度
    p段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不空)
-->
<!-- 
    && 且运算
    第一种:当表达式全为真的时候,返回最后一个表达式的值
    第二种:当表达式中,有一个为假的时候,返回第一个为假的表达式
    || 或运算
    第一种:当表达式全为假时,返回最后一个表达式的值
    第二种:只要有一个表达式为真,就会返回第一个表达式为真的值
    && 且运算和 || 或运算会短路

-->

2.JQuery

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
$(function (){
            //表示页面完成加载后,相当于window.onload = function(){}
            var $btnObj = $("#btnId");// 按id查询标签对象
            $btnObj.click(function (){
                alert("JQuery点击");
            })
        });
 <button id="btnId">点击</button>
JQuery对象 与 dom对象之间的转换:
1.JQuery转换为dom
var dom = $obj[下标]
2.dom转换为JQuery
var $obj = $()
attr() 可以设置和获取属性的值,不推荐操作checked、readOnly、selected、disable等
       还可以操作非标准的属性(自定义的数)
prop() 可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disable等
使用方法: .prop("check",true);//设置选中
内部插入:
appendTo()     a.appendTo(b) 把a插入到b子元素末尾,成为最后一个子元素
prependTo()    a.prependTo(b) 把a插入到b所有子元素的前面,成为第一个子元素
外部插入:
insertAfter() <h1>标题1</h1>.insertAfter("div") <div></div><h1>标题1</h1>
insertBefore  <h1>标题1</h1>.insertBefore("div") <h1>标题1</h1><div></div>
替换:
replaceWith() a.replaceWith(b) 用b替换a
replaceAll() a.replaceAll(b) 用a替换所有b
删除:
remove() a.remove() 删除a标签
empty() a.empty() 删除a标签里的内容
jQuery动画
基本动画:
show()  将隐藏的元素显示
hide()  将可见元素隐藏
toggle() 可见就隐藏,不可见就显示
淡出淡入动画:
fadeln() 淡入
fadeOut() 淡出
fadeTo() 指定时间内慢慢将透明度修改到指定的值,0为透明,1为完全可见,0.5为半透明
fadeToggle() 淡入/淡出 切换
    以上动画可以添加参数:
        1.第一个参数是动画执行时长,以毫秒为单位
        2.第二个参数是动画的回调函数(动画完成后自动调用的函数)
Jquery事件操作
$(function(){});和window.onload()=function()的区别:
他们分别是什么时候触发
1.jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就马上执行;
2.原生js的页面加载完成之后,除了要等浏览器的内核解析完成标签创建好dom对象
,还要等标签显示时需要的内容加载完成
他们触发的顺序:
1.jQuery页面加载完成后先执行
2.原生js页面加载完成后
他们执行次数:
1.原生js的页面加载完成之后,只会执行最后一次赋值函数。
2.jQuery页面加载完成之后是把全部注册的function函数一次顺序全部执行
click() 可以绑定单击事件,以及触发单击事件
mouseover()  鼠标移入事件
mouseout()  鼠标移除事件
bind()  可以给元素一次性绑定一个或者多个事件
one()  使用上跟bind一样,但one方法绑定的事件只会响应一次
live()  绑定选择器匹配的所有元素事件
unbind()  跟bind方法相反的操作,解除事件的绑定
XML是可扩展的标记性语言
xml主要作用:
    1.用来保存数据,而且这些数据具有自我描述性
    2.作为项目或模块的配置文件
    3.作为网络传输数据的格式(现在JSON为主)
Tomcat目录介绍:
    bin 专门用来存放Tomcat服务器的可执行文件
    conf 专门用来存放Tomcat服务器的配置文件
    lib 专门用来存放Tomcat服务器的jar包
    logs 专门用来存放Tomcat服务器运行时输出的日记信息
    temp 专门用来存放Tomcat运行时产生的临时数据
    webapps 专门用来存放部署的web工程
    work 是Tomcat工作时的目录,用来存放Tomcat运行时jsp翻译为Servlet的源码
,和session钝化的目录
请求转发的特点:
1.浏览器地址栏没有变化
2.他们是一次请求
3.他们共享request域中的数据
4.可以转发到WEB-INF目录下
5.不可以访问工程以外的资源
--base标签设置页面相对路径工作时参照的地址
            href属性就是参数的地址值

对于html和css的学习还是比较的欠缺,css更多的还是了解阶段,只能用一些简单的style样式,html的基本知识还是掌握的比较得全面。 JavaScript和TypeScript的学习来说,只能够初步的让简单功能跑起来,还不能灵活的调用,并且对于前端和后端的连接只能进行数据的增删改查,让数据显示到页面,对于框架的了解不清楚。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值