WEB课程总结
WEB课程要结束了 感慨万千 之前一直很好奇那些网页排列是怎么来的 现在可算是明白了
WEB细分的话 能分为三个类 HTML标签、CSS样式和JavaScript。
记得老师说过一句话 HTML决定网页的结构和内容,相当于人的身体,css决定网页呈现给用户的样式,相当于给人穿衣打扮,而js就是实现业务逻辑和页面控制,相当于人做的各种动作。
那先说说HTML吧
Html是超文本标记语言,是用来描述web文档的一种标记语言。使用标签作为页面的开始和结束部分:
1、html通常被称为静态网页;
2、HTML是带html或Htm扩展名的文件;
3、HTML的一些标签代码规则将内容呈现在浏览器中;
4、HTML可以使用记事本创建,并以.html或.htm为扩展名保存。
书写方式呢也很简单 是由尖括号包围的关键词,比如 <html>,HTML 标签通常是成对出现的,比如 <b> 和 </b>,标签对中的第一个标签是开始标签,第二个标签是结束标签。
CSS是Cascading Style Sheet的缩写,层叠样式表,是一种用来表现文件样式的计算机语言。
1.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式。
3.CSS拥有对网页对象和模型样式编辑的能力。
4.在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。
书写方式有很多种 常见的有id选择器 class选择器 分组选择器。
id选择器是要写一个#号,后跟该元素的id 如:id=“para1”就可以写成#para1{....}大括号里写需要的样式。
class选择器要写一个.字符,后跟该元素的class 如:class=“para2”对应的就是.para2{.....}大括号里写需要的样式。
分组选择器就要简单的很多 它可以直接选取具有相同样式定义的标签 如<html>标签 就可以直接写成html{.....}大括号里写需要的样式。如果想选取该标签中的子标签 只需在中间写一个空格 再加上子标签 如html body{......}大括号里写需要的样式。
如需对多个标签进行相同的控制 可以用,隔开 如:html,body,.para2,#para1{.....}大括号里写需要的样式。
常用的css样式有:
color 文字颜色
font-size 文字大小
background-color 背景颜色
background-image:url(); 背景图片括号里是图片的位置
background-repeat:no-repeat; 图片不平铺
border 边框
margin 外边距
padding 内边距
text-align 文本左右对齐
line-height 行高
width 宽
height 高
float 浮动
overflow: 超出部分
position: 位置
display: 显示
opacity 透明度
js 的全称是javascript ,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
1、是一种解释性脚本语言(代码不进行预编译)。
2、主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
3、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
4、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。
来说说jQuery:
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
下面将用jQuery来着重讲一下添加和删除:
在jQuery中 添加有四种方式
1.append() - 在被选元素的结尾插入内容
2.prepend() - 在被选元素的开头插入内容
3.after() - 在被选元素之后插入内容
4.before() - 在被选元素之前插入内容
来看看代码:
(结尾插入):以P标签为例$("p").append("<p></p>");这样就成功的在P标签的里面添加了一对<p>标签。注意:如果P标签里面还有别的子类 <p>就会添加在最后面.
(开头插入):以P标签为例$("p").prepend("<p></p>");这样就成功的在P标签的里面添加了一对<p>标签。注意:如果P标签里面还有别的子类 <p>就会添加在最前面.
(被选元素之后插入):以P标签为例$("p").after("<p></p>");这样就成功的在P标签的里面添加了一对<p>标签。注意:这样的意思就是在p标签的后面插入一个新的<p>标签是p标签的兄弟.
(被选元素之前插入):以P标签为例$("p").before("<p></p>");这样就成功的在P标签的里面添加了一对<p>标签。注意:这样的意思就是在p标签的前面插入一个新的<p>标签是p标签的兄弟.
在jQuery中 添加有两种方式
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
来看看代码:
(删除被选元素及其子元素):以P标签为例$("p").remove(".para2");这样就成功的将P标签里“class叫做para2”包括自身的所有内容给删除了。注意:是自身和自身里面所有的子元素。
(被选元素中删除子元素):以P标签为例$("p").empty(".para2");这样就成功的将P标签里“class叫做para2”的所有子元素给删除了。注意:只是所有的子元素 自身不会删除。
0条评论
点击登录参与评论