社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > HTML學習筆記二

HTML學習筆記二

不言
發布： 2018-04-19 14:32:03
原創
1493 人瀏覽過


這篇文章介紹的內容是關於HTML學習筆記二，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

1 、表格

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
登入後複製

......定義行，定義列

表頭表示：

<tr>
<th>heading</th>
</tr>
登入後複製

如果要表示一個空白行，可以用 空格佔位符填滿。


2、列表



#第一種：無序列表——

    ，使用粗體圓點標記

    <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
    登入後複製


    或使用

      …使用的是空心圓點。


      第二種：有序列表－

        ，使用數字標記

        <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
        登入後複製


        或使用

          …表示數字從50開始標記。




          #第三種：自訂清單－

          <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
          登入後複製


          說明：

          表示清單開始



          ##
          表示列表項目

          ##

          表示列表項目的定義


          ##請注意，清單項目內部可以使用段落、換行符號、圖片、連結以及其他清單等等。



          #3、HTML類別

          對HTML進行分類，能為元素的類別定義CSS樣式。


          對相同的類別設定相同的樣式。 

          <!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<p class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</p> 

</body>
</html>
          登入後複製



          < ;p>是區塊級元素，用於設定相同類別。

          是行內元素。 

          <html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>
          登入後複製



          4、HTML網站佈局

          （1）使用

          進行佈局

          <head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>
          登入後複製


          使用


          #（2）HTML5提供的新語意元素



          #

          定義文件或節的頁首

          < ;nav>定義導航連結的容器


          #

          定義文件中的節


          #

......