整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML代碼中的空格和空行

          子1:(文本內容中的連續空格)

          <p>這段文本中,輸入連續的空格          大概輸入了十個。</p>

          顯示效果:“格”和“大” 之間的是個空格顯示出來只是一個空格。

          這段文本中,輸入連續的空格 大概輸入了十個。

          例子2:(代碼之間的連續空格)

          <span>span是一個行內標簽</span>               <span>和前面的span元素之間隔了很多個空格</span>

          顯示效果:兩個span元素之間連續的空格,顯示出來即"簽"與“和”之間的空格,只有一個空格。

          span是一個行內標簽 和前面的span元素之間隔了很多個空格

          上面兩個例子證明:HTML代碼中連續的空格在顯示時會顯示為一個空格,其余的多余的空格會被移除或者說被忽略。

          段落文本其實也是HTML代碼的一部分,只不過它在p標簽內部,而例子2的空格是在兩個span標簽之間。


          理解了空格,現在看看空行,同理

          例子3:(文本內容中的空行)

          <p>這段文本中,輸入連續的空行
          
          
          
          
          
          大概輸入了五行。</p>

          顯示效果:如我們所見,文本代碼中的五行空行,顯示出來也只是一個空格。

          這段文本中,輸入連續的空行 大概輸入了五行。

          例子4:(元素之間/標簽之間的空行),只要把例子2中的空格換成空行就可以了,顯示效果和例子2的一樣,多行空行都只會顯示為一個空格。

          <span>span是一個行內標簽</span>
          
          
          
          
          
          <span>和前面的span元素之間隔了很多空行</span>


          span是一個行內標簽 和前面的span元素之間隔了很多空行

          得證:HTML 代碼中的所有連續的空格或空行(換行)都會被顯示為一個空格。


          既然如此,如果我們希望擴大兩個字符之間的間距,讓代碼中的連續空格或空行顯示出來的結果也是連續的空格或空行,那該怎么辦?其實很簡單。

          方法一:我們可以用預格式化標簽<pre>,無論是空格或空行都適用。

          <pre>
          這是
          預格式文本。
          它保留了      空格
          和換行。
          </pre>

          顯示效果

          這是
          預格式文本。
          它保留了      空格
          和換行。


          方法二:我們可以用空格實體符 代替空格,用換行標簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果,但是對搜索引擎不是最友好的方式,因為 和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是, 必須小寫,而且最后面的分號是不能省略的。


          方法三:(適合空格)使用全角空格

          全角空格被解釋為漢字,所以不會被被解釋為HTML分隔符,可以按照實際的空格數顯示。

          問題:怎么使用全角輸入法?

          以搜狗輸入法為例,我們通常使用的是半角輸入,其狀態欄中有個月亮的標志,就說明正在使用的是半角輸入,如果是太陽的標志,就說明使用的是全角輸入。全角/半角的切換可以通過點擊標志,也可以通過快捷鍵 Shift+Space(空格符)切換。

          半角輸入(月亮)

          全角輸入(太陽)

          方法四:使用CSS樣式中字間隔屬性控制,CSS中的word-spacing 屬性可以改變字(單詞)之間的標準間隔。我們知道英文中兩個單詞之間是通過空格隔開的,所以我們視覺上可以這樣認為,word-spacing改變了(拉長或縮短)單詞之間那個空格的寬度。

          方法五:使用CSS樣式中的white-space 屬性,這個屬性聲明如何處理元素內的空白符。

          描述

          normal

          默認。空白會被瀏覽器忽略。

          pre

          空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。

          nowrap

          文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。

          pre-wrap

          保留空白符序列,但是正常地進行換行。

          pre-line

          合并空白符序列,但是保留換行符。


          white-space:normal;就是正常,和不設置一樣,連續空格和空行都只會顯示一個空格。

          white-space:nowrap;不換行是什么意思呢?正常情況下,當我們的文本超出了文本域,文本就會自動折行,這個設置就是說不自動折行了,而是碰到換行標簽<br />才換

          white-space:pre;和方法一相同,將文本原樣輸出顯示。當文本超出文本域時,不換行,會產生滾動條。

          white-space:pre-wrap;保留空格和空行,但當文本超出文本域時,會自動換行。

          white-space:pre-line;連續的空格會顯示為一個空格,但保留連續的空行。

          TML 代碼約定

          很多 Web 開發人員對 HTML 的代碼規范知之甚少。

          在2000年至2010年,許多Web開發人員從 HTML 轉換到 XHTML。

          使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

          而針對于 HTML5 ,我們應該形成比較好的代碼規范,以下提供了幾種規范的建議。

          使用正確的文檔類型

          文檔類型聲明位于HTML文檔的第一行:

          <!DOCTYPE html>

          如果你想跟其他標簽一樣使用小寫,可以使用以下代碼:

          <!doctype html>

          使用小寫元素名

          HTML5 元素名可以使用大寫和小寫字母。

          推薦使用小寫字母:

          • 混合了大小寫的風格是非常糟糕的。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <SECTION>

          <p>這是一個段落。</p>

          </SECTION>

          非常糟糕:

          <Section>

          <p>這是一個段落。</p>

          </SECTION>

          推薦:

          <section>

          <p>這是一個段落。</p>

          </section>

          關閉所有 HTML 元素

          在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關閉標簽。

          不推薦:

          <section>

          <p>這是一個段落。

          <p>這是一個段落。

          </section>

          推薦:

          <section>

          <p>這是一個段落。</p>

          <p>這是一個段落。</p>

          </section>

          關閉空的 HTML 元素

          在 HTML5 中, 空的 HTML 元素也不一定要關閉:

          我們可以這么寫:

          <meta charset="utf-8">

          也可以這么寫:

          <meta charset="utf-8" />

          在 XHTML 和 XML 中斜線 (/) 是必須的。

          如果你期望 XML 軟件使用你的頁面,使用這種風格是非常好的。

          使用小寫屬性名

          HTML5 屬性名允許使用大寫和小寫字母。

          我們推薦使用小寫字母屬性名:

          • 同時使用大小寫是非常不好的習慣。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <div CLASS="menu">

          推薦:

          <div class="menu">

          屬性值

          HTML5 屬性值可以不用引號。

          屬性值我們推薦使用引號:

          • 如果屬性值含有空格需要使用引號。

          • 混合風格不推薦的,建議統一風格。

          • 屬性值使用引號易于閱讀。

          以下實例屬性值包含空格,沒有使用引號,所以不能起作用:

          <table class=table striped>

          以下使用了雙引號,是正確的:

          <table class="table striped">

          圖片屬性

          圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          定義好圖片的尺寸,在加載時可以預留指定空間,減少閃爍。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          空格和等號

          等號前后可以使用空格。

          <link rel = "stylesheet" href = "styles.css">

          但我們推薦少用空格:

          <link rel="stylesheet" href="styles.css">

          避免一行代碼過長

          使用 HTML 編輯器,左右滾動代碼是不方便的。

          每行代碼盡量少于 80 個字符。

          空行和縮進

          不要無緣無故添加空行。

          為每個邏輯功能塊添加空行,這樣更易于閱讀。

          縮進使用兩個空格,不建議使用 TAB。

          比較短的代碼間不要使用不必要的空行和縮進。

          不必要的空行和縮進:

          <body>

          <h1>菜鳥教程</h1>

          <h2>HTML</h2>

          <p>

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想,

          菜鳥教程,學的不僅是技術,更是夢想。

          </p>

          </body>

          推薦:

          <body>

          <h1>菜鳥教程</h1>

          <h2></h2>

          <p>菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。</p>

          </body>

          表格實例:

          <table>

          <tr>

          <th>Name</th>

          <th>Description</th>

          </tr>

          <tr>

          <td>A</td>

          <td>Description of A</td>

          </tr>

          <tr>

          <td>B</td>

          <td>Description of B</td>

          </tr>

          </table>

          列表實例:

          <ol>

          <li>London</li>

          <li>Paris</li>

          <li>Tokyo</li>

          </ol>

          省略 <html> 和 <body>?

          在標準 HTML5 中, <html> 和 <body> 標簽是可以省略的。

          以下 HTML5 文檔是正確的:

          實例:

          <!DOCTYPE html>

          <head>

          <title>頁面標題</title>

          </head>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          嘗試一下 ?

          不推薦省略 <html> 和 <body> 標簽。

          <html> 元素是文檔的根元素,用于描述頁面的語言:

          <!DOCTYPE html>

          <html lang="zh">

          聲明語言是為了方便屏幕閱讀器及搜索引擎。

          省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

          省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

          省略 <head>?

          在標準 HTML5 中, <head>標簽是可以省略的。

          默認情況下,瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

          實例

          <!DOCTYPE html>

          <html>

          <title>頁面標題</title>

          <body>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          </body>

          </html>

          嘗試一下 ?

          現在省略 head 標簽還不推薦使用。

          元數據

          HTML5 中 <title> 元素是必須的,標題名描述了頁面的主題:

          <title>菜鳥教程</title>

          標題和語言可以讓搜索引擎很快了解你頁面的主題:

          <!DOCTYPE html>

          <html lang="zh">

          <head>

          <meta charset="UTF-8">

          <title>菜鳥教程</title>

          </head>

          HTML 注釋

          注釋可以寫在 <!-- 和 --> 中:

          <!-- 這是注釋 -->

          比較長的評論可以在 <!-- 和 --> 中分行寫:

          <!--

          這是一個較長評論。 這是 一個較長評論。這是一個較長評論。

          這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。

          -->

          長評論第一個字符縮進兩個空格,更易于閱讀。

          樣式表

          樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

          <link rel="stylesheet" href="styles.css">

          短的規則可以寫成一行:

          p.into {font-family: Verdana; font-size: 16em;}

          長的規則可以寫成多行:

          body {

          background-color: lightgrey;

          font-family: "Arial Black", Helvetica, sans-serif;

          font-size: 16em;

          color: black;

          }

          • 將左花括號與選擇器放在同一行。

          • 左花括號與選擇器間添加以空格。

          • 使用兩個空格來縮進。

          • 冒號與屬性值之間添加已空格。

          • 逗號和符號之后使用一個空格。

          • 每個屬性與值結尾都要使用符號。

          • 只有屬性值包含空格時才使用引號。

          • 右花括號放在新的一行。

          • 每行最多 80 個字符。

          在逗號和分號后添加空格是常用的一個規則。

          在 HTML 中載入 JavaScript

          使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

          <script src="myscript.js">

          使用 JavaScript 訪問 HTML 元素

          一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

          以下兩個 JavaScript 語句會輸出不同結果:

          實例

          var obj = getElementById("Demo")

          var obj = getElementById("demo")

          HTML 中 JavaScript 盡量使用相同的命名規則。

          訪問 JavaScript 代碼規范。

          使用小寫文件名

          大多 Web 服務器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。

          其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

          你必須保持統一的風格,我們建議統一使用小寫的文件名。

          文件擴展名

          HTML 文件后綴可以是 .html (或r .htm)。

          CSS 文件后綴是 .css

          JavaScript 文件后綴是 .js

          .htm 和 .html 的區別

          .htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

          區別在于:

          .htm 應用在早期 DOS 系統,系統現在或者只能有三個字符。

          在 Unix 系統中后綴沒有特別限制,一般用 .html。

          技術上區別

          如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

          如果服務器只配置了 "index.html" 作為默認文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。

          但是,通常服務器可以設置多個默認文件,你可以根據需要設置默認文件嗎。

          不管怎樣,HTML 完整的后綴是 ".html"。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          分享成果,隨喜正能量】人生,有多少計較,就有多少痛苦。有多少寬容,就有多少歡樂。痛苦與歡樂都是心靈的折射,就像鏡子里面有什么,決定于鏡子面前的事物。心里放不下,自然成了負擔,負擔越多,人生越不快樂。計較的心如同口袋,寬容的心猶如漏斗。復雜的心愛計較,簡單的心易快樂。

          《VBA信息獲取與處理》教程是我推出第六套教程,目前已經是第一版修訂了。這套教程定位于最高級,是學完初級,中級后的教程。這部教程給大家講解的內容有:跨應用程序信息獲得、隨機信息的利用、電子郵件的發送、VBA互聯網數據抓取、VBA延時操作,剪貼板應用、Split函數擴展、工作表信息與其他應用交互,FSO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數等等內容。程序文件通過32位和64位兩種OFFICE系統測試。是非常抽象的,更具研究的價值。

          教程共兩冊,八十四講。今日的內容是專題八“VBA與HTML文檔”的第二節上半部分:HTML文檔元素

          第二節 HTML文檔的元素分析之一

          大家好,我們這講開始HTML的講解,為了認識這種特殊的語言,我們要先看看這種語言中的各種元素個代表什么意義。上節中在講這種語言的特征時講過,標簽是用來描述網頁的。瀏覽器讀取HTML文檔,識別標簽,并按標簽要求以網頁進行顯示文本。大部分標簽都是成隊出現的。

          起始標簽和結束標簽之間的所有文本,都叫做元素。也就是這個格式就是:

          <起始標簽:也叫元素名>元素的內容<結束標簽:/+元素名>

          標簽是可以擁有屬性的,屬性提供了元素的一些附加信息,起始標簽,有時候格式如下:

          <元素名 屬性名稱=”屬性值”>

          同時,元素是可以擁有元素的,即某個元素的內容有時候是一個子元素。

          元素這東西,比較抽象,我們可以把它且當作一個對象來理解,例如工作簿對象,每個工作簿的名稱都不一樣(屬性),每個工作簿里面都有工作表(子元素),每個表都有名稱(屬性),里面填寫的內容也不一樣(元素的內容)。

          1 HTML文檔構成的整體框架結構

          在上一講中我們舉了一個最為簡單的實例來說明HTML文檔:

          <html>

          <body>

          <h1>學習VBA語言</h1>

          <p>為了更好的掌握VBA的各個知識點,您可以參考我的第一套教程:VBA代碼解決方案</p>

          </body>

          </html>

          我們將上面的格式修正一下,如下面:

          <html>

          <head> <!--注釋:文檔頭部,文檔相關消息,并不提供文檔內容-->

          <title>

          VBA應用提高篇

          </title>

          </head>

          <body> <!--注釋:文檔主體-->

          <h1>學習VBA語言</h1>

          <p>為了更好的掌握VBA的各個知識點,您可以先參考我的第一套教程:VBA代碼解決方案</p>

          </body>

          </html>

          將上面的內容寫入記事本中保存為.html文件:HTML基礎學習-1.html

          然后我們雙擊打開這個文件,看看瀏覽器的翻譯效果:

          我們再看看網頁的源碼:

          從上面的框架代碼,我們可以看出,一般的頁面,都有html元素,其一般內含兩個元素,一個是head元素,一個是body元素。Head元素僅僅說明文檔的相關消息,并不展示文檔實體,body元素才是真正展示文檔主體的,所有要在頁面展示的元素,都要在body內進行書寫。

          2 HTML文檔常用元素的構成

          1)HTML標題 <h1> - <h6>

          標題(Heading)是通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題。<h6> 定義最小的標題。瀏覽器會自動地在標題的前后添加空行。標題很重要,將 HTML heading 標簽只用于標題。不要僅僅是為了產生粗體或大號的文本而使用標題。因為用戶可以通過標題來快速瀏覽您的網頁,所以用標題來呈現文檔結構是很重要的。應該將 h1 用作主標題(最重要的),其后是 h2(次重要的),再其次是 h3,以此類推。在HTML基礎學習.HTML文件中我們已經用到了標題的元素

          2)HTML水平線 <hr />

          <hr /> 標簽在 HTML 頁面中創建水平線。可用于分隔內容。

          [待續]

          本節參考文件:HTML基礎學習-1.html;HTML基礎學習-2.html

          我20多年的VBA實踐經驗,全部濃縮在下面的各個教程中,教程學習順序:

          【分享成果,隨喜正能量】人生,一歲有一歲的味道,一站有一站的風景,你的年齡應該成為你生命的勛章而不是你傷感的理由。 ??


          主站蜘蛛池模板: 国产在线精品一区二区| 亚洲国产成人久久一区久久| 精品无码国产一区二区三区51安| 亚洲综合无码一区二区痴汉 | 国产高清一区二区三区四区| 射精专区一区二区朝鲜| 久久精品无码一区二区日韩AV| 色欲综合一区二区三区| 久久99精品国产一区二区三区| 高清一区二区三区视频| 亚洲av综合av一区二区三区| 久久国产午夜精品一区二区三区| 日本免费一区二区三区最新vr| 精品一区二区久久| 国产一区二区电影| 国产av福利一区二区三巨| 日韩毛片一区视频免费| 精品国产精品久久一区免费式| 亚洲中文字幕久久久一区| 人妻无码第一区二区三区| 亚洲美女一区二区三区| 亚洲一区精彩视频| 伊人色综合网一区二区三区| 国产日韩一区二区三区| 麻豆AV无码精品一区二区| 日韩成人无码一区二区三区| 精品香蕉一区二区三区| 精品国产亚洲一区二区三区在线观看| 国产成人精品第一区二区| 激情久久av一区av二区av三区| 一区二区三区视频| 一区二区精品久久| 亚洲毛片αv无线播放一区| 乱码精品一区二区三区| 日产亚洲一区二区三区| 美女免费视频一区二区| 中文字幕Av一区乱码| 精品视频一区二区三区四区| 天天躁日日躁狠狠躁一区| 国产精品日韩欧美一区二区三区| 国产成人亚洲综合一区|