课程链接HTML
课程链接CSS
课程链接JS
课程链接JQuery
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样式-beautiful - header、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
- …此技术待续中，菜鸡。。。
JQuery表单验证实战
- HTML基本框架结构与样式
- 。。。