基础Web页面制作练习
引言
随着互联网的快速发展，越来越多的企业和个人开始意识到建立自己的网站的重要性。对于初学者来说，掌握基础的Web页面制作技能是非常有益的。本文将为你提供一系列实用的基础Web页面制作练习方法，从HTML标签到CSS样式，让你一步步掌握Web开发的入门知识。
第一部分：HTML结构与内容
-
创建一个简单的网页
首先，我们从最简单的网页结构开始。使用以下代码构造一个包含标题、段落和链接的网页：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>我的第一个Web页面</title> </head> <body> <h1>欢迎来到我的网页！</h1> <p>这里是我的一些文字内容。</p> <a href="https://www.example.com">这是一个链接。</a> </body> </html> -
了解HTML标签
掌握以下基础_html_标签：
- ：定义整个文档的结构。
- ：包含文档的元信息，如字符集、标题等。
：定义网页的标题，通常显示在浏览器窗口的标题栏中。 </li> <li>：包含实际的文档内容。 </li> <li> <h1>至</p> <h6>：定义各个级别的标题。 </li> <li> <p>：定义段落。 </li> </ul> </li> </ol> <h3>第二部分：美化页面——CSS样式</h3> <ol> <li> <p><strong>添加外部CSS样式</strong></p> <p>将以下代码保存为.css文件，例如style.css：</p> <pre><code class="language-css">body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { color: red; } p { text-align: center; } </code></pre> <p>在HTML文件的部分引入样式：</p> <pre><code class="language-html"><link rel="stylesheet" href="style.css"> </code></pre> </li> <li> <p><strong>了解CSS选择器和属性</strong></p> <p>选择器用于定位页面中的元素，而属性则用于设置元素的样式。以下是一些常用的CSS选择器和属性：</p> <ul> <li>id选择器：#ID</li> <li>类选择器：.class</li> <li>元素选择器：element</li> <li>属性选择器：[attribute=value]</li> <li>基本属性： <ul> <li>color：设置文本颜色。</li> <li>background-color：设置背景颜色。</li> <li>font-family：设置字体样式。</li> </ul> </li> </ul> </li> </ol> <h3>第三部分：交互性——JavaScript</h3> <ol> <li> <p><strong>在页面中添加JavaScript代码</strong></p> <p>将以下JavaScript代码保存在HTML页面中：</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>交互式网页</title> <script src="script.js"></script> </head> <body> <h1>请点击以下按钮</h1> <button onclick="showMessage()">点击我</button> <div id="messageBox">这是一个提示信息！</div> </body> </html> </code></pre> <p>在同一目录下创建一个名为script.js的文件，并添加以下代码：</p> <pre><code class="language-javascript">function showMessage() { var messageBox = document.getElementById("messageBox"); messageBox.innerHTML = "你点击了按钮！"; } </code></pre> </li> <li> <p><strong>了解JavaScript基础语法</strong></p> <ul> <li>变量和数据类型：使用var声明变量。</li> <li>函数：使用function关键字创建函数。</li> <li>对象和数组：JavaScript中的主要复合数据类型。</li> </ul> </li> </ol> <h3>总结</h3> <p>通过本篇基础Web页面制作练习，你已掌握了HTML、CSS和JavaScript的基础知识。这将为你打开通往Web开发的广阔大门。继续探索、实践和学习，相信你会在这个充满机遇的领域中取得更好的成绩！</p> </div><!-- .entry-content --> <footer class="entry-footer"> </footer><!-- .entry-footer --> </div> </article> <nav class="navigation post-navigation" aria-label="文章"> <h2 class="screen-reader-text">文章导航</h2> <div class="nav-links"><div class="nav-previous"><a href="http://www.yincanzc.com/710.html" rel="prev">上一篇文章</a></div><div class="nav-next"><a href="http://www.yincanzc.com/677.html" rel="next">下一篇文章</a></div></div> </nav> </div> <div class="col-lg-4"> <aside id="secondary" class="widget-area"> <section id="block-2" class="widget widget_block widget_search"><form role="search" method="get" action="http://www.yincanzc.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >搜索</label><div class="wp-block-search__inside-wrapper" ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="搜索" class="wp-block-search__button wp-element-button" type="submit" >搜索</button></div></form></section><section id="block-3" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">近期文章</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="http://www.yincanzc.com/4949.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.yincanzc.com/4948.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.yincanzc.com/4955.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.yincanzc.com/4961.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.yincanzc.com/4958.html">（无标题）</a></li> </ul></div></div></section><section id="block-4" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">近期评论</h2><div class="no-comments wp-block-latest-comments">您尚未收到任何评论。</div></div></div></section></aside><!-- #secondary --> </div> </div> </div> </div> <footer class="footer-area"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="copyright text-center"> <a href="https://wordpress.org/"> Proudly powered by WordPress </a> <p>Theme: newsstory by ashathemes.</p> </div> </div> </div> </div> </footer> </div><!-- #page --> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/sites/25/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/newsstory/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="daisy-links-script-js-extra"> var daisyLinks = {"disableRightClick":""}; //# sourceURL=daisy-links-script-js-extra </script> <script src="http://www.yincanzc.com/wp-content/plugins/daisy-links/assets/js/daisy-links.js" id="daisy-links-script-js"></script> <script src="http://www.yincanzc.com/wp-content/themes/newsstory/assets/js/bootstrap.min.js?ver=4.5.0" id="bootstrap-js"></script> <script src="http://www.yincanzc.com/wp-content/themes/newsstory/assets/js/jquery.slicknav.min.js?ver=1.0.3" id="slicknav-js"></script> <script src="http://www.yincanzc.com/wp-content/themes/newsstory/assets/js/jquery.easy-ticker.js?ver=3.5.0" id="easy-ticker-js"></script> <script src="http://www.yincanzc.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script src="http://www.yincanzc.com/wp-includes/js/masonry.min.js?ver=4.2.2" id="masonry-js"></script> <script src="http://www.yincanzc.com/wp-content/themes/newsstory/assets/js/newsstory-script.js?ver=1.0.9" id="newsstory-script-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"http://www.yincanzc.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=http://www.yincanzc.com/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>