下拉列表，文本域，复选框
<!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}