html基础知识总结2

时间：2021-03-24 00:00:34

下拉列表，文本域，复选框

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>MyGod</title>

</head>

<body>

   <form action="http://baidu.com" method="get">

          <input type="checkbox" id="a">

          <label for="a">sss</label>

          <label><input type="radio" value="2">男</label><br>

          <select name="xllb">

                <optgroup label="一">

                    <option> 1 </option>

                    <option> 2 </option>

                    <option> 3 </option>

                </optgroup>

          </select>

          <textarea rows="5" cols="10" placeholder="请输入文本"></textarea>

          <input type="submit" formaction="http://www.baidu.net">

   </form>

</body>

</html>

重写form的一些属性

<form action="http://baidu.com" method="get">

          <input type="submit" formaction="http://www.sina.com">

   </form>

output元素和进度条

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>MyGod</title>

</head>

<body>

   <form action="http://baidu.com" id="myform" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">

   <input type="number" id="num1">+

   <input type="number" id="num2">=

   <output id="num" for="num1 num2"></output><br>

   <!-- <progress value="30" max="100"><br> -->

   <meter max="100" min="0" value="30" high="80" low="20"></meter> <br>

   <meter max="100" min="0" value="10" high="80" low="20"></meter> <br>

   <meter max="100" min="0" value="90" high="80" low="20" optimum="60"></meter> <br>

   </form>

</body>

</html>

边框fieldset

<fieldset>

            <legend>用户注册</legend>

            账号: <input type="text">

            密码: <input type="password">

        </fieldset>

canvas画直线

<canvas id="mycanvas" width="500" height="300"></canvas>

    <script type="text/javascript">

        var canvas=document.getElementById('mycanvas');

        var context=canvas.getContext('2d');

        context.moveTo(0,0);

        context.lineTo(100,100);

        context.stroke();

    </script>

css样式

@charset='utf-8';

p{color: red}

h1{color: blue}

div{background: red; color: green}

调用css外部样式

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>MyGod</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <h1>Welcome</h1>

    <p>To My World</p>

    <div>How are you?</div>

</body>

</html>

样式的优先顺序：

设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式

内联样式>内部样式>外部样式

样式选择器

@charset='utf-8';

/**{color: blue} /*通用选择器*/

#a{background-color: green}/*id选择器*/

.b{background-color: cyan}/*类选择器*/

h1.b{background-color: black}

input[value][id]{background-color: orange}

input[id="but"][value]{background-color: yellow}

相关文章