HTML5及CSS3基础知识

填空（20分）

1. html中的注释为<!-- -->,CSS中的注释为/* */。
2. 空格的实体为 ;。
3. 下拉菜单的标签为<select>，菜单中的每个选项标签<option>。
4. HTML对文字加粗的两种方式<b>，<strong>。
5. CSS对文字加粗的方式font-weight:bold/bolder/font-weight:900;。
6. <img src="./tset.png" alt=" ">中，alt有什么含义？在浏览器无法载入图像时，显示该属性中的文本当图片加载失败的时候文本替换。
7. 在<a target=””></a>中，当target_sel在当前页面打开，当target=_blank 在新标签页打开,取消a标签中的默认下划线的属性为text-decoration:none
8. 在表格中，对<td>设置什么属性可以跨行 rowspan 和跨列colspan 。
9. 为form表单设置提交方式的属性是method。（post/get）
10. 对表单元素禁用的布尔值属性是disabled。
11. 对input输入框默认聚焦的布尔值属性是autofocus。(自动聚焦)
12. 对于<input type=”checkbox”>来说，默认被勾选的布尔值属性checked。
13. 对字体设置颜色的CSS属性是color还是font-color？color。
14. 对浮动元素清除浮动的属性是clear：left/right/both; overflow:hidden;

简答（39分）

1. 常用的块级元素有（5个），行级元素有（5个）6分，少写一个-1分错写一个-1分）

常见的块级元素：body  form  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  div

常见的行级元素： lable  span  br  a  style  em  b  i  strong  img  input  td  span

1. 请写出相对定位，绝对定位以及固定定位属性及属性值，并写出他们之间的区别。（3分）

1.position:relative，相对定位，相对于元素自身原来的位置进行定位，不脱离文档流；通过left/right/top/bottom定位

2.position:absolute，绝对定位，如果父级元素中有定位元素，会去找最近的父级元素作为参考，进行绝对进行，如果没有，参照页面(浏览器视口)进行定位;脱离文档流，通过left/right/top/bottom定位

3.position:fixed;固定定位，固定在浏览器的视口内，脱离文档流，通过left/right/top/bottom定位

1. 对以下CSS样式优先级进行排序（8分）

1. Id选择器  b.类选择器  c.标签选择器d.行内样式  e.通配符*  f.浏览器默认属性 g. 继承 h. !important

!important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1. 如何取消列表前默认实心圆标志？请用CSS代码实现。（2分）

list-style:none;list-style-type:none;

1. 绝对路径和相对路径的区别（3分）

绝对路径以/开始从根目录开始的文件路径，例如C:\Program Files\Microsoft Office 15\ClientX64       /home/briup/Desktop/index.html

相对路径 相对于当前文件的路径，例如

./images/logo.png

6. 分别写出input标签type类型的含义（5分）

扫描二维码关注公众号，回复： 2985982 查看本文章

Button  checkbox  file  image  password  radio  reset  submit  text  

按钮  复选框  选择文件  图片按钮  密码  单选框  重置  提交  文本

1. 写出两种隐藏元素的CSS属性，并说明区别（4分）

display:none;  隐藏元素且元素的位置可以被取代

visibility:hidden;  隐藏元素且元素的位置不能被取代

opacity:0;透明

<input type=”hidden”>提交的时候也会被提交

8. 阅读代码，说明#one、#two、#three的宽高颜色（4分）

One：green 200

Two：blue 150

Three：blue 100

9. 请写出标准盒子模型和IE盒子模型是用什么CSS属性以及属性值表示？当为元素设置width:100px;height:100px;margin:10px;padding:10px;border:10px solid red，请在纸上画图表示出来。（4分）

IE盒子    box-sizing:border-box              标准盒子： box-sizing:content-box

 

编程（41分）

1. 怎样居中（水平+垂直）一个div中的文本？（4分，少写一个-1分错写一个-1分）

text-align:center; line-height：父元素高度；

2. 怎样居中（水平+垂直）一个div中的元素？请至少给出两种方法？（8分）

3. 实现布局中间自适应宽度，左右两栏固定宽度（6分）

<style> 

.box{ display:flex; }

.left{ width: 200px; height: 600px; background:red; }

.right{ width: 200px; height: 600px; background:red; }

.center{ width: 100%; height:600px; background:green; }

</style>  

4. 创建一个最简单的动画使#one在两秒内向右移动300px。（4分）

<div id=”one” style=”width:100px;height:100px;background:red;”></div>

 

 

1. 如何取消a标签的默认样式？如何设置a标签点击前 点击后 点击时 悬停时的样式及顺序？。（5分）

取消默认样式

a{

      text-decoration: none;

      color: black;

    }

a:link{}

a:visited{}

a:hover{}

a:active{}

 

1. 请画出下面代码运行后的样式，标注宽高和间距。（5分）

 

1. 请画出两个元素的位置图。（3分）

<div style=”width:1000px;height:500px;border:1px solid black;”>

 <div style=”width:100px;height:100px;border:1px solid black;margin-top:50%;”>

 </div>

   </div>

1. 请用媒体查询写出，当屏幕尺寸小于等于414*763像素的时候，div为100*100像素，背景色为红色，当屏幕尺寸大于等于375*667像素的时候，div为100*100像素，背景色为蓝色，当屏幕尺寸为375*667到414*763像素到的时候，div为100*100像素，背景色为黄色，给出关键代码(6分)

 

@media screen and (min-width: 414px){

      .one{

        background-color: red;

      }

    }

    @media screen and (max-width: 375px){

      .one{

        background-color: blue;

      }

    }

    @media screen and (min-width: 375px) and (max-width: 414px){

      .one{

        background-color: yellow;

      }

    }

    .one{

      width: 100px;

      height: 100px;

    }