DIV教程.pdf
大小:267.71KB
价格:38积分
下载量:0
评分:
5.0
上传者:glseda
更新日期:2025-09-22
DIV教程图片

DIV教程

资源内容介绍

### DIV教程知识点总结#### 第1天:选择什么样的DOCTYPE- **知识点介绍**:文档类型声明(DOCTYPE)是HTML或XHTML文档的第一行,用于指定文档遵循的标准版本。- **重要性**:正确的DOCTYPE声明是确保文档能被浏览器正确解析的基础。- **XHTML 1.0提供的三种DTD**: - **过渡型 (Transitional)**:适用于包含HTML 4.01兼容标签的文档。允许使用表现层标签和属性。 - **DTD声明**: ```html ``` - **严格型 (Strict)**:不允许使用任何表现层标签或属性,强调内容与样式完全分离。 - **DTD声明**: ```html ``` - **框架型 (Frameset)**:专门用于包含框架集的页面。 - **DTD声明**: ```html ```#### 第2天:什么是名字空间 (Namespace)- **知识点介绍**:命名空间是一种避免标识符冲突的技术,在XHTML中尤为重要,因为它基于XML,而XML允许用户定义自己的标签。- **命名空间的作用**: - 避免不同来源的标签冲突。 - 通过URL进行唯一标识。- **命名空间声明**: - 在XHTML文档头部添加`xmlns`属性。 - 示例: ```html ```#### 第3天:定义语言编码- **知识点介绍**:定义文档的语言编码非常重要,确保文本能够被正确显示。- **如何定义**: - 使用``标签。 - 示例: ```html ```#### 第4天:调用样式表- **知识点介绍**:通过链接外部CSS文件或内联样式来定义页面的视觉样式。- **链接外部CSS文件**: - 使用``标签。 - 示例: ```html ```#### 第5天:head区的其他设置- **知识点介绍**:``部分除了包含基本的文档元数据外,还可以加入其他设置,如图标、脚本等。- **可能的设置项**: - ``:文档标题。 - `<meta>`:额外的元信息。 - `<script>`:JavaScript脚本。#### 第6天:XHTML代码规范- **知识点介绍**:遵循XHTML的规范,确保文档结构清晰且易于维护。- **关键点**: - 自闭合标签应使用斜杠。 - 所有属性都应加上引号。 - 所有标签必须关闭。#### 第7天:CSS入门- **知识点介绍**:了解CSS的基本概念,学习如何选择元素并为其应用样式。- **CSS选择器**: - 类选择器(`.classname`) - ID选择器(`#idname`) - 标签选择器(`element`)#### 第8天:CSS布局入门- **知识点介绍**:掌握CSS布局的基础技巧,包括盒子模型、定位等。- **CSS布局技术**: - 浮动(`float`) - 定位(`position`) - 盒子模型(`margin`, `padding`, `border`)#### 第9天:第一个CSS布局实例- **知识点介绍**:通过实际示例演示如何使用CSS布局技巧创建简单的页面布局。- **实例要点**: - 使用`div`元素作为容器。 - 应用合适的CSS规则来实现所需的布局效果。#### 第10天:自适应高度- **知识点介绍**:使元素的高度根据其内容自动调整。- **实现方法**: - 使用`min-height`设置最小高度。 - 结合`overflow:auto`处理溢出内容。#### 第11天:不用表格的菜单- **知识点介绍**:传统的菜单常使用表格布局,但现在更推荐使用`div`和CSS来创建响应式菜单。- **替代方案**: - 使用`ul`和`li`创建列表结构。 - 通过CSS设置样式和布局。#### 第12天:校验及常见错误- **知识点介绍**:使用工具验证XHTML和CSS代码,识别并修正错误。- **校验工具**: - W3C XHTML校验器 - W3C CSS校验器- **常见错误**: - 未关闭的标签。 - 错误的属性值。 - 不符合语法的CSS规则。以上知识点为DIV教程的核心内容,通过系统学习这些内容,可以帮助开发者深入了解并熟练掌握HTML和CSS的基础知识及应用技巧。 </div></div></div></div><div class="bg-primary-800 rounded-xl p-6 mt-6 border border-primary-700 mb-6" id="comment-area"><h2 class="text-xl font-bold text-primary-text mb-4">用户评论 (0)</h2><div class="border-t pt-6 border-primary-700" id="comment-list-area"></div><div><input type="hidden" name="pid" value="0" id="pid" /><input type="hidden" name="aid" value="10922" id="aid" /><div class="p-4 rounded-lg mb-6"><h3 class="text-lg font-semibold text-primary-text mb-3">发表评论</h3><div class="flex flex-col md:flex-row md:items-center mb-4"><div class="w-full md:w-2/3 mb-3 md:mb-0 md:pr-4"><label class="block text-sm font-medium text-primary-text mb-1">您的昵称:</label><input type="text" id="nickname" class="w-full bg-primary-900/70 rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary-accent text-primary-text border border-primary-700" placeholder="请输入昵称" min="1" maxlength="20" value="机智的黑猫"></div><div class="w-full md:w-full"><label class="block text-sm font-medium text-primary-text mb-1">评分</label><div class="flex text-amber-400 text-xl"><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="1"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="2"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="3"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="4"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="5"></i></div></div></div><div class="mb-4"><label class="block text-sm font-medium text-primary-text mb-1">评论内容:</label><textarea class="w-full bg-primary-900/70 rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary-accent text-primary-text border border-primary-700" rows="3" placeholder="写下您的评论..." id="comment-content"></textarea></div><div class="mb-4"><label class="block text-sm font-medium text-primary-text mb-1">验证码:</label><input type="text" id="verifycode" class="bg-primary-900/70 rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary-accent text-primary-text border border-primary-700 mb-2" placeholder="请输入验证码" min="1" maxlength="20" value=""><img src="/captcha" alt="captcha" onclick="this.src = '/captcha?r=' + Math.random();" id="imgverify" class="cursor-pointer"/></div><div class="flex justify-end"><button id="submit-comment" class="bg-primary-accent hover:bg-primary-accent2 text-primary-900 font-medium py-2 px-6 rounded-lg transition-colors duration-300">提交评论</button></div></div></div></div><script> const stars = document.querySelectorAll('[data-rating]'); let currentRating = 5; stars.forEach(star => { star.addEventListener('click', function () { const rating = parseInt(this.getAttribute('data-rating')); currentRating = rating; stars.forEach(s => { const starRating = parseInt(s.getAttribute('data-rating')); if (starRating <= rating) { s.classList.remove('far'); s.classList.add('fas'); } else { s.classList.remove('fas'); s.classList.add('far'); } }); }); star.addEventListener('mouseover', function () { const rating = parseInt(this.getAttribute('data-rating')); stars.forEach(s => { const starRating = parseInt(s.getAttribute('data-rating')); if (starRating <= rating) { s.classList.add('text-amber-500'); } else { s.classList.remove('text-amber-500'); } }); }); star.addEventListener('mouseout', function () { stars.forEach(s => { s.classList.remove('text-amber-500'); const starRating = parseInt(s.getAttribute('data-rating')); if (starRating <= currentRating) { s.classList.remove('far'); s.classList.add('fas'); } else { s.classList.remove('fas'); s.classList.add('far'); } }); }); }); document.getElementById("submit-comment").addEventListener('click', function () { console.log("开始评论"); let comment_data = {}; comment_data['nickname'] = document.getElementById('nickname') ? document.getElementById('nickname').value : ''; comment_data["content"] = document.getElementById('comment-content').value; comment_data["verifycode"] = document.getElementById('verifycode').value; comment_data['type'] = 'download'; comment_data['aid'] = '10922'; console.log(comment_data); const params = new URLSearchParams(); for (const key in comment_data) { params.append(key, comment_data[key]); } const formData = params.toString(); fetch("/api/comment/add", { method:"POST", headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: formData }).then((response) => response.json()) .then((data) => { console.log("Success:", data); if (data.code == 1) { layer.msg(data.msg); window.location.hash = 'comment-area'; window.location.reload(); } else { layer.msg(data.msg); $("#imgverify").click(); } }) });</script><div class="bg-primary-800 rounded-xl shadow-md p-4 lg:p-6 text-primary-text"><h2 class="text-xl font-bold mb-4">相关资源</h2><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><a href="/download/10921" target="_blank"><div class="border rounded-lg p-4 hover:shadow-md transition-shadow duration-300 border-primary-700"><div class="flex items-center mb-3"><div class="text-green-600 rounded-lg p-2 mr-3"><i class="fas fa-file-zipper"></i></div><h3 class="font-semibold line-clamp-1">jfreechart</h3></div><p class="text-primary-textLight text-sm mb-3 line-clamp-1">jfreechart(各种图的小实例,入门的,易看易懂)</p><div class="flex justify-between items-center"><span class="text-xs text-primary-textLight">1.27MB</span><span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">23积分</span></div></div></a><a href="/download/10920" target="_blank"><div class="border rounded-lg p-4 hover:shadow-md transition-shadow duration-300 border-primary-700"><div class="flex items-center mb-3"><div class="text-green-600 rounded-lg p-2 mr-3"><i class="fas fa-file-zipper"></i></div><h3 class="font-semibold line-clamp-1">编译原理课后习题答案</h3></div><p class="text-primary-textLight text-sm mb-3 line-clamp-1">dad wd gewrgw we4 gw4</p><div class="flex justify-between items-center"><span class="text-xs text-primary-textLight">7.73KB</span><span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">22积分</span></div></div></a><a href="/download/10919" target="_blank"><div class="border rounded-lg p-4 hover:shadow-md transition-shadow duration-300 border-primary-700"><div class="flex items-center mb-3"><div class="text-green-600 rounded-lg p-2 mr-3"><i class="fas fa-file-zipper"></i></div><h3 class="font-semibold line-clamp-1">语音识别技术</h3></div><p class="text-primary-textLight text-sm mb-3 line-clamp-1">语音识别,上海交大ppt</p><div class="flex justify-between items-center"><span class="text-xs text-primary-textLight">266.97KB</span><span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">13积分</span></div></div></a><a href="/download/10918" target="_blank"><div class="border rounded-lg p-4 hover:shadow-md transition-shadow duration-300 border-primary-700"><div class="flex items-center mb-3"><div class="text-green-600 rounded-lg p-2 mr-3"><i class="fas fa-file-zipper"></i></div><h3 class="font-semibold line-clamp-1">usb连接232(usb-serial controller d驱动)</h3></div><p class="text-primary-textLight text-sm mb-3 line-clamp-1">usb连接232(usb-serial controller d驱动)</p><div class="flex justify-between items-center"><span class="text-xs text-primary-textLight">4.3MB</span><span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">38积分</span></div></div></a></div></div><script> let download_need = '38'; let downapi ="/api/frontend.download/down"; document.querySelector("#download_btn").addEventListener("click", function (e) { let message ="此资源免费,无需登录即可下载确定要下载吗?"; let free_time = parseInt('1') * 24; if (download_need > 0) { message = `下载需要${download_need}积分(1积分=1元),确定要下载吗?(自己上传的资源不扣积分) <p>成功下载后${free_time}小时内免费下载</p>`; } layer.confirm(` <h6 style="color:red">${message}</h6><div class="download-notice__main"><p style="color: #374151; font-size: 14px; line-height: 1.8; margin-bottom: 16px;">本站下载资源仅作为文件交换和学习交流平台,提供的下载内容由会员上传、分享与交流使用。本站不对上传的内容负责,内容的完整性、准确性及使用风险由用户自行承担。</p><div style="background: #f9fafb; padding: 16px; border-radius: 8px; margin-bottom: 16px;"><ol><li style="margin-bottom: 12px;list-style:auto"><strong style="color: #3688fc; font-size: 15px;">学习与研究</strong><span style="color: #4b5563; font-size: 14px;">平台内容仅供用户个人学习、研究和教育使用,不得用于任何商业目的。确保合法使用。</span></li><li style="margin-bottom: 12px;list-style:auto"><strong style="color: #3688fc; font-size: 15px;">版权与合法性</strong><span style="color: #4b5563; font-size: 14px;">所有上传与下载的内容,用户应确保不侵犯第三方知识产权。本站不承担用户上传内容的版权责任,亦无法保证内容的真实性、准确性。</span></li><li style="margin-bottom: 12px;list-style:auto"><strong style="color: #3688fc; font-size: 15px;">责任声明</strong><span style="color: #4b5563; font-size: 14px;">本站内容仅供参考,用户应自行判断并承担使用风险。</span></li></ol></div><div style="background: #fff7ed; border-left: 4px solid #ff4d4f; padding: 12px 16px; margin-bottom: 16px; border-radius: 0 8px 8px 0;"><strong style="color: #ff4d4f; font-size: 15px;">侵权处理</strong><p style="color: #4b5563; font-size: 14px; margin: 0;">如果您认为本站的内容侵犯了您的合法权益,请立即联系我们(邮箱:<a href="mailto:9695737@qq.com" style="color: #3688fc;">9695737@qq.com</a>)。我们将在收到通知后尽快处理并删除相关内容。</p></div></div>`, { title:"免责声明", btn: ["同意并下载", '关闭'], btn1: function () { $.ajax({ url: downapi, type:"POST", data:"id=" +"10918", success: function (e) { if (e.code === 1) { layer.msg("已弹出下载"); window.open(downapi +"?url=" + e.data.down_link, '_self'); } else { layer.msg(e.msg); } }, error: function () { layer.msg("请求出错,请联系网站客服"); } }) } }); });</script></main></div></div><footer class="bg-gradient-to-r from-primary-700 to-primary-800 py-4 text-center text-primary-textLight mt-8"> ©2025 神弓 <a href="/article/3009.html">联系方式</a> <a href="/article/3079.html">版权与免责声明</a></footer><script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src ="https://hm.baidu.com/hm.js?cd457e8ec08fe7d49c23209866e1dd2a"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><script>(function(){var el = document.createElement("script");el.src ="https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?9191b64cfda0acdedf2ab3b44279a5436657adf0cc3de6405926ffa6e85e08a5fd5c4a3974f9cd3eeb674bde712b4782cc4f323247d55c2ed2efd47b7c83521adc648ee828d46e7d3689a9c59fd080f6";el.id ="ttzz";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(el, s);})(window)</script><script>(function () {var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';} else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bp, s);})();</script><script type="text/javascript"> var require = { config: JSON.parse('{"site":{"name":"\u795e\u5f13","cdnurl":"","version":"1.6.1.20250430_317","timezone":"Asia\/Shanghai","languages":{"backend":"zh-cn","frontend":"zh-cn"},"gonggao_enable":"0","gonggao_tite":"\u597d\u6d88\u606f!!!","gonggao_content":"\u7f51\u7ad9\u5df2\u5f00\u542f\u7b7e\u5230\u514d\u8d39\u9886\u79ef\u5206\u3002\u7528\u6237\u767b\u5f55\u540e\u5728\u4e2a\u4eba\u4e2d\u5fc3\u2014\u2014\u6bcf\u65e5\u7b7e\u5230\u5904\u53ef\u514d\u8d39\u9886\u53d6\u79ef\u5206!\u6bcf\u5929\u90fd\u53ef\u4ee5\u9886\u53d6!\u6bcf\u6b21\u90fd\u53ef\u4ee5\u53e0\u52a0!\u8fde\u7eed\u7b7e\u5230\u5929\u6570\u8d8a\u591a,\u9886\u53d6\u7684\u79ef\u5206\u8d8a\u591a!"},"modulename":"index","controllername":"download","actionname":"detail","jsname":"frontend\/download","moduleurl":"\/index","language":"zh-cn","__PUBLIC__":"\/","__ROOT__":"\/","__CDN__":"","lantuzhifu":{"default_amount":"10"},"summernote":{"classname":".editor","height":"250","minHeight":"250","placeholder":"","followingToolbar":"0","airMode":"0","toolbar":[["style",["style","undo","redo"]],["font",["bold","underline","strikethrough","clear"]],["fontname",["color","fontname","fontsize"]],["para",["ul","ol","paragraph","height"]],["table",["table","hr"]],["insert",["link","picture","video"]],["select",["image","attachment"]],["view",["fullscreen","codeview","help"]],["code",["code"]]]},"upload_cdnurl":"https:\/\/file.myshengong.com"}'), comment: { 'module_name': 'download' }, 'data_id': '10918' }; </script><script src="/template/20250916/js/system.js?v=1.6.1.20250430_317"></script><script src="/template/20250916/js/main.js?v=1.6.1.20250430_317"></script></body></html>