HTML常见标签学习与笔记总结_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:21:19
原创
1454人浏览过

HTML其实就是把页面的数据封装并加上标签

表头

浏览器标题栏显示的内容 <p><base> 有href和target属性,href指定网页中所有超链接的基本目录,target指定打开超链接的方式,如_blank为在新窗口中打开</p> <p><meta> name网页的描述信息,可以设置网页搜索的关键字keywords。http-equiv可以设置自动刷新</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">如:<meta http-equiv=”refresh” content=”3”;url=http://sina.com.cn” /> 设置3秒自动刷新</pre><div class="contentsignin">登录后复制</div></div> </p> <p><link> rel属性:描述目标文档与当前文档的关系,type:文档类型,media:目标文档在哪种设备上起作用,如显示器或打印机<br></p> <h3>表单</h3> <form> <p>用来与服务端进行交互,意味着只要不和服务端交互就不需要form标签<br></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</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></select> </h4> <p>每一个下拉菜单项都由option进行封装<br></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><select> <option></option> <option></option></select></pre><div class="contentsignin">登录后复制</div></div> </p> <h4 class="mt-10">文本区域<textarea></textarea> </h4> <h4 class="mt-10">表格</h4> <table> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><table> <tbody> <tr> <td></td> <td></td> </tr> </tbody></table></pre><div class="contentsignin">登录后复制</div></div> </p> <h4 class="mt-10">超链接<a></a> </h4> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><a href="http://www.sina.com.cn" target="_blank"> 新浪网站<a></pre><div class="contentsignin">登录后复制</div></div> </p> <p>http:为解析程序,即使用http协议解析链接。设置target属性,在新窗口打开链接。</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/934"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679998883677.png" alt="叮当好记-AI音视频转图文"> </a> <div class="aritcle_card_info"> <a href="/ai/934">叮当好记-AI音视频转图文</a> <p>AI音视频转录与总结,内容学习效率 x10!</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="叮当好记-AI音视频转图文"> <span>193</span> </div> </div> <a href="/ai/934" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="叮当好记-AI音视频转图文"> </a> </div> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><a href="mailto:abc@163.com?subject=haha&cc=qq@163.com" > 联系我们 </a> </pre><div class="contentsignin">登录后复制</div></div> </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快捷键,焦点也会到了文本框内</label></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><label acdessky=”u” for=”userid”><tr><td> 用户名(U):</td><td> <input type=”text” name=”user” id=”userid” /></td></tr></label></pre><div class="contentsignin">登录后复制</div></div> </p> <br> </li> <li>书写链接地址时,必须避免重定向,例如:href="http://sina.com/",即须在URL地址后面加上"/"</li> <li>在页面中尽量避免使用style属性,即style="..."</li> <li> <p>必须为含有描述性的表单元素(input,textarea)添加label。</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><p><label for=”name”>姓名:</label><input type=”text” id=”name” /></p></pre><div class="contentsignin">登录后复制</div></div> </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!</p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </table> </form>
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号