电子商务网站建设与管理笔试,太原网站建设哪家强,网页设计页面链接,网站建设明细报价表仅供参考准备#xff1a;vscode配好c#xff0c;python#xff0c;vue环境#xff0c;并下载live server插件。
1. html
hypertext markup language(超文本标记语言)
1. 基础语法
一个html元素由开始标签#xff0c;填充文本#xff0c;结束标签构成。
常见标签说明bvscode配好cpythonvue环境并下载live server插件。
1. html
hypertext markup language(超文本标记语言)
1. 基础语法
一个html元素由开始标签填充文本结束标签构成。
常见标签说明b/b粗体i/i斜体ins/ins下滑线del/del删除线br换行hr水平线ulli/li/ul无序列表olli/li/ol有序列表
!DOCTYPE html!-- 解释文档的类型--
htmlheadmeta charsetutf-8titlehello world/title!-- 注释 --/headbodyh1有1-6级标题/h1p这是一个段落标签/pullicoffee/lilitea/li/ul/body
/html2. 元素与属性
块级元素
divh1pultable 在页面以块的形式展现 出现在新的一行 占全部宽度 内联元素
aimgspanstrongtd 通常在块级元素内 不会导致文本换行 只占必要的部分宽度 phello strongworld/strong!/p
a hrefwww.baidu.com target_blank百度/a
href和target都是a标签的属性
img src./1.jpgalt没找到图片3. 表格
表格由table标签定义 tablethead!--标题栏--trth菜品/thth价格/th/tr/theadtbodytrtd双皮奶/tdtd8/td/trtrtd肠粉/tdtd7/td/tr/tbody
/table4. 表单
使用form元素创建表单action属性定义表单元素提交的目标urlmethod属性定义提交数据的http方法。
常见的表单元素有labelinputselectoption
input的type属性有text,password,radio(单选框),checkboxes(复选框),submit form actionform.js methodpostdivlabelusername:/labelinput typetext nameu placeholderinput your username/input/divdivpassword:input typepassword namep/inputinput typesubmit names value提交/input/div
/form2. css
1. 基础语法
Cascading Style Sheets层叠样式表
css规则由选择器和声明构成。
选择器主要有元素选择器类选择器id选择器。
style
h4{/*元素选择器*/color:red;
}
.class1{ /* .号开头为类选择器*/color:green;
}
#id1{/* #号开头id选择器*/color:blue;
}
/style
h4123/h4
p classclass1123/p
p idid1123/p2. 层级关系
可以定义父类和子类方便嵌套的时候区分。
style
.outside{color:red;.inner2{text-align:right;}
}
.outside .inner1{text-align:center;
}
.b{font-size:30px;
}
/style
div classoutside
p123/p
p classinner1 b123/p!--使用多个类--
p classinner2 123/p
/div3. 颜色和文本
颜色主要有名称rgb和hex格式
green 绿色
rgb(0,0,255) 蓝色
#FF0000 红色
文本属性说明background-color:#f2f2f2;背景颜色background-image:url(‘1.jpg’);背景图片font-family:“Times New Roman”,Georgia;字体text-indent:50px;首行缩进line-height:32px;行间距text-align:left;水平对齐方式font-size:30px;字体大小font-weight:200;字体粗细word-spacing:20px;字间距
4. 盒子模型 一般盒子模型包括边距(margin)边框(border)填充(padding)和实际内容(content)。
盒子的四个方位为top,right,bottom,left
.box1{/*border:1px solid #98bf21;*//*border-width:1px;*//*border-style:dashed;*//*margin-right:10px;右侧边距10px*//*margin: 10px;上下左右等宽*//*margin: 6px 12px;上下6px左右12px*//*padding:6px 10px 4px 7px solid red;*//*分别指定上右下左*/}5. display布局
块级元素(block)
内联元素(inline)
内联块级元素(inline-block)
隐藏元素(none)
灵活布局(flex)
网格布局(grid)
style
.none{display:none;
}
.inline-block{ !--可设置宽高填充行间距--display:inline-block;width:100px;height:120px;
}/style
p classnone看不见我/p
span classinline-blockgood/span
spanjob/span6. 定位
相对定位 relative相对于正常位置移动
绝对定位 absolute比如h2放在什么位置
静态定位 static 不受top,bottom等影响
固定定位 fixed窗口滚动它不移动。
style
h2.pos_abs{position:absolute;left:100px;top:150px;
}
h2.pos_rel{position:relative;top:100px;
}
/style
h2正常位置/h2
h2 classpos_abs绝对位置/h2
h2 classpos_rel相对位置/h23. javaScript
JS可以操作浏览器(BOM)和网页(DOM)。
vscode下载live server插件。
在index.html里输入!然后按Tab生成html模板。 1. 基础
新建index.js文件写入scriptconsole.log(hello)/script然后在index.html里面写入如下代码。
!DOCTYPE html
headmeta charsetUTF-8titleDocument/title
/head
bodyp新手入门/pscript srcindex.js/script
/body
/html用live server打开html文件再F12就可以在console看到结果。 此外还可以用node运行js文件。 2. 变量与常量
可以用var(全局)let声明变量用const声明常量。
var a5;
let b;
b4;
const c6;//常量必须在声明时定义基本类型说明String字符串Number数字Boolean布尔nullnull的类型标记为0,null表示null指针返回值为objectundefined未定义
const aJohn;
const price65.5;
const is_notfalse;
const xnull;
const yundefined;
console.log(typeof y);
console.log(my name is a);
console.log(A pair of shorts costs ${price} yuan.);//写模板字符串记得用反引号字符串内置属性和方法说明s.length字符串长度s.split(“”)分割字符串成数组s.toUpperCase()全大写s.toLowerCase()全小写s.substring(0,5)起始0号位左闭右开截取字符串
3. 引用数据类型
引用数据类型主要有对象Object数组Array函数Function
//数组
const anew Array(1,2,3,4,5);
const b[a,123,abc,true];
b[3]567;
console.log(b[3]);a.push(6)//末尾添加元素
a.pop()//去除末尾元素
a.unshift(0)//开头添加元素
a.indexOf(2)//返回元素2的位置
Array.isArray(a)//判断a是否是个数组//对象
const p{f:jkloli,a:18,homies:[miku,あずませれん,A-SOUL],address:{detail:Platform 9-3/4,state:UK,},
};
p.n66;//添加属性
console.log(p.homie[2]);
const {a,address:{state}}p;//抽取同名变量
console.log(state);4. 对象数组和JSON
//对象数组
const t[{id:1,text:apple},{id:2,text:banana},{id:3,text:coconut}
];
console.log(t[2].text);
const jJSON.stringify(t);//将一个JavaScript对象或值转换为JSON格式字符串
const kJSON.parse(j);//转化成JSON对象
console.log(j);//[{id:1,text:apple},{id:2,text:banana},{id:3,text:coconut}]5. if…switch…for…while
相等只比较值
严格相等比较值和类型
var x0;
if(x10){console.log(10);
}else if(x10){console.log(10);
}else{console.log(10);
}colorkhaki;
switch(color){case darkviolet:console.log(darkviolet);break;case khaki:console.log(khaki);break;default:console.log(other);
}let sum0;
for(let i0;i10;i){sumi;
}
console.log(sum);
let num1;
i1;
while(i5){num*i;i;
}
console.log(num);let a[1,2,3,4,5];
for(let i of a){console.log(i);
}6. 函数
function add(a,b){return ab;
}
//匿名函数
const sub function (a,b){return a-b;
}
console.log(sub(5,1));更多参考
HTML CSS JavaScript 两小时快速入门教程 枯木何日可逢春
