HTML 的必學基礎教學

HTML 的必學基礎

HTML(Hypertext Markup Language),中文全名為「超文字標示語言」,使用「標記」(markup)來詮釋文字、圖像、或是其他能在瀏覽器裡面顯示的內容。HTML 標記還包括一些特殊「元素」(element),例如:、、<body>、</p> <header>、</p> <footer>、</p> <article>、</p> <section>、</p> <p>、</p> <div>、<span>、<img>……等等。</p> </div><!-- .entry-summary --> <div class="more-link-wrapper"> <a href="https://www.nonenglishengineer.com/html-learn/" class="more-link">Read More</a> </div><!-- .more-link-wrapper --> </div><!-- .entry-data-wrapper --> </div><!-- .post-content-wrapper --> </article><!-- #post-## --> </div><!-- .post-wrapper-hentry --> </div><!-- .post-wrapper --> </main><!-- #main --> </section><!-- #primary --> <div id="site-sidebar" class="sidebar-area col-16 col-sm-16 col-md-16 col-lg-6 col-xl-5 col-xxl-5"> <div id="secondary" class="sidebar widget-area sidebar-widget-area" role="complementary"> <aside id="search-2" class="widget widget_search"><h2 class="widget-title">站內搜尋</h2> <form role="search" method="get" class="search-form" action="https://www.nonenglishengineer.com/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" /> </label> <button type="submit" class="search-submit"><span class="screen-reader-text">Search</span></button> </form> </aside><aside id="wp_statistics_widget-2" class="widget widget_wp_statistics_widget"><h2 class="widget-title">網站瀏覽次數</h2><ul><li><label>今日瀏覽次數: </label>30</li><li><label>昨日瀏覽次數: </label>108</li><li><label>總瀏覽次數: </label>8,735</li></ul></aside><aside id="categories-2" class="widget widget_categories"><h2 class="widget-title">文章分類</h2><form action="https://www.nonenglishengineer.com" method="get"><label class="screen-reader-text" for="cat">文章分類</label><select name='cat' id='cat' class='postform' > <option value='-1'>選取分類</option> <option class="level-0" value="6">CSS</option> <option class="level-0" value="5">HTML</option> <option class="level-0" value="7">JavaScript</option> <option class="level-0" value="187">JS 學徒特訓班試題</option> <option class="level-0" value="225">Vue</option> <option class="level-0" value="261">好康分享</option> <option class="level-0" value="4">資訊分享</option> </select> </form> <script type="text/javascript"> /* <![CDATA[ */ (function() { var dropdown = document.getElementById( "cat" ); function onCatChange() { if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) { dropdown.parentNode.submit(); } } dropdown.onchange = onCatChange; })(); /* ]]> */ </script> </aside><aside id="custom_html-2" class="widget_text widget widget_custom_html"><h2 class="widget-title">線上課程學習推薦</h2><div class="textwidget custom-html-widget"><div class="side-ads"> <a href='https://www.nonenglishengineer.com/hexschool' target="_blank" rel="noopener noreferrer"> <img src='https://www.nonenglishengineer.com/wp-content/uploads/2020/07/six.png' border='0' style="width: 100%;" alt="六角學院" /> </a> <a href="https://www.nonenglishengineer.com/Udemy" target="_blank" rel="noopener noreferrer"> <img src="https://www.nonenglishengineer.com/wp-content/uploads/2020/07/udemy-logo-vector.png" style="width: 100%;" alt="Udemy" /> </a> <a href="https://www.nonenglishengineer.com/hahow" target="_blank" rel="noopener noreferrer"> <img src="https://www.nonenglishengineer.com/wp-content/uploads/2020/07/hahow.png" alt="hahow 好學校" /> </a> </div></div></aside> <aside id="recent-posts-2" class="widget widget_recent_entries"> <h2 class="widget-title">近期文章</h2> <ul> <li> <a href="https://www.nonenglishengineer.com/js-input-cant-emoji/">JS 禁止 input 輸入 emoji 的方法</a> </li> <li> <a href="https://www.nonenglishengineer.com/css-design-patterns/">CSS 設計模式|OOCSS|SMACSS|BEM|ITCSS|Atomic CSS</a> </li> <li> <a href="https://www.nonenglishengineer.com/input-clear-up-and-down/">input 標籤 number 類型輸入框清除上下加減按鈕</a> </li> <li> <a href="https://www.nonenglishengineer.com/monitoring-and-function/">監聽與函式設計|JS 學徒特訓班|六角學院</a> </li> <li> <a href="https://www.nonenglishengineer.com/what-is-dom-and-functions/">JS 什麼是 DOM 與 函式</a> </li> <li> <a href="https://www.nonenglishengineer.com/function-if-judgment/">函式 + if 判斷|JS 學徒特訓班|六角學院</a> </li> <li> <a href="https://www.nonenglishengineer.com/dom-operation/">DOM 操作|JS 學徒特訓班|六角學院</a> </li> <li> <a href="https://www.nonenglishengineer.com/function-parameters-to-practice/">函式參數再練習|JS 學徒特訓班|六角學院</a> </li> </ul> </aside><aside id="recent-comments-2" class="widget widget_recent_comments"><h2 class="widget-title">近期留言</h2><ul id="recentcomments"><li class="recentcomments">「<span class="comment-author-link"><a href='https://www.nonenglishengineer.com/' rel='external nofollow ugc' class='url'>Akay Hu</a></span>」在〈<a href="https://www.nonenglishengineer.com/how-to-become-a-front-end-engineer/#comment-52">如何成為前端工程師?不會英文也可以當前端工程師!</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href='https://bodynewlife.com/' rel='external nofollow ugc' class='url'>bodynewlife</a></span>」在〈<a href="https://www.nonenglishengineer.com/how-to-become-a-front-end-engineer/#comment-51">如何成為前端工程師?不會英文也可以當前端工程師!</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href='https://www.nonenglishengineer.com/' rel='external nofollow ugc' class='url'>Akay Hu</a></span>」在〈<a href="https://www.nonenglishengineer.com/how-to-become-a-front-end-engineer/#comment-50">如何成為前端工程師?不會英文也可以當前端工程師!</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href='https://health-get.com.tw/dry-eye/' rel='external nofollow ugc' class='url'>Allen</a></span>」在〈<a href="https://www.nonenglishengineer.com/how-to-become-a-front-end-engineer/#comment-49">如何成為前端工程師?不會英文也可以當前端工程師!</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href='https://www.nonenglishengineer.com/' rel='external nofollow ugc' class='url'>Akay Hu</a></span>」在〈<a href="https://www.nonenglishengineer.com/how-to-become-a-front-end-engineer/#comment-48">如何成為前端工程師?不會英文也可以當前端工程師!</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href='https://thelionjapan.com/' rel='external nofollow ugc' class='url'>獅子</a></span>」在〈<a href="https://www.nonenglishengineer.com/how-to-become-a-front-end-engineer/#comment-47">如何成為前端工程師?不會英文也可以當前端工程師!</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href='https://www.nonenglishengineer.com/' rel='external nofollow ugc' class='url'>Akay Hu</a></span>」在〈<a href="https://www.nonenglishengineer.com/front-end-online-courses/#comment-46">前端線上課程推薦!!六角學院</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href='https://kingtomlife.com' rel='external nofollow ugc' class='url'>尹辰</a></span>」在〈<a href="https://www.nonenglishengineer.com/front-end-online-courses/#comment-45">前端線上課程推薦!!六角學院</a>〉發佈留言</li></ul></aside> </div><!-- .sidebar --> </div><!-- .col-* columns of main sidebar --> </div><!-- .row --> </div><!-- .container --> </div><!-- .site-content-inside --> </div><!-- #content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <div class="site-info-inside"> <div class="container"> <div class="row"> <div class="col"> <div class="credits-wrapper"> <div class="credits credits-blog">© Copyright 2020 – <a href="https://www.nonenglishengineer.com/">不會英文的工程師 Blog</a></div><div class="credits credits-designer">Geodesic Theme by <a href="https://getwptemplates.com" title="GetWPTemplates">GetWPTemplates</a> <span>⋅</span> Powered by <a href="https://wordpress.org" title="WordPress">WordPress</a></div> </div><!-- .credits --> </div><!-- .col --> </div><!-- .row --> </div><!-- .container --> </div><!-- .site-info-inside --> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page .site-wrapper --> <div class="overlay-effect"></div><!-- .overlay-effect --> <script type='text/javascript' id='contact-form-7-js-extra'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/www.nonenglishengineer.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"cached":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.3' id='contact-form-7-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/plugins/wp-codemirror-block/vendor/codemirror/lib/codemirror.min.js?ver=5.40.5' id='codemirror-js'></script> <script type='text/javascript' id='codemirror-autoload-assets-js-before'> var wpcm = {"plugin_url":"https://www.nonenglishengineer.com/wp-content/plugins/wp-codemirror-block","assets":[],"panelOptions":{"showPanel":true,"languageLabel":"language","runButton":true,"fullScreenButton":true,"copyButton":true},"view":"public"} </script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/plugins/wp-codemirror-block/assets/js/autoLoadAssets.min.js?ver=1594646123' id='codemirror-autoload-assets-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/plugins/wp-codemirror-block/assets/js/init.min.js?ver=1594646123' id='codemirror-init-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/themes/geodesic/js/enquire.js?ver=2.1.2' id='enquire-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/themes/geodesic/js/fitvids.js?ver=1.1' id='fitvids-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/themes/geodesic/js/hover-intent.js?ver=r7' id='hover-intent-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/themes/geodesic/js/superfish.js?ver=1.7.5' id='superfish-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/themes/geodesic/js/custom.js?ver=1.0' id='geodesic-custom-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-content/plugins/ank-prism-for-wp/out/prism-js.min.js?ver=1594646232' id='prism-script-js'></script> <script type='text/javascript' src='https://www.nonenglishengineer.com/wp-includes/js/wp-embed.min.js?ver=5.5.3' id='wp-embed-js'></script> </body> </html> <!-- Cache served by breeze CACHE - Last modified: Thu, 26 Nov 2020 09:30:09 GMT -->