html快速入门教程--知乐空间

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1、tml的固定结构

一个HTML文件是有自己固定的结构的。
<html>
…
…
代码讲解：
称为根标签，所有的网页标签都在中。
标签用于定义文档的头部，它是所有头部元素的容器。
头部元素有、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。</p><p>在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</p></blockquote><p><strong><br>我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。</strong></p><blockquote class=wp-block-quote><p>2、<head>标签的作用</p></blockquote><blockquote class=wp-block-quote><p>文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。</p><p><strong>下面这些标签可用在 head 部分：</strong></p><p><head><br><title>…

3、标签</p></blockquote><blockquote class=wp-block-quote><p>在<title>和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用。网页制作学习交流群，四九四零六，四九三四。
于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独
一无二的title。
例如：

hello world

标签的内容“hello world”会在浏览器中的标题栏上显示出来，</p></blockquote><blockquote class=wp-block-quote><p>4、标签的用途</p></blockquote><blockquote class=wp-block-quote><p>我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上<br>的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。</p><p>文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使<br>用 em 标签表示强调等等。</p><p><strong>讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？</strong></p><p>① 更容易被搜索引擎收录。</p><p>②.更容易让屏幕阅读器读出网页内容。</p></blockquote></div> <div class="content-more-1"><div class="gradient-1"></div> <label for="contTab-1" class="readmore-1">点击展开全文</label></div> </div> <div class="pagination pagination-multi"><ul></ul></div> <div class="article-tags"></div> <div class="ad"><script src=https://www.zlme.com/d/js/acmsd/thea6.js></script></div> <p class="post-copyright">版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 ZLME@xxxxxxxx@hotmail.com 举报，一经查实，立刻删除。</p> </article> <nav class="article-nav"> <span class="article-nav-prev">上一篇<br> <a href='https://www.zlme.com/post/2022/03/25/82404.html'>手机上市时间查询</a></span> <span class="article-nav-next">下一篇<br> <a href='https://www.zlme.com/post/2022/03/25/82406.html'>mysql sql语句优化</a></span> </nav> <h3 class="title" id="comments"> <div class="text-muted pull-right"> </div> </h3> <link href="https://www.zlme.com/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="https://www.zlme.com/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="https://www.zlme.com/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea> <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="90%" height="40" bgcolor="#FFFFFF"> 验证码：<input name="key" type="text" class="inputText" size="16" /> <img src="https://www.zlme.com/e/ShowKey/?v=pl" width="60" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='https://www.zlme.com/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="10%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 0px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="82405" /> <input name="classid" type="hidden" id="classid" value="12" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="https://www.zlme.com/post/2022/03/25/82405.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <script src="https://www.zlme.com/e/extend/infocomment/commentajax.php?classid=12&id=82405"></script> </div> </div> </div> <aside class="speedbar-wrap"> <div class="speedbar"> <ul class="speedbar-menu"> <li><a target="_blank" href="/remen">热门排行</a></li> <li><a target="_blank" href="/tui">推荐阅读</a></li> <li><a target="_blank" href="/zan">点赞热门</a></li> <li><a target="_blank" href="/site_misc/about/">关于本站</a></li> <li><a target="_blank" href="/site_misc/ads/">联系信箱</a></li> <li><a target="_blank" href="/site_misc/team/">本站动态</a></li> <li><a target="_blank" href="/e/DoInfo/ChangeClass.php?mid=1">会员投稿</a></li> </ul> </aside> <aside class="sidebar"> <div class="widget widget_ui_ad"> <div class="item"><script src=https://www.zlme.com/d/js/acmsd/thea4.js></script></div> </div> <div class="widget article-social"> <a href="JavaScript:makeRequest('/e/public/digg/?classid=12&id=82405&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');" class="action action-like"><i class="glyphicon glyphicon-thumbs-up"></i> (<span id="diggnum"><script src=https://www.zlme.com/e/public/ViewClick/?classid=12&id=82405&down=5></script></span>)</a> </div> <div class="widget widget_ui_viewposts"> <h3 class="title"><strong>热门阅读</strong></h3> <ul class="posts-xs"> <li class="item-1"><a href="https://www.zlme.com/post/2022/03/31/122241.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/2022-07-29/c925a273fc6e2f0aa28424b32974a2dd.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/2022-07-29/c925a273fc6e2f0aa28424b32974a2dd.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>优步注册司机条件要求，优步司机注册申请官网</h2> <p> <time>03-31</time> <span class="post-views">阅读(18629)</span></p> </a></li> <li class="item-1"><a href="https://www.zlme.com/post/2022/04/02/130207.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=http://img.cnmzd.com/d/file/2022-03-22-10/tu2eg2k4v42503150.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=http://img.cnmzd.com/d/file/2022-03-22-10/tu2eg2k4v42503150.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>海信电视开机广告怎么去除，教你两招去除开机广告教程</h2> <p> <time>04-02</time> <span class="post-views">阅读(6214)</span></p> </a></li> <li class="item-1"><a href="https://www.zlme.com/post/2020/01/01/99.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/ohp0t3cqhps.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/ohp0t3cqhps.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>有趣的玻璃树屋幼儿园，室内与室外完美融合</h2> <p> <time>01-12</time> <span class="post-views">阅读(5044)</span></p> </a></li> <li class="item-1"><a href="https://www.zlme.com/post/2022/04/01/124958.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=http://img.cnmzd.com/d/file/2022-03-22-01/mo3z3oktx2e429518.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=http://img.cnmzd.com/d/file/2022-03-22-01/mo3z3oktx2e429518.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>抖音用户有多少，2020年抖音用户数量</h2> <p> <time>04-01</time> <span class="post-views">阅读(4383)</span></p> </a></li> <li class="item-1"><a href="https://www.zlme.com/post/2020/01/01/138.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/tzmycj441z0.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/tzmycj441z0.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>英国一老头因无聊花10年修剪了长达45米的绿色龙雕塑</h2> <p> <time>06-17</time> <span class="post-views">阅读(2936)</span></p> </a></li> <li class="item-1"><a href="https://www.zlme.com/post/2022/04/03/133449.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=http://img.cnmzd.com/d/file/2022-03-22-05/lreqp3ovl2x456984.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=http://img.cnmzd.com/d/file/2022-03-22-05/lreqp3ovl2x456984.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>无线同屏器什么牌子好，10大高清无线投屏器排行榜</h2> <p> <time>04-03</time> <span class="post-views">阅读(2718)</span></p> </a></li> </ul> </div> <div class="widget widget_ui_ad"> <div class="item"><script src=https://www.zlme.com/d/js/acmsd/thea2.js></script></div> </div> <div class="widget widget_ui_tags"> <h3 class="title"><strong>热门话题</strong></h3> <div class="items"> <a title="4个话题" href="/e/tags/?tagname=让你">让你</a> <a title="3个话题" href="/e/tags/?tagname=教你">教你</a> <a title="3个话题" href="/e/tags/?tagname=又有">又有</a> <a title="2个话题" href="/e/tags/?tagname=河上">河上</a> <a title="2个话题" href="/e/tags/?tagname=带你">带你</a> <a title="2个话题" href="/e/tags/?tagname=世界上">世界上</a> <a title="2个话题" href="/e/tags/?tagname=微距">微距</a> <a title="1个话题" href="/e/tags/?tagname=无法下定决心">无法下定决心</a> <a title="1个话题" href="/e/tags/?tagname=却是难以持久的。有的人遇到事情就优柔寡断">却是难以持久的。有的人遇到事情就优柔寡断</a> <a title="1个话题" href="/e/tags/?tagname=用线">用线</a> <a title="1个话题" href="/e/tags/?tagname=史瑞克">史瑞克</a> <a title="1个话题" href="/e/tags/?tagname=现实中">现实中</a> <a title="1个话题" href="/e/tags/?tagname=用书">用书</a> <a title="1个话题" href="/e/tags/?tagname=这样的人有可能会一时取得显著的好成绩">这样的人有可能会一时取得显著的好成绩</a> <a title="1个话题" href="/e/tags/?tagname=塞纳">塞纳</a> <a title="1个话题" href="/e/tags/?tagname=不高兴的时候就垂头丧气">不高兴的时候就垂头丧气</a> <a title="1个话题" href="/e/tags/?tagname=能够独立思考和决策有的人容易激动而且高兴">能够独立思考和决策有的人容易激动而且高兴</a> <a title="1个话题" href="/e/tags/?tagname=万一真的被套牢了或出现了亏损等情况，这样">万一真的被套牢了或出现了亏损等情况，这样</a> <a title="1个话题" href="/e/tags/?tagname=泰坦">泰坦</a> <a title="1个话题" href="/e/tags/?tagname=因此千万不要以为自己可以成为常胜将军。要">因此千万不要以为自己可以成为常胜将军。要</a> <a title="1个话题" href="/e/tags/?tagname=句话">句话</a> <a title="1个话题" href="/e/tags/?tagname=的人">的人</a> <a title="1个话题" href="/e/tags/?tagname=之感">之感</a> <a title="1个话题" href="/e/tags/?tagname=要不要">要不要</a> <a title="1个话题" href="/e/tags/?tagname=更具">更具</a> <a title="1个话题" href="/e/tags/?tagname=更美好">更美好</a> <a title="1个话题" href="/e/tags/?tagname=聊聊什么类型的人更适合股票的投资每个人的">聊聊什么类型的人更适合股票的投资每个人的</a> <a title="1个话题" href="/e/tags/?tagname=可做">可做</a> <a title="1个话题" href="/e/tags/?tagname=小工具">小工具</a> <a title="1个话题" href="/e/tags/?tagname=你就可以">你就可以</a> </div> </div> <div class="widget widget_ui_posts"> <h3 class="title"><strong>特别推荐</strong></h3> <ul class="posts-xs"> <li class="item-"><a href="https://www.zlme.com/post/2020/01/01/119.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/m4j0f4k4vhg.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/m4j0f4k4vhg.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>充电宝能净化空气？EVE负离子移动电源有招</h2> <p> <time>06-17</time> <span class="post-views">阅读(1853)</span></p> </a></li> <li class="item-"><a href="https://www.zlme.com/post/2020/01/01/118.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/sql3qrcnoyh.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/sql3qrcnoyh.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>点亮插头有效降低被触电的几率</h2> <p> <time>06-17</time> <span class="post-views">阅读(618)</span></p> </a></li> <li class="item-"><a href="https://www.zlme.com/post/2020/01/01/116.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/0n41rcyvowj.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/0n41rcyvowj.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>Hyper头盔带你走入另一个全新世界</h2> <p> <time>06-17</time> <span class="post-views">阅读(462)</span></p> </a></li> <li class="item-"><a href="https://www.zlme.com/post/2020/01/01/117.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/lslvhmzbdjb.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/lslvhmzbdjb.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>史上最有趣的24款手表个个价值不菲</h2> <p> <time>06-17</time> <span class="post-views">阅读(771)</span></p> </a></li> <li class="item-"><a href="https://www.zlme.com/post/2020/01/01/115.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/ieqldirikvh.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/ieqldirikvh.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>可以一起动手做饭的烹饪桌 ENYO</h2> <p> <time>06-17</time> <span class="post-views">阅读(299)</span></p> </a></li> <li class="item-"><a href="https://www.zlme.com/post/2020/01/01/114.html"><img src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/nbyoss4orpa.jpg&h=180&w=240&zc=1" data-src="https://www.zlme.com/e/extend/timthumb.php?src=/d/file/20140617/nbyoss4orpa.jpg&h=180&w=240&zc=1" class="thumb"/> <h2>利用错觉设计的3D立体灯泡</h2> <p> <time>06-17</time> <span class="post-views">阅读(261)</span></p> </a></li> </ul> </div> </aside> </section> <footer class="footer"> © 2020 <a href="https://www.zlme.com/">知乐空间</a> 感谢 <a href="https://zlme.com" target="_blank">知乐网</a> 技术支持 <a href="https://beian.miit.gov.cn/" target="_blank"></a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?a3da7d2f01cb19eca8eeef883b28b3c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></footer> <script> var jsui={ uri: '/skin/ecms009' }; </script>   <script type='text/javascript' src='/skin/ecms009/js/one.js?ver=5.6'></script> </body> </html>