整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML詳細介紹1
          
        
           
          
	
	
          
		
                        
          tml概述和基本結構
          html概述
          HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
          html基本結構
          一個html的基本結構如下：
          <!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>網頁標題</title>
 </head>
 <body>
 網頁顯示內容
 </body>
</html>

          第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。
          HTML文檔類型
          目前常用的兩種文檔類型是xhtml 1.0和html5
          xhtml 1.0
          xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。
          此版本文檔用sublime text創建方法： html:xt + tab
          文檔示例：
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文檔類型 </title>
</head>
<body>
</body>
</html>

          html5
          pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
          此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab
          文檔示例：
          <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文檔類型 </title>
</head>
<body>
</body>
</html>

          兩種文檔的區別
          1、文檔聲明和編碼聲明
          2、html5新增了標簽元素以及元素屬性
          html注釋：
          html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：
          <!-- 這是一段注釋 -->

          html標題標簽
          通過
          、
          、
          、
          、
          、
          ,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：
          用作主標題，其后是
          ，再其次是
          ，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。
          <h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

          html段落標簽、換行標簽與字符實體
          html段落標簽
          標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：
          <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的
 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
 </p>
 <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方
 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網
 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
</body>
</html>

          html換行標簽
          代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入
          來強制換行，代碼如下：
          <p>
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
</p>

          html字符實體
          代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
          <!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： -->
<p>
 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

          在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：
          <!-- “<” 和 “>” 的字符實體為 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

          html塊標簽、含樣式的標簽
          html塊標簽
          1、
          標簽 塊元素，表示一塊內容，沒有具體的語義。
          2、 標簽 行內元素，表示一行中的一小段內容，沒有具體的語義。
          含樣式和語義的標簽
          1、 標簽 行內元素，表示語氣中的強調詞
          2、 標簽 行內元素，表示專業詞匯
          3、 標簽 行內元素，表示文檔中的關鍵字或者產品名
          4、 標簽 行內元素，表示非常重要的內容
          語義化的標簽
          語義化的標簽，就是在布局的時候多使用有語義的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。
          html圖像標簽、絕對路徑和相對路徑
          html圖像標簽
          標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：
          src屬性 定義圖片的引用地址
          alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
          <img src="images/pic.jpg" alt="產品圖片" />

          絕對路徑和相對路徑
          像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
          絕對地址：相對于磁盤的位置去定位文件的地址
          相對地址：相對于引用文件本身去定位被引用的文件地址
          絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
          “ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
          “ …/ ” 表示當前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
          html鏈接標簽
          標簽可以在網頁上定義一個鏈接地址，它的常用屬性有：
          href屬性 定義跳轉的地址
          title屬性 定義鼠標懸停時彈出的提示文字框
          target屬性 定義鏈接窗口打開的位置
          target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
          target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
          oundation 可以很簡單的創建一個提醒框：
          提醒框可以使用 .alert-box 類創建, 可以添加可選的類： .secondary, .success, .info, .warning 或 .alert:
          實例
          <div data-alert class="alert-box">
           This is a default alert box.
          </div>
          <div data-alert class="alert-box secondary">
           This is a secondary alert box.
          </div>
          <div data-alert class="alert-box success">
           <strong>Success!</strong> This alert box indicates a successful or positive action.
          </div>
          <div data-alert class="alert-box info">
           <strong>Info!</strong> This alert box indicates a neutral informative change or action.
          </div>
          <div data-alert class="alert-box warning">
           <strong>Warning!</strong> This alert box indicates a warning that might need attention.
          </div>
          <div data-alert class="alert-box alert">
           <strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
          </div>
          圓角提醒框
          .radius 和 .round 類用于為提醒框添加圓角：
          實例
          <div data-alert class="alert-box success radius">
           <strong>Success!</strong> Alert box with a radius. 
          </div>
          <div data-alert class="alert-box info round">
           <strong>Info!</strong> Alert box that is rounded.
          </div>
          關閉提醒框
          要關閉提醒框，可以在連接或按鈕元素上添加 class="close" 類，并初始化 Foundation JS:
          實例
          <div data-alert class="alert-box">
           This is a default alert box with closing functionality.
           <a href="#" class="close">&times;</a>
          </div>
          <script>
          // Initialize Foundation JS For Functionality
          $(document).ready(function() {
           $(document).foundation();
          })
          </script>
          提醒框的寬度為容器的 100%。
          &times; (×) 是一個 HTML 字符實體表示一個關閉按鈕的圖標，而不是字母 "x"。
          圍：十進制 8448-8527，十六進制 2100-214F。
          如果您想要在 HTML 中顯示這些字符，您可以使用下表中的 HTML 實體。
          如果字符沒有 HTML 實體，您可以使用十進制或十六進制引用。

          實例
          <p>我將顯示 &trade;<p>
          <p>我將顯示 &#8482;<p>
          <p>我將顯示 &#x2122;<p>
          結果如下：
          我將顯示 ?
          我將顯示 ?
          我將顯示 ?
          并非下表中的所有實體都能在所有的瀏覽器中正確地顯示。
          目前，IE 11 是唯一一個能正確顯示所有 HTML5 實體的瀏覽器。
          字符十進制十六進制實體名稱
          ?84482100ACCOUNT OF
          ?84492101ADDRESSED TO THE SUBJECT
          ?84502102雙重大寫 C（DOUBLE-STRUCK CAPITAL C）
          ℃84512103攝氏度（DEGREE CELSIUS）
          ?84522104中心線符號（CENTRE LINE SYMBOL）
          ℅84532105CARE OF
          ?84542106CADA UNA
          ?84552107歐拉常數（EULER CONSTANT）
          ?84562108SCRUPLE
          ℉84572109華氏度（DEGREE FAHRENHEIT）
          ?8458210A腳本小寫 G（SCRIPT SMALL G）
          ?8459210B腳本大寫 H（SCRIPT CAPITAL H）
          ?8460210C黑體字大寫 H（BLACK-LETTER CAPITAL H）
          ?8461210D雙重大寫 H（DOUBLE-STRUCK CAPITAL H）
          ?8462210E普朗克常數（PLANCK CONSTANT）
          ?8463210F約化普朗克常數（PLANCK CONSTANT OVER TWO PI）
          ?84642110腳本大寫 I（SCRIPT CAPITAL I）
          ?84652111&image;黑體字大寫 I（BLACK-LETTER CAPITAL I）
          ?84662112腳本大寫 L（SCRIPT CAPITAL L）
          ?84672113腳本小寫 L（SCRIPT SMALL L）
          ?84682114L B 加橫杠符號（L B BAR SYMBOL）
          ?84692115雙重大寫 N（DOUBLE-STRUCK CAPITAL N）
          №84702116NUMERO 符號（NUMERO SIGN）
          ?84712117錄音版權（SOUND RECORDING COPYRIGHT）
          ?84722118&weierp;腳本大寫 P（SCRIPT CAPITAL P）
          ?84732119雙重大寫 P（DOUBLE-STRUCK CAPITAL P）
          ?8474211A雙重大寫 Q（DOUBLE-STRUCK CAPITAL Q）
          ?8475211B腳本大寫 R（SCRIPT CAPITAL R）
          ?8476211C&real;黑體字大寫 R（BLACK-LETTER CAPITAL R）
          ?8477211D雙重大寫 R（DOUBLE-STRUCK CAPITAL R）
          ?8478211EPRESCRIPTION TAKE
          ?8479211F響應（RESPONSE）
          ?84802120服務標記（SERVICE MARK）
          ℡84812121電話標志（TELEPHONE SIGN）
          ?84822122&trade;商標符號（TRADE MARK SIGN）
          ?84832123VERSICLE
          ?84842124雙重大寫 Z（DOUBLE-STRUCK CAPITAL Z）
          ?84852125盎司符號（OUNCE SIGN）
          ?84862126歐姆符號（OHM SIGN）
          ?84872127倒置的歐姆符號（INVERTED OHM SIGN）
          ?84882128黑體字大寫 Z（BLACK-LETTER CAPITAL Z）
          ?84892129反轉倒置的希臘小寫字母 IOTA（TURNED GREEK SMALL LETTER IOTA）
          ?8490212A開爾文符號（KELVIN SIGN）
          ?8491212B埃符號（ANGSTROM SIGN）
          ?8492212C腳本大寫 B（SCRIPT CAPITAL B）
          ?8493212D黑體字大寫 C（BLACK-LETTER CAPITAL C）
          ?8494212E估算符號（ESTIMATED SYMBOL）
          ?8495212F腳本小寫 E（SCRIPT SMALL E）
          ?84962130腳本大寫 E（SCRIPT CAPITAL E）
          ?84972131腳本大寫 F（SCRIPT CAPITAL F）
          ?84982132反轉倒置的大寫 F（TURNED CAPITAL F）
          ?84992133腳本大寫 M（SCRIPT CAPITAL M）
          ?85002134腳本小寫 O（SCRIPT SMALL O）
          ?85012135&alefsym;阿勒夫符號（ALEF SYMBOL）
          ?85022136平衡發射極晶體管符號（BET SYMBOL）
          ?85032137GIMEL 符號（GIMEL SYMBOL）
          ?85042138德萊符號（DALET SYMBOL）
          ?85052139信息源（INFORMATION SOURCE）
          ?8506213A旋轉的大寫 Q（ROTATED CAPITAL Q）
          ?8507213B傳真符號（FACSIMILE SIGN）
          ?8508213C雙重小寫 PI（DOUBLE-STRUCK SMALL PI）
          ?8509213D雙重小寫 GAMMA（DOUBLE-STRUCK SMALL GAMMA）
          ?8510213E雙重大寫 GAMMA（DOUBLE-STRUCK CAPITAL GAMMA）
          ?8511213F雙重大寫 PI（DOUBLE-STRUCK CAPITAL PI）
          ?85122140雙重 N 元的總和（DOUBLE-STRUCK N-ARY SUMMATION）
          ?85132141反轉倒置的無襯線的大寫 G（反轉倒置的無襯線的大寫（TURNED SANS-SERIF CAPITAL G）
          ?85142142反轉倒置的無襯線的大寫 L（TURNED SANS-SERIF CAPITAL L）
          ?85152143反轉的無襯線的大寫 L（REVERSED SANS-SERIF CAPITAL L）
          ?85162144反轉倒置的無襯線的大寫 Y（TURNED SANS-SERIF CAPITAL Y）
          ?85172145雙重的斜體大寫 D（DOUBLE-STRUCK ITALIC CAPITAL D）
          ?85182146雙重的斜體小寫 D（DOUBLE-STRUCK ITALIC SMALL D）
          ?85192147雙重的斜體小寫 E（DOUBLE-STRUCK ITALIC SMALL E）
          ?85202148雙重的斜體小寫 I（DOUBLE-STRUCK ITALIC SMALL I）
          ?85212149雙重的斜體小寫 J（DOUBLE-STRUCK ITALIC SMALL J）
          ?8522214A地界線（PROPERTY LINE）
          ?8523214B反轉倒置的符號（TURNED AMPERSAND）
          ?8524214CPER 符號（PER SIGN）
          ?8525214DAKTIESELSKAB
          ?8526214E反轉倒置的小寫 F（TURNED SMALL F）
          ?8527214F撒瑪利亞源符號（SYMBOL FOR SAMARITAN SOURCE）
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国模无码一区二区三区|
国产色综合一区二区三区|
日韩成人一区ftp在线播放|
在线精品一区二区三区电影|
精品一区狼人国产在线|
国产成人精品无码一区二区|
久久一本一区二区三区|
亚洲av无一区二区三区|
久久99热狠狠色精品一区|
免费看AV毛片一区二区三区|
中文人妻av高清一区二区|
精品少妇ay一区二区三区
|
香蕉免费一区二区三区|
国产福利日本一区二区三区|
久久99国产一区二区三区|
精品国产AⅤ一区二区三区4区
|
国产福利视频一区二区|
亚洲一区中文字幕在线观看|
国产成人av一区二区三区不卡
|
日韩人妻精品无码一区二区三区|
国产韩国精品一区二区三区久久|
在线播放偷拍一区精品|
亚洲一区精彩视频|
久久精品国产一区二区电影|
97av麻豆蜜桃一区二区|
成人乱码一区二区三区av|
日韩在线视频一区二区三区|
亚洲色精品VR一区区三区|
精品一区二区三区四区|
久久精品国产一区二区三区不卡|
精品国产一区二区三区久久影院
|
在线欧美精品一区二区三区|
免费一区二区三区|
国产亚洲情侣一区二区无码AV|
99精品一区二区三区无码吞精|
一区二区三区视频|
国产福利一区二区三区视频在线|
国产日韩一区二区三区在线播放|
中文字幕日韩一区二区三区不卡|
丰满人妻一区二区三区视频53|
国模精品一区二区三区|