黑马程序员_H​T​M​L、CSS、JavaScript、 ​D​O​M

---------------------- android培训 、 java培训 、 期待与您交流! ----------------------


一、 HTML

1、Html HyperText Markup Language

2、html标签就是用来封装的

3、规范中要求所有标签都要结束

4、操作思想:
        为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。
        标签就相当于一个容器。对容器中的数据进行操作,就是在再不断的改变容器的属性值。

5、双引和单引相互嵌套

6、转义字符&;


7、GET和POST提交的区别?
        GET提交会将提交的数据信息显示在地址栏中;
        POST提交的数据不会显示在地址栏中。

        GET提交对于敏感信息不安全;
        POST提交对于敏感信息安全。

        GET提交对于大体积数据不合适;
        POST提交对于大体积数据是可以的。

        GET提交将提交的信息封装到了请求信息的可以请求行中;
        POST提交将提交信息封装到了请求体中。

        如果你在客户端提交中文。
        GET提交中文,服务端如果是Tomcat器,收到中文后,会用ISO8859-1解码,出现乱码,必须在服务器端用IOS8859-1将收到的数据编码,再用指定的中文码表解码。

        POST提交中文,可以使用get的方式解决乱码,也可以使用服务器端的一个对象request的一个方法setCharacterEncoding(中文码表)直接继续解码并获取中文。因为该方法只能解码请求体重的数据。

        综上所述:建议表单提交用POST提交。

        和服务端交互:
        1.地址栏中输入。GET提交
        2.超链接。GET提交
        3.表单。GET、POST提交

8、 校验:
        如果在注册页面假如增强型校验。只要有一项填写错误,就无法提交。只有全部填写正确才可以提交。
        服务端收到数据需要校验,为了数据的安全性。
        注册页面也需要校验,为了提高用户体验效果。减轻服务端的压力。

9、 注意画中画标签<iframe></iframe>
        网页分块标签<frameset><frame /></frameset>

        表单<form></form>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	</head>
	<frameset rows="30%,*">
		<frame src="htmlDemo.html" name="top" />
		<frameset cols="40%,*">
			<frame src="htmlDemo.html" name="left" target="right" />
			<frame src="htmlDemo.html" name="right" />
		</frameset>
	</frameset>
	<body>
	</body>
	</html>
------------------------------------------------------------------------------------
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <form>
            用户姓名:<input type="text" value="请输入姓名" /><br />
            输入密码:<input type="password" value="" /><br /> 
            选择性别:<input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="woman" />女<br />
            选择技术:<input type="checkbox" value="Java" />Java<input type="checkbox" value="HTML" />HTML<br /> 
            
            <input type="button" name="uploadifile" value="button" οnclick="alert('啊,真的有一个按钮!')" /><br />

            <!-- input标签中的type属性定义为image的时候,具有提交按钮的功能 -->
            <input type="image" src="" /><br />
            <!-- 隐藏框 ,不需要用户看到,需要服务器看到-->
            <input type="hidden" name="id" value="007" /> <select name="country">
                <option>--选择国家--</option>
                <option value="cn">中国</option>
                <option value="en">英国</option>
                <option value="usa">美国</option>
            </select> <br />
            <textarea rows="6" cols="20"></textarea>
            <br /> <input type="submit" name="提交" /><input type="reset" name="重置" /><br />
        </form>
    </body>
    </html>

---------------------------------------------------------------------------------------------------------------------------------
表单演示
<html>
    <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
    </head>
    <body>
        <fieldset>
            <legend>
                注册区域
            </legend>
            <form action="http://127.0.0.1 : 9090" method="get">
                <table border="1" bordercolor="blue" cellpadding="10px" cellspacing="0px" width="600px">
                    <tr>
                        <td colspan="2" margion="center" align="center">注册页面</td>
                    </tr>
                    <tr>
                        <td align="center">用户名(U):</td>
                        <td align="center">
                        <input type="text" name="user" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">输入密码(P):</td>
                        <td align="center">
                        <input type="password" name="psw" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">确认密码:</td>
                        <td align="center">
                        <input type="password" name="repsw" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">选择性别:</td>
                        <td align="center">
                        <input type="radio" name="sex" value="man" />
                        男
                        <input type="radio" name="sex" value="woman" />
                        女 </td>
                    </tr>
                    <tr>
                        <td align="center">选择技术:</td>
                        <td align="center">
                        <input type="checkbox" name="tech" value="Java" />
                        Java
                        <input type="checkbox" name="tech" value="Html" />
                        text
                        <input type="checkbox" name="tech" value="CSS" />
                        CSS </td>
                    </tr>
                    <tr>
                        <td align="center">选择国家:</td>
                        <td align="center">
                        <select>
                            <option value="none">---选择国家---</option>
                            <option value="cn">---中国---</option>
                            <option value="en">---英国---</option>
                            <option value="sua">---美国---</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                        <input type="submit" value="提交数据">
                        </input>
                        <input type="reset" value="重置数据">
                        </input></td>
                    </tr>
                </table>
            </form>
        </fieldset>
    </body>
</html>

二、 CSS

1、html标签分两种:
        行内标签:用于封装行中一部分。结束后没有换行 <font> a <input>
        块级标签:标签结束后,有换行。table dt dd

        css注释只有一种---多行注释/**/

2、css与html结合有四种方式:

	(1)style属性方式
	<body>
		<div style="color: red; background-color: olive;">div区域演示一</div>
	</body>

	(2)style标签
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
		<style type="text/css">
		div {
			color: green;
			background-color: blue;
		}
		</style>
	</head>
	<body>
		<div style="color: red; font-size: 30px;">div区域演示一</div>
		<div>div区域演示二</div>
		<span>span区域演示一</span>
		<span>span区域演示二</span>
	</body>

	(3)import导入
	<head>
	<title>Insert title here</title>

		<style type="text/css">
			@import url("css.css");/*导入css文件目录*/
		</style>
	</head>

	(4)使用html的link标签导入css样式
	<head>
	<title>Insert title here</title>
		<link rel="stylesheet" href="css文件目录" />
	</head>
3、对于选择器就是 样式要作用的标签。
        分为三种:
        a. 可以通过标签名来确定。

        b. 可以对标签进行分类,通过标签中的属性class完成。

        c. 可以对标签进行唯一性标识,通过标签中的属性id完成。

        每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
    在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。

4、样式优先级:
        由上到下,由外到内。优先级由低到高。

5、class选择器:
        在标签中定义class属性并赋值。通过  标签名.class值  对该标签进行样式设置。
        例:
        相同标签设置不同样式的时候,用class进行区分。
        p.pclass_1 {color:#FF0000;}
        p.pclass_2 {color:#0000FF;}
        <p class=”pclass_1”>P标签样式</p>
        <p class=”pclass_2”>P标签样式</p>

        不同标签进行相同设置的时候,用class进行统一定义。
        .classname {color:#00FF00;}
        <p class=”classname”>P标签样式</p>
        <div class=”classname”>DIV标签样式</div>

6、id选择器:
        与class选择器类似,但格式不同,选择器的名称为:#id值。
        例:
        #pid { color:#0000FF;}
        <p id=”pid”>P标签样式</p>
        注:多个标签同样可以定义相同的id值,但是对于JavaScript对标签元素的获取就会出错。所以形成习惯,确保id值的唯一性对于以后的数据库设计也很有好处。

7、选择器优先级:标签选择器 < class选择器 < id选择器 < 标签中style属性

8、 扩展选择器:
        a. 关联选择器
        标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。
        例:
        p { color:#00FF00;}
        p b { color:#FF000;}
        <p>P标签<b>刘德华</b>段落样式</p>
        <p>P标签段落</p>

        b. 组合选择器
        对多个不同选择器进行相同样式设置的时候应用此选择器。
        p,div { color:#FF0000;}
        <p>P标签显示段落。</p>
        <div>DIV标签显示段落</div>
        注:多个不同选择器要用逗号分隔开。

        c. 伪元素选择器
        其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
        格式:标签名:伪元素。类名   标签名。类名:伪元素。都可以。
        a:link  超链接未点击状态。
        a:visited 被访问后的状态。
        a:hover 光标移到超链接上的状态(未点击)。
        a:active 点击超链接时的状态。
        使用顺序 L – V – H - A
        p:first-line 段落的第一行文本。
        p:first-letter 段落中的第一个字母。
        :focus 具有焦点的元素。IE6浏览器不支持,在FireFox中可以看到效果。

9、伪元素选择器: 执行顺序记忆: L V H A
        :link 未点击前。
        :visited 访问后。
        :hover  悬停状态。
        :active 活动状态。


三、 JavaScript

1、 JavaScript 概述
        JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。
        特点:
        a. 交互性(它可以做的就是信息的动态交互)
        b. 安全性(不允许直接访问本地硬盘)
        c. 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)

2、 JavaScript与Java不同
        a. JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。
        b. JS是基于对象,Java是面向对象。
        c. JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。
        d. JS是弱类型,Java是强类型。

3、 如果使用了script标签中的src属性,那么就不执行标签内封装的js代码了。
         所以引入js文件和封装js代码的标签要分开。

4、 JavaScript与Html的结合方式
        想要将其他代码融入到Html中,都是以标签的形式。
        a. JS代码存放在标签对<script> js code...</script>中。
        b. 当有多个html页面使用到相同的JS脚本时,可以将js代码封装到一个文件中,只要在script标签的src属性引入一个js文件。(方便后期维护,扩展)
        注意:如果在script标签中定义了src属性,那么标签中的内容不会被执行。
        例:<script src=”test.js” type=”text/javascript”></script>
        注:规范中script标签早期有一个属性language,而现在使用type属性。

5、 演示函数:
    
        格式:
        
        function 函数名(参数列表)
        {
            函数体;
            return 返回值;
         }

        函数中其实有一个数组,专门用于存储接收的实际参数。arguments

6、函数中的变量都是局部变量

7、动态函数。
        使用到了js中的一个对象 Function.
        var add = new Function("x,y","var sum; sum = x+y; return sum;");

8、匿名函数。
        简化了函数的书写,通常用于事件的处理。

9、特有语句:
        with(对象){
                可以直接使用对象的属性和行为。
            }
            for  in语句。遍历对象。
            for(变量  in  对象){}

	var personObject = new Person("wangcai",21);
	
	//personObject.setName("wangwangcai");
	//personObject.getName();
	//personObject.show();
	with(personObject){
		setName("wangwang");
		getName();
		show();
	}
	
	for(x in  personObject){
		
		alert(x+":"+personObject[x]);
		
	}

四、DOM

1、DOM:document object model 文档对象模型

        是一个用于解析标记型文档的技术。可以将标记型文档封装成对象,并将文档中的所有内容封装成对象。

        变成对象的好处就是在于可以对标记对象进行属性和行为定义。
        方便于操作该对象的内容。

2、DHTML:动态html。  注意:动态html不是动态网页而是动态的效果,动态网页是和服务器端交互的网页。
        html:提供了标签,负责对数据进行封装。
        
        css:提供了丰富的样式,负责的是页面的样式体现。

        dom:提供的文档解析,负责将文档以及文档中的所有内容解析成对象。

        javascript:提供的程序设计语言,负责将这些对象的使用,进行关联,让其具备逻辑性。

        Dhtml+XMLhttpRequest=AJAX.

3、通过document对象演示如何获取页面中的标签节点。

        getElementById 获取对ID标签属性为指定值得第一个对象的引用。
        getElementsByName 根据NAME标签属性的值获取对象的集合。
        getElementByTagName 获取基于指定元素名称的对象集合。

4、第二种获取节点的方式:
        通过节点的层次关系获取。
        父节点:parentNode
        子节点:childNodes对应是一个集合。
        兄弟节点:
            上一个兄弟:previousSibling
            下一个兄弟:nextSibling

5、取消超链接默认点击效果:javascript:void(0)

---------------------- android培训 、 java培训 、 期待与您交流! ----------------------
详细请查看:www.itheima.com
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值