极客学院的前端课程(八)

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值