什么是超文本:文字,图片,动画,视频,动画
目前是HTML5和CSS3;
W3C联盟制定的标准:
结构化标准:HTML
行为标准:JavaScript
表现标准:CSS
IntelliJ
自闭和标签:单个标签
闭合标签:成对出现
<!-- 注释,以下为默认生成模板 -->
<!DOCTYPE html>
<html lang = "EN">
<head>
<meta charset = "UTF-8">
<title>标题</title>
<head>
<body>
</body>
</html>
DOCTYPE标签:规定规范;
html标签:总标签
head标签:头部
body标签:网页主体
title:just title
meta标签:描述性的标签,用来描述信息,搜索引擎优化SEO
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2><!-- 段落标签 -->
<p>第一段</p>
<p>第二段</p>
<p>第三段</p><!-- 换行标签(自闭和标签) -->
There must be something!<br/>Then they're gone!<!-- 水平线标签 -->
<hr/><!-- 粗体标签 -->
<b>粗体标签1</b>
<i>斜体标签1</i>
<strong>粗体标签2</strong>
<em>斜体标签2</em>
<br/>
<!-- 特殊符号: &开头自动填充 -->
空格: 这么多空格!<br/>
大于号:><br/>
小于号:<<br/>
版权符号:©<br/>
图像标签:
绝对路径:从盘符开始
相对路径:../
Note:src和alt是必填的!<img src = "path" alt = "加载失败会返回此段" title ="悬停文字" width = "300" height = "300">
链接标签:
href为必填!
target ="_blank" => 新窗口打开
target ="_self" => 默认,在当前窗口打开<a href = "https://www.google.com" target ="_blank">猛击这里(也可嵌套图片标签)</a>
锚链接:
eg:
<a id = "top">top<a> (在body顶部)
<p>...内容...</p>
<a href = "#top">回到顶部</a>功能性链接:
<a href = "mailto: 邮箱地址">点击发送邮箱</a>
列表标签:
无序:
<ul>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>C++</li>
</ul>
有序(ordered list -> ol):
<ol>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>C++</li>
</ol>自定义:
<dl>
<dt>语言</dt>
<dd>Java</dd>
<dd>C</dd>
<dd>C++</dd>
<dd>Python</dd>
<dd>PHP</dd>
</dl>表格标签:
<table border = "2px"><!-- border:加边框 -->
<tr>
<td colspan = "3">1.1</td><!-- colspan: 跨列-->
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
</table>
视频
<video src="../resources/video/soemthing.mp4" controls autoplay></video>音频
<audio src="../something.mp3" controls autoplay></audio>autoplay:自动播放属性
controls:控制条显示属性
页面的结构:
header:头部
footer:脚部
section:主体块
article:文章
aside:边块
nav:导航
<iframe src = "https://www.baidu.com" name = "id" width = "300px" height = "200px"></iframe>
<a href = "https://www.baidu.com" target = "id">Click to transfer!</a>
Note:可用<a>标签中的target属性标明iframe的name标识,即可在iframe下生成打开<a>里的链接。
<!--
action:为表单提交的位置
method:分post和get,get不安全,会暴露信息在url中但是高效,post安全而且可以传输大文件;
hidden:隐藏域属性;用于隐藏传输默认值
disabled:禁用域属性;
readonly:只读属性
placeholder:浅色提示文字”请输入用户名“
required:非空判断
pattern:正则表达式
--><form method = "post" action = result>表单起始标签
用户名输入:<input type = "text" name = "user" maxlength = "8" value = "默认初始值" readonly>
密码输入:<input type = "password" name = "password">
性别:<input type = "radio" value = "boy" name = "gender" checked disabled>男<!-- checked默认选中值-->
<input type = "radio" value = "boy" name = "gender">女;<!-- name一样就是一个组--><!-- 多选框 -->
爱好:
<input type = "checkbox" value = "slp" name = "hby">睡觉
<input type = "checkbox" value = "cd" name = "hby">编程
<input type = "checkbox" value = "rap" name = "hby">说唱<!-- checked默认选中值-->
<input type = "checkbox" value = "fk" name = "hby" checked>操逼
普通按钮:<input type = "button" value = "按钮中的文字" name = "btn1">
图片按钮:<input type = "image" src = "../image/1.png">
下拉框:<select name = "列表名称">
<option value = "A">西瓜</option>
<option value = "B">龙眼</option>
<option value = "C">橙子</option>
<option value = "D" selected>苹果</option> <!-- selected默认选中值-->
</select>
文本域:<textarea name = "txtbx" cols = "7" rows = "7">默认内容</textarea>文件域:<input type = "file" name = "f">
input简单验证:
邮箱:<input type = "email" name = "email">
数字:<input type = "number" name = "num" max = "9999" min = "0" step = "100"> <!-- step为步长-->
网址:<input type = "url" name " url">
滑块:<input type = "range" min = "0" max = "100" name = "voice" step = "10">搜索框:<input type = "search" name = "search">
<input type = "submit">
<input type = "reset">
</form>
布局、选择器、网页属性美化、盒子模型、浮动,选择器为重点其他可做了解?
发展史:1.0 = 啥也不是只有简单标签 2.0 = div块 标志着结构分离的思想,SEO出现
2.1 = 浮动 定位 布局 等大规模改进 3.0= 圆角、阴影等细节优化,浏览器兼容。
1.分离样式:外部文件,在head引用<link rel = "stylesheet" href = "../style.css">导入css文件;
2.表内样式:写在head里的style标签
3.行内样式(那就不是结构分离了):直接在修饰对象属性栏里写
作用优先级3>2?1,其中2和1看谁的代码最后执行覆盖原代码。
其中优先级3>2>1
!!后括选择器:body空格p{} body标签后的p 全部{。。。}
下面的好像不太好使。。
ul li:first-child{...}
ul li:last-child{...}
p : nth-of-type(2){...}第二个为p类型的元素
标签[属性条件]{...}
属性其实就代表着对于所有此类标签符合此类属性条件的;
eg:a[id]{} = 带id的,a[id = first]{} = id选择器,
!!a[class = "style"]{} = 带有style class的,其中 = 是指绝对等于(.equals())
而 *= 是包含;
a[href ^= http]{} 以http为开头的href的a标签,
a[href $= pdf]{} 以pdf为结尾的href的a标签。
span标签:约定成俗地用其凸显内容。
eg:<span> 内容</span>,然后加选择器对其进行加工
字体样式
body{ font-family: 字体; font-size: 50px; font-weight: bolder;
文本样式
color:#FFFFFF , RGB各两位十六进制
text-align: 排版(居中center)
text-indent:2em(em等于一个单位字,px等于一个像素点)
line-height:每一行的高度
height:总共标签的高度,like p标签
text-decoration:underline/line-through/overline;
a{ text-decoration: none;} a标签去下划线
vertical-align: middle, 两个标签对象相互垂直居中
a:hover{color:#123456;font-size:50px;}链接悬停背景色,字体变大
a:active{color:#123456;}点击链接背景色
a:visited{color:#123456;}访问后的颜色
text-shadow:颜色,水平偏移(左负右正),垂直偏移(上负下正),阴影半径(粗细);(后三个为px)
ui li = 后代层次选择器
{
list-style:none; 去掉圆点或者数字(ol)
circle:空心圆
decimal:数字
square:方形
}
note:一般不会写nav标签,都是div(单位标签)加nav的id
!!!{background-image: url("path.jpg")} 在选择标签域内填充背景图片,默认平铺。
通过{background-repeat:repeat-x/repeat-y/no-repeat}对图片进行水平复制,垂直复制,单一
!!!其实可以在background:___ ___ ___...直接把一溜属性全写好
=> 颜色 图片路径 水平增量 垂直增量 repeat属性
直接在grabient.com上调制diy渐变然后copy代码。。。
background:角度 初始色 最终色
!body存在一个8px的默认margin
input{border:_px dashed white};
!margin:上,右,下,左(顺时针)(也可写上下,左右两个变量)
其中auto代表居中,
div{border-redius:↖↗↘↙};
!!搞清楚width、height与radius的差距,width与height代表着矩形,而radius代表着角到中心点的距离
display:block(块元素化):inline(行内元素化):inline-block(使之成为一行),仍然是块元素,行块(一大段元素堆积)排列必备,很少用。
float-right、left。。。浮动,朝指定方向冒顶直到碰到一个外边框或者另一个浮动盒子为止;
对于浮动很多时候会突破父界,这时候就需要clear来限制浮动;
clear:方向:不允许此方向的浮动;
eg:A在左边浮着,B在右边浮着,对夹在中间的C添加{clear:both}属性它就会在下一行找地方浮。
!还可以通过增加父界高度解决出界问题
!或者在父界下方添加clear:both的块元素禁止上方块元素越界漂浮
!还能在父界中增加{overflow:hidden}屏蔽越界元素
!常用父类after伪类选择器在css中增加clear:both的div兜块
overflow属性:对越界元素的控制:scroll保持原尺寸,增加滚动条
相对定位:
{position:relative;}
然后就可以用top bottom left right:+-xx 来对原位置进行位移
!原位置也被保留
绝对定位:
{position:absolute;}
用left right top bottom时候是相对浏览器进行定位,
条件:父元素没有定位,若有则转换成对父元素的定位。
粘性定位(常用于网站导航栏,广告):
{position:fixed;}
{z-index:层级(0~999)}涉及多个元素相互覆盖,标志此标签的优先级覆盖次级优先级标签。
!只有用了定位才会堆叠
!{opacity:透明度;}
transform:....(不常用,还是多用JS做。。。)
!!!!!!
必须给他妈的我精通
JavaScript是属于网络的脚本语言!
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。
预处理器:CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。
几大框架::
ECMAScript:为JavaScript的一个标准。。。JavaScript为其一种实现。。。
依然是可以在HTML里面写(<script></script>),
也可以独立导入(<script src="path.js"></script>)
var 为变量声明,弱类型语言(听说现在都用let,为局部变量,类似for(int i;;)里面的int)
若直接写 i = 666; 则默认为全局变量
同样严格区分大小写;
可以在网页inspect里的console键入alert输出变量也可以console.log(变量)来输出。
可以在inspect的source(源码)里面设置断点刷新然后调试。。
不同的数据类型
number:(js不区分小数、整数)、5e3(科学计数法),NaN(非数,与所有值(包括NaN)都不相等)
字符串:"xxx"
boolean:false、true
等于号“==”只看值是否一样,即使类型不一样,所以一般都用“===”绝对等于;
数组:var = array[1,"x",null,true];下标越界的话会输出undefined;
对象:var person = {name:"xxx",age:"_",array:[xxx,xxx,xxx]},console里就用person.name,person.age等等调用。
严格检查模式
“use strict” 加在script标签里面就行了,须为第一行,不然在console不会报错。
字符串输出:‘’或者“”用反斜杠转义,\u#### 为Unicode(#为16进制),\xx(ASCII码);
多行字符串:反引号` `直接包括换行原样输出;
模板输出:"${var名字} str...";
tips: var名[index]直接输出index的元素,不可再赋值,.length等属性,.indexOf() .toUpperCase()等方法;JS不区分字符与字符串,字符视为长度为1的字符串;.substring(0开始,1开始);(和java一样;
数组:长度依然是属性 .length;元素可再赋值,也可延长(从新对.length赋值),多余的为empty(即为undefined),缩小(丢失元素);
indexOf(具有多个相同值)只返回第一个元素位置;.slice(依然是[,) 这样的左闭右开);
.pop() 和 .push(vars);类似栈操作(尾部),同时shift()和unshift()表示头部的pop和push;
.reverse()、.sort()、.concat(另一个数组),并没有修改数组;.join(字符串)返回字符串其中美国元素夹一个参数字符串。
多维数组:array[[xxx,xxx,xxx],[yyy,yyy,yyy],...,[...]];
定义时候若干 属性名:属性值间以逗号间隔,最后一个没有逗号;
动态更删属性
delete关键字删除对象属性,.属性名 = 属性值 添加属性;
判断属性是否是自身拥有的(即是否继承来的):.hasOwnProperty(自身键)
数组遍历:for(var x in/of array){in为一个个下标,of为一个个元素值};
map: var map = new Map([ [key,value],[key,value],...,[] ]; 通过set、get调出值键入键值对;
set:(无重复元素)set名.has(属性值) = contains
iterator: ... var itr = Iterator(对象); const itr = map[Symbol.iterator](); for(let x of itr){console.log(x)}...
定义: function name(x,y,z){return x;} ,若没有执行return,依然会返回undefined;
前端定义方式: var abs = function(x,y,z){return x;}, 可以传任意个参数;
关于传进来的参数内部处理,可以用typeOf 形参进行是否传空值的判断,其次 用arguments关键字,代表实参数组;
ES6新特性:rest关键字,若形参只有一个x,rest会获取除了x之外的多余实参。格式:function(x,y,...rest){},rest代表的也是数组。
const PI = 3.1415925354; 只读变量,不许修改。(ES6引入)
函数嵌套情况下,外部函数不可访问内部函数的变量;反之当然可以,假如当下要调用的变量声明定义都在顺序下方,js会默认提前执行定义声明语句。
以及定义在函数之外的称之为全局变量,js存在默认全局对象window,因会出现同名的问题,因此建议自定义全局对象变量域。
var object =
{
方法名:function(){},
}
!也可以在外面写好,对象内部直接 方法名:函数名,
!对于this关键字,在方法内部使用的话,注意若是上述第二种方法的定义,则无法调用外部函数名,因为this代表着是外部全局window的相关变量,而window并没有。
!!apply方法,存在所以方法函数的上一层,用来修改this的指向 .apply(对象,参数列表);
Data:var date = new Data();(打印date是当下时间),
一些方法:get年月日星期时分秒(date是日,day是星期),!getTime();1970年1月1日 00:00:00起始至今的毫秒数。。。
JSON:(数据交换格式,类似XML的功能)提升网络传输效率,后端生成然后前端解析;
JSON.stringify(任何对象)把任何对象字符串化,
JSON.parse(字符串)解析字符串编程对象
原型:对象.__proto__ = 想继承的对象;(任何对象都继承Object的proto)
到了ES6时候,就引入了Java的class写法简化上调怪异的原型;
class Student
{
constructor(形参列表)//直接把传过来的实参变成对象的属性
{
this.xxx = xxx;
}
方法()
{
}
}
继承:
class PupilStudent extends Student
{
constructor(父类形参列表,子类形参列表)
{
super(父类形参列表);
this.xxx = xxx;
}
方法()
{
}
}
!本质其实还是原型对象,class其实也是对象;继承存在原型链,链到object时候就和prototype往返互链了。。。
几个重要对象
window(全局对象)获取窗口属性
screen:屏幕尺寸
location:当前页面的url
document:当前的页面(文档资源)
history:浏览记录
DOM:以树形网页为基础的若干文档资源操作模型,更新,获取,删除,添加 => Dom节点(标签块)
第一步:得先获取到节点!
通过document.getElementBy(Id,Class,TagName)获取节点内容 == 对应CSS选择器
若存在嵌套标签,在父标签id下的children方法可返回所有子节点(数组)。(或者lastChind、firstChild)
!以上都是原生代码,以后都会用现成的框架(JQuery)
第二步:更新节点。
id.innerText("text");插入文本。。
id.innerHTML('标签块');插入HTML 格式的元素。。
id.style.xxx = xxx;样式的修改。。
在网页上抓取到id存入变量就可以利用上述方法修改DOM对象
第三步:删除节点
(通过获取父节点对象来删除当前节点)
id.parentElement().removeChild(子节点);
(也可以通过子节点数组下标遍历删除)
!注意由于数组对象时刻动态删除,下标指向的对象会改变,建议逆向遍历删除。
父节点ID.removeChild(父节点ID.children[index]);
第四步:插入节点
append():目标节点.appendChild(追加节点);(适用于已存在的节点)
创建新节点:document.creatElement(各种标签),然后对这个新建节点进行编辑:新节点.id = 'xxx'; .innerText = 'xxx';
很复杂,做了解,清楚调用机理,增删添改的大概函数就行。。。还是以后的JQuery占据主流!
.getElementById('xxx')获取文本框输入值;
.value 让其输出或对其改变;
对于复选单选框等固定参数input,对每个选项.checked返回是否被选,也可赋值改变选项
高级验证:
首先在script代码内有个验证函数(函数内还需上面的获取输入值)根据想验证的内容是否符合规范返回布尔值,其次在form头标签属性有个onSubmit属性,赋予其“return 函数()”可在验证不通过时阻止表单的提交。
隐藏域接受密码:比形式密码框多了hidden属性,和name属性(没有name属性不会提交??!!);形式密码框只有type属性。。。
然后在验证方法里用方法加密或者验证。。。
获取:在线CDN(网络引入)或者下载jQuery本地导入;;
统一调用方法:$(选择器).方法().
eg: $('#id').click(function(){方法体});点击触发方法; $('p') = 标签选择器, $('.class') = 类选择器
$(function(){}); 是对$(document).ready(function(){});的简写,意为加载页面完成后执行的操作(通常为事件最外层的嵌套),加上其他mouse,key的方法(一般会在function内传参数)组成了事件发生监听器。。。
操作DOM:$(...).text()获取标签内容,用$(...).text('修改后的值')修改内容; 。html()同理。
CSS操作:$('...').css({“属性1”,“值1”,"属性2“,“值2”。。。});