html css js基础(ECMAjavascript)
先啰嗦几句：对h5和css的学习是没有止境的，不懂的就查文档，我不信你能全部记得住，学的是思想
html与css的重点:盒子模型与浮动
js的基础重点:没重点
html常用知识点
w3school标签查询
css总结
H5标签可分为哪些类型
块级标签，行内标签，内联块状标签
H5的弹性布局
display:flex
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
图片摘自博客园cdgogo
详解
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
/*奇数 包括了thead*/
table tr:nth-child(odd){
background-color: dimgrey;
}
/*偶数*/
table tr:nth-child(even){
background-color: whitesmoke;
}
#head{
background-color:white;
}
.t{
margin: 10px 0px 0px 30px;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0">
<thead>
<tr id="head">
<th>编号</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>c1</td>
<td>见习工程师认证</td>
</tr>
<tr>
<td>c4</td>
<td>专项工程师认证</td>
</tr>
<tr>
<td>c5</td>
<td>全栈工程师认证</td>
</tr>
</tbody>
</table>
<button class="t" onclick="alert('提交成功')"> 提交信息</button>
</body>
</html>
块块
第九个块块怎么才能放在4的下面呀？？？？？
块块的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo3</title>
<link href="css/Demo3.css" rel="stylesheet">
</head>
<body>
<div id="total">
<div id="a">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="b">
<div id="box3">3
<div id="box7">7</div>
<div id="box8">8</div>
</div>
<div id="box4">4
<div id="box9">9</div>
</div>
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</div>
</body>
</html>
块块的css
#total{
border:3px red solid;
width: 750px;
height: 660px;
padding: 0px;
margin: 0px;
background-color: burlywood;
}
div{
text-align: center;
}
#a{
float:left;
padding: 0px;
height:620px;
width: 218px;
margin: 20px ;
}
#b{
margin:20px 0px 0px 0px;
float:left;
width: 470px;
height:620px;
}
#box1{
margin: 0px 0px 20px 0px;
line-height: 150px;
width: 100%;
height:150px;
background-color: green;
}
#box2{
margin: 0px 0px 0px 0px;
height: 450px;
line-height: 450px;
width: 100%;
background-color: green;
}
#box3{
background-color: green;
width:100%;
line-height: 230px;
height:230px;
margin: 0px 0px 20px 0px;
}
#box4{
line-height: 370px;
float: left;
margin: 0px 20px 0px 0px;
width: 50%;
background-color: green;
height:370px;
}
#box5{
line-height: 175px;
margin: 0px 0px 20px 0px;
float: left;
width:215px;
height:175px;
background-color: green;
}
#box6{
line-height: 175px;
float: left;
width:215px;
height:175px;
background-color: green;
}
#box7{
float: left;
line-height: 175px;
width:200px;
height:155px;
background-color: chocolate;
margin: 40px 0px 0px 20px ;
}
#box8{
float: right;
line-height: 125px;
width:150px;
height:125px;
background-color: chocolate;
margin: 0px 20px 0px 0px;
position: relative;
top:-50px;
}
#box9{
line-height: 125px;
width:150px;
height:125px;
background-color: chocolate;
margin: 0px 0px 0px 20px;
position: relative;
top: -40px;
}
自测一下
H5的img要拖放要增加哪个属性
<img src="../imag/1.png" draggable="true">
HTMIL5理一个input类型可以选择一个无时区的日期选择属性吗?
可以
<input type="date">
以上就是那个input的时期选择器
css盒子模型中的Margin、Border、Padding都是什么意思?
margin 外边距
border 边框
padding 内边距
附图一张
说出至少五种常见HTML事件
事件：HTML 有能力让事件触发浏览器中的动作，
例如当用户单击元素时启动 JavaScript。
1.Window事件
2.表单(form)事件
3.mouse 事件
4.media 事件
5.Keyboard 事件
这是是一个归类，每个下面还有具体的属性下面链接有详解
事件详解链接
HTML的onblur和onfocus是哪种类型的属性?
焦点：可以理解为鼠标在的地方，也可以说是浏览器光标的位置（我个人认为后者好些）
属于事件属性
onblur onblur 属性在元素失去焦点时触发
onfocus 元素获得焦点时被触发
怎么设置display属性的值使容器成为弹性容器?
div{
display: flex;
}
Javascript中有多少种不同类型的循环?
1.for
2.while
3.do-while
4.for-in
5.foreach
用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适?
语义化标签:有自己含义的标签
<mark>：使用黄色突出显示部分文本
<strong> 变粗
<em> 斜体
5523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
