html css基础笔记

上传者：rocket51 2024-11-03 22:55:23上传 ZIP文件 40.11MB 热度 35次

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发的基石，尤其对于初学者来说，掌握这两项技术是至关重要的。HTML负责网页的结构，而CSS则负责网页的样式与布局，两者结合能创建出美观且功能丰富的网页。

HTML是一种标记语言，用于定义网页内容的结构和意义。它的基本元素由标签构成，例如、、、

、
等。是整个文档的根元素，包含元信息，如标题（</code>），而<code><body></code>则包含用户可见的内容。<code><h1></code>到<code><h6></code>定义了不同级别的标题，<code><p></code>用于创建段落。</p> <p>此外，还有许多其他元素，如链接（<code><a></code>）、图像（<code><img></code>）、列表（<code><ul></code>、<code><ol></code>、<code><li></code>）等，用于构建丰富的页面结构。 <strong>CSS</strong>则是用来美化<strong>HTML</strong>元素的工具，通过选择器（如元素选择器、类选择器、ID选择器等）来定位需要应用样式的元素。<strong>CSS</strong>可以设置颜色（如<code>color</code>）、字体（<code>font-family</code>、<code>font-size</code>）、背景（<code>background-color</code>）、边框（<code>border</code>）、布局（如<code>margin</code>、<code>padding</code>、<code>display</code>）等属性。浮动（<code>float</code>）和定位（<code>position</code>）是控制元素位置的关键，而Flexbox和Grid布局则是现代网页设计中更为灵活和强大的布局解决方案。</p> <p>在<strong>HTML5</strong>中，引入了许多新的语义化元素，如<code><header></code>、<code><nav></code>、<code><section></code>、<code><article></code>、<code><aside></code>、<code><footer></code>，这些元素有助于更好地表达网页内容的结构。此外，<strong>HTML5</strong>还增强了多媒体支持，如音频（<code><audio></code>）和视频（<code><video></code>）元素，以及canvas（画布）和svg（矢量图形）等，使得网页可以集成更丰富的互动性和可视化效果。</p> </div> </di> <div class="article" style="margin-top:0px;margin-bottom: 15px;"> <div > <div class="col-xs-4 col-sm-4"> <a class="views-num" href="#download" title="html css基础笔记下载地址">下载地址</a> </div> <div class="col-xs-4 col-sm-4"> <a href="#pinglun" title="html css基础笔记怎么样">用户评论</a> </div> <div class="col-xs-4 col-sm-4"> <a href="#gdownload" title="更多和html css基础笔记相关的下载">更多下载</a> </div> </div> </div> </div> </div> </article> <div class="panel-group"> <div class="panel panel-default" id="download"> <div class="panel-heading"> <div class="panel-title"> <span>下载地址</span> </div> </div> <div class="row"> <div class="panel-body"> <div class="col-xs-3 cursors" > <a href="" target="_blank" class="downloadbtn"></a> <a id="downloadbtn" data-id="8557908" class="cursors btn btn-danger"><i class="iconfont icon-xiazai" aria-hidden="true"></i> 立即下载</a> </div>  </div> </div> </div> </div> <div class="panel-group" > <div class="panel panel-default" id="pinglun"> <div class="panel-heading"> <div class="panel-title"> <span>用户评论</span> </div> </div> <div class="row"> <div class="panel-body"> <div id="comment-container">  <div id="commentlist">  </div>   <div id="commentpager" class="text-center"> </div>   <div class="mt-3"> <form action="/api/Frontend/comment" method="post" id="commentpostform"> <input type="hidden" name="type" value="archives"/> <input type="hidden" name="aid" value="8557908"/> <input type="hidden" name="pid" id="pid" value="0"/> <div class="input-group"> <input name="content" class="form-control" disabled placeholder="下载后再发表评论" id="commentcontent" cols="6" rows="5" tabindex="4"> <span class="input-group-btn"> <a id="submit" class="btn btn-dangers btn-sm" disabled type="button">发表评论</a> </span> </div> </form> </div>  </div> </div> </div> </div> </div> <div class="panel-group" > <div class="pl-0 pr-0 " > <div class="panel-body _downbdad"></div> </div> </div> <aside> <ul class="panel-body pl-0 pr-0" id="gdownload"> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/8557908.html" title="html css基础笔记"><span><em class='text-danger fst-normal'>html</em> <em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>基础</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> HTML（HyperText Markup Language）和CSS（Cascading Styl... </p> <div class="list-ifon"> 大小：40.11MB | 2024-11-03 22:55:23 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/4970518.html" title="html css JavaScript基础笔记"><span><em class='text-danger fst-normal'>html</em> <em class='text-danger fst-normal'>css</em> JavaScript<em class='text-danger fst-normal'>基础</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> HTML，CSS，JavaScript本文是由笔者2011年学习HTML，CSS，JavaScrip... </p> <div class="list-ifon"> 大小：0B | 2020-06-03 15:35:43 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/7642291.html" title="html和css基础笔记.pdf"><span><em class='text-danger fst-normal'>html</em>和<em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>基础</em><em class='text-danger fst-normal'>笔记</em>.pdf</span></a> </div> <p class="list-descri"> 看黑马程序员总结的一点小笔记 </p> <div class="list-ifon"> 大小：310KB | 2021-04-19 10:50:05 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/8557754.html" title="html与css基础总结与笔记"><span><em class='text-danger fst-normal'>html</em>与<em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>基础</em>总结与<em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> HTML和CSS基础总结，适合入门web和初学者。了解HTML的基本结构，如标签、元素和属性，以及C... </p> <div class="list-ifon"> 大小：34.88KB | 2024-11-03 16:21:14 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/4030427.html" title="html css笔记"><span><em class='text-danger fst-normal'>html</em> <em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> 本笔记采用节点图模式完整详细介绍html/css基础语法样式 </p> <div class="list-ifon"> 大小：0B | 2019-09-12 02:17:55 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/2811344.html" title="HTML css笔记"><span><em class='text-danger fst-normal'>HTML</em> <em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> htmlcss经典笔记以及面试题记答案 </p> <div class="list-ifon"> 大小：0B | 2019-05-28 04:58:28 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/5861268.html" title="JavaSE html加CSS基础笔记归纳.zip"><span>JavaSE <em class='text-danger fst-normal'>html</em>加<em class='text-danger fst-normal'>CSS</em><em class='text-danger fst-normal'>基础</em><em class='text-danger fst-normal'>笔记</em>归纳.zip</span></a> </div> <p class="list-descri"> html+css 详细笔记 Java se全套笔记 Mysql数据库基础笔记 Java面试题基础部分... </p> <div class="list-ifon"> 大小：120KB | 2020-08-20 16:24:07 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/3079461.html" title="html css基础"><span><em class='text-danger fst-normal'>html</em> <em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>基础</em></span></a> </div> <p class="list-descri"> 一些简单的基础，其中包括HTML的结构，标签，属性，相对路径，布局，CSS方面有选择器，背景，块级元... </p> <div class="list-ifon"> 大小：0B | 2019-06-05 15:44:52 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/2811331.html" title="html基础笔记"><span><em class='text-danger fst-normal'>html</em><em class='text-danger fst-normal'>基础</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> 燕十八的html+js笔记，方便复习查看 </p> <div class="list-ifon"> 大小：0B | 2019-05-28 04:58:11 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/5892871.html" title="css_html笔记"><span><em class='text-danger fst-normal'>css</em>_<em class='text-danger fst-normal'>html</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> css 笔记我自己写的,大家可以看看 HTML标记段落标记 </p> <div class="list-ifon"> 大小：168KB | 2020-08-21 10:06:02 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/2811345.html" title="html css javascript笔记"><span><em class='text-danger fst-normal'>html</em> <em class='text-danger fst-normal'>css</em> javascript<em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> htmlcssjavascript笔记 </p> <div class="list-ifon"> 大小：0B | 2019-05-28 04:58:29 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/3271009.html" title="html网页css笔记"><span><em class='text-danger fst-normal'>html</em>网页<em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> Html webpage css notes </p> <div class="list-ifon"> 大小：0B | 2019-06-28 04:12:22 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/2513929.html" title="html加css笔记"><span><em class='text-danger fst-normal'>html</em>加<em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> html+css标签属性大全，全面实用 </p> <div class="list-ifon"> 大小：0B | 2019-05-15 11:33:15 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/361584.html" title="html和css笔记"><span><em class='text-danger fst-normal'>html</em>和<em class='text-danger fst-normal'>css</em><em class='text-danger fst-normal'>笔记</em></span></a> </div> <p class="list-descri"> html和css笔记基础内容自己做的比较 </p> <div class="list-ifon"> 大小：0B | 2018-12-25 23:42:33 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/6435737.html" title="HTML CSS基础自学笔记实现静态网页"><span><em class='text-danger fst-normal'>HTML</em> <em class='text-danger fst-normal'>CSS</em><em class='text-danger fst-normal'>基础</em>自学<em class='text-danger fst-normal'>笔记</em>实现静态网页</span></a> </div> <p class="list-descri"> 该资源为HTML和CSS自学笔记,介绍了HTML基本标签及其使用,另有CSS基础部分,含有CSS特性... </p> <div class="list-ifon"> 大小：265KB | 2020-11-06 00:47:52 </div> </article> </li> <li class=" article-section article-item mb-1"> <article> <div class="list-title htmer"> <a target="_blank" href="/q/a/8100552.html" title="前端笔记详解- HTML,CSS,JavaScript基础知识"><span>前端<em class='text-danger fst-normal'>笔记</em>详解- <em class='text-danger fst-normal'>HTML</em>,<em class='text-danger fst-normal'>CSS</em>,JavaScript<em class='text-danger fst-normal'>基础</em>知识</span></a> </div> <p class="list-descri"> 本文详细讲解了HTML,CSS,JavaScript基础知识，包括标签，样式，语法，常用函数等。无论... </p> <div class="list-ifon"> 大小：67.5KB | 2023-03-30 09:48:02 </div> </article> </li> </ul> </aside> </main> <div class="article-sidebar col-md-4"> <div class="panel panel-default hot-article"> <div class="panel-body "> <div id="cao_widget_userinfo-2" class="widget widget-userinfo"> <div class="author-card_content"> <div class="author_avatar"> <div class="col-auto"> <img alt="" data-src="/assets/img/avatar.png" class="avatar avatar-96 photo qq img-circle" width="50" src="/assets/img/avatar.png"> </div> <div class="col n2"> <a href="/u/2742712.html" target="_blank">rocket51</a> <small class="d-block">资源：7 粉丝：0</small> </div> <div class="col-auto"> <a href="javascript:;" class="btn btn-danger btn-sm click-follow" data-authorid="2742712" data-status="0">+关注</a> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4 mb-2" style="height: 45px"> <a target="_blank" href="/index/user/uploadfile" class="col-xs-12 btn btn-danger btn-lg"><i class="iconfont icon-shangchuan" aria-hidden="true"></i> 上传资源</a> </div> <div class="col-md-4 article-sidebar"> <div class="panel panel-default hot-article"> <div class="panel-body _aboutdownload"></div> </div> </div> <div class="col-md-4 article-sidebar"> <div class="panel panel-default hot-article"> <div class="panel-heading"> <span class="panel-title">免责说明</span> </div> <div class="panel-body"> <div class="panel-body"> 本站只是提供一个交换下载平台，下载的内容为本站的会员网络搜集上传分享交流使用,有完整的也有可能只有一分部,相关内容的使用请自行研究,主要是提供下载学习交流使用,一般不免费提供其它各种相关服务! 本站内容泄及的知识面非常广,请自行学习掌握,尽量自已动脑动手解决问题,实践是提高本领的途径,下载内容不代表本站的观点或立场!如本站不慎侵犯你的权益请联系我们,我们将马上处理撤下所有相关内容！联系邮箱：server@dude6.com </div> </div> </div> </div> </div> </div> <div id="opendown" class="opendown" style="display: none"></div> <div id="paydown" class="opendown" style="display: none"></div> <script>var downid = 8557908</script> <footer class="footer" style="clear:both"> <p class="copyright"> Copyright © 2017-2020 qcsdn.cn All Rights Reserved 码姐姐版权所有 <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备16081799号</a> | <a href="http://qcsdn.com/sitemap.xml">网站地图</a> </p> </script></footer> <div id="floatbtn"> <a id="fb-tipoff" class="hover" href="http://www.qcsdn.cn/index/user/uploadfile" target="_blank"> <i class="iconfont icon-shangchuan" aria-hidden="true"></i> </a> <div id="share"></div> <a id="feedback" class="hover" href="#pinglun"> <i class="iconfont icon-pinglun" aria-hidden="true"></i> </a> <a id="back-to-top" class="hover" href="javascript:;" style="display: none"> <i class="iconfont icon-jiantoushang" aria-hidden="true"></i> </a> </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="/assets/js/publicejs.js?v=1762971300"></script> <script type="text/javascript" src="/assets/js/common.js?v=1762971300"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?749301c3e053cc620e6b0d1682744892"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6566807", container: "_downbdad", async: true }); (window.slotbydup = window.slotbydup || []).push({ id: "u6889993", container: "_aboutdownload", async: true }); $('#share').share({sites: ['qzone', 'qq', 'weibo','wechat']}); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script> </body> </html>