极客学院的前端课程（八）

最新推荐文章于 2018-09-14 15:39:28 发布

garrulousabyss

最新推荐文章于 2018-09-14 15:39:28 发布

阅读量218

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/garrulousabyss/article/details/80932131

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

2.13.1 control属性与placeholder属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function setValue(){
            var label = document.getElementById("label");
            var textbox = label.control;
            textbox.value = "010011";
        }
    </script>

    <form>
        <label id="label">
            邮编：
            <input id="txt_zip" maxlength="6">
            <small>请输入六位数字</small>
        </label>
        <input type="button" value="设置默认值" οnclick="setValue()">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="请输入用户名">
</body>
</html>

2.13.2 list属性与autoComplete属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="text" name="greeting" list="greetings" autocomplete="on">
        <datalist id="greetings" style="display: none">
            <option value="HTML5学习">HTML5</option>
            <option value="Android学习">Android</option>
            <option value="iOS学习">iOS</option>
        </datalist>
    </form>
</body>
</html>

2.13.3 pattern属性与SelectionDirection属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        请输入内容
        <input pattern="[A-Z]{3}" name="part">  <!--输入的必须是三个大写字母-->
        <input type="submit">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function AD(){
            var control = document.forms[0]['text'];
            var Direction = control.selectionDirection;
            alert(Direction);
        }
    </script>
    <form>
        <input type="test" name="text">
        <input type="button" value="点击我" οnclick="AD()">
    </form>
</body>
</html>

2.13.4 indeterminate属性和image提交按钮的height属性和width属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="checkbox" indeterminate id="cb">属性测试
    <script>
        var cb = document.getElementById("cb");
        cb.indeterminate = true;
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="test.jsp" method="post">
        姓名：<input type="text" name="name">
        <input type="image" src="123.jpg" alt="编辑" width="50" height="50">

    </form>
</body>
</html>

3.1.1 CSS基础——介绍和语法

这里有两个文件，第一个是42.css

h1,h2,a{
    color: blue;
    font-size: 50px;
}

body{
    color: blueviolet;
}

p{
    color:green;
}

第二个文件是42.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="42.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>
        应用样式表
    </h1>
    <a>这是a标签的样式</a>
    <h2>h2样式</h2>
    <h3>h3样式</h3>  <!--有单独定义的，则生效单独定义的。
                        因为此处h3没有单独定义，所以h3是body的样式-->
    <p>hello, this is p</p>
</body>
</html>

3.1.2 CSS基础——派生选择器

第一个文件是mycss.css

li strong{
    color: red;
}

strong{
    color: blue;
}

第二个文件是43.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="mycss.css" tyoe="text/css" rel="stylesheet">
</head>
<body>
    <p><strong>p标签 Hello CSS</strong></p>
    <ul>
        <li><strong>li标签：Hello CSS</strong></li>
    </ul>
</body>
</html>