前端基础习题及答案
1、用于完成提交信息的表单容器元素名称是什么，提交表单时的事件是什么？
<input type="submit" /> 事件 onclick keyCode
2，如果想要这样一种布局，横向铺满整个屏幕横向屏幕分为三块，左侧一块div占宽度20px，
右侧一块div占宽度40px，中间区块随屏幕大小自动填充请用div+css描述
3，当文字超过对象区域后如何使其自动显示....进行缩略显示
4，如何设定一个div对象在其父div对象中的位置为（5px，15px）高度为50px
5,css3中的新的盒子模型布局方法是什么，写法下一下，怎么让文字和图片上下左右水平垂直居中
6，一个父级div里面有三个兄弟div怎么让他们三个水平或者垂直显示
7，圆角怎么表示分别写出上左，上右，下左，下右圆角
8，html5中最新的input type类型有哪些
color date datetime datetime-local email month number range search tel time url week
https://www.runoob.com/html/html5-form-input-types.html
9，html5中对canvas了解多少
答案见canvas绘制多啦A梦
10，html5中新增的标签有哪些
<article> <aside><audio><big><canvas>
https://www.runoob.com/tags/html-reference.html
附--答案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.box {
width: 300px;
height: 100px;
display: flex;
margin-bottom: 20px
}
.one {
width: 20px;
float: left;
background: red;
}
.two {
width: 100%;
background: skyblue;
}
.three {
float: right;
width: 40px;
background: pink;
}
.text {
height: 20px;
width: 300px;
border: 1px solid red;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
position: relative;
margin: 20px
}
.son {
position: absolute;
width: 100px;
height: 50px;
background: greenyellow;
left: 5px;
top: 15px;
}
.five {
width: 500px;
height: 500px;
border: 10px solid skyblue;
margin-left: 300px;
position: relative;
}
.five_box {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.five_box img {
width: 100%;
}
.vertical {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.vertical_1,
.vertical_2,
.vertical_3 {
width: 33.33%
}
.vertical_1 {
background: skyblue
}
.vertical_2 {
background: pink
}
.vertical_3 {
background: yellowgreen;
}
.level {
display: flex;
flex-direction: column;
width: 500px;
height: 200px;
border: 1px solid red;
}
.level_1 {
height: 30px;
background: skyblue
}
.level_2 {
height: 30px;
background: pink
}
.level_3 {
height: 30px;
background: yellowgreen
}
.radio {
margin-left: 200px;
width: 300px;
height: 300px;
background: hotpink;
border-top-left-radius: 60px;
border-top-right-radius: 90px;
border-bottom-left-radius: 120px;
border-bottom-right-radius: 40px;
}
</style>
</head>
<body>
<!-- 111 -->
<div>
<form action="" method="GET">
<input type="text" name="name" />
<input type="text" name="age" />
<input type="submit" />
</form>
</div>
<!-- 2222 -->
<div class="box">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<!-- 333 -->
<div class="text">
我站在山的尽头
看着云朵飞走
你像昨夜的海市蜃楼
给我漫天蝶游
赴约万水千丘
回忆太美所以人才念旧
</div>
<!-- 444 -->
<div class="parent">
<div class="son"></div>
</div>
<!-- 555 -->
<div class="five">
<div class="five_box">
<img src="ayy1.jpg" alt="">
</div>
</div>
<!-- 666 -->
<div class="vertical">
<div class="vertical_1">111</div>
<div class="vertical_2">222</div>
<div class="vertical_3">333</div>
</div>
<div class="level">
<div class="level_1">111</div>
<div class="level_2">222</div>
<div class="level_3">333</div>
</div>
<!-- 水平也可以直接用浮动 -->
<!-- 777 -->
<div class="radio"></div>
</body>
</html>
