-
标签说明
http://www.html5star.com/manual/html5label-meaning/ -
格式
<标签 属性="值" 属性2="值2"> -
生成模板
!+tab -
文档模板
<!-- <!DOCTYPE html> 告诉浏览器这是一个html文件 --> <!-- <html lang="en"> 包裹所有html代码，lang='en' lang='zh-CN' 中文网站--> <head> <!-- <meta charset="UTF-8"> 元信息 编写网页中的一些辅助信息 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> -
语义化标签，编译seo
1. 每个页面只有一个h1标签，h2可以多个 2.<strong></strong>强调性更强 <em></em> 斜体强调 <sub> 下标 <sup> 上标 <del> 删除 <ins> 插入 -
图片标签与属性
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=968859261,3896020000&fm=26&gp=0.jpg" alt="图片显示不出来的时候的提示信息" title="200" width="200" height="200"> -
超链接
<base> 标签为页面上的所有链接规定默认地址或默认目标。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <base target="_blank"> <base href="http://www.w3school.com.cn/i/" /> </head> <body> <a href="www.baidu.com" target="">dafdff</a> </body> </html> 锚点： # + id属性 # + name属性 <a href="#miao" target="">miao</a> <h1 id="miao">dfkajf</h1> -
特殊符号
© ® < > & ¥ ° -
列表
<ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> ul {list-style-type:lower-alpha;} ul { list-style-image:url('sqpurple.gif'); } 定义列表 <dl> <dt>html</dt> <dd>超文本标记语言</dd> </dl> -
表格
table cation thead tbody tfoot Cell padding 来创建单元格内容与其边框之间的空白。 Cell spacing 增加单元格之间的距离 <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。 # span number 规定列组应该横跨的列数。 <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <table border="1"> <caption>Monthly savings</caption> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </tbody> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> -
表单
<form id="form1" action="/test" method="GET" onsubmit="return checkForm()"> <select id="myselect" name="myselect" onchange="handleChange()"> <option selected disabled>请选择</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> </select> <input type="text" name="user" id="user" value=""/> <input type="password" name="psd" id="psd" value=""> <input type="checkbox" name="mycheckbox" value="1"/>1 <input type="checkbox" name="mycheckbox" value="2"/>2 <input type="checkbox" name="mycheckbox" value="3"/>3 <input type="checkbox" name="mycheckbox" value="4"/>4 <input type="checkbox" name="mycheckbox" value="5"/>5 <input type="radio" name="myradio" value="1" id="girl"/><label for="girl">girl</label> <input type="radio" name="myradio" value="2" id="boy"/><label for="boy">boy</label> <input type="submit" value="提交"> <button type="submit">提交</button> </form> <script type="text/javascript"> function checkForm(){ //text password var user= document.getElementById('user').value; var psw= document.getElementById('psd').value; console.log(user,psw); console.log($('#user').val(),$('#psd').val()); //checkbox var obj = document.getElementsByName("mycheckbox"); var check_arr = []; for (var i = 0; i < obj.length; i++) { if (obj[i].checked) check_arr.push(obj[i].value); } console.log(check_arr); //将hobby复选框的值 总和成 ,, 的形式 var hobbies=''; $("[name='mycheckbox']:checked").each(function(index, element) { hobbies += $(this).val()+","; }); hobbies = hobbies.slice(0,-1); console.log(hobbies); //radio var a = document.getElementsByName("myradio"); var n; for(var i=0;i<a.length;i++) { if(a[i].checked) {n = a[i].value;break;} } console.log(n); var radioJquery = $("input[type='radio'][name='myradio']:checked").val(); $("input[type='radio'][name='radio']:checked").html() console.log(radioJquery); //selectbox var myselect=document.getElementById("myselect"); var index=myselect.selectedIndex; console.log(myselect.options[index].value) var options=$("#myselect option:selected"); console.log(options.val());//获取value console.log(options.text());//获取文本 } </script>
网友评论