【嘉兴东臣php】HTML+CSS+JS笔记
【嘉兴东臣php】HTML+CSS+JS笔记
莫洛的洋葱 发表于2年前
【嘉兴东臣php】HTML+CSS+JS笔记
  • 发表于 2年前
  • 阅读 36
  • 收藏 0
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

摘要: HTML CSS JS
   一开始学习的时候发现学起来有点困难,在设置好按钮、图片、文本框后不知道该如何进行排版,排了之后也是参差不齐,都是乱七八糟的,但随着自己的不断练习和修改,加上老黄的耐心的讲解,发现做起来也不是那么困难,做好后,发现自己做的登录注册页面还是不错的。下礼拜开始学习新的东西了,这礼拜好好复习好基础,为下礼拜学习打好基础,很喜欢一句话:以后的你会感谢现在努力的自己,一起加油吧,下面就把老黄和自己觉得重要的内容附上:

一、HTML 语法

注意:style里可以放入多个属性,但是请一定要要以;分割。

1、style="float:left/right" 把相关控件或者文字左对齐或者右对齐 注意:控件对齐方式会影响到其他的控件布局

2、style="color:颜色" 设置文字颜色

3、style="text-align:center/left/right" 通常表示用于文字的对齐方式

4、style="cursor:pointer;" 显示手势

5、style="font-size:字体大小" 设置字体大小,注意:在HTML中,有设置尺寸,大小的三种单位:px 像素,em 长度,pt 用于表格中(不常用)

6、style="font-weight:bolder" 设置字体粗细

7、style="margin:边距" 设置字体、控件的边距,注意是外边距 margin: 上边距 右边距 下边距 左边距,例如:margin:10px 20px 30px 40px ,注意:中间都有空格,如果不想设置边距,可以用0px,或者0表示,在设置时候可以直接设置左边距如:margin-left:30px等。(margin-left、margin-right、margin-top、margin-bottom)

8、style="padding:边距" 设置字体、控件的边距,注意是内边距 padding: 上边距 右边距 下边距 左边距,注意:中间都有空格,如果不想设置边距,可以用0px,或者0表示,在设置时候可以直接设置左边距如:padding-left:30px等。(padding-left、padding-right、padding-top、padding-bottom) 9、style="display: block(显示)/none(隐藏)" 显示文字或者控件

10、<ul><li></li></ul> 列表 基本写法: <ul>列表整体 <li></li> 某一行 <ul>

例: <ul> <li>食品</li> <li>数码</li> </ul>


11、<button></button> 按钮,如: <button style="font-size:20px;color:blue;font-weight:bolder;cursor:pointer">点击</button>

12、<select><option>选项</option></select> 下拉菜单,如: <select style="widht=100"> <option>---请选择省份---</option> <option>浙江</option> <option>上海</option> </select> 注意:select里面一般可以加style,然后selected是默认选中的某一项,该属性必须写在<option>里面。 13、<input>,注意:属性type是关键,默认是输入框。 type类型如下: 1、text 文本输入框 例如:<input type="text"/> 2、checkbox 复选框 例如:<inpu type="checkbox"/> 3、radio 单选框 例如:<input type="radio"/> 4、button 按钮 例如:<input type="button"/> 5、submit 提交按钮 例如:<input type="submit"/> 6、file 上传 例如:<input type="file"/>

注意:1、在设置单选框的时候,一定要加入name属性,该属性,在此处通常为了绑定同一组单选框。 2、name属性本身就是为了表示一个控件的名字,方便在后期学习基本的时候,获取这个控件的值。例如:<input type="radio" name="里面可以放任何名字但是必须和同一组的单选框名字一致"/> 3、拓展:name属性、class属性、id属性等都可以获取控件值 4、value表示一个控件的默认值,通常表示在文本框,按钮上。

14、<textarea></textarea> 多行文本框,又叫富文本框。常用的属性有cols 列,rows 行 例如:<textarea cols="10" rows="10">123456</textarea>

15、在<head>内部写入css样式,写法如下: <style type="text/css"> 相关控件的样式 例如:input { 属性 } </style> 注意:控件名后面跟着的是大括号{}。

16、属性class为设置在head内部或者外部引入文件来设置控件样式的形式,通常可以通过class来设置某组控件样式。属性id为设置head内部或者外部引入文件来设置控件样式的形式,通常可以通过id来设置某一个控件样式。相关用法:class在head内部用“.”引用,id在head内部用“#”引号。

17、每当引入外部css的文件的时候,通常的写法为: <link href="css文件" type="text/css" rel="stylesheet"/> 注意:css文件的文件类型.css

18、加入注释,注释的用处是每当开发者迷茫的时候,不懂的时候,看过以后就大彻大悟了。注释的基本写法:<!--注释内容-->

二、XHTML重点:

1、XHTML 就是XML和HTML的结合体,X代表可扩展的。简单的说XHTML就是严谨规范化的HTML语言。

2、XML,XML其实是一种标记性的语言。例如: <break></break>,<hello><rose></rose></hello>

3、XHTML 有以下几个特性: 1、有头就有尾,用<>表示出来。 2、层次化的东西,一定要正确,不要颠倒。 3、所有的属性和元素都要小写。 4、空元素,也要有结束标签 例如<br/><hr/> 5、多用ID,少用Name

4、dl dd dt 都是定义一个自定义列表的,参考以前学过的ul li 5、visibility: hidden; 设置元素不可见 6、background-repeat:no-repeat 背景不重复

7、整理一个登录页面完成的步骤(参考renren.com): 1、定义列表 <dl><dd></dd></dl> 2、在列表的相关的项里面加入input 文本框 3、设置文本框的样式,height,width,padding,margin,font-size等 4、设置dd的样式 width,height等。注意设置了dd样式一定也要考虑好input文本框的样式,因为dd里面嵌套了至少一个input 5、接下来考虑的是按钮,按钮只需要遵守dd的基本样式,并且设置好背景颜色即可。 6、验证码:注意验证码的dd列表,有两部分组成:文本框和验证码图片,注意分配宽度,另外,要想两个控制在一行,请设置验证码图片float:right;另外需要注意:文本框不能太宽,可能会把验证码挤掉,最重要一点一定要限制dd的宽度,不然会在屏幕的最右边去了。 7、边框,border,注意:设置相关的width和高度,另外最好设置一个背景图片或者颜色,最好设置一个内边距padding,因为边框和控件最好有距离。 8、设置这个边框,float:right 9、设置body的背景图片:background-image:(url:图片链接)。

三、CSS样式重点:

1、盒子模型 盒子模型顾名思义就是像盒子,它包括,外边距(margin),内边距(padding),边框(border),详细请参加firebug中的盒子模型的图例。

2、clear:both 清除浮动,由于float浮动会造成所有的元素都会在一行,因此清除的话可能会达到换行的效果。

3、opacity: 0.2(表示20%的透明度); 透明度,一般设置在层里。

4、z-index: 数字。数字越大,显示在越上层,可以表示负数。

5、border-top-style: 上边框的样式 border-top-width: 上边距的粗细 border-top-color: 上边框的颜色 border-top: 上边框

6、border: 10px inset red; 综合设置,相关的样式 边框粗细,样式,颜色,注意只能综合设置,不能设置单一。

7、boder-style: dashed 虚线 dotted 点线 solid 实线 none 不显示

8、background-position: 2px 0px; 图片定位,注意两个参数表示为 x 和 y。注意设置这个块元素的宽和高。

9、font: 36px 微软雅黑; 设置字体的复合属性,大小和字体

10、负数之美:margin 是可以使用负数,也就是相反的反向,padding 不可以使用负数。

11、清除内边距、清除外边距 例如 body{ margin:0px;padding 0px; } (基本上都是工作上的网站用法)

12、overflow: hidden; 当界面溢出之后的效果,hidden为隐藏,还有一种常用就是scroll

13、margin: 0 auto 水平居中,但是要注意:因为设置的是外边距,因此最好是设置div里面的块元素。

14、background-repeat:背景是否平铺。repeat 平铺,no-repeat 不平铺,repeat-x 横轴平铺,repeat-y 纵轴平铺

15、绝对定位、相对定位: position:relative 相对定位,距离最近的元素标签的距离 position:absolute 绝对定位,距离body的距离

相关距离设置:top / right / bottom / left

16、div透明度: background-color:rgba(0,0,0,0.4);

四、JS重点:

1、JS,JS是基于Web的网页端的脚本语言。 HTML是名词 ,CSS 是形容词,JS 是动词。

2、function 函数名(){ } 定义一个函数,函数名() 调用了一个函数

3、alert(“内容”); 警告框。

4、document.write("内容");写入一个内容,可以加入HTML代码

5、confirm(“内容”); 是确认框

6、window.close 关闭窗口 IE

7、关键字:又叫保留字,特指语言中内部所使用单词,这些单词禁止用来做 变量、常量或者函数的名字。

8、标识符:是告诉你 变量、常量或者函数的名字只能 字母、下划线、$符号开头。

9、转义符:可以经常用\ 转义某一个特殊符号 如" 能让脚本正常运行。

10、变量:可以改变的量,如数值、字符串、浮点、布尔 变量用var申明。例如var a = 10;这就是告诉你,一个名字叫a的变量赋了一个初始值为10;注意10为整型。

11、常量:不能改变的量,常量用const申明,例如:const b = 10;这就是告诉你,一个名字叫b的常量值为10,并且这个值不能改变,除非你销毁它。

12、document.writeln("<pre>") 支持转义字符,如\n换行等,注意:必须在<pre> </pre> 之间写转义。

13、undenfied 是指找不到某一个对象的属性或者某一个变量,没有赋初始值,如:var abc; alert( document.alert );

14、null 是指空值,特指找到了属性,但是找不到或者获取不到值。所以为空。

15、全局变量和局部变量,一般发生在作用域之内,全局变量一般是在函数的之外,局部的是在函数的里面的。全局变量可以作用于多个函数,但是局部只能作用于自己的函数里,不能去管别人。

16、+ 在通常的情况下是表示字符串的连接符,例如:"a"+"b" 输出的就是ab,

17、+ 在字符串和任何的类型都是连接符。

18、+ 在整型之间的是做加法运算符。

19、其他的 - * / 都是运算符,但是注意:如果强制让一个字符串运算的话,结果是NaN,就是特指未知的值。

20、parseInt() 将其他类型转化为整型,注意转化整型是从左往右,取出全部的整型,当遇到第一个非整型的值时结束。如:“101a1” 取出的是 101

21、parseFloat() 将其他类型转化为浮点型。

22、运算符分类 1、算术运算符:+ - * / 2、比较运算符:> < == >= <= 3、赋值运算符:a = b 4、逻辑运算符:&&(同时满足),||(或,满足一个),!(非,取反值)。 5、条件运算符:条件 ?条件成立 : 条件不成立

1、注意:比较运算符返回,布尔类型也就是true或者false。 2、注意:&&(与)运算符,如果两个数比较的话,返回后者,注意:同时满足才会满足。 3、注意:或运算符,如果两个数比较的话,或运算符的特点就是满足一个就是满足,后面的相当于不需要看,所以只要前面满足,返回就是前面。

23、条件判断 1、第一种形式 if(条件){

}else{

}

2、第二种形式 if(条件){

}else if(条件){

}else{

}

3、第三种形式 if(条件){ if(条件){

}else{

} }else{

}

                                 以后的你会感谢现在努力的自己,一起加油
共有 人打赏支持
粉丝 0
博文 7
码字总数 11496
×
莫洛的洋葱
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: