2021-07-21 11:15

总结

Lin丶

WEB前端

(1208)

(0)

收藏

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条评论

点击登录参与评论