[HTML][新手] 03. 分行與分隔線(br, hr)與註解 - 進度條
文章推薦指數: 80 %
. 輸出結果:. 你會發現文字是並排的,並沒有換行,它並不會像Word按下Enter就跳到下一行,所以在程式碼裡面的Enter並不代表換行符,按Enter並 ...
進度條
登入
線上教學
優惠組合
顧問服務
架站服務
所有文章
系列教學
筆記
[HTML][新手]03.分行與分隔線(br,hr)與註解
[HTML][新手]03.分行與分隔線(br,hr)與註解
作者:進度條編輯群
更新日期:
2020/10/03
此文章也有影片介紹,可以搭配影片一起學習!
01.分行與分隔線(br,hr)與註解
(所屬課程)
以下正式開始文章
關於換行標籤:
在上節我們有學到最基本的HTML語法,大家應該還沒有忘記吧!
那如果我像Word一樣在第1行後面按Enter,直接輸入第2行、第3行的話,
如果要換行,我們必須使用
標籤。
第2行
第3行
輸出結果: 這樣就成功換行了。
這個
標籤比較特別,在HTML裡大部分的標籤都是一組的,例如我們之前學到的
第2行
第3行
輸出結果: 所以不管是寫成
或是
都是沒有問題的,但是不可以把反斜線寫在前面,這樣是錯的,編輯器也會提醒: 另外在一些比較先進的JavaScriptLibrary(函式庫)可能會限制一定要關起來
才行。
不過現在沒有關起來也沒有關係。
HTML裡面只有幾個標籤是獨立標籤。
除了
是獨立的標籤以外,我們再看另一個獨立的標籤
分隔線標籤 關於分隔線標籤:
也是獨立標籤,它的功用就是會畫出一條橫線,
第2行
第3行
輸出結果: 它和
一樣,可以寫成
或是
都是沒有問題的,同樣不可以把反斜線寫在前面,這樣是錯的。
另外如果在
前面不放
的話,
第2行
第3行
輸出結果: 它還是會換行。
關於註解: 如果我的程式碼寫了很多東西,我現在不想使用它,但又不確定之後會不會用到。
我不想把它刪掉,想要把它留著不讓它顯示的話,可以用註解,它的寫法是在註解起始處寫上關閉註解。
第2行
第3行
第6行
輸出結果: 你會被註解的地方就真的不會顯示在瀏覽器了。
也就是說不管是HTML、CSS、JavaScript,只要我們把它註解掉以後,這些程式碼都不會被執行。
而註解除了這個功能以外,如果程式碼越來越長的話,我們也可以用這個方法區分我們的程式碼,譬如說:
第2行
第3行
第6行
譬如說我們去Airbnb這種大型網站,點擊滑鼠右鍵→檢查網頁原始碼, 你會看到它的原始碼非常的長,如果做的專案比較大的時候,有時候自己也會很難找的到當初寫的原始碼在哪裡,所以註解就挺好用的。
不過這些原始碼上傳到網路後都是公開的,如果有不適合對外提供的一些機密資訊,就不建議寫在註解裡。
另外像Airbnb裡的這樣一段程式碼, 這段code有特別講到IE支援的問題,因為IE眾所皆知支援度比較低,所以我們通常會加一些
關於
最後,如果你喜歡我們的文章,別忘了到我們的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網站!
延伸文章資訊
- 1[HTML][新手] 03. 分行與分隔線(br, hr)與註解 - 進度條
</html>. 輸出結果:. 你會發現文字是並排的,並沒有換行,它並不會像Word按下Enter就跳到下一行,所以在程式碼裡面的Enter並不代表換行符,按Enter並 ...
- 2HTML的换行符标签是什么?
HTML的换行符标签是: 标签。 标签可以插入一个简单的换行符。注: 标签是一个空标签,意味着它没有结束标签;因此“ ”是错误的。
- 3HTML 换行符——如何使用HTML <br> 标签换行 - 免费学习编程
在编写HTML 时,你经常需要插入换行符。在地址、诗歌或文本超过可用浏览器宽度时,换行是必不可少的。如果你不插入换行符,则文本的格式会很奇怪。
- 4網頁設計– HTML 基本排版
在瞭解HTML 文件結構之後,您已經知道,不論您如何在標籤內將任何文字換行,網頁的結果 ... 而 就是屬於HTML 的特殊符號之一「空格符號」,其nbsp 取自於英文a ...
- 5用HTML br 替換 換行前先想一想
const setTextLineFeed = text => text.replace(/\n/g,'<br/>');. 將後端傳來包含換行符號的字串,先丟進這個function 處理過,好像...