中山制作网站的公司,济南网站制作软件,网站建设功能模块价格,字体设计软件 免费前言
#x1f31f;#x1f31f;本期讲解关于HTMLCSSJavaScript的基础知识#xff0c;小编带领大家简单过一遍~~~
#x1f308;感兴趣的小伙伴看一看小编主页#xff1a;GGBondlctrl-CSDN博客
#x1f525; 你的点赞就是小编不断更新的最大动力 …
前言
本期讲解关于HTMLCSSJavaScript的基础知识小编带领大家简单过一遍~~~
感兴趣的小伙伴看一看小编主页GGBondlctrl-CSDN博客 你的点赞就是小编不断更新的最大动力
那么废话不多说直接开整吧~~ 目录
1.HTML
1.1什么是HTML
1.2HTML的基本结构
1.3HTML的快速入门
1.4HTML常见的标签
1.段落标签
2.图片标签
3.超链接标签
4.input标签
5.⽆语义标签: divspan
2.CSS
2.1什么是CSS
2.2CSS基础结构
2.3CSS选择器
1.标签选择器
2.class选择器
3.id选择器
4.通配符选择器
5.复合选择器
2.4常用的CSS
1.color
2.font-size
3.外边距与内边距
3.JavaScript
3.1什么是JavaScript
3.2JavaScript的基础语法
3.3使用JQuery操作JavaScript
1.引入对应的库
2.jQuery的基础语法知识
4.总结 1.HTML
1.1什么是HTML
HTML(Hyper Text Markup Language), 超⽂本标记语⾔.超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等. 标记语⾔: 由标签构成的语⾔注意在后面经常会使用到这个标签 例如以下
h1我是⼀级标题/h1
h2我是⼆级标题/h2
h3我是三级标题/h3
这里的h1,h2就是标签
1.2HTML的基本结构
小编这里使用的就是idea进行的前端HTML的编写一般来说这里的结构就是如下所示的
htmlheadtitle第⼀个⻚⾯/title/headbodyhello world/body
/html 解释 • html 标签是整个 html ⽂件的根标签(最顶层标签) • head 标签中写⻚⾯的属性. • body 标签中写的是⻚⾯上显⽰的内容 • title 标签中写的是⻚⾯的标题 这里的title就是标签如下所示 这个就是页面的标题所以这里一般可以自己进行规定名称
1.3HTML的快速入门
这里的HTML的基本结构就是如下所示的
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
body这是一个页面内容
/body
/html
解释 • !DOCTYPE html 称为 DTD (⽂档类型定义), 描述当前的⽂件是⼀个 HTML5 的⽂件. • html langen 其中 lang 属性表⽰当前⻚⾯是⼀个 英语⻚⾯. 这⾥暂时不⽤管. (有些 浏览器会根据此处的声明提⽰是否进⾏⾃动翻译). • meta charsetUTF-8 描述⻚⾯的字符编码⽅式. 没有这⼀⾏可能会导致中⽂乱码. 小编认为我们所后端开发的不用过于深究这里的问题不用“钻牛角尖”
这里在浏览器上进行运行观察如下所示 当然这里的页面的标签小编这里是截取不到了
1.4HTML常见的标签
1.段落标签
在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签
所以专门的段落标签就是如下
p这是⼀个段落/p
p这是⼀个段落/p
注意 • p 标签描述的段落, 前⾯没有缩进. (未来 CSS 会学) • ⾃动根据浏览器宽度来决定排版. • html 内容⾸尾处的换⾏, 空格均⽆效. • 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格. • html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格 2.图片标签
img srcrose.jpg
注意这里的图片的来源就是这个程序的文件的目录下这是直接路径
3.超链接标签
• href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯. • target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开
a hrefhttp://www.baidu.com百度/a
4.input标签
input typeradio namesex男
input typeradio namesex checkedchecked⼥
注意 各种输⼊控件, 单⾏⽂本框, 按钮, 单选框, 复选框. • type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等. • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀. • value: input 中的默认值. • checked: 默认被选中. (⽤于单选按钮和多选按钮) 5.⽆语义标签: divspan
divspan咬⼈猫/span
/div
divspan兔总裁/span
/div
divspan阿叶君/span
/div
注意 div 标签, division 的缩写, 含义是 分割 span 标签, 含义是跨度 就是两个盒⼦. ⽤于⽹⻚布局• div 是独占⼀⾏的, 是⼀个⼤盒⼦. • span 不独占⼀⾏, 是⼀个⼩盒⼦ 以上就是比较基础的HTML的理解由于小编是后端开发为目的的一般来说就是看懂前端的代码就行所以总结的不是很到位所以对这部分感兴趣的uu可以扩展一下
2.CSS
2.1什么是CSS
CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.
CSS前 - CSS修饰后 2.2CSS基础结构
选择器 {⼀条/N条声明} • 选择器决定针对谁修改 (找谁) • 声明决定修改啥. (⼲啥) • 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值.
代码如下
stylep {/* 设置字体颜⾊ */color: red;/* 设置字体⼤⼩ */font-size: 30px;}
/style
phello/p
注意: • CSS 要写到 style 标签中(后⾯还会介绍其他写法) • style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内 2.3CSS选择器
CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性. 就好⽐ SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位⾏动.CSS选择器主要分以下⼏种: 1. 标签选择器 2. class选择器 3. id选择器4. 复合选择器 5. 通配符选择器
代码如下 div classfont32我是⼀个div, class为font32/div
div classfont32我是⼀个div, class为font32/div
diva href#我是⼀个div/a/div
ulliaaa/lilibbb/lilia href#ccc/a/li
/ul
olli1111/lili2222/lili3333/li
/ol
button idsubmit提交/button
其中的标签的选择器就是如下所示的
1.标签选择器
a {color: red;
}
2.class选择器
.font32 {font-size: 32px;
}
注意这里是有一个点的
⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让 代码更好复⽤) 3.id选择器
#submit {color: red;
}
注意id 是唯⼀的, 不能被多个标签使⽤ (是和 类选择器 最⼤的区别)
4.通配符选择器
* {color: red;
}
注意:置⻚⾯所有元素, 颜⾊为红⾊
5.复合选择器
ul li a {color: blue;
}
注意这里的的标签是有先后顺序的不能调换顺序
2.4常用的CSS
1.color
.text1{color: red;
}
颜⾊有如下⼏种表达⽅式: • 英⽂单词,如red,blue • rgb代码的颜⾊ 如rgb(255,0,0) • ⼗六进制的颜⾊ 如#ff00ff
2.font-size
.text1{font-size: 32px;
}
设置的是这个字体的大小
3.外边距与内边距 padding: 内边距, 设置内容和边框之间的距离.内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离
margin外边距, 设置元素和元素之间的距离.
图示如下 内外边距的概念是相对的具体是取决于参考的物体
stylespan{border: red double 2px;margin-left: 20px;margin-right: 20px;}/style
这里只列举了margin这个外边距的概念意思就是左右边距是20像素
3.JavaScript
3.1什么是JavaScript
JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名但是它也被⽤到了很多⾮浏览器环境中
这里的语言主要是用作交互的操作他与HTML和CSS的关系如下所示 解释具体 • HTML: ⽹⻚的结构(⻣) • CSS: ⽹⻚的表现(⽪) • JavaScript: ⽹⻚的⾏为(魂) 具体的代码格式如下
bodyscriptalert(Hello JavaScript!)/script
/body 此时进行输出就是如下所示 可以看到此时的我们就可以进行点击交互了
3.2JavaScript的基础语法 创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式 var 早期JS中声明变量的关键字, 作⽤域在该语句的函数内 var name zhangsan;let ES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块内let name zhangsan;const 声明常量的声明后不能修改 const name zhangsan; 注意 JavaScript 是⼀⻔动态弱类型语⾔变量可以存放不同类型的值(动态),这里var等可以是任何的类型包括数组也是一样的所以这就比Java简单很多 代码如下 var name zhangsan;
var age 20; 可以看到这里的var可以是字符串也可以是整型 所以直接计入函数的学习关于JavaScript的函数方法的写法具体是如下所示的 function hello() {console.log(hello);
}
// 如果不调⽤函数, 则没有执⾏打印语句
hello(); 这是第一种的写法就是function加上方法的名字然后具体的操作调用就是直接方法名字即可 var add function() {var sum 0;for (var i 0; i arguments.length; i) {sum arguments[i];}return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); 这就是第二种写法将add变量作为sum的返回的值然后再进行调用操作 对象的创建和调用 具体的代码如下所示 var student {name: 蔡徐坤,height: 175,weight: 170,sayHello: function() {console.log(hello);}
};
// 1. 使⽤ . 成员访问运算符来访问属性 . 可以理解成 的
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student[height]);
// 3. 调⽤⽅法, 别忘记加上 ()
student.sayHello(); 这就是主要的对象的创建的方式还用一种就是通过new来创建对象但是小编不推荐这种写法那么通过new对象来进行操作的方式如下 var student new Object(); // 和创建数组类似
student.name 蔡徐坤;
student.height 175;
student[weight] 170;
student.sayHello function () {console.log(hello);
}
console.log(student.name);
console.log(student[weight]);
student.sayHello(); 3.3使用JQuery操作JavaScript 1.引入对应的库 参考地址: https://releases.jquery.com/ 点击进入之后点击任何版本的都是没有问题的但是在进入每个小版本的时候建议使用minified这个 然后进行复制
补充 uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢) minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐) slim: 精简瘦⾝版, 没有Ajax和⼀些特效 slim minified : slim 的压缩版 那么最后就可以粘贴到我们代码中了代码如下
body
script srcjquery.js/script/body 但是为啥小编这里是这么短因为小编将这个保存到本地了然后直接放在项目的文件夹里了如下所示 这样的好处就是放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险
那么操作的方式如下
先点击复制https的网址入口然后进入这个页面 可以看到此时就是内部的源码然后再次右击鼠标进行另存为到我们写的代码的目录下 可以发现此时我们在代码中就是这个jQuery的文件了那么我们就可以使用这个jQuery来操作JavaScript了
2.jQuery的基础语法知识
jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作
$(selector).action()
注意 $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素. • Selector 选择器, ⽤来查询和查找 HTML 元素 • action 操作, 执⾏对元素的操作 那么具体的实例操作就是如下
button typebutton点我消失/button
script srchttps://code.jquery.com/jquery-3.7.1.min.js/script
script$(document).ready(function(){$(button).click(function(){$(this).hide();});});/script
这就是一个点击交互然后按键消失的操作
解释等文件加载完毕后点击了这个按钮就会触发一个方法这个方发就会导致消失的操作
这里的事件就是点击操作的事件但是还有其他的事件如下 ⽂档就绪事件(完成加载) $(document).ready(function) 点击事件 $(selector).click(function) 双击事件 $(selector).dblclick(function) 元素的值发⽣改变 $(selector).change(function) ⿏标悬停事件 $(selector).mouseover(function) 当然还有这个如何获取这个元素的内容
text() 设置或返回所选元素的⽂本内容 html() 设置或返回所选元素的内容包括 HTML 标签 val() 设置或返回表单字段的值
代码如下所示
body
script srcjquery.js /script
input typebutton value点击消失按钮div idtestspan你好/span/div
input typetext valuehello
script$(document).ready(function () {var html $(#test).html();console.log(html内容为:html);var text $(#test).text();console.log(⽂本内容为:text);var inputVal $(input).val();console.log(inputVal);});
/script
/body那么此时的输出就是如下所示的 此时可以看到当我们进入浏览器的控制台的时候可以发现html内容包含了标签而文本内容就只有文本不包含其他的标签
当然这里还有其他的操作例如添加删除以及CSS属性的操作小编就不再过多的演示了这里还有一个猜数字的前端小游戏小编将代码放在下面的gitee里了
4.总结
小编本期主要讲解了关于前端三剑客的基础认知HTMLCSSJavaScript的基础知识但是讲解的不是很仔细需要扩展的小伙伴可以额外去学习学习哦
猜数字小游戏代码在test6前端基础知识: 前端知识了解
~~~~最后希望与诸君共勉共同进步 以上就是本期内容了 感兴趣的话就关注小编吧。 期待你的关注~~~
