HTML常见标签学习与笔记总结_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:21 AM

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

表头

浏览器标题栏显示的内容 <p><base> 有href和target属性，href指定网页中所有超链接的基本目录，target指定打开超链接的方式，如_blank为在新窗口中打开</p> <p><meta> name网页的描述信息，可以设置网页搜索的关键字keywords。http-equiv可以设置自动刷新</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'>如：<meta http-equiv=”refresh” content=”3”;url=http://sina.com.cn” /> 设置3秒自动刷新</pre> </p> <p><link> rel属性：描述目标文档与当前文档的关系，type：文档类型，media：目标文档在哪种设备上起作用，如显示器或打印机<br></p> <h3 id="表单">表单</h3> <form> <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></select> </h4> <p>每一个下拉菜单项都由option进行封装<br></p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><select> <option></option> <option></option></select></pre> </p> <h4 class="mt-10">文本区域<textarea></textarea> </h4> <h4 id="表格">表格</h4> <table> <p class="sycode"> <pre class='brush:php;toolbar:false;'><table> <tbody> <tr> <td></td> <td></td> </tr> </tbody></table></pre> </p> <h4 class="mt-10">超链接<a></a> </h4> <p class="sycode"> <pre class='brush:php;toolbar:false;'><a href="http://www.sina.com.cn" target="_blank"> 新浪网站<a></pre> </p> <p>http:为解析程序，即使用http协议解析链接。设置target属性，在新窗口打开链接。</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><a href="mailto:abc@163.com?subject=haha&cc=qq@163.com" > 联系我们 </a> </pre> </p> <p>当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlook.</p> <p>链接讯雷的解析程序可以自己百度，这里就不说了。</p> <h4 id="form标签常见属性">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 id="其他">其他</h4> <ol> <li> <p><label>标签：当点击用户名这栏时（不是点击文本框）或按Ctrl+u快捷键，焦点也会到了文本框内</label></p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><label acdessky=”u” for=”userid”><tr><td> 用户名(U)：</td><td> <input type=”text” name=”user” id=”userid” /></td></tr></label></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='brush:php;toolbar:false;'><p><label for=”name”>姓名：</label><input type=”text” id=”name” /></p></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!</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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

See all articles