zoukankan      html  css  js  c++  java
  • HTML_CSS_JS

    二阶段的课程体系

    HTML静态页面

    JavaScript 客户端动态脚本 浏览器解释执行 页面内容可以动态改变,有交互效果

    jQuery JS库,就是对JS的封装,底层就是JS(提升js的使用效率)

    javaWeb 和服务器交互动态网站,使用java语言,访问服务器的数据库

    java开发工程师的要求

    image-20210709142132681

    HTML

    Hyper Text Markup Language(超文本标记语言)

    标记:又叫标签,是构成HTML的基础

    标签一般成对 <标签名></标签名>

    HTML用来制作做静态页面;

    <标签 属性名="属性值"> 文本</标签>

    样式

    样式表

    image-20210707095136673

    在选择器中定义样式,满足当前选择器的标签就会自动应用这个选择器中的样式

    1、什么是CSS,有什么作用?
    CSS(Cascading Style Sheet):层叠样式表语言。
    CSS的作用是:
    修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。
    CSS好比是HTML的化妆品一样。
    HTML还是主体,CSS依赖HTML。CSS的存在就是修饰HTML,所以新建的文件还是xx.html文件。

    2、CSS我们要求掌握到什么程度?
    * 常见的CSS样式要求会写。
    * 别人写的CSS样式要能看懂。

    3、在HTML页面中嵌套使用CSS的三种方式:

    第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。
    	语法格式:
    		<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
    	
    第二种方式:在head标签中使用style块,这种方式被称为样式块方式。
    	语法格式:
    		<head>
    			<style type="text/css">
    				选择器 {
    					样式名 : 样式值;
    					样式名 : 样式值;
    					.....
    				}
    				选择器 {
    					样式名 : 样式值;
    					样式名 : 样式值;
    					.....
    				}
    			</style>
    		</head>
    
    第三种方式:链入外部样式表文件,这种方式最常用。(将样式写到一个独立的xxx.css文件当中,在需要的网页上
    直接引入css文件,样式就引入了)
    	语法格式:
    		<link type="text/css" rel="stylesheet" href="css文件的路径" />
    	
    	这种方式易维护,维护成本较低。
    		xxx.css文件
    			1.html中引入了
    			2.html中引入了
    			3.html中引入了
    			4.html中引入了
    

    id选择器不可复用,只能使用一次,class选择器可以复用

    用法差不多

    CSS使用

    image-20210709101053281

    做开心网网页

    将图片设置为背景图片即可在上方设置文字

    边距:margin:10px;

    水平居中:text-aglin:center

    行高:line-height

    边框:border:1px solid blue;

    加了边框可以方便调整

    image-20210709104031418

    去除超链接下划线:

    text-decration:none;

    居中:margin: 0px auto;

    间隔用边距margin-top之类的

    position:fixed浮动效果

    list-style:none去除列表的序号

    JavaScript

    核心组成:

    ECMAScript 规范制定者:欧洲计算机技术制造商协会

    BOM Browser Object Model 浏览器对象模型

    DOM Document Object Model 文档对象模型

    image-20210709144559487一个HTML文件就是一个对象,文档中每个标签也是一个对象,我们要把操作页面的元素,通过属性和方法操作

    BOM和DOM的关系

    上课要做好笔记才不会走神

    js的功能

    ​ 在页面添加、删除、修改内容

    ​ 修改样式

    ​ 表单数据,输入验证

    image-20210709152532964

    成对标签,中间没有内容,可以直接结束,但是<Script>标签不行

    外部引用和内嵌引用,分开写

    行内引用:

    //alert内嵌提示框
    <a href="#">aaa</a>  #当前页面顶部
    <a href = "javascript:alert('点击超链接')">aaa</a>
    
    
    //在控制台输出提示
    console.log("控制台日志输出");
    //调用document对象的方法,系统对象,内置对象,不需要new直接使用
    document.write("页面输出<br/>")
    
    

    需要复习java多线程、io流、

    image-20210709154314759

    我总是有些奇思妙想?

    变量声明
    //JS是弱数据类型的语言,声明变量使用var
    var a=1;//var可以省略
    console.log("a="+a);
    //let 是ES6扩展语法,不能定义同名变量
    let a=1;
    
    
    
    数据类型
    <script type="text/javascript">
    			var a = 1;
        	console.log(typeof(a));
        //输出a的数据类型
    </script>
    
    
    逻辑结构

    和java相同


    div一般用两个属性来修改标签中的内容

    innerHTML:有标签,按照效果来展示

    innerText: 有标签,自动转义成标签文本

    定时器

    //定时器方法:指定时间间隔,到了指定的时间间隔自动执行方法;

    setTimeout()

    image-20210712142519559

    匿名函数实现初始化

    image-20210712143734389

    把编程知识想象成一个3D网络,每个知识点都是网络中的一个节点,每个节点上有一盏灯,你学会了,灯就亮了,可以看到周围的节点,接着走,点灯,再走,再点灯,这样,灯亮的越来越多,看的越来越清楚,对于自己要走的方向也越来越有信心

    基本的思想是,先用后学,缩短反馈,反复迭代。

    我只需要比我昨天更好就行了

    javascript非常重要

    在JS中有很多事件,其中一个事件叫:鼠标单击,单词:click

    对应的事件句柄为:onclick。

    JS中的字符串可以使用双引号,他也可以使用单引号,一条语句结束后可以使用分号结束,也可以不用

    dom:docment Object modle

    bom: Brawer Object Modle

    JS是事件驱动型语言

    image-20210712171906942

    image-20210712172705311

    引入外部JS文件

    <script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
    
    

    image-20210712173808578

    byte short int long float double boolean char

    12484812

    JS中变量:

    1、声明了未赋值会默认赋值undefine;

    2、未声明直接使用会报错

    函数定义:

    function(){

    }

    `有后选后,无后选前,无后无前,算法也甜,条件允许,无脑后端,前途无量,预定高管,其次前端,需求频繁,温饱有余,人上人难,算法数据,收入可观,最好硕博,高端饭碗,测试开发,也可一战,随手一点,月入过万,走投无路,回家种田,日出日落,生活
  • 相关阅读:
    sql存储过程简单教程
    深入揭示Web 2.0核心技术——混搭
    Struts 2创始人Patrick Lightbody看《精通Struts 2:Web 2.0开发实战 》
    深入全面阐释Struts 2的方方面面
    设计原本如此简单
    掌握ASP.NET技术之捷径
    Struts 2创始人Patrick Lightbody作序推荐
    Struts 2权威著作
    Amazon超级畅销书之《C#与.NET 3.5高级程序设计(第4版)》
    Web开发领域最热门的话题之混搭
  • 原文地址:https://www.cnblogs.com/yekaiit/p/15003603.html
Copyright © 2011-2022 走看看