html的基本规范

晚间偷亲

HTML,即超文本标记语言(HyperText Markup Language),是构建网页和网上应用的基础性语言。它由一系列的元素组成,这些元素被用来标记网页上的不同部分。以下是HTML的一些基本规范和使用指南:

1. 文档类型声明

每个HTML文档都应以文档类型声明开始,这告诉浏览器该文档是HTML5文档。HTML5的文档类型声明非常简单:


2. HTML元素

HTML文档由元素组成,元素由标签表示。大多数HTML元素都是成对出现的,例如

...

表示一个段落,而像
这样的自闭合标签则不需要结束标签。

3. 属性

元素可以有属性,属性提供了有关HTML元素的额外信息。属性总是以名称-值对的形式出现,并且总是在元素的开始标签中指定。例如:

html的基本规范

4. 文档结构

一个标准的HTML文档通常包括以下结构:

  • :根元素,包含了文档的所有内容。
  • :包含了文档的元数据,如标题、字符集、样式表和脚本。
  • </strong>:定义文档的标题,显示在浏览器的标题栏或标签页上。</li> <li><strong><body></strong>:包含了可见的页面内容。</li> </ul> <h3>5. 语义化标签</h3> <p>HTML5引入了一系列新的语义化标签,如<strong><header></strong>、<strong><nav></strong>、<strong><section></strong>、<strong><article></strong>、<strong><aside></strong>和<strong><footer></strong>等,这些标签帮助定义网页的不同部分,使得网页结构更加清晰,也有利于搜索引擎优化(SEO)。</p> <h3>6. 文本内容</h3> <p>HTML提供了多种文本内容的标签,如<strong><h1></strong>到<strong><h6></strong>的标题标签,<strong><p></strong>的段落标签,<strong><a></strong>的链接标签等。正确使用这些标签可以增强内容的可读性和可访问性。</p> <h3>7. 图像和链接</h3> <p>图像可以通过<strong><img></strong>标签嵌入,需要指定源文件(<strong>src</strong>属性)和替代文本(<strong>alt</strong>属性)。链接则通过<strong><a></strong>标签创建,使用<strong>href</strong>属性指定链接目标。</p> <h3>8. 列表</h3> <p>HTML支持有序列表(<strong><ol></strong>)和无序列表(<strong><ul></strong>),列表项使用<strong><li></strong>标签。</p> <h3>9. 表单和输入</h3> <p>表单通过<strong><form></strong>标签定义,输入元素如文本框、按钮等通过<strong><input></strong>标签实现,<strong><input></strong>标签有多种类型,如<strong>text</strong>、<strong>submit</strong>、<strong>checkbox</strong>等。</p> <h3>10. 表格</h3> <p>表格通过<strong><table></strong>标签创建,行使用<strong><tr></strong>标签,单元格使用<strong><td></strong>(表格数据)或<strong><th></strong>(表格标题)标签。</p> <h3>11. 多媒体</h3> <p>HTML5支持嵌入音频和视频内容,分别通过<strong><audio></strong>和<strong><video></strong>标签实现。</p> <h3>12. 响应式设计</h3> <p>随着移动设备的普及,响应式设计变得非常重要。HTML提供了<strong><meta></strong>标签中的<strong>viewport</strong>属性来控制布局的伸缩性。</p> <h3>13. 无障碍访问(Accessibility)</h3> <p>为了使网页对所有用户包括残障用户友好,应使用合适的语义化标签,并确保所有媒体内容都有替代文本。</p> <h3>14. 注释</h3> <p>在HTML中,可以使用<strong><!--</strong>和<strong>--></strong>来注释内容,这些内容不会被浏览器显示。</p> <h3>15. 遵守标准</h3> <p>编写HTML代码时,应遵循W3C的标准和规范,确保代码的兼容性和有效性。</p> <h3>总结</h3> <p>HTML作为构建网页的基础,其规范和正确使用对于创建结构良好、可访问性强、用户友好的网页至关重要。随着Web技术的发展,HTML也在不断地更新和扩展,以适应新的网络需求和设备。开发者应持续学习最新的HTML规范,以保持其技能的现代性和相关性。</p></div> </div> <footer class="entry-footer"> <div class="readlist ds-reward-stl"> <div class="read_outer zanter" title="打赏"> <p class="dasbox"><a href="javascript:;" onclick="reward()" class="dashang" title="打赏,支持一下"><i class="icon font-yen"></i>打赏</a></p> </div> <div id="mClick" class="mobile_click"> <div class="share"> <div class="Menu-item"><a href="javascript:Share('tqq')"><i class="icon font-qq"></i> QQ 分享</a></div> <div class="Menu-item"><a href="javascript:Share('sina')"><i class="icon font-weibo"></i> 微博分享</a></div> <div class="Menu-item"><i class="icon font-weixin"></i> 微信分享<img alt="微信扫一扫" src="https://www.hhuun.com/zb_users/theme/hopelee/plugin/api.php?url=https://www.hhuun.com/q/19927.html"></div> </div> <i class="icon font-fenxiang" title="分享转发"></i>分享 </div> </div> <div class="post-tags"><a href="https://www.hhuun.com/tags-22.html" rel="tag" title="查看标签为《文档》的所有文章">文档</a><a href="https://www.hhuun.com/tags-124.html" rel="tag" title="查看标签为《标签》的所有文章">标签</a><a href="https://www.hhuun.com/tags-91.html" rel="tag" title="查看标签为《元素》的所有文章">元素</a></div> </footer> <div class="statement yc"> 版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com </div> </article> </div> <div class="part-mor box-show wow fadeInDown"><!--相关文章--> <h3 class="section-title"><span>相关阅读</span></h3> <div class="pic-box-list clearfix"> <!--相关分类--> <li><a href="https://www.hhuun.com/q/22402.html" title="导航条样式" target="_blank">导航条样式</a></li> <li><a href="https://www.hhuun.com/q/22396.html" title="网易博客登录入口" target="_blank">网易博客登录入口</a></li> <li><a href="https://www.hhuun.com/q/22395.html" title="dns服务器地址设置" target="_blank">dns服务器地址设置</a></li> <li><a href="https://www.hhuun.com/q/22393.html" title="asp整站" target="_blank">asp整站</a></li> <li><a href="https://www.hhuun.com/q/22391.html" title="电脑修改mac地址" target="_blank">电脑修改mac地址</a></li> <li><a href="https://www.hhuun.com/q/22388.html" title="rest接口开发" target="_blank">rest接口开发</a></li> <li><a href="https://www.hhuun.com/q/22386.html" title="html网页模板免费" target="_blank">html网页模板免费</a></li> <li><a href="https://www.hhuun.com/q/22385.html" title="手帐边框设计" target="_blank">手帐边框设计</a></li> </div> </div> <script>//分享代码 function Share(pType){ var pTitle = "html的基本规范"; //待分享的标题 var pImage = "image.jpg"; //待分享的图片 var pContent = "HTML,即超文本标记语言(HyperText Markup Language),是构建网页和网上应用的基础性语言。它由一系列的元素组成,这些元素被用来标记..."; //待分享的内容 var pUrl = window.location.href; //当前的url地址 var pObj = jQuery("div[class='yogo_hc']").find("h4"); if(pObj.length){ pTitle = pObj.text();} var pObj = jQuery("div[class='yogo_hcs']").find("em"); if(pObj.length){ pContent = pObj.text(); } var pObj = jQuery("div[class='con_cons']").find("img"); if(pObj.length){ pImage = jQuery("div[class='con_cons']").find("img",0).attr("src"); } shareys(pType, pUrl, pTitle,pImage, pContent); } function shareys(a, c, b, e, d) { switch (a) { case "sina": c = "//service.weibo.com/share/share.php?title\x3d" + encodeURIComponent("\u300c" + b + "\u300d" + d + "\u9605\u8bfb\u8be6\u60c5" + c) + "\x26pic\x3d" + e +"&appkey=&searchPic=true"; window.open(c); break; case "tqq": c = "//connect.qq.com/widget/shareqq/index.html?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26pics\x3d" + e; window.open(c); break; case "qzone": c = "//sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26site\x3d\x26pics\x3d" + encodeURIComponent(e) + "\x26desc\x3d" + encodeURIComponent(d) + "\x26summary\x3d" + encodeURIComponent(d); window.open(c) } }; </script> </div> <aside class="side fr mside"> <section class="widget wow fadeInDown" id="divTags"> <h3 class="widget-title">标签列表</h3> <ul class="widget-box divTags"><li><a title="文件" href="https://www.hhuun.com/tags-5.html">文件<span class="tag-count"> (513)</span></a></li> <li><a title="属性" href="https://www.hhuun.com/tags-14.html">属性<span class="tag-count"> (1451)</span></a></li> <li><a title="字符串" href="https://www.hhuun.com/tags-19.html">字符串<span class="tag-count"> (327)</span></a></li> <li><a title="服务器" href="https://www.hhuun.com/tags-24.html">服务器<span class="tag-count"> (211)</span></a></li> <li><a title="方法" href="https://www.hhuun.com/tags-29.html">方法<span class="tag-count"> (908)</span></a></li> <li><a title="定义" href="https://www.hhuun.com/tags-35.html">定义<span class="tag-count"> (257)</span></a></li> <li><a title="函数" href="https://www.hhuun.com/tags-38.html">函数<span class="tag-count"> (892)</span></a></li> <li><a title="命令" href="https://www.hhuun.com/tags-42.html">命令<span class="tag-count"> (441)</span></a></li> <li><a title="数据库" href="https://www.hhuun.com/tags-67.html">数据库<span class="tag-count"> (356)</span></a></li> <li><a title="对象" href="https://www.hhuun.com/tags-77.html">对象<span class="tag-count"> (240)</span></a></li> <li><a title="元素" href="https://www.hhuun.com/tags-91.html">元素<span class="tag-count"> (538)</span></a></li> <li><a title="返回" href="https://www.hhuun.com/tags-113.html">返回<span class="tag-count"> (268)</span></a></li> <li><a title="浏览器" href="https://www.hhuun.com/tags-135.html">浏览器<span class="tag-count"> (272)</span></a></li> <li><a title="数组" href="https://www.hhuun.com/tags-139.html">数组<span class="tag-count"> (209)</span></a></li> <li><a title="网站" href="https://www.hhuun.com/tags-146.html">网站<span class="tag-count"> (437)</span></a></li> <li><a title="用户" href="https://www.hhuun.com/tags-171.html">用户<span class="tag-count"> (806)</span></a></li> <li><a title="数据" href="https://www.hhuun.com/tags-182.html">数据<span class="tag-count"> (353)</span></a></li> <li><a title="代码" href="https://www.hhuun.com/tags-209.html">代码<span class="tag-count"> (278)</span></a></li> <li><a title="语言" href="https://www.hhuun.com/tags-245.html">语言<span class="tag-count"> (263)</span></a></li> <li><a title="编程" href="https://www.hhuun.com/tags-320.html">编程<span class="tag-count"> (439)</span></a></li> <li><a title="系统" href="https://www.hhuun.com/tags-358.html">系统<span class="tag-count"> (232)</span></a></li> <li><a title="网页" href="https://www.hhuun.com/tags-723.html">网页<span class="tag-count"> (258)</span></a></li> <li><a title="游戏" href="https://www.hhuun.com/tags-946.html">游戏<span class="tag-count"> (237)</span></a></li> <li><a title="开发者" href="https://www.hhuun.com/tags-1054.html">开发者<span class="tag-count"> (251)</span></a></li> <li><a title="软件" href="https://www.hhuun.com/tags-1761.html">软件<span class="tag-count"> (218)</span></a></li> </ul> </section><section class="widget wow fadeInDown" id="side_random"> <h3 class="widget-title">随便看看</h3> <div class="r-item-btn"><i class="icon font-suijibofang"></i>换一换</div><ul class="widget-box side_random"><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/21933.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/9.jpg" alt="编程设计作品"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/21933.html" title="编程设计作品" target="_blank">编程设计作品</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/21218.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/6.jpg" alt="php储存源码"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/21218.html" title="php储存源码" target="_blank">php储存源码</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/20608.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/4.jpg" alt="mysql触发器删除"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/20608.html" title="mysql触发器删除" target="_blank">mysql触发器删除</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/22354.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/3.jpg" alt="易语言网页"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/22354.html" title="易语言网页" target="_blank">易语言网页</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/20376.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/8.jpg" alt="css设置左边框"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/20376.html" title="css设置左边框" target="_blank">css设置左边框</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/22259.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/1.jpg" alt="dom常考面试题"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/22259.html" title="dom常考面试题" target="_blank">dom常考面试题</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/20824.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/8.jpg" alt="容器类的代表"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/20824.html" title="容器类的代表" target="_blank">容器类的代表</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/20233.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/9.jpg" alt="java编程免费工具"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/20233.html" title="java编程免费工具" target="_blank">java编程免费工具</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/21221.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/8.jpg" alt="找不到rpm命令"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/21221.html" title="找不到rpm命令" target="_blank">找不到rpm命令</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.hhuun.com/q/20594.html" target="_blank"><img width="480" height="300" src="https://www.hhuun.com/zb_users/theme/hopelee/style/noimg/9.jpg" alt="进程隐藏工具64位"></a><h4 class="r-title"><a href="https://www.hhuun.com/q/20594.html" title="进程隐藏工具64位" target="_blank">进程隐藏工具64位</a></h4></div></li></ul> </section><section class="widget wow fadeInDown" id="divPrevious"> <h3 class="widget-title">最近发表</h3> <ul class="widget-box divPrevious"><div class="side_new"> <div class="side_new_dot"></div> <div class="side_new_inner"> <div class="side-new-title"><a href="https://www.hhuun.com/q/22403.html" title="点击阅读电气织梦源码" target="_blank">电气织梦源码</a></div> <div class="side-new-time"><em>案例</em><span class="spot"></span>2024年11月21日</div> </div> </div><div class="side_new"> <div class="side_new_dot"></div> <div class="side_new_inner"> <div class="side-new-title"><a href="https://www.hhuun.com/q/22402.html" title="点击阅读导航条样式" target="_blank">导航条样式</a></div> <div class="side-new-time"><em>教程</em><span class="spot"></span>2024年11月21日</div> </div> </div><div class="side_new"> <div class="side_new_dot"></div> <div class="side_new_inner"> <div class="side-new-title"><a href="https://www.hhuun.com/q/22401.html" title="点击阅读java入门书籍选择" target="_blank">java入门书籍选择</a></div> <div class="side-new-time"><em>案例</em><span class="spot"></span>2024年11月21日</div> </div> </div><div class="side_new"> <div class="side_new_dot"></div> <div class="side_new_inner"> <div class="side-new-title"><a href="https://www.hhuun.com/q/22400.html" title="点击阅读大唐荣耀2免费观看" target="_blank">大唐荣耀2免费观看</a></div> <div class="side-new-time"><em>技术</em><span class="spot"></span>2024年11月21日</div> </div> </div><div class="side_new"> <div class="side_new_dot"></div> <div class="side_new_inner"> <div class="side-new-title"><a href="https://www.hhuun.com/q/22399.html" title="点击阅读dubbo框架" target="_blank">dubbo框架</a></div> <div class="side-new-time"><em>案例</em><span class="spot"></span>2024年11月21日</div> </div> </div><div class="side_new"> <div class="side_new_dot"></div> <div class="side_new_inner"> <div class="side-new-title"><a href="https://www.hhuun.com/q/22398.html" title="点击阅读计算机算法题" target="_blank">计算机算法题</a></div> <div class="side-new-time"><em>技术</em><span class="spot"></span>2024年11月21日</div> </div> </div><div class="side_new"> <div class="side_new_dot"></div> <div class="side_new_inner"> <div class="side-new-title"><a href="https://www.hhuun.com/q/22397.html" title="点击阅读数据库学习技巧" target="_blank">数据库学习技巧</a></div> <div class="side-new-time"><em>技术</em><span class="spot"></span>2024年11月21日</div> </div> </div></ul> </section> </aside> </div> <div class="listree-box"> <h3 class="listree-titles"><a class="listree-btn" title="展开">目录[+]</a></h3> <ul id="listree-ol" style="display:none;"></ul> </div> <div class="hidebody"></div> <div class="showbody"> <a class="showbody_c" href="javascript:void(0)" onclick="reward()" title="关闭"><img src="https://www.hhuun.com/zb_users/theme/hopelee/style/images/close.png" alt="取消" /></a> <div class="reward_img"> <img class="alipay_qrcode" src="https://www.hhuun.com/zb_users/theme/hopelee/style/images/weixin.jpg" alt="微信二维码" /> </div> <div class="reward_bg"> <div class="pay_box choice" data-id="https://www.hhuun.com/zb_users/theme/hopelee/style/images/weixin.jpg"> <span class="pay_box_span"></span> <span class="qr_code"><img src="https://www.hhuun.com/zb_users/theme/hopelee/style/images/wechat.svg" alt="微信二维码" /></span> </div> <div class="pay_box" data-id="https://www.hhuun.com/zb_users/theme/hopelee/style/images/alipay.jpg"> <span class="pay_box_span"></span> <span class="qr_code"><img src="https://www.hhuun.com/zb_users/theme/hopelee/style/images/alipay.svg" alt="支付宝二维码" /></span> </div> </div> </div> <script> $(function(){ $(".pay_box").click(function(){ $(this).addClass('choice').siblings('.pay_box').removeClass('choice'); var dataid=$(this).attr('data-id'); $(".reward_img img").attr("src",dataid); }); $(".hidebody").click(function(){ reward(); }); }); function reward(){ $(".hidebody").fadeToggle(); $(".showbody").fadeToggle(); } </script></main> <footer class="footer bg-dark"> <div class="container clearfix"> <div class="footer-fill"> <div class="footer-column"> <div class="footer-menu"> <a rel="nofollow" href="https://www.hhuun.com/3.html" target="_blank">关于我们</a> <a rel="nofollow" href="https://www.hhuun.com/2.html" target="_blank">联系我们</a> <a rel="nofollow" href="https://www.hhuun.com/1.html" target="_blank">免责声明</a> </div> <div class="footer-copyright text-xs"> 胡侬编程的资料均为作者提供或者网友推荐收集整理的,仅供学习和研究使用,不得用于任何商业用途。 如果您发现本站侵害了您的版权,请立即联系我们,本站将第一时间进行相关处理。E-mail:284563525@qq.com.. </div> </div> </div> <div class="footer-hidden-xs"> <div class="f-last-line "><p></p></div> </div> <div class="footer-links"> <div class="footer-RunTime"><span class="rt-times">页面加载时长:0.158秒</span><span class="rt-sql">数据库查询:9 次</span><span class="rt-memory">占用内存:4.13MB</span></div> <span><a class="ico-ico" href="http://beian.miit.gov.cn" rel="nofollow" target="_blank" title="鄂ICP备2023019274号-7"><img src="https://www.wpfsdl.com/zb_users/theme/hopelee/style/images/icp.png" alt="鄂ICP备2023019274号-7">鄂ICP备2023019274号-7</a>. 安全运行<span id="iday"></span>天 <script>function siteRun(d){var nowD=new Date();return parseInt((nowD.getTime()-Date.parse(d))/24/60/60/1000)} document.getElementById("iday").innerHTML=siteRun("2023/01/01");</script></span> </div> </div> <div id="backtop" class="backtop"> <div class="bt-box top" title="返回顶部"><i class="icon font-top"></i></div> <div class="bt-box bottom" title="网页底部"><i class="icon font-bottom"></i></div> </div> <div class="none"> <script src="https://www.hhuun.com/zb_users/theme/hopelee/script/custom.js?v=2024-03-13"></script> <script src="https://www.hhuun.com/zb_users/theme/hopelee/script/wow.min.js"></script> <script src="https://www.hhuun.com/zb_users/theme/hopelee/script/jquery.lazy.js"></script> <script src="https://www.hhuun.com/zb_users/theme/hopelee/script/view-image.min.js"></script> </div> </footer> </body> </html><!--158.39 ms , 9 queries , 4433kb memory , 0 error-->