课程链接HTML
课程链接CSS
课程链接JS
课程链接JQuery
font-awesome使用
图标使用与效果:
HTML
HTML教程文档
一张网页一个html:内部是页面body:放可见的显示元素(head存其他)head:为网页储存必要信息,不会显示,为了给浏览器-搜索引擎使用。head-title:显示页面之上的页面标志标签:搜索引擎把title作为结果。(-style,-meta等)body-h1:概括整个页面的主题:只有一个。(h2-h6可多个);h标签可以嵌套子元素子标签。p:段落标签:
(1)内部(一个或多个)换行会自动转为一个标签;
(2)多个p标签,多个段落;
(3)p标签内部也可以分段:p嵌套;——这样层级可以通过css添加一些样式。div:division-区域标签(轻薄的盒子)—唯一作用:用于容纳其他标签。a:anchor-(锚)链接标签—href跳转页面、样式、target:默认当前页打开/blank:新的标签页打开。
——tips:一个标签可以有多个属性;属性是什么:<人 姓名=“王花花” 年龄=“18”></人>img:图像标签:-src:地址来源(网页链接/本地地址)-alt属性:图片主题。
——tips:只有开始标签,没有结束标签:因为其没有子元素标签(所以不需要结束标签这个“盖子”)
——tips:多个图片文件时,可以新建一个目录,然后src:“img(目录下)/xxx.gif”。table:表格标签
(1)可以嵌套:tr(属性内部嵌套th、td)、td(指定一个单元格内容)、th(指定属性(列头)名称);thead(表头)、tbody (表身)
(2)css:去添加table样式-beautifulheader、footer
(1)body-header:存放一些标题相关的内容,概括整个页面的一些内容,内部嵌套:h1、smaller等标签
(2)body-footer: 与header呼应:填写不常用,重要的信息;header-footer中间就可以写正文了。link、script:可以在head/body内部;都不能直接在浏览器里显示,用于指定样式。
(1)link:-href:加载css样式表
(link多放在head里,也可以放到body里)
——tips:link没有结束标签,只有开始标签。
(2)script:-alert:弹出框;本身不会显示,但是会被浏览器执行。-src:加载js文件-加载js样式
(script多放在body里)button:文字:显示在按钮上-一般不单独存在,存在于一张表单form内部嵌套,作为表单的提交者:提交当前表单页面-button:触发表单提交。abbr:缩写标签,鼠标放上去全称出现;span标签结合-用来组合文档中的行内元素。
——tips:如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
((1) 可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
(2)可以对同一个 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。)code与pre引用标签:网页中镶嵌代码
(1)code:引用:镶嵌到文字内部;
(2)pre:引用:打断空格缩进、换行
CSS Cascading Style Sheet层叠样式表
——用于给网页定义样式:定义样式,重复指定样式。
教程文档
css语法:css引用方式
(1)内嵌式(内联式)
< style >
(可见元素)x {
…(a: b)
}
< /style >
(2)链接式:link链接-href链接文件位置,-rel(关系):样式表;———>css文件中:定义/@import url(*.css)
(3)直接在标签内定义样式:优先级最高,但最不灵活。
元素(标签)选择器:选择器分组:统一定义,还可以对某个单独又加定义。
类选择器:class—现实生活中的“标签”(用于给类属性)
定义语法:
.xxx {
}
ID选择器:id(用于定位,id的元素的唯一性)—给特殊元素一个id=“xxx”,
定义语法:
#xxx {
}
属性选择器:对某属性进行设置
css中:[xxx=“…”]{
a:b;
}
后代选择器(语法):.a/* 空格 */ .b .c{} //从a中找到b,从b中找到c,对c加样式。
——tips:
(1)颜色与透明度:rgba()
(2) *{} //选中所有元素
相邻(兄弟)选择器:
(1).a + div{} //与a相邻的一个
(2).a ~ div{} //与a并列的通用
伪类选择器:
(1)a:link(表示没有选择过的链接){}
(2)a:visited{} :已经访问过的网站
——tips:可以通过改变网址后面的参数(自己加的,不会影响),从而对一个网站多次进行这样的效果设置。
(3)button/a:hover{}:鼠标放上/按下去激活瞬间的样式设置。
(4)input:focus{}: 鼠标在input的效果显示
伪元素选择器:
(1)p:first-letter{}
(2)help(< a class=“help”>):after{ content: “[?]”;}
——tips:after:可以操作p(段落元素)中内容。
(3)div p(div中所有的p):last-child、nth-child(n){}:第几个
选择器权重:覆盖能力
元素选择器 < (类/属性/伪类)选择器 < style属性(内联)
字体属性:
(1)font-family(字体样式):“微软雅黑”, “Microsoft Yahei”;
(2)font-weight(字体粗细): 100-900;(默认:normal)
(3)font-size:13px/200%/inherit(元素多大就是多大);
文字属性:
(1)text-align(每行对齐):right/left/center/justify(两端对齐);
(2)line-height:1.3(比例)/15px(像素);
(3)text-decoration:underline/overline/line-through(划去)
display属性:display 属性规定元素应该生成的框的类型。none则不显示;inline默认。
框:div{。。。(结构如下)}
(1)width和height属性控制content
(2)padding属性
(3)border边框属性
(4)margin属性
解释:~~
HTML&CSS开发实战
Bootstrap实战
JQuery
Vue.js
JS—进行编程,把HTML,css,js串起来,进行实战。
前置工作:js写出来的是纯文本,需要编译器:浏览器(chrome/火狐 yes)书写代码:html文件内部:script块中直接可以写代码了or .js文件中编写(1)创建:index.html, main.js
(2)编写js语言:console.log(…) //打印数据类型var变量:数字,bool,字符串,数组,object对象({键值对,。。。})变量:变量是个框,啥都可以装——var x=y;控制流:if-else{},switch(day){case 1: …; break; … }运算符:+,%,++,–,==(会类型转换) / ===(不会类型转换)(判断是否相等),+= -= /= *=, && ||循环for(; ; )、while()函数 :
function xxx(){… return }
出发: “ ;(function(){ … })(); ”闭包(~类):xxx = function xxx(){… return {} }
xxx.getxx();三个原生函数—页面弹出停止,等待用户反馈:alert(“弹出信息”);confirm(“确定:y or n”);prompt(“提交填写的表单信息栏”)系统计时器:
(1) 设置时长限制:才执行此函数。window.setTimeout(function(){…}, x(秒))
(2)设置时间:次数限制,以秒为单元。window.setInterval(fun…, x(秒))
(3)清除时间计时器:var timer = (2)的计时器函数,在计时器函数内部加入清除计时器函数:if(count > 3) clearInterval(timer)
JQuery
——js库,把js底层进行封装;DOM使得js与html实现交互。
安装JQuery:代码写到自己的代码之前。:html中的body中script-scr=“官网复制的链接地址”;然后自己的script-src="引入的"跟在这个首script代码之后。
(js文件中)选择器:
$(’ ‘//常用的css选择器,都可填入:元素’ div’、‘div:first’ , ID’#a’, 类’.b’, 属性’input[type=“number”]’ ).css( ‘background’ , ‘brown’)
——格式: $().css()
(js中)过滤器:
(1)KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲child1').parent…(’.child’).filter(’.xxx’).css(‘background’,‘red’) ;
操作样式:
(1)$(’.a’).css({color:‘red’, border:‘15px solid gray’});
(2)(js文件中)显示与隐藏:var a = $(’.a’);
a.hide();
a.show();
a.fadeOut();
a.fadeOut(1000);
a.slideUp(1000);
a.slideDown(1000);
——小例子—广告牌:
var board = $(’#board’);
function toggle(){
if(board.hasClass(‘active’)){
board.removeClass(‘active’);
}else{
board.addClass(‘active’);
} //在html的style里,定义类board和board.active的样式。
}
setInterval(toggle, 200); //function-200毫秒实现一次
操作DOM:
获取-换取元素内部的文字:
var text = $(’#a’).text();
$(’#a’).text(‘La’);
var html = $(’#a’).html();
// $(’#a’).html(‘La’);
(js文件中)事件:
var card = $(’#card’);
var cardTrigger = $(’#card-trigger’);
cardTrigger.on(‘click’, function(){…});
card.on(‘mouseleave’, function(){card.removeClass(‘active’); });
操作元素属性:
$(’#a’).attr(‘href’, ‘…’); //修改了元素的属性(显性)
$(’#a’).prop(‘href’, ‘…’); //修改了元素的属性(隐形)
var t = $(’#a’).prop(‘text’); //获取属性值
$(’#a’).removeAttr(‘asdf’); //去除属性表单及输入:(一些事件及监听)
1-input:
(1)var nn = $ (’#nickname’).val() / val(‘设置值’);
——tips:input只能用val来获取(也可以设置值),不能用html/text来获取
(2)触发focus事件:$ (’#nickname’).focus();
(3)监听当focus事件发生时function作用:$(’#nickname’).focus(function(){…});
2-form:-id=’‘login’’;
(1)实现某个事件发生时(点击login-trigger时),自动提交(处理)。
(js文件中) $(’#login-trigger’).click(function(){ $(’#login’).submit();}); //还可以在提交之前验证是否合法(灵活性)。
9. Ajax技术
——用户名片的小卡片显现;
——指哪打哪,节省资源:关键字一部分就显示出来完整信息。
安装:node、npm install http-server --global…此技术待续中,菜鸡。。。