[HTML][新手] 03. 分行與分隔線(br, hr)與註解 - 進度條

文章推薦指數: 80 %
投票人數:10人

. 輸出結果:. 你會發現文字是並排的,並沒有換行,它並不會像Word按下Enter就跳到下一行,所以在程式碼裡面的Enter並不代表換行符,按Enter並 ... 進度條 登入 線上教學 優惠組合 顧問服務 架站服務 所有文章 系列教學 筆記 [HTML][新手]03.分行與分隔線(br,hr)與註解 [HTML][新手]03.分行與分隔線(br,hr)與註解 作者:進度條編輯群 更新日期: 2020/10/03 此文章也有影片介紹,可以搭配影片一起學習! 01.分行與分隔線(br,hr)與註解 (所屬課程) 以下正式開始文章 關於換行標籤:
在上節我們有學到最基本的HTML語法,大家應該還沒有忘記吧!

標籤就是我們要顯示在網頁的主要部分,如果我在body裡面打「第1行」:               我的新HTML專案          第1行      輸出結果:     它也會正常顯示「第1行」,這個沒有什麼問題。

那如果我像Word一樣在第1行後面按Enter,直接輸入第2行、第3行的話,               我的新HTML專案          第1行    第2行    第3行      輸出結果:     你會發現文字是並排的,並沒有換行,它並不會像Word按下Enter就跳到下一行,所以在程式碼裡面的Enter並不代表換行符,按Enter並沒有任何反應。

如果要換行,我們必須使用
標籤。

              我的新HTML專案          第1行
   第2行
   第3行
     輸出結果:     這樣就成功換行了。

這個
標籤比較特別,在HTML裡大部分的標籤都是一組的,例如我們之前學到的               我的新HTML專案          第1行
   第2行
   第3行
     輸出結果:     所以不管是寫成
或是
都是沒有問題的,但是不可以把反斜線寫在前面,這樣是錯的,編輯器也會提醒:     另外在一些比較先進的JavaScriptLibrary(函式庫)可能會限制一定要關起來
才行。

不過現在沒有關起來也沒有關係。

HTML裡面只有幾個標籤是獨立標籤。

除了
是獨立的標籤以外,我們再看另一個獨立的標籤 
分隔線標籤     關於分隔線標籤:

也是獨立標籤,它的功用就是會畫出一條橫線,               我的新HTML專案          第1行
   
   第2行
   
   第3行
     輸出結果:       它和
一樣,可以寫成
或是
都是沒有問題的,同樣不可以把反斜線寫在前面,這樣是錯的。

另外如果在
前面不放
的話,                 我的新HTML專案          第1行
   
   第2行    
   第3行
       輸出結果:       它還是會換行。

    關於註解:   如果我的程式碼寫了很多東西,我現在不想使用它,但又不確定之後會不會用到。

我不想把它刪掉,想要把它留著不讓它顯示的話,可以用註解,它的寫法是在註解起始處寫上關閉註解。

                我的新HTML專案          第1行
   第2行    
   第3行
       第6行
         輸出結果:     你會被註解的地方就真的不會顯示在瀏覽器了。

也就是說不管是HTML、CSS、JavaScript,只要我們把它註解掉以後,這些程式碼都不會被執行。

而註解除了這個功能以外,如果程式碼越來越長的話,我們也可以用這個方法區分我們的程式碼,譬如說:               我的新HTML專案          第1行
   第2行    
   第3行
           第6行
        譬如說我們去Airbnb這種大型網站,點擊滑鼠右鍵→檢查網頁原始碼,   你會看到它的原始碼非常的長,如果做的專案比較大的時候,有時候自己也會很難找的到當初寫的原始碼在哪裡,所以註解就挺好用的。

不過這些原始碼上傳到網路後都是公開的,如果有不適合對外提供的一些機密資訊,就不建議寫在註解裡。

另外像Airbnb裡的這樣一段程式碼,       這段code有特別講到IE支援的問題,因為IE眾所皆知支援度比較低,所以我們通常會加一些的JavaScript語法,讓它能夠支援HTML5或是CSS3最新指令,讓它不會沒有任反應或是破圖,這個就是註解的其中一種使用方法,可以暫時了解一下。

    關於這一行的功用,將於下一堂講解。

    最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!! 圖文系列教學: HTML新手網站基礎教學 [HTML][新手]03.分行與分隔線(br,hr)與註解 [HTML][新手]04.中文編碼表示metacharset [HTML][新手]05.文字標籤h1~h6,p與span [HTML][新手]06.其他方便的文字標籤與圖文編輯器的關係-以CKEditor為例 [HTML][新手]07.Div標籤以及CSS高,寬與背景顏色屬性 [HTML][新手]08.其他與Div相似的HTML5所建議的標籤Main,Header,Footer等 [HTML][新手]09.tag(連結標籤)介紹1,轉址與開啟新頁籤 [HTML][新手]10.tag(連結標籤)介紹2,定位點與寄信 [HTML][新手]11.列表介紹ul,ol,dl [HTML][新手]12.表格介紹Table [HTML][新手]13.Imgtag-圖片介紹 [HTML][新手]14.影片與網頁嵌入(iframe)-例如youtube [HTML][新手]15.輸入欄位(input)-簡介與瀏覽器顯示比較 從另一個方向介紹網頁、HTML、CSS與JavaScript。

[HTML][新手]01.程式編輯器Brackets安裝教學 [HTML][新手]02.什麼是HTML與如何建立它 進度條編輯群 進度條編輯團隊 關聯文章 想寫桌面程式卻無從下手?Electron讓你橫跨WindowsMacOS與Linux無煩惱! 從前端到DesktopApplication?淺談跨平台整合方案Electron.js [ReactJS]01.為什麼要用ReactJS 從頭開始,從使用面與程式碼來介紹ReactJS 什麼是前端工程師(FrontendDeveloper)?要成為前端工程師要學習什麼樣的技術呢? 別人講還不如自己判斷,前因後果全部講出來,掌握根本原因就不怕剛學完就退流行! 你知道SEO是指「搜尋引擎優化」嗎?提升搜尋關鍵字又有哪些方法呢? 架設網站就是要讓人看見,如果沒有人在瀏覽就跟沒架是一樣的! 製作網站不能沒有談到的功能-RWD響應式設計(自適應網頁) RWD響應式設計已經是常識了,在規劃網站的時候絕對不能沒有它 jQuery是什麼,它跟JavaScript有什麼關係?它又有什麼能耐呢? 如果開發網頁的話一定聽過JavaScript,可是常常網路上的範例都會出現$的符號,那是什麼意思呢。

前後端分離要用SSR?Serversiderender(SSR)是什麼嗎?跟SPA和SEO又有什麼關聯? SPA對SEO不好?為了SEO所以要捨棄CSR?多了解一點原理答案就自然浮現了! [JavaScript]上傳圖片不難,那上傳同時預覽呢? 很多程式功能看起來是一件事,但其實它們只是被設計成剛好一起發生。

響應式頁面只能用Bootstrap3製作嗎?不,但它最方便! 響應式頁面(Responsive)框架百花齊放,但依情況其實並不真的有那麼多的選擇。

網站電商如同實體店面,盲目跟風設計真的好嗎?讓我們來介紹UI、UX的重要性 Ikea如迷宮版的賣場動線、全聯呈現多樣商品的壅擠成列都有他們的原因,你的網站設計概念為何? 顯示全部 最新文章 5分鐘自架免費VPN設定步驟教學,在LinuxVPS上自架OpenVPN搞定跳板連線 自架VPN超快,照著做輕鬆簡單不失敗! 你的地區可能無法觀看此影片?快使用VPN跳板來解決地須限制跨區解鎖觀看! 被限制IP地區使用VPN已經是常識,但你知道基本VPN原理與自架和服務商的差別嗎? [LayerStack]完整LinuxVPS使用PM2與Nginx架設Node.js站台設定中文教學 使用LayerStackVPS透過CN2GIA最高級線路,讓網站在中國大陸也可順暢連線 桌面太小被電腦螢幕佔據嗎?Ultrarm螢幕支架應該就是你要的推薦方案喔!扎實用料一次到位。

台灣公司Ultrarm螢幕支架相當堅固可以一次架兩個螢幕,最高支援49"吋螢幕。

如何避免自製WordPress外掛被GPL授權?顧客購買「付費版」可以免費無限複製不用付授權費嗎? 開不開源是個人選擇,豐富社群當然是件好事。

但是被強迫開源就不是開發者所樂見的事了。

【微創業】電商為何要自架站台?被平台綁架的下場只有流量營業額減半等著你-自架站台的重要性(二) 我電商就賺飽了,為何要架設一個網站?架設網站一定要用WordPress嗎? 【IKoula】使用LinuxVPS上架設PHP站台全紀錄!從Ubuntu設定到網站上線一次搞定 經濟實惠的IKoulaVPS,適合初學者練習與進階商業架站的好選擇! 後端工程師(BackendDeveloper)是什麼?成為後端需要學習什麼技術?很難嗎? 前端與後端差別在哪?如何選擇?為何後端工程師也要學習基礎「前端」技術? 想快速保障網站安全?快嘗試SucuriCDNWAF雲端應用防火牆!遠振代理台灣專業服務協助設定。

架站不會程式?WordPress被入侵?使用SucuriCDNWAF以銅板價格讓你一天內就確保網站安全! WordPress推薦必裝外掛(一),精選常用Plugins超好用清單,免費實用外掛絕不能錯過! WordPress外掛這麼多種,先從免費實用外掛開始,這些是即使會寫程式也很方便的外掛 顯示全部 線上課程 Bootstrap5與Sass,製作RWD客製化響應式網站 Laravel後端PHP架站,APIServer與訂閱軟體全攻略 WordPress-從頭教起的網站架設 程式客製WooCommerce,WordPress購物系統全解析 iOS-Swift5手機程式開發,使用APP與網站互動 Electron跨平台桌面程式,建立點餐系統與裝置控制 C語言-近代程式語言的基礎 ES6,ReactJS與Webpack,前端JavaScript全攻略 從零開始的SQL語法與資料庫設計-以MySQL來攻略 Linux雲端伺服器,用AWS暸解Apache與Nginx HTML,CSS,JavaScript,jQuery網頁從零開始 Git程式版本管控-由簡單到難 快速開發,從頭教起的RubyonRails後端之旅 行動第一!使用Bootstrap建立響應式RWD網站!


請為這篇文章評分?