网站建设要学哪种计算机语言,网络舆情分析的内容,wordpress建站显示网站图标,聊城网站推广品牌本文用于检验学习效果#xff0c;忘记知识就去文末的链接复习
1. HTML
1.1 HTML基础
结构
头head身体body
内容
图片img段落p图标link
标签
单标签双标签
常用标签
div#xff1a;分割块span#xff1a;只占需要的大小p忘记知识就去文末的链接复习
1. HTML
1.1 HTML基础
结构
头head身体body
内容
图片img段落p图标link
标签
单标签双标签
常用标签
div分割块span只占需要的大小p段落br换行hr一根横线与页面宽度一样h1h2h3h4h5h6一级/二级/三级/四级/五级/六级标题a链接olli有序列表ulli无序列表tebletheadtrthtbodytrtb表格
转义字符
ensp半个空白格子emsp一个空白格子nbsp更小的空白格子ltgtampquotcopy版权reg已注册商标times乘号divide除号
!DOCTYPE html
html langenheadmeta charsetutf-8 /titlehello title/titlelink relicon href./img/法案_bill.png typeimage/x-icon /
/headbodydiv idanchor1这是页面顶端锚点位置/divh1这是一级标题/h1h2这是二级标题/h2h3这是三级标题/h3div classb1p【这是第1块第1段】/pp【这是第1块第2段】br /《望庐山瀑布》br /唐·李白br /日照香炉生紫烟遥看瀑布挂前川。br /飞流直下三千尺疑是银河落九天。/pp【这是第1块第3段】lt;ensp;gt;lt;emsp;gt;lt;nbsp;gt;/p/divdiv classb2p【这是第2块】/pa hrefhttps://www.bilibili.com/点击这里访问粉色小破站/aol有序列表li这是第一项/lili这是第二项/lili这是第三项/lili这是第四项/lili这是第五项/lili这是第六项/li/olul无序列表li这是第一项/lili这是第二项/lili这是第三项/lili这是第四项/lili这是第五项/lili这是第六项/li/ultable bordertheadtrth学号/thth姓名/thth班级/th/tr/theadtbodytrth001/thth小明/thth计科/th/trtrth002/thth小红/thth软工/th/tr/tbody/table/divdivp【这是第3块】/ppimg width300 src./img/可厉害.png alt可厉害 /img width300 src./img/可厉害.png alt可厉害 //ppimg width300 src./img/可厉害.png alt可厉害 /img width300 src./img/可厉害.png alt可厉害 //ppa href#anchor1跳转到页面顶端锚点位置/a/p/div
/body/html1.2 HTML表单写登录界面
标签
labelinputbutton
!DOCTYPE html
html langenheadmeta charsetutf-8 /titlehello title/titlelink relicon href./img/法案_bill.png typeimage/x-icon /
/headbodydivh1登录网站/h1hr /label账号:input typetext nameusername idusername placeholder账号 /br /密码:input typepassword namepassword idpassword placeholder密码 /br /颜色:input typecolor namecolor idcolor /br /选择文件:input typefile namefile idfile /br /选择日期:input typedate namedate iddate /br /备注textarea nametextarea idtextarea cols30 rows10 placeholder多行文本/textareabr /hr /a hrefhttp://www.baidu.com忘记密码/abutton登录/buttonbr //labellabelinput typecheckbox namecheckbox idcheckbox /我同意本网站的隐私政策a hrefhttp://www.baidu.com《隐私政策》/a/labelbrlabelinput typeradio namerole /学生input typeradio namerole /老师input typeradio namerole /管理员br选择身份selectoption value1学生/optionoption value2老师/optionoption value3管理员/option/select/label/div
/body/html2. CSS
用CSS自定样式
用外部css文件在元素标签中用style在头部定义样式style
CSS选择器指定元素的方式
标签名: input{}直接写class: .test{}(加点)id: #test{}加#所有元素*位于某元素内部的元素div label(所有div标签中的label标签)
CSS选择器有优先级(下面从高到低排序)
以最高级为准最高级!important内联选择器ID选择器类选择器元素选择器通配符选择器*
CSS边距
浏览器自带边距外边距margin内边距padding
常用属性
background-colormarginpaddingtext-align
制作一个登录界面
!DOCTYPE html
html langenheadmeta charsetutf-8 /titlehello title/titlestylebody {background-color: #ffffff;margin: 0;text-align: center;}input {border: 0;background: #e0e0e0;line-height: 40px;border-radius: 20px;padding: 0 20px 0 20px;width: 200px;font-size: 16px;margin-top: 20px;}input:focus {outline: 0;}button {margin-top: 20px;background: #6600CC;border-radius: 20px;border: 0;width: 200px;height: 50px;color: white;font-size: 16px;box-shadow: 0px 2px 10px blueviolet;/*按键四周的阴影*/}button:focus {outline: 0;background: #6666CC;}#input-remember {width: auto;}/style
/headbody stylemargin: 0;h1登录/h1formhrdivlabel forinput-username账号:/labelinput typetext idinput-username placeholder账号 /brlabel forinput-password密码:/labelinput typepassword idinput-password placeholder密码 /brlabel forinput-remember记住我:/labelinput typecheckbox idinput-remember /bra href#忘记密码?/aa href#忘记账号?/a/divdivbutton typesubmit登录/button/div/form
/body/html3. JavaScript
比起Java更像Python。弱类型语言
3.1 基础语法
数据类型
Number整数小数String字符串Boolean布尔
特殊值
undefined未定义null空NaN非数字值不合法
关键字
let变量不建议用varconst常量typeof a查看变量a的类型
常见语法
aforif-elseswitch-case
关系运算
相等 字符串与数字比较会将字符串转化为数字如1010输出为true 全等这个类似Java中的
逻辑运算短路
逻辑与||逻辑或 7 || true输出7true || 7输出true !逻辑非按位与|按位或?:
输入/输出
console.info()window.alert()
3.2 函数
函数
function f(){/*函数体*/}不用写类型形参返回值
/*函数*/
function ff(param) {console.info(得到的参数param)return 998
}/*函数类型变量*/
let kff
k(aa)/*匿名函数*/
let ggfunction(){console.info(这是匿名函数)
}function ff(param) {console.info(函数ff得到的参数param)return 998
}
/*把函数当作参数传递*/
function pp(fp){fp(函数当做参数传递)
}
pp(ff)/*把匿名函数当作参数传递*/
pp(function(a){console.info(匿名函数的形参a)
})
/*匿名函数另一种写法*/
pp((a){console.info(匿名函数的形参a)
})3.3 数组
数组
一个数组可有不同类型元素共存可以动态增加
let arr[23,Hello,false,undefined,NaN]
/*会自动扩容*/
arr[15] kkk;
/* 插入一个元素到数组后面 */
arr.push(100);
/* 从数组后面弹出一个元素 */
arr.pop();fill方法
arr[1,2,3,4,5]
/*将数组中的元素全变为1*/
arr.fill(1)
console.log(arr)
/*将下标[1,3)处的元素变为99*/
arr.fill(99,1,3)
console.log(arr);map方法
arr [1, 2, 3, 4, 5];
console.log(arr);
/*将数组中的数字全变为字符*/
console.log(arr.map(i i ));
/*将数组中的数字全变为字符后面加?*/
console.log(arr.map(i i ?));3.4 对象
/*创建对象*/
let a new Object();
let b {name: bname,age: 18,setName(name) {this.name name;},f: function () {console.log(f function called);},
};
/*动态添加对象*/
a.name aname;
a.age 288;
a.setName function (name) {this.name name;
};
a.setName(哦哦哦);
/*若这样写则this不会绑定到a类的对象*/
a.setName (name) {this.name name;
};console.log(a);
console.log(b);
3.5 事件js与html
常用事件
onclick 点击事件oninput内容输入事件onsubmit内容输出事件
Dom对象
把整个html界面映射为js对象从而可在js中操作html中的元素
getElementById()通过id获取元素 之后可调用元素的属性修改元素
【例子】通过按键改变页面元素值
!DOCTYPE html
html langzh-CNheadmeta charsetutf-8title我的网页/titlestylebody {text-align: center;}/stylescriptfunction login_click() {document.getElementById(login-state).textContent 已登录;}function logout_click() {document.getElementById(login-state).textContent 未登录;}/script
/headbodyh1登录到xx系统/h1p idlogin-state未登录/pformdivinput typebutton idlogin value登录 onclicklogin_click() /input typebutton idlogout value注销 onclicklogout_click() //div/form
/body
/html【例子】输入字符长度在[6,20]时正常否则边框变为红色
!DOCTYPE html
html langzh-CNheadmeta charsetutf-8title我的网页/titlestylebody {text-align: center;}.illegal-pwd {border: red 1px solid !important;box-shadow: 0 0 5px red;}/stylescriptfunction checkIllegal(e) {if (e.value.length 20 e.value.length 6) {e.removeAttribute(class);}else {e.setAttribute(class, illegal-pwd);}}/script
/headbodyformdivlabel forusername用户名:/labelinput typetext idusername nameusername oninputcheckIllegal(this) requiredlabel for password密码:/labelinput typepassword idpassword namepassword requiredinput typesubmit value提交 /div/form
/body
/html3.6 XHR请求js与后端
通过XMLHttpRequest对象向服务器发送请求
一个发送请求的函数
function httpRequest() {let xhr new XMLHttpRequest();xhr.open(GET, https://www.baidu.com);xhr.send();
}!DOCTYPE html
html langzh-CNheadmeta charsetutf-8title我的网页/titlestylebody {text-align: center;}button {width: 100px;height: 50px;margin: 10px;font-size: large;}/stylescriptfunction httpRequest() {let xhr new XMLHttpRequest();xhr.open(GET, https://www.baidu.com);xhr.send();}/script
/headbodyh1XHR/h1hrdivbutton stylemargin-top: 20px; onclickhttpRequest()请求/button/div
/body/html参考
https://www.itbaima.cn/document/k7dfwua3bsezvw9q
