明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML學(xué)習(xí)筆記二

發(fā)表時間：2023-09-12 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這篇文章介紹的內(nèi)容是關(guān)于HTML學(xué)習(xí)筆記二 ，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下1、表格<table><table border="1"><tr><td>row 1, cell 1</td>&...
這篇文章介紹的內(nèi)容是關(guān)于HTML學(xué)習(xí)筆記二 ，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

1、表格<table>

<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>......</tr>定義行，<td>......</td>定義列

表頭表示：

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

如果要表示一個空行，可以用&nbsp空格占位符填充。


2、列表



第一種：無序列表——<ul>，使用粗體圓點標(biāo)記

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


或者使用<ul type="circle">……使用的是空心圓點。


第二種：有序列表——<ol>，使用數(shù)字標(biāo)記

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


或者使用<ol start="50">……表示數(shù)字從50開始標(biāo)記。




第三種：自定義列表——<dl>

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


說明：

<dl>表示列表開始



<dt>表示列表項

<dd>表示列表項的定義



注意，列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。




3、HTML類

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



對相同的類設(shè)置相同的樣式。

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


HTML學(xué)習(xí)筆記二


<p>是塊級元素，用于設(shè)置相同類。

<span>是行內(nèi)元素。

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

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

</body>
</html>



4、HTML網(wǎng)站布局

（1）使用<p>進行布局

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


使用<p id="header">......</p>

（2）HTML5提供的新語義元素



<header>定義文檔或節(jié)的頁眉

<nav>定義導(dǎo)航鏈接的容器



<section>定義文檔中的節(jié)

<article>定義獨立的自包含文章



<aside>定義內(nèi)容之外的內(nèi)容（側(cè)欄）（？還沒搞清楚這是什么）

<footer>定義文檔或節(jié)的頁腳



<details>定義額外的細節(jié)

<summary>定義details元素的標(biāo)題




5、框架

通過使用框架，可以在同一個瀏覽器窗口顯示不止一個頁面。每份HTML文檔成為一個框架，并且每個框架都獨立與其他的框架。



（1）框架結(jié)構(gòu)標(biāo)簽<frameset>

每個<frameset>定義列一系列行、列



rows/columns的值規(guī)定了每行或每列占據(jù)屏幕的面積

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


（2）其他

一般地，一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。若想避免，可以在<frame>中添加 noresize="noresize" 。



不能將<body>標(biāo)簽與<frameset>標(biāo)簽同時使用。不過添加包含一段文本的<noframes>標(biāo)簽，就必須將這段文字嵌套于<body>標(biāo)簽內(nèi)。

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

<frame>中可以使用name錨屬性，來轉(zhuǎn)跳到指定節(jié)。



<iframe>用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁

用法：<iframe src="URL" width="200" height="200" frameborder="0"></iframe>



iframe可用作鏈接的目標(biāo)（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>


注意，由于鏈接的目標(biāo)匹配iframe的名稱，所以鏈接會在iframe中打開。

相關(guān)推薦：

HTML學(xué)習(xí)筆記一

以上就是HTML學(xué)習(xí)筆記二的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。