h5+css3 考试题

1、css3实现圆角属性？阴影？边框图片？

答：border-radius: 百分比和像素 box-shadow : 水平方向阴影垂直方向的阴影阴影模糊程度颜色 border-image

2、对文字添加阴影属性？线性渐变？旋转？

答： text-shadow : 水平方向阴影垂直方向的阴影阴影模糊程度颜色 linear-gradient( red green) 默认方向为由上到下至少两种颜色； transform:rotate( 30deg)

3、对背景图尺寸修改属性

background-size

background-origin

background-clip

4、伪类选择器和伪元素的区别？

伪类是在原有存在的元素进行渲染，没有添加新元素；

而伪元素创建了新元素，但却不是真实存在。

5、简要说明H5拖拽的过程？

   <style>
        #box{
             500px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="box" ondrop="drop(event)" ondragover ='over(event)'></div>
    <img src="./images/logo.png" alt="" draggable="true" ondragstart="start(event)" id="img1">
</body>
<script>

    // 1.获取元素
    var oBox = document.getElementById('box');
    var oImg = document.getElementById('img1');


    // 2.定义方法
    // 开始拖拽
    function start(event){
        // dataTransfer.setData    设置属性    
        console.log(event)
        // 相当于设置一个属性a用来存储img的id值。目的：方便再放下的时候可以知道放下的是谁
        event.dataTransfer.setData('a',event.target.id)
        // console.log(event.target.id)  //img1
        // console.log(this.id)
        // console.log(this)
    }
    
    // 准备放下
    function drop(event){
        event.preventDefault();//阻止事件的默认行为
       var data =  event.dataTransfer.getData('a')
        console.log(event.dataTransfer.getData('a'))
        document.getElementById('box').appendChild(document.getElementById(data))
    }

    // 已经放下
    function over(event){
        event.preventDefault();
    }



    // oImg.ondragstart = function () {  }
</script>

6、H5新增的表单属性有哪些？分别代表什么意思？

(1)、placeholder 占位符

(2)、autofocus 获取焦点

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

让 "First name" input 输入域在页面载入时自动聚焦：

First name:<input type="text" name="fname" autofocus>

(3)、autocomplete 自动完成，用于表单元素，也可用于表单自身

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>

</form>

(4)、name 指定表单项属于哪个form，处理复杂表单时会需要

(5)、novalidate 关闭验证，可用于<form>标签

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

E-mail: <input type="email" name="user_email">

(6) 、required 验证条件，必填项

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

(7) 、pattern 正则表达式验证表单

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

提示：是用来全局 title 属性描述了模式.

提示：您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容

(8)、maxlength 最大长度 minlength最小长度

一般用于text文本属性

7、什么是响应式设计？