html基础知识总结2

发布时间:2017-1-19 8:16:57 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"html基础知识总结2 ",主要涉及到html基础知识总结2 方面的内容,对于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

上一篇:data URI scheme
下一篇:hive的数据压缩

相关文章

相关评论