Web前端知识点总结
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
HTML知识点
一、功能
用来制作静态网页,网页中的全部内容都是通过Html语言展现出来。
使用场合:开发静态网页。
二、思想
一切功能都由标签实现,标签具有四要素。
三、常用标签
开始;2>标签添加class属性与样式关联。
5、属性选择器
标签名[属性名=属性值],根据标签关键字和属性值自动关联。
6、包含选择器
1>子样式名中间加>或空格分隔 (>直接包含);
2>看最后一个子样式是什么选择器就如何关联标签。
7、多个样式名同一样式体
1>样式名中间加逗号分隔;
2>根据样式类型决定如何与标签关联。
8、多条件同时成立选择器
1>多个子样式名紧挨着
2>一个标签必须同时具备这多个条件才可以被该样式修饰
9、各选择器使用场合
1)如果想根据标签名用一个样式修饰所有同名标签时,用标签选择器;
2)如果一个样式只想修饰唯一的一个标签时,用id选择器;
3)如果一个样式想修饰多个任意标签时,用类选择器;
4)尽量使用包含选择器。
四、元素定位
1、盒子模型
通过设置标签的内外边距从而改变元素的位置,没有脱离标准文档流。
相关属性:
marging-top:外上边距
margin-right:外右边距
margin-bottom:外下边距
margin-left:外左边距
margin:同时设置上右下左四个外边距 (顺时针)
padding-top:内上边距
padding-right:内右边距
padding- bottom:内下边距
padding-left:内左边距
padding:同时设置上右下左四个内边距
border-top:设置上边线的粗细,颜色,线型
border-right:设置右边线的粗细,颜色,线型
border-bottom:设置下边线的粗细,颜色,线型
border- left:设置左边线的粗细,颜色,线型
border:同时设置四个边线的粗细,颜色,线型
border-width:只设置4个边线的宽度(粗细)
border-color:兄弟元素都设置浮动后成为一行,脱离标准文档流。
相关属性
float : 设置浮动定位
clear: 清除浮动定位的影响
5、各定位方式使用场合
1)靠左或靠右,兄弟标签一列变一行,文字环绕——浮动定位。
2)移动位移比较小,用盒子模型。
3)移动位移比较大,父容器相对定位,子元素绝对定位。
五、添加独立css文件3步骤
1、创建子文件夹和css文件
2、在html页面用标签导入独立css文件
3、定义样式并修饰各html标签
六、静态网页开发思想
1、对网页元素通用属性进行设置。
2、分析页面的组成,整个网页布局划分为多个矩形区域,在矩形区域内部又可以划分子矩形区域,每个矩形区域都用
3、用html标签把实际元素放在
七、css常用属性
六、DOM对象的方法
1、原理
Dom对象可以获取html文档的每个标签,以及该标签的属性和内容,并可以对这些标签,属性和内容进行修改从而实现动态的改变网页内容和格式。
2、DOM对象方法总结
七、正则表达式
1、正则表达式使用场合
客户端表单数据校验
2、创建正则表达式的对象
1> var regex = new RegExp("^.{6}$");
2> var pwdRegex = /^.{6}$/;
RegExp类的方法:test()匹配一个任意字符,除了\n
\.:表示一个小数点,转义字符
\s:匹配任何一个空白字符(空格,制表位)
\S:匹配任何一个非空白字符(空格,制表位)
(2)定位符:规定字符出现的位置
^:字符串必须以^后面的字符开始,开始标记,此时^不能用[]包围$:字符串必须以$前面的字符结束,结束标记。
(3)限定字符出现次数:
{数1,数2}:限定前方字符出现次数>= 数1 并且次数<=数2;
{数1}:前方字符出现次数=数1
{数1,}:前方字符出现次数>=数1
+:限定前方字符出现次数>=1等同于{1,}
*:限定前方字符出现次数>=0
:限定前方字符出现次数0次或1次
|:或者的关系例如: /(^xue&)|(^学$)|(^薛$)/
():构成一个整体,括号内的内容作为一个子表达式来处理。
例如:
[abc]:表示a、b、c其中的一个
(abc):表示子串"abc"
/^abc$/:0个或1个c
/^(abc)$/:0个或1个"abc"
var unameRegex= /(^abc$)|(^liming$)|(^zxy$)/;
* ( ) $ /\ [ ] ^ {}:
例如:\. \*
说明:在[]中/\ []这4个字符必须写转义字符才能表达本身
其它字符写不写转义都行能表达本身
在[]外必须用转义字符
(5)附加参数:var regex = /^\d{4}$/gi
i:加i匹配时忽略大小写,没有i就严格区分大小写。
g:主要在从字符串中查找匹配的子串时起作用,加g表示查找出所有的匹配子串。
例如:
absdfwabdfwab34324ab ;var regex = /^ab$/ 只找到1个
absdfwabdfwab34324ab ; var regex = /^ab$/g 只找到4个
4、表单数据验证7步骤
(1)获取各表单控件对象
(2)获取各控件的value值
(3)根据id获取显示错误信息的span标签对象
(4)定义正则表达式对象
(5)用if选择结构对数据进行校验.
一个控件对应一个if结构:
如果对一个控件有多个校验用if多分支
如果对一个控件只有1个校验用if单分支
每个分支的条件:
正则表达式.test("控件value值")
我们对其取反运算
如果字符串符合要求则取反后返回假,不符合取反后返回真
每个分支的语句: