整合營銷服務商

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

          免費咨詢熱線:

          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;連續的空格會顯示為一個空格,但保留連續的空行。

          一下html中文件標簽和文本標簽的使用

          目的是學會使用,所以借助工具可以省好多時間

          1.文件標簽:構成html最基本的標簽

          html:html文檔的根標簽

          head:頭標簽。用于引入html文檔的一些屬性。引入外部的一些資源

          title:標題標簽

          body:體標簽

          <!DOCTYPE html>:html5中定義該文檔是html

          2.文本標簽:和文本有關的標簽

          注釋:<!-- 注釋內容 –->

          <h1> 到<h6>:標題標簽自帶換行的效果

          <p>:表示段落的標簽

          <br>:換行標簽<br/>和<br>的寫法都不會報錯

          <hr>:顯示一條水平線(也是一個自閉和標簽)水平線有一些屬性我們可以控制它的樣式。hr里面表示高度是size而不是height.對齊方式默認是居中的。

          <b>:字體加粗

          <i>:斜體

          <font>:字體標簽(通過屬性來修改字體的字號,大小,顏色,以及字體的樣式)

          <center>:文本居然標簽

          這里講下網頁下面的版權標簽是如何寫出來的。

          3.圖片標簽:用來展示圖片的(圖片也是一個自閉合標簽)

          屬性:src:用來指定圖片的位置

          什么都不寫默認就是./的形式

          ../表示上一級目錄

          4.列表標簽:

          有序列表:ol,li(li表示的是列表的每一項)

          無序列表:ul,li

          5.鏈接標簽:

          a:定義一個超鏈接

          屬性:

          href:指定訪問資源的URL(統一資源定位符,就是路徑的表示形式)

          target:(是目標的意思)指定打開資源的方式

          _self:在當前頁面打開

          _blank:在空白頁面打開

          6.表格標簽:在HTML中的表格只有行的概念,沒有列的概念,將表格以行的形式進行分割,然后再對行進行操作。

          table:定義表格

          width:表格的寬度

          border:邊框

          cellpadding:單元格內容左對齊(定義內容和單元格的距離)

          cellspacing:邊框合并(定義單元格之間的距離,如果指定為0,單元格的線會合為一條)

          bgcolor:背景色

          align:表格的對齊樣式

          tr:定義行

          bgcolor:背景色

          align:表格的對齊樣式(是用來修改文本的對齊方式的)


          td:定義單元格

          colspan:合并列

          rowspan:合并行

          th:定義表頭單元格

          <caption>:表格標題

          <thread>:表示表格的頭部分

          <tbody>:表示表格的體部分

          <tfoot>:表示表格的腳部分

          7.塊標簽:div和span是結合css使用的

          span:文本信息在一行顯示,行內標簽,內聯標簽(意思就是它不會換行)

          div:是會換行的。每一個div占滿一整行。塊級別的標簽

          8.語義化標簽:html5中為了提高程序的可讀性,提高了一些標簽

          <header>

          <footer>

          TML是一種用來描述網頁的標記性語言。學習HTML可能并不難,主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況,整理出平時常用的HTML標簽。

          HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客

          1、最基本的HTML結構

          <!--<!DOCTYPE> 是HTML5聲明,<!DOCTYPE> 必須是 HTML 文檔的第一行,位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->

          <!DOCTYPE html>

          <html>

          <!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分:title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->

          <head>

          <!-- 設置字符集,如果字符集不對,可能導致亂碼。一般建議utf-8國際編碼 -->

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />

          <!-- SEO相關標簽,title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->

          <title>網頁標題</title>

          <meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />

          <meta name="description" content="PHP程序員,雷雪松(Raykaeso)的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習,PHP開發與編程,Web前端開發,MySQL學習和教程,NoSQL數據庫教程以及個人的人生經歷和觀點。" />

          <link rel="stylesheet" type="text/css" href="main.css" />

          <script type="text/javascript" src="main.js"></script>

          </head>

          <!-- 正文部分,所有在瀏覽器上可見的內容必須寫在body標簽內部 -->

          <body>

          </body>

          </html>

          2、最常用的HTML標簽

          a、布局標簽

          div標簽定義文檔中的分區或節(division/section),可以把文檔分割為獨立的、不同的部分,主要用于布局。

          aside標簽的內容可用作文章的側欄,<span style="color: #ff0000;">html5新增標簽</span>。

          header標簽定義頁面的頭部(介紹信息),<span style="color: #ff0000;">html5新增標簽</span>。

          section標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分,<span style="color: #ff0000;">html5新增標簽</span>。

          footer 標簽定義文檔或節的頁腳,通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等,<span style="color: #ff0000;">html5新增標簽</span>。

          article標簽規定文章獨立的其他內容,比如:標題、內容、評論,<span style="color: #ff0000;">html5新增標簽</span>。

          b、文本標簽

          h1-h6標簽可定義標題

          p標簽定義段落

          b/strong標簽加粗

          em標簽來表示強調的文本,斜體

          strong標簽表示重要文本

          u標簽下劃線

          s標簽刪除線

          br標簽表示回車換行

          hr標簽表示水平線

          span標簽被用來組合文檔中的行內元素。

          blockquote標簽表示塊引用

          pre標簽可定義預格式化的文本,保持原有格式的一種標簽。

          sub標簽下標,

          sup>標簽上標

          &nbsp;表示一個空格

          &copy;表示版權符

          &lt;表示<

          &gt;表示>

          c、a標簽定義超鏈接,指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點,可以在當前頁面打開,新開窗口。

          <a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>

          d、多媒體標簽

          img標簽主要在網頁中插入圖像,可以定義圖片替換文本、顯示寬度和高度、是否帶邊框,建議等比例設置,否則圖像會變形。

          <img src="圖片地址" alt="替換文本,圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />

          audio標簽定義聲音,比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。

          <audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>

          video標簽定義視頻,比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。

          <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>

          e、序列化標簽

          ul和li無序列表標簽

          <ul>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ul>

          ol和li有序列表標簽,可以使用type屬性規定有序列表符號的類型。1 按數字有序排列,為默認值,(1、2、3、4);a 按小寫字母有序排列,(a、b、c、d);A 按字母大寫有序排列,(A、B、C、D)。i 按小寫羅馬字母有序,(i, ii, iii, iv);I 按小寫羅馬字母有序,(I, II, III, IV)。

          <ol>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ol>

          dl標簽定義了定義列表(definition list),dl標簽用于結合 dt(定義列表中的項目)和 dd(描述列表中的項目)。

          <dl>

          <dt>計算機</dt>

          <dd>用來計算的儀器 ... ...</dd>

          </dl>

          f、表格標簽

          table標簽和tr標簽,th標簽和td標簽,合并單元格。

          <table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">

          <tr>

          <th>標題</th>

          <th>標題</th>

          </tr>

          <tr>

          <!-- 合并橫向單元格 -->

          <td colspan="2" nowrap="nowrap">&amp;nbsp;</td>

          </tr>

          <tr>

          <td></td>

          <!-- 合并縱向單元格 -->

          <td rowspan="2"> </td>

          </tr>

          <tr>

          <td height="16"> </td>

          </tr>

          </table>

          g、表單標簽

          form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼,需要提交的表單一定要放在form標簽內。

          <form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>

          input標簽用于搜集用戶信息

          <input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />

          密碼,輸入的字符會被掩碼(顯示為星號或原點)

          <input name="pwd" type="password" maxlength="5" size="100" value="" />

          文件類型的表單,上傳文件時,form表單一定要設置為enctype="multipart/form-data"

          <input type="file" name="file" />

          隱藏表單

          <input type="hidden" name="country" value="China" />

          提交

          <input type="submit" name="Submit" value="提交" disabled="disabled" />

          重置

          <input type="reset" name="Submit2" value="重置" />

          radio單選

          <input name="sex" type="radio" value="1" />男

          <input name="sex" type="radio" value="2" checked="checked" />女

          checkbox多選

          <input name="skill" type="checkbox" value="1" checked="checked" />PHP

          <input name="skill" type="checkbox" value="2" />前端

          <input name="skill" type="checkbox" value="2" />數據庫

          <span style="color: #ff0000;">注:checked="checked"可以簡寫成checked</span>

          label標簽為input元素定義標注,如果您點擊label元素文本,就會觸發此input控件。

          textarea標簽,設置文本區內的可見行數和寬度

          <textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>

          button標簽定義一個按鈕

          提交按鈕

          <button type="submit" value="提交">提交</button>

          重置按鈕

          <button type="reset" value="重置">重置</button>

          select標簽和option標簽下拉列表

          單選菜單列表框

          <select name="user">

          <option value="1">ray</option>

          <option value="2" selected="selected">raykaeso</option>

          </select>

          多選列表下拉框,shift加鼠標單擊,可以連續選擇多個選擇,CTRL+鼠標點擊,可以點擊多個。

          <select name="user" size="10" multiple="multiple">

          <option value="1">雷雪松</option>

          <option value="2" selected="selected">ray</option>

          <option value="3">raykaeso</option>

          </select>

          注:selected="selected"可簡寫成selected,表示選中

          3、其他HTML事項

          a、HTML標簽和屬性是不區分大小寫的,建議HTML標簽和屬性都小寫,屬性值必須用雙引號包圍。

          b、HTML標簽都是以開始標簽起始,以結束標簽終止。大部分HTML標簽都是成對出現的,稱為雙標簽,比如:p標簽、div標簽,也有的HTML標簽在開始標簽中結束的標簽,稱為單標簽,比如:hr標簽、br標簽。大多數 HTML 元素可擁有屬性,文本內容都是寫在開始標簽與結束標簽之間。

          c、HTML標簽之間盡量縮進與換行,每行代碼不要過長,方便閱讀和維護。

          d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽,p標簽嵌套div標簽。

          e、建議不使用HTML已經廢棄的或者不贊成使用的標簽,少使用table布局、iframe框架嵌套以及flash播放器。

          來源:PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽(http://www.leixuesong.cn/2045)


          主站蜘蛛池模板: 色老板在线视频一区二区| 丝袜无码一区二区三区| 中文字幕一区二区三区永久 | 国产精品主播一区二区| 久久国产精品亚洲一区二区| 亚洲午夜电影一区二区三区| 精品国产毛片一区二区无码| 中文无码一区二区不卡αv| 国精产品一区二区三区糖心| 日本在线视频一区二区三区 | 一区二区在线观看视频| 国产情侣一区二区三区| 女人18毛片a级毛片一区二区| 国产成人精品无码一区二区| 国产av福利一区二区三巨| 亚洲AV无码片一区二区三区| 无码人妻精品一区二区在线视频| 琪琪see色原网一区二区| 亚洲综合色一区二区三区| 久久国产精品一区免费下载| 国产一区二区三区免费观看在线| 国模一区二区三区| 成人无号精品一区二区三区| 97精品国产一区二区三区| 色久综合网精品一区二区| 国产综合一区二区| 国精品无码一区二区三区左线| 日美欧韩一区二去三区| 国产精品无码一区二区三区在| 无码少妇丰满熟妇一区二区| 国产福利一区二区三区视频在线| 日韩免费视频一区二区| 日韩精品一区二区三区大桥未久| 国产无套精品一区二区| 欧洲精品无码一区二区三区在线播放| 无码欧精品亚洲日韩一区夜夜嗨| 精品一区二区三区无码免费直播| 国产精品亚洲一区二区三区久久| eeuss鲁片一区二区三区| 在线观看一区二区三区视频| 精品国产免费一区二区|