html基础知识总结2

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

<!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>

View Code

重写form的一些属性

<form action="http://baidu.com" method="get">
          <input type="submit" formaction="http://www.sina.com">
   </form>

View Code

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>

View Code

边框fieldset

<fieldset>
            <legend>用户注册</legend>
            账号: <input type="text">
            密码: <input type="password">
            
        </fieldset>

View Code

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>

View Code

css样式

@charset='utf-8';
p{color: red}
h1{color: blue}
div{background: red; color: green}

View Code

调用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>

View Code

样式的优先顺序：

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

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

样式选择器

@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}

View Code