首頁 > 文章 > web前端 > HTML學習筆記二

HTML學習筆記二

不言原創: 2018-04-19 14:32:031437瀏覽

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

1 、表格f5d188ed2c074f8b944552db028f98a1

<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>

a34de1251f0d9fe1e645927f19a896e8......fd273fcf5bcad3dfdad3c41bd81ad3e5定義行，b6c5a531a458a2e790c1fd6421739d1c......b90dd5946f0946207856a8a37f441edf定義列

表頭表示：

<tr>
<th>heading</th>
</tr>

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

2、列表

#第一種：無序列表——ff6d136ddc5fdfeffaf53ff6ee95f185，使用粗體圓點標記

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

或使用162a8c4b77d546c61ae9ca306cde4ebb…使用的是空心圓點。

第二種：有序列表－c34106e0b4e09414b63b2ea253ff83d6，使用數字標記

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

或使用1f440b6628a2ecdeba8d7a6562e2d7a9…表示數字從50開始標記。

#第三種：自訂清單－5c69336ffbc20d23018e48b396cdd57a

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

說明：

5c69336ffbc20d23018e48b396cdd57a表示清單開始

##73de882deff7a050a357292d0a1fca94表示列表項目

##67bc4f89d416b0b8236eaa5f43dee742表示列表項目的定義

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

#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>是區塊級元素，用於設定相同類別。

45a2772a6b6107b401db3c9b82c049c2是行內元素。

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

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

</body>
</html>

4、HTML網站佈局

（1）使用e388a4556c0f65e1904146cc1a846bee進行佈局

<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>

使用4786dff7ee6470928194244baf979f1e......94b3e26ee717c64999d7867364b1b4a3

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

#1aa9e5d373740b65a0cc8f0a02150c53定義文件或節的頁首

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

#2f8332c8dcfd5c7dec030a070bf652c3定義文件中的節

0be1b69ceb944e4c8011f4e78dda647f定義內容以外的內容（側邊欄）（？還沒搞清楚這是什麼）
c37f8231a37e88427e62669260f0074d定義文檔或節的頁尾

a5e9d42b316b6d06c62de0deffc36939定義額外的細節

631fb227578dfffda61e1fa4d04b7d25定義details元素的標題

5、框架

透過使用框架，可以在同一個瀏覽器視窗顯示不只一個頁面。每份HTML文件成為一個框架，並且每個框架都獨立與其他的框架。

（1）框架結構標籤f900b4fc197b16ab214eecf015bb6bd2

每個f900b4fc197b16ab214eecf015bb6bd2定義列一系列行、列

rows/columns的值規定了每行或每列佔據螢幕的面積

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

（2）其他

一般地，一個框架有可見邊框，使用者可以拖曳邊框來改變它的大小。若想避免，可以在04a0d55efbbfd646a993fbc01f262c57中加入 noresize="noresize" 。

############不能將6c04bd5ca3fcae76e30b72ad730ca86d標籤與f900b4fc197b16ab214eecf015bb6bd2標籤同時使用。不過加上包含一段文字的37f861bd36cef5b6406eba87d20a5bab標籤，就必須將這段文字嵌套於6c04bd5ca3fcae76e30b72ad730ca86d標籤內。 ###

<html>

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>
</html>

###04a0d55efbbfd646a993fbc01f262c57中可以使用name錨屬性，來轉到指定節。 ###########################d5ba1642137c3f32f4f4493ae923989c用於網頁內顯示網頁######用法：108b34cd515b899952f8b14f04a78142065276f04003e4622c4fe6b64f465b88#####################

iframe可用作链接的目标（target），该链接的target属性必须引用iframe的name属性。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

注意，由于链接的目标匹配iframe的名称，所以链接会在iframe中打开。

相关推荐：

HTML学习笔记一

以上是HTML學習筆記二的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css html ul table td tr

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML學習筆記一下一篇：HTML學習筆記一

相關文章

看更多