果真如此？html + css + JavaScript 期末复盘竟能快速上手前端开发

前端

2023-02-15 01:19:36

HTML、CSS 和 JavaScript 复盘：巩固基础、发现不足

前端开发之旅离不开 HTML、CSS 和 JavaScript 的掌握。在这篇文章中，我们将深入回顾这三个核心技术点，巩固基础知识，发现不足之处，并为未来的前端开发学习和实践打下坚实的基础。

1. HTML：表格制作

HTML 中的表格是一种展示数据的常用方式。我们使用

、和表示，列用

标签创建表格。行用

表示。通过设置表格属性（如边框、背景色），我们可以控制其外观。

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
</table>

2. 表单标签：收集用户输入

表单用于收集用户输入数据。我们使用

、、

标签创建表单。每个输入元素都有一个 name 属性，用来指定其名称。提交表单时，数据将被发送到服务器处理。</p>
<pre><code class="hljs"><<span class="hljs-keyword">form</span>>
  <<span class="hljs-keyword">label</span> <span class="hljs-keyword">for</span>=<span class="hljs-string">"name"</span>>姓名：</<span class="hljs-keyword">label</span>>
  <<span class="hljs-keyword">input</span> <span class="hljs-keyword">type</span>=<span class="hljs-string">"text"</span> id=<span class="hljs-string">"name"</span> name=<span class="hljs-string">"name"</span>>

<<span class="hljs-keyword">label</span> <span class="hljs-keyword">for</span>=<span class="hljs-string">"age"</span>>年龄：</<span class="hljs-keyword">label</span>>
  <<span class="hljs-keyword">input</span> <span class="hljs-keyword">type</span>=<span class="hljs-string">"number"</span> id=<span class="hljs-string">"age"</span> name=<span class="hljs-string">"age"</span>>

<button <span class="hljs-keyword">type</span>=<span class="hljs-string">"submit"</span>>提交</button>
</<span class="hljs-keyword">form</span>>
</code></pre>
<p><strong>3. CSS：样式表的优势</strong></p>
<p>CSS 是一种用来控制网页外观的语言。它使我们能够轻松地修改字体、颜色、背景、布局等样式，具有以下优势：</p>
<ul>
<li>提升网页美观度</li>
<li>增强网页易读性</li>
<li>简化网页维护</li>
</ul>
<p><strong>4. 选择器的优先级</strong></p>
<p>CSS 选择器用于指定要应用样式的元素。其优先级决定了多个选择器同时作用于一个元素时，哪个选择器的样式生效。优先级从高到低：</p>
<ul>
<li>id 选择器（#id）</li>
<li>类选择器（.class）</li>
<li>标签选择器（div）</li>
</ul>
<p><strong>5. 盒子定位</strong></p>
<p>盒子定位是一种 CSS 布局方式，允许我们控制元素在网页中的位置。它有四种类型：</p>
<p><strong>静态定位：</strong>  元素在网页中占据固定位置（默认）。</p>
<p><strong>相对定位：</strong>  相对于元素原始位置定位。</p>
<p><strong>绝对定位：</strong>  相对于父元素定位，元素脱离文档流。</p>
<p><strong>固定定位：</strong>  相对于视口定位，元素始终位于视口中的同一位置。</p>
<p><strong>结论</strong></p>
<p>通过复盘 HTML、CSS 和 JavaScript 基础知识，我们可以巩固概念、发现不足，并为未来的前端开发学习做好准备。坚持实践，不断精进，你将在前端开发的道路上大展宏图。</p>
<p><strong>常见问题解答</strong></p>
<p><strong>1. 如何制作带有边框的表格？</strong></p>
<p>使用 CSS 的 border 属性，如：</p>
<pre><code class="hljs"><span class="hljs-selector-tag">table</span> {
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;
}
</code></pre>
<p><strong>2. 如何在表单中验证用户输入？</strong></p>
<p>使用 HTML5 验证属性，如：</p>
<pre><code class="hljs"><<span class="hljs-keyword">input</span> <span class="hljs-keyword">type</span>="email" <span class="hljs-type">name</span>="email" required>
</code></pre>
<p><strong>3. 如何将 CSS 应用于特定元素？</strong></p>
<p>使用 CSS 选择器，如：</p>
<pre><code class="hljs"><span class="hljs-selector-id">#header</span> {
  <span class="hljs-attribute">color</span>: red;
}
</code></pre>
<p><strong>4. 如何使元素相对定位？</strong></p>
<p>使用 CSS 的 position 属性：</p>
<pre><code class="hljs"><span class="hljs-selector-tag">div</span> {
  <span class="hljs-attribute">position</span>: relative;
}
</code></pre>
<p><strong>5. 如何使元素脱离文档流？</strong></p>
<p>使用 CSS 的 position 属性：</p>
<pre><code class="hljs"><span class="hljs-selector-tag">div</span> {
  <span class="hljs-attribute">position</span>: absolute;
}
</code></pre>
</div></div><ins class="adsbygoogle adsbygoogle mb-[20px] md:mb-[15px]" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3142630786" data-ad-format="auto" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" full-width-responsive="true" data-v-101bfb4a></ins><div class="grid lg:flex lg:justify-between lg:items-center gap-y-5 lg:gap-y-0"><div class="flex justify-end items-center gap-x-1.5"><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg t="1704868210317" class="icon flex-shrink-0" viewBox="0 0 1024 1024" fill="#8a8a8a" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2510" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><path d="M512 280.901818c171.752727 0 328.145455 167.098182 387.956364 238.545455C839.68 591.127273 683.287273 757.992727 512 757.992727S183.389091 591.127273 123.578182 519.447273C183.389091 448 339.781818 280.901818 512 280.901818zM512 209.454545C298.356364 209.454545 117.76 412.858182 56.785455 490.123636a46.545455 46.545455 0 0 0 0 58.647273C117.76 626.036364 298.356364 829.44 512 829.44s393.309091-203.403636 454.283636-280.669091a46.545455 46.545455 0 0 0 0-58.647273C905.309091 412.858182 724.712727 209.454545 512 209.454545z m0 238.545455a71.68 71.68 0 1 1-69.818182 71.447273 69.818182 69.818182 0 0 1 69.818182-71.447273z m0-71.68A139.636364 139.636364 0 0 0 382.603636 465.454545a146.385455 146.385455 0 0 0 30.254546 155.927273 137.076364 137.076364 0 0 0 151.970909 30.254546A143.127273 143.127273 0 0 0 651.636364 519.447273a141.265455 141.265455 0 0 0-139.636364-143.127273z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 浏览 </span></button></div><div class="block h-3 border-e border-gray-300 mx-3 dark:border-gray-600"></div><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 喜欢 </span></button></div><div class="block h-3 border-e border-gray-300 mx-3 dark:border-gray-600"></div><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 回复 </span></button></div></div></div></div></div></div><div class="lg:col-span-1 lg:w-full lg:h-full lg:bg-gradient-to-r lg:from-gray-50 lg:via-transparent lg:to-transparent dark:from-slate-800"><div class="sticky top-14 start-0 py-9 lg:ps-4" itemprop="author" itemscope itemtype="https://schema.org/Person"><div class="group flex items-center gap-x-3 border-b border-gray-200 pb-8 mb-[15px] dark:border-gray-700"><a class="block flex-shrink-0" itemprop="url" href="https://www.bytezonex.com"><img onerror="this.setAttribute('data-error', 1)" alt="user avatar" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/avatar.png 1x, https://oss.bolzjb.com/avatar.png 2x" class="h-10 w-10 rounded-full" src="https://oss.bolzjb.com/avatar.png"></a><a class="group grow block" href="/"><h5 itemprop="name" class="group-hover:text-gray-600 text-sm font-semibold text-gray-800 dark:group-hover:text-gray-400 dark:text-gray-200"> Kyle </h5><p class="text-sm text-gray-500"> 探索Web开发资源和人工智能教程的代码社区 </p></a><div class="grow w-[120px]"><div class="flex justify-end"><a href="mailto:mybolide@163.com" class="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"><svg t="1726223114709" class="size-3.5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1508" width="16" height="16"><path d="M834.446 213.447h-640.341c-50.176 0-91.022 40.846-91.022 91.022v423.026c0 50.176 40.846 91.022 91.022 91.022h640.341c50.176 0 91.022-40.846 91.022-91.022v-423.026c0-50.176-40.846-91.022-91.022-91.022zM870.855 727.495c0 20.025-16.384 36.409-36.409 36.409h-640.341c-20.025 0-36.409-16.384-36.409-36.409v-423.026c0-20.025 16.384-36.409 36.409-36.409h640.341c20.025 0 36.409 16.384 36.409 36.409v423.026z" fill="#ffffff" p-id="1509"></path><path d="M786.773 358.059l-272.498 171.918-272.498-171.918c-12.743-8.078-29.582-4.21-37.661 8.533-8.078 12.743-4.21 29.582 8.533 37.661l286.72 180.907c4.551 2.845 9.557 4.21 14.563 4.21h0.91c5.006 0 10.013-1.365 14.563-4.21l286.72-180.907c12.743-8.078 16.611-24.917 8.533-37.661-8.306-12.857-25.145-16.611-37.888-8.533z" fill="#ffffff" p-id="1510"></path></svg> 联系我 </a></div></div></div><div class="flex justify-center items-center"><img onerror="this.setAttribute('data-error', 1)" alt="user avatar" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/wx_qrcode.jpg 1x, https://oss.bolzjb.com/wx_qrcode.jpg 2x" class="h-[200px] w-[200px]" src="https://oss.bolzjb.com/wx_qrcode.jpg"></div><div class="text-center group-hover:text-gray-600 text-sm font-semibold text-gray-800 dark:group-hover:text-gray-400 dark:text-gray-200"> 扫码关注微信公众号</div><div class="space-y-6"><ins class="adsbygoogle adsbygoogle mb-[20px] md:mb-[15px] md:max-h-[80px]" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3397578392" data-ad-format="fluid" data-ad-layout-key="-gx-2v-6g+z+150" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" data-v-101bfb4a></ins><a class="group flex items-center gap-x-6" href="/archives/12I5CnBa.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">Node.js 内存控制深入浅出之旅（上）</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="Node.js 内存控制深入浅出之旅（上）" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/19.jpg 1x, https://oss.bolzjb.com/blog/thumb/19.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/19.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/gnD6Nowm.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">行内元素、块级元素：垂直居中、水平居中</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="行内元素、块级元素：垂直居中、水平居中" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/10.jpg 1x, https://oss.bolzjb.com/blog/thumb/10.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/10.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/9h74O2XN.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">HTML与JavaScript结合，让网页更生动</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="HTML与JavaScript结合，让网页更生动" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/25.jpg 1x, https://oss.bolzjb.com/blog/thumb/25.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/25.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/CcKJszIG.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">用心的IP展示功能能给用户带来哪些效果</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="用心的IP展示功能能给用户带来哪些效果" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/11.jpg 1x, https://oss.bolzjb.com/blog/thumb/11.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/11.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/Ll6HmSRM.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">揭秘 JavaScript 中对象深度拷贝的艺术</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="揭秘 JavaScript 中对象深度拷贝的艺术" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/13.jpg 1x, https://oss.bolzjb.com/blog/thumb/13.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/13.jpg"></div></a><ins class="adsbygoogle adsbygoogle mb:mt-[24px] max-w-[358px] mb-[20px] md:mb-[15px] overflow-hidden" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3095100140" data-ad-format="auto" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" full-width-responsive="true" data-v-101bfb4a></ins></div></div></div></div></div></div></main><footer class="w-full max-w-[85rem] pb-10 px-4 sm:px-6 lg:px-8 mx-auto"><div class="text-center"><div><a class="flex-none text-xl font-semibold text-black dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="/" aria-label="Brand">ByteZoneX</a></div><div class="mt-3 text-sm"><p class="text-gray-500"> © ByteZoneX. 2023 Kyle. All rights reserved. </p><p class="text-gray-500"> 备案号： <a class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400" href="https://beian.miit.gov.cn" target="_blank">京ICP备14007360号-4</a></p></div></div></footer></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":74,"once":76,"_errors":77,"serverRendered":80,"path":81},["ShallowReactive",3],{"blogCategories":4,"$ttMp0qbt10":44},[5,8,11,14,17,20,23,26,29,32,35,38,41],{"id":6,"title":7},"2954937509122932736","日志",{"id":9,"title":10},"2954937466366197760","开发配置",{"id":12,"title":13},"2954937441280065536","前端",{"id":15,"title":16},"2959350982124765184","后端",{"id":18,"title":19},"2959351812286578688","Android",{"id":21,"title":22},"2959351884051120128","IOS",{"id":24,"title":25},"2954937393997676544","操作系统",{"id":27,"title":28},"2954937335512301568","开发工具",{"id":30,"title":31},"2962269454831976448","esp32",{"id":33,"title":34},"2969586738701271040","数据库",{"id":36,"title":37},"2966899206691749888","电脑技巧",{"id":39,"title":40},"3071998081319829504","AI安装配置",{"id":42,"title":43},"2970920559132540928","Office技巧",{"tuijianArticle":45,"struturedDataText":61,"articleData":62},[46,49,52,55,58],{"title":47,"urlName":48},"Node.js 内存控制深入浅出之旅（上）","12I5CnBa",{"title":50,"urlName":51},"行内元素、块级元素：垂直居中、水平居中","gnD6Nowm",{"title":53,"urlName":54},"HTML与JavaScript结合，让网页更生动","9h74O2XN",{"title":56,"urlName":57},"用心的IP展示功能能给用户带来哪些效果","CcKJszIG",{"title":59,"urlName":60},"揭秘 JavaScript 中对象深度拷贝的艺术","Ll6HmSRM","{\n                    \"@context\": \"https://schema.org\",\n                    \"@type\": \"NewsArticle\",\n                    \"image\": [\"https://oss.bolzjb.com/blog/thumb/3.jpg\"],\n                    \"headline\": \"果真如此？html + css + JavaScript 期末复盘竟能快速上手前端开发\",\n                    \"datePublished\": \"2023-02-15T01:19:36+8:00\",\n                    \"dateModified\": \"2024-03-11T17:35:34+8:00\",\n                    \"author\": [{\n                        \"@type\": \"Person\",\n                        \"name\": \"Kyle\",\n                        \"url\": \"https://www.bytezonex.com\"\n                    }]\n                }",{"urlName":63,"title":64,"categoryId":12,"categoryTitle":13,"keywords":65,"description":66,"content":67,"createdAt":68,"viewCount":69,"updatedAt":70,"coverImg":71,"datePublished":72,"dateModified":73},"PrdV6cea","果真如此？html + css + JavaScript 期末复盘竟能快速上手前端开发","html + css + JavaScript, 前端开发, web开发, 网页制作, html入门, css入门, JavaScript入门, 表格制作, 表单标签, 样式表, 盒子定位, 静态定位, 偏移解释","这是一篇关于html + css + JavaScript 期末复盘的文章，主要对表格制作、表单标签、样式表、盒子定位等知识点进行总结和回顾，帮助大家快速上手前端开发。","\u003Cp>\u003Cstrong>HTML、CSS 和 JavaScript 复盘：巩固基础、发现不足\u003C/strong>\u003C/p>\n\u003Cp>前端开发之旅离不开 HTML、CSS 和 JavaScript 的掌握。在这篇文章中，我们将深入回顾这三个核心技术点，巩固基础知识，发现不足之处，并为未来的前端开发学习和实践打下坚实的基础。\u003C/p>\n\u003Cp>\u003Cstrong>1. HTML：表格制作\u003C/strong>\u003C/p>\n\u003Cp>HTML 中的表格是一种展示数据的常用方式。我们使用 \u003Ctable>、\u003Ctr> 和 \u003Ctd> 标签创建表格。行用 \u003Ctr> 表示，列用 \u003Ctd> 表示。通过设置表格属性（如边框、背景色），我们可以控制其外观。\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>姓名\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>年龄\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>小明\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>18\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>2. 表单标签：收集用户输入\u003C/strong>\u003C/p>\n\u003Cp>表单用于收集用户输入数据。我们使用 \u003Cform>、\u003Cinput>、\u003Cselect> 和 \u003Ctextarea> 标签创建表单。每个输入元素都有一个 name 属性，用来指定其名称。提交表单时，数据将被发送到服务器处理。\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><\u003Cspan class=\"hljs-keyword\">form\u003C/span>>\n  <\u003Cspan class=\"hljs-keyword\">label\u003C/span> \u003Cspan class=\"hljs-keyword\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>姓名：</\u003Cspan class=\"hljs-keyword\">label\u003C/span>>\n  <\u003Cspan class=\"hljs-keyword\">input\u003C/span> \u003Cspan class=\"hljs-keyword\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> id=\u003Cspan class=\"hljs-string\">"name"\u003C/span> name=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\n\n  <\u003Cspan class=\"hljs-keyword\">label\u003C/span> \u003Cspan class=\"hljs-keyword\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"age"\u003C/span>>年龄：</\u003Cspan class=\"hljs-keyword\">label\u003C/span>>\n  <\u003Cspan class=\"hljs-keyword\">input\u003C/span> \u003Cspan class=\"hljs-keyword\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"number"\u003C/span> id=\u003Cspan class=\"hljs-string\">"age"\u003C/span> name=\u003Cspan class=\"hljs-string\">"age"\u003C/span>>\n\n  <button \u003Cspan class=\"hljs-keyword\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"submit"\u003C/span>>提交</button>\n</\u003Cspan class=\"hljs-keyword\">form\u003C/span>>\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>3. CSS：样式表的优势\u003C/strong>\u003C/p>\n\u003Cp>CSS 是一种用来控制网页外观的语言。它使我们能够轻松地修改字体、颜色、背景、布局等样式，具有以下优势：\u003C/p>\n\u003Cul>\n\u003Cli>提升网页美观度\u003C/li>\n\u003Cli>增强网页易读性\u003C/li>\n\u003Cli>简化网页维护\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>4. 选择器的优先级\u003C/strong>\u003C/p>\n\u003Cp>CSS 选择器用于指定要应用样式的元素。其优先级决定了多个选择器同时作用于一个元素时，哪个选择器的样式生效。优先级从高到低：\u003C/p>\n\u003Cul>\n\u003Cli>id 选择器（#id）\u003C/li>\n\u003Cli>类选择器（.class）\u003C/li>\n\u003Cli>标签选择器（div）\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>5. 盒子定位\u003C/strong>\u003C/p>\n\u003Cp>盒子定位是一种 CSS 布局方式，允许我们控制元素在网页中的位置。它有四种类型：\u003C/p>\n\u003Cp>\u003Cstrong>静态定位：\u003C/strong>  元素在网页中占据固定位置（默认）。\u003C/p>\n\u003Cp>\u003Cstrong>相对定位：\u003C/strong>  相对于元素原始位置定位。\u003C/p>\n\u003Cp>\u003Cstrong>绝对定位：\u003C/strong>  相对于父元素定位，元素脱离文档流。\u003C/p>\n\u003Cp>\u003Cstrong>固定定位：\u003C/strong>  相对于视口定位，元素始终位于视口中的同一位置。\u003C/p>\n\u003Cp>\u003Cstrong>结论\u003C/strong>\u003C/p>\n\u003Cp>通过复盘 HTML、CSS 和 JavaScript 基础知识，我们可以巩固概念、发现不足，并为未来的前端开发学习做好准备。坚持实践，不断精进，你将在前端开发的道路上大展宏图。\u003C/p>\n\u003Cp>\u003Cstrong>常见问题解答\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>1. 如何制作带有边框的表格？\u003C/strong>\u003C/p>\n\u003Cp>使用 CSS 的 border 属性，如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid black;\n}\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>2. 如何在表单中验证用户输入？\u003C/strong>\u003C/p>\n\u003Cp>使用 HTML5 验证属性，如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><\u003Cspan class=\"hljs-keyword\">input\u003C/span> \u003Cspan class=\"hljs-keyword\">type\u003C/span>="email" \u003Cspan class=\"hljs-type\">name\u003C/span>="email" required>\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>3. 如何将 CSS 应用于特定元素？\u003C/strong>\u003C/p>\n\u003Cp>使用 CSS 选择器，如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-id\">#header\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: red;\n}\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>4. 如何使元素相对定位？\u003C/strong>\u003C/p>\n\u003Cp>使用 CSS 的 position 属性：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">div\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>5. 如何使元素脱离文档流？\u003C/strong>\u003C/p>\n\u003Cp>使用 CSS 的 position 属性：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">div\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n}\n\u003C/code>\u003C/pre>\n","2023-02-15 01:19:36",598,"2024-03-11 17:35:34","https://oss.bolzjb.com/blog/thumb/3.jpg","2023-02-15T01:19:36+8:00","2024-03-11T17:35:34+8:00",["Reactive",75],{},["Set"],["ShallowReactive",78],{"blogCategories":79,"$ttMp0qbt10":79},null,true,"/archives/PrdV6cea.html"]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{googleAdsense:{id:"ca-pub-9777110919590837",analyticsDomainName:"",analyticsUacct:"",hideUnfilled:false,includeQuery:false,onPageLoad:false,overlayBottom:false,pageLevelAds:false,pauseOnLoad:false,tag:"adsbygoogle",test:false}},app:{baseURL:"/",buildId:"b9e826b1-a867-4ee1-9490-c7deb67e327e",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="5830b11b9b5e811805b18892-|49" defer></script>