首頁 > 開發者 > 網站開發

【學習筆記】HTML基礎

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：排列   tle   改進      源碼   add   文字   sha   get   

【學習過程遇到疑問和延伸閱讀】

1.文本編碼

除了html標記外的文本，需要規定其編碼規則<meta charset="utf-8">，告知給瀏覽器，

否則瀏覽器選用電腦預設的編碼方式，或者是按照“自動選擇/檢測”編碼的設定。

這裡注意到有個概念，瀏覽器自動選擇的設定，若設定了以後優先按照該設定。

 

2.html標記語言是由瀏覽器的xxx來解析的？“瀏覽器解析html源碼”？

同一概念：網頁瀏覽器引擎，瀏覽器核心，排版引擎，渲染引擎

參考理解，瀏覽器解析HTML的過程及DOM的樹形結構

http://www.qdfuns.com/notes/15102/7e915575d17fe8112c99f43b567b314a.html

 

3.自然語言和程式語言

現有的程式設計語言當中，哪些和自然語言更接近？from 知乎

https://www.zhihu.com/question/19701701?sort=created

 

4.圖片可以看作為一個字元佔據頁面中？

 圖片為行內元素。

擴充理解：網頁的排列規則，在不使用其他的與排列和定位相關的特殊CSS規則時，是標準流。

HTML文檔中的元素可以分為兩大類：行內元素和區塊層級元素。

（1）行內元素不佔據單獨的空間，依附於區塊層級元素，行內元素沒有自己的地區。

（2）區塊層級元素總是以塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能並排。

 

【新概念，重要概念】

列表：一種非常有用的資料排列工具，它以清晰直觀的形式來顯示資料。

FTP：FTP是檔案傳輸通訊協定，伺服器中存有大量的共用軟體和免費資源，要想從伺服器中把檔案傳送到客戶機上或者把客戶機上的資源傳送至伺服器，就必須在兩台機器中進行檔案傳送，此時雙方必須要共同遵守一定的規則。FTP就是用來在客戶機和伺服器之間實現檔案傳輸的標準協議。它使用客戶/伺服器模式，客戶程式把客戶的請求告訴伺服器，並將伺服器發回的結果顯示出來。而伺服器端執行真正的工作，比如儲存、傳送檔案等。 


【實操知識點脈絡】

1.html基礎
1.1什麼是html
每天都在接觸HTML
HyperTextMarkupLanguage
頁面有連結其他頁面，這些其他頁面也有連結，
把這些所有頁面串連在一起，組成一個內容的網路。
這些內容組成超文本。

HTML是說這些頁面長成什麼樣子的語言。
最初的HTML從排版語言發展而來。

1.2.html的標準
是由W3C的組織所維護的。
實際標準由比較大的瀏覽器廠商所推動的。
是瀏覽器廠家在改進瀏覽器的過程中不斷互相接受和融合，而形成的事實標準。

而W3C在最後把它們寫成文本。以文字的形式確定下來。

HTML ，HTML5的關係：不是割裂的，是一脈相承的東西。HTML5也在發展當中。

1.3.html編輯軟體
Sublime Text2
建立html檔案，在瀏覽器開啟
文本編碼：utf-8編碼 ，不支援國標碼GBK

1.4.瀏覽器的調試功能
調試：即檢查編寫的內容有沒有問題
4.1編寫html檔案，並在瀏覽器開啟，調試查看



2.HTML檔案架構
2.1檔案架構
標記語言，在文本中加入標誌，而不是本文
html：
head：告訴瀏覽器預先配置的東西
body：告訴瀏覽器要顯示的東西，文本可見資訊
2.2html字元編碼問題
電腦是國標碼，瀏覽器認為html也是國標碼
在head裡，加上meta charset=utf-8 Unicode統一編碼
2.3html-聲明html5
<!DOCTYPE html>

 

3.段落標記
3.1<p>表示段落
html與css關係
3.2<br>斷行break，不需要對應的</br>
與<p>的區分
3.3<h1-6>標題，章區段標頭
head多級標題，數字越大，層級越低
3.4<hgroup>
標題標記是告知瀏覽器，常值內容的結構，一個重要的標記首段。

4html格式
html需要表達內容，表達結構，而不是格式，但早期
html還是遺留下來有表達格式的tag。
4.1基本格式
文字格式
<b><i><tt><small><del>
注意：要加上結束的slash tag，否則格式就會應用到標記開始往後的所有的文本
建議：還是使用css來表達格式

4.2段落格式
用在一段內容當中的格式，告知瀏覽器表達這段內容是什麼樣的內容
<em>強調，表示重要
<strong>表示著重
<dfn>表示定義
<code>表示code代碼，適用於在英文語言的技術文章當中容易標記出來某些函數名
<samp>表示samp例子代碼
<kbd>表達kbd使用者輸入
<var>variable變數
<cite>cite引用
實踐

4.3其它格式
有些又表達結構，又帶有一定格式的tag
<address>可放多行內容，也可被瀏覽器認識，可作為檢索的一部分。
<blockquote>縮排，可嵌套
<q>引用號包裹文字
<pre>premated，按照原本的格式顯示

5深入格式
5.1.HTML標記的屬性
5.1.1HTML 屬性
除了html標記本身，還可以加入一些東西，html屬性
<hr>
html標記的屬性，變數等於值的式子，可以形成不同的視覺效果
<hr width=50% align=left size=50>
曾經屬性值需要加引號，html5可以不加，目前所有瀏覽器都支援不加
<abbr title="中華人民共和國">PRC</abbr>
<p title="">...</p>
<h1 title="">...</h1>
<bdo dir=rtl>...<bdo>
<bdi>...<bdi>
5.1.2HTML逸出字元
在文本裡面想要表達小於符號<,而這個符號剛好為html標記的開始符號，
這怎麼辦呢？
&lt;
&gt;
字元實體，變號字型，也是用一些特殊的符號（即&lt;）來表達那個單獨符號(<)
還有哪些？
& ： &amp;
： &nbsp;none breakable space
加兩個小點的於：&uuml;&Uuml
當然還有很多。

5.2列表與圖片
5.2.1列表
<ul>unorder list，在每一個list item前用圓點表示
<ol>order list，在每一個list item前用編號表示
<li>list item,每一個list每一項的內容
注意：瀏覽器不管html標記之間的縮排，換行，這些縮排只是為了更好地閱讀源檔案。
<ol>有一個屬性start，可以調整編號的起始值。
<dl>defination list，由兩部分組成：<dt>defination term,<dd>defination description
5.2.2圖片
怎麼在頁面當中放入圖片？
用標記<img />
<img src="在當前html頁面底下的目錄裡的圖片路徑" />
注意理解：對於html來說，圖片是一個字元。跟頁面中的其他字元連在一起，一個個排過來。
它們的基準是在同一水平線上。這是預設的對齊，還有其他的對齊，html5標準後，
一般通過css來決定。
<img>的屬性 width,height，位置瀏覽器預先留下位置，alt提示文字
src可以取內部圖片，也可以取外部圖片。
瀏覽器能支援的圖片格式，有三種GIF，JPEG，PNG。
5.2.3iframe
與img接近的東西，也是佔據一個字元，也是從外部去資源。
有結束標記。
效果：在當前的網頁開了一個小視窗把其他網站的內容取過來了。

5.3超連結
5.3.1超連結
怎麼在頁面當中放一個連結，然後點選連結，就去到連結的頁面
<a href="http://news.163.com">網易新聞</a>
開啟目前的目錄底下的另一個頁面
<a href="a.html">頁面</a>
target屬性，值有_blank等
5.3.2頁面內串連
還有一種連結的目的地
首先需要在到達位置的地方，添加上id屬性，成為連結能到的目的地
而連結的href屬性值為"#id值"
5.3.3 圖片定位連結
曾經流行的標記
<map name="映射映像名稱">
<area shape="點擊地區形狀" coords="地區座標" href="連結地址">
</map>
需要在img下設定映射名usemap="映射映像名稱"

5.4表格
html的一個比較複雜的結構
<table border="1">
<caption>表格標題</caption><!--位於整個表格的第一行-->

<thead>
<tr>
<th>OS</th><!--表格中的頭，針對儲存格，裡面的字型比td的粗一些-->
<th>Chinese</th>
<th>French</th>
</tr>
</thead>

<tbody>
<tr><!--table row-->
<td>iOS5</td><!--一行當中的格子-->
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td colspan="3">Windows</td><!--列合并-->
</tr>
</tbody>

<tfoot>
</tfoot>

注意：一個表格對於html來說，也是一個字元。
表格前面和後面的字元分別在表格地區的上一行和最後一行。

表格的結構：thead,tbody,tfoot



【學習筆記】HTML基礎

                

                    
本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

                

            


                            
相關關鍵詞：
                    

                                                    html include html fragment
                                                    display html in html
                                                    html code in html
                                                    html html tag
                                                    html include html
                                                    html within html
                                                    html grid
                                            

                

                                                                            

                    相關文章
                    

                                                    

                                
                                    H5 中html 頁面存為圖片並長按 儲存                                
                                
                            

                                                    

                                
                                    __x__(20)0907第四天__ css 框模型                                
                                
                            

                                            

                

                    

        

            

                

                                        

                        

                    

                

                

    

                    
聯繫我們

            
該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

            

                如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：
                info-contact@alibabacloud.com
                進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。
            

            



                

            

            
熱門內容

            
        

    


                                

                    










  
      
  
            
                
                
            
  
      
  








                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •