html,css,js速成
温馨提示:这篇文章已超过393天没有更新,请注意相关的内容是否还可用!
准备:vscode配好c,python,vue环境,并下载live server插件。
命令行里code . 意思是vscode把当前文件夹当作项目打开。
1. html
hypertext markup language(超文本标记语言)
1. 基础语法
一个html元素由开始标签,填充文本,结束标签构成。
| 常见标签 | 说明 |
|---|---|
| 粗体 | |
| 斜体 | |
| 下滑线 | |
| 删除线 | |
| 换行 | |
| 水平线 | |
| 无序列表 | |
| 有序列表 |
hello world
有1-6级标题
这是一个段落标签
- coffee
- tea
2. 元素与属性
块级元素
|
通常在块级元素内 不会导致文本换行 只占必要的部分宽度
3. 表格表格由table标签定义
4. 表单 使用form元素创建表单,action属性定义表单元素提交的目标url,method属性定义提交数据的http方法。 常见的表单元素有label,input,select,option input的type属性有text,password,radio(单选框),checkboxes(复选框),submit
2. css1. 基础语法Cascading Style Sheets,层叠样式表 css规则由选择器和声明构成。 选择器主要有元素选择器,类选择器,id选择器。
h4{/*元素选择器*/
color:red;
}
.class1{ /* .号开头为类选择器*/
color:green;
}
#id1{/* #号开头id选择器*/
color:blue;
}
2. 层级关系可以定义父类和子类,方便嵌套的时候区分。
.outside{
color:red;
.inner2{
text-align:right;
}
}
.outside .inner1{
text-align:center;
}
.b{
font-size:30px;
}
'outside'>
3. 颜色和文本颜色主要有名称,rgb和hex格式 green 绿色 rgb(0,0,255) 蓝色 #FF0000 红色
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)
.none{
display:none;
}
.inline-block{
display:inline-block;
width:100px;
height:120px;
}
6. 定位相对定位 relative,相对于正常位置移动 绝对定位 absolute,比如h2放在什么位置 静态定位 static ,不受top,bottom等影响 固定定位 fixed,窗口滚动它不移动。
h2.pos_abs{
position:absolute;
left:100px;
top:150px;
}
h2.pos_rel{
position:relative;
top:100px;
}
3. javaScriptJS可以操作浏览器(BOM)和网页(DOM)。 vscode下载live server插件。 在index.html里输入!,然后按Tab生成html模板。 1. 基础新建index.js文件写入console.log('hello'),然后在index.html里面写入如下代码。
Document
用live server打开html文件,再F12就可以在console看到结果。 此外,还可以用node运行js文件。 2. 变量与常量var声明变量(全局作用域),函数内部声明var,函数外访问不到,函数外声明则整个脚本可见。在 for 循环中,使用 var 声明的循环变量在循环结束后仍然存在,并且可以在循环外部访问。 let声明变量(块级作用域),例如for循环内声明let变量,在for循环外部不可见。使用 let 声明的循环变量在每次循环迭代时都会创建一个新的绑定,因此循环结束后这些变量就不存在了。 const声明常量。 var a=5;
let b;
b=4;
const c=6;//常量必须在声明时定义
function fun(){
var i=55;
console.log(i);
for(var i=0;i
console.log(i);
}
console.log(i);
}
fun();//55 0 1 2 3 4 5,for语句块外部var i被改变。
function fun2(){
var i=55;
console.log(i);
for(let i=0;i
console.log(i);
}
console.log(i);
}
fun2();//55 0 1 2 3 4 55,for语句块外部var i未被改变。
price} yuan.`);//写模板字符串记得用反引号
f:"jkloli",
a:18,
homies:['miku','あずませれん','A-SOUL'],
address:{
detail:"Platform 9-3/4",
state:"UK",
},
};
p.n=66;//添加属性
console.log(p.homie[2]);
const {a,address:{state}}=p;//抽取同名变量
console.log(state);
id:1,text:"apple"},
{id:2,text:"banana"},
{id:3,text:"coconut"}
];
console.log(t[2].text);
const j=JSON.stringify(t);//将一个JavaScript对象或值转换为JSON格式字符串
const k=JSON.parse(j);//转化成JSON对象
console.log(j);//[{"id":1,"text":"apple"},{"id":2,"text":"banana"},{"id":3,"text":"coconut"}]
console.log("10");
}else if(x10){
console.log("10");
}else{
console.log(" |







