HTML常见标签学习与笔记总结_html/css_WEB-ITnose
HTML其实就是把页面的数据封装并加上标签
表头
浏览器标题栏显示的内容</p> <p><base> 有href和target属性，href指定网页中所有超链接的基本目录，target指定打开超链接的方式，如_blank为在新窗口中打开</p> <p><meta> name网页的描述信息，可以设置网页搜索的关键字keywords。http-equiv可以设置自动刷新</p> <p class="sycode"> <pre class="precsshui">如：<meta http-equiv=”refresh” content=”3”;url=http://sina.com.cn” /> 设置3秒自动刷新</script></pre> </p> <p> rel属性：描述目标文档与当前文档的关系，type：文档类型，media：目标文档在哪种设备上起作用，如显示器或打印机<br /></p> <h3>表单<form></h3> <p>用来与服务端进行交互，意味着只要不和服务端交互就不需要form标签<br /></p> <h4 class="mt-10"><input>的type属性</h4> <ol> <li><p>text:文本框</p></li> <li><p>password:密码框</p></li> <li><p>radio:单选框，需要指定同一组（即name值相同）</p></li> <li><p>checkbox:复选框</p></li> <li><p>file:文件选择</p></li> <li><p>hidden:隐藏组件。不会在页面上显示，但其定义的name和value可以提交给服务器</p></li> <li><p>botton:按钮组件。默认没有效果，可以通过注册事件并加入自定义效果</p></li> <li><p>submie:提交按钮</p></li> <li><p>reset:重置按钮</p></li> <li><p>image:图像组件。可以通过image的src属性连接一个按钮图片代替submit<br /><br /></p></li> </ol> <h4 class="mt-10">下垃菜单<select></h4> <p>每一个下拉菜单项都由option进行封装<br /></p> <p class="sycode"> <pre class="precsshui"><select> <option></option> <option></option></select></script></pre> </p> <h4 class="mt-10">文本区域<textarea></h4> <h4 class="mt-10">表格<table></h4> <p class="sycode"> <pre class="precsshui"><table> <tbody> <tr> <td></td> <td></td> </tr> </tbody></table></script></pre> </p> <h4 class="mt-10">超链接</h4> <p class="sycode"> <pre class="precsshui"></script></pre> </p> <p>http:为解析程序，即使用http协议解析链接。设置target属性，在新窗口打开链接。</p> <p class="sycode"> <pre class="precsshui"> 联系我们 </script></pre> </p> <p>当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlook.</p> <p>链接讯雷的解析程序可以自己百度，这里就不说了。</p> <h4 class="mt-10">form标签常见属性</h4> <p>action<br /></p> <p>method(get和post)<br /></p> get和post区别: <p>get会将提交的数据显示在浏览器的地址栏上，post则不会</p> <p>get提交的数据的体积受地址栏的限制（即不能超过地址栏的长度），post没有这种限制</p> <p>get对于敏感信息不安全（如用户名和密码），post安全</p> <p>get会将提交的信息封装在请求行，即http消息头之前，post会将提交信息封装在数据何体中，即http消息头之后的空行后</p> <p>对于服务器来说：<br /></p> <p>表单form提交数据尽量用post，因为涉及到编码问题。tomcat服务端默认的解码是ISO8859-1<br /></p> <p>对于post提交的中文，在服务端可以直接使用setCharacterEncoding("gbk")就可以解决。而对于get提交的中文，在服务端只能通过ISO8859-1将数据编码一次，再通过指定的码表（如GBK）解码。</p> <h4 class="mt-10">其他</h4> <ol> <li><p><label>标签：当点击用户名这栏时（不是点击文本框）或按Ctrl+u快捷键，焦点也会到了文本框内</p> <p class="sycode"> <pre class="precsshui"><label acdessky=”u” for=”userid”><tr><td> 用户名(U)：</td><td> <input type=”text” name=”user” id=”userid” /></td></tr></label></script></pre> </p><br /></li> <li>书写链接地址时，必须避免重定向，例如：href="http://sina.com/"，即须在URL地址后面加上"/"</li> <li>在页面中尽量避免使用style属性，即style="..."</li> <li><p>必须为含有描述性的表单元素(input,textarea)添加label。</p> <p class="sycode"> <pre class="precsshui"><p><label for=”name”>姓名：</label><input type=”text” id=”name” /></p></script></pre> </p><br /></li> <li>能以背景形式呈现的图片，尽量写入CSS样式中</li> <li>重要图片必须加上alt属性</li> <li>class和id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。id原则上都是由分发框架文件时命名的，为javaScript预留钩子的除外。</li> <li><p>为javaScript预留钩子的命名，请以js_起始，比如： js _show、js _hide。</p></li> </ol> <p>over! </div>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function(){
layui.code({
elem: 'pre', //默认值为.layui-code
about:false,
title:'HTML常见标签学习与笔记总结_html/css_WEB-ITnose代码块',
encode: true //是否转义html标签。默认不开启
});
});
</script>
<footer class="comm-footer">
<ul class="channels">
<li>
<a target="_top" href="/system/">操作系统</a>
</li><li>
<a target="_top" href="/down/">程序下载</a>
</li><li>
<a target="_top" href="/jquery/">jquery插件库</a>
</li><li>
<a target="_top" href="/jiaoben/">编程</a>
</li><li>
<a target="_top" href="/db/">数据库</a>
</li><li>
<a target="_top" href="/tools/">在线工具</a>
</li><li>
<a target="_top" href="/framebook/">框架书籍</a>
</li><li>
<a target="_top" href="/xitongjiaocheng/">系统教程</a>
</li><li>
<a target="_top" href="/ruanjianxiazai/">软件下载</a>
</li> </ul>
<ul class="versions">
<li>
<a href="https://m.gxlcms.com" class="active">触屏版</a>
</li>
<li>
<a href="https://www.gxlcms.com" target="_top">电脑版</a>
</li>
</ul>
<p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></p>
</footer>
</body>
</html> 