JavaEE基础【HTML、CSS、JavaScript、JQuery】

1、HTML简介

HTML指的超文本标记语言(Hyper Text Markup Language)，是一种用来描述网页的语言。超文本指的是除了可以包含文字之外，还可以包含图片、链接、音乐、视频、程序等内容。

        HTML网页的组成：

                结构（HTML）：HTML是网页内容的载体。内容是网页制作者放在页面上想要让用户浏览的信息，包括文字、图片、视频等等。

                表现（CSS）：CSS样式是表现。是网页的外衣，比如标题字体，颜色变化，背景图片，边框等。        

                行为（JavaScript、JQuery）：JS用来实现网页上的特效效果，如鼠标滑过显示下拉菜单，购物网站中的图片轮换。一般有动画的，有交互的一般都是用JS来实现的。

2、常用的HTML标签

        HTML页面中第一行为HTML页面的版本信息 

        第二行为根标签，所有的网页内容放在中

        为头标签，中的内容为网页的标题

        网页的主要内容全部写在body标签中

    
        
        
    
    

        我的第一个网页！
    

        标题标签，一共六个，h1到h6

    
一级标题
    
二级标题
    
三级标题
    
四级标题
    
五级标题
    
六级标题

         换行标签br

    福建烤老鼠

    今飞凯达你

    内存模型

        超链接标签a

    点我没惊喜

    点我有惊喜

         页面相对路径结构

         table标签

    
    


    
    

        
        

            
            
姓名
            
年龄
            
职业
            
家庭地址
        

        
        

            
            
狐狸
            
22
            
法师
            
弗雷尔卓德
        

        
        

            
            
艾希

            
ADC

        

        
        

            
            
皇子

            
打野
            
恕瑞玛
        
    

        form表单标签

        登录注册上点击“提交”的按钮就是表单 

    
    


    
    



        用户名称：

        用户密码：


        
    

3、层叠样式表CSS 

        CSS 指层叠样式表 (Cascading Style Sheets)。主要用来设置网页中元素的样式。如边框，颜色，位置等…CSS既可以写在HTML中，也可以写在元素的style属性里面，还可以写在.css外部文件里然后引入到页面。

        编写位置、选择器

    
    

    


    



    
我是一个段落

    
我是一个一级标题
    
写在style标签中，style表现放在head标签中1
    
写在style标签中，style表现放在head标签中2
    
写在style标签中，style表现放在head标签中3
    
写在style标签中，style表现放在head标签中4
    
我是div标签，主要用来布局，默认占用浏览器的一整行

        style.css文件 

@charset "UTF-8";
/*标签选择器*/
h1{color: red;}
/*ID选择器，格式：#id属性值*/
#p1{color: aqua}
/*类选择器，格式：.class属性值*/
.p2{color: blue}
/*分组选择器，将各个选择器使用逗号分隔，然后统一设置样式*/
#p1,.p2{font-size: 30px}

        颜色的表示方式：

 4、JavaScript

        JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。

        编写位置和CSS类似，通常使用第二种。

    
    
    
    

    


    
    Say Hello

    Say Hello

        javascript.js文件 

//当文档加载完成之后再执行函数中的内容
window.onload = function () {
    //获取按钮对象
    var bEle = document.getElementById("bi");
    //给按钮绑定单击事件
    bEle.onclick = function () {
        //弹出提示窗
        alert("Hello JavaScript");
    }
}

        使用JQuery实现如上功能 ：

    
    

    
    


    Say Hello

        JS的语法 ：变量与函数

        练习：

        完成登录注册的页面（html），给页面添加背景颜色（css），点击输入框提示输入信息（js） 

    
    


    我要登录


    我要注册








    
    
    

    


    
欢迎登录
    

        用户名称：

        用户密码：

        

    








    
    
    
    
    


    
欢迎注册
    

        用户名称：

        用户密码：

        确认密码：

        用户邮箱：

        
    







    
    


    
登陆成功!







    
    


    
注册成功!