html類:
對(duì) HTML 進(jìn)行分類(設(shè)置類),使我們能夠?yàn)樵氐念惗x CSS 樣式卦停。
為相同的類設(shè)置相同的樣式壮锻,或者為不同的類設(shè)置不同的樣式宇驾。
分類塊級(jí)元素
HTML <div> 元素是塊級(jí)元素。它能夠用作其他 HTML 元素的容器碉京。
設(shè)置 <div> 元素的類厢汹,使我們能夠?yàn)橄嗤?<div> 元素設(shè)置相同的類:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div 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>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
運(yùn)行:分類行內(nèi)元素
HTML <span> 元素是行內(nèi)元素,能夠用作文本的容器谐宙。
設(shè)置 <span> 元素的類烫葬,能夠?yàn)橄嗤?<span> 元素設(shè)置相同的樣式。
<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
運(yùn)行:html布局
使用div進(jìn)行布局:
<!DOCTYPE html>
<html>
<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>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<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>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright ? W3Schools.com
</div>
</body>
</html>
運(yùn)行:使用html5的網(wǎng)站布局:
header 定義文檔或節(jié)的頁眉
nav 定義導(dǎo)航鏈接的容器
section 定義文檔中的節(jié)
article 定義獨(dú)立的自包含文章
aside 定義內(nèi)容之外的內(nèi)容(比如側(cè)欄)
footer 定義文檔或節(jié)的頁腳
details 定義額外的細(xì)節(jié)
summary 定義 details 元素的標(biāo)題
<!DOCTYPE html>
<html>
<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>
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<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>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright W3Schools.com
</footer>
</body>
</html>
運(yùn)行效果同上凡蜻。
使用表格的html布局:
<table> 元素不是作為布局工具而設(shè)計(jì)的搭综。
<table> 元素的作用是顯示表格化的數(shù)據(jù)。
使用 <table> 元素能夠取得布局效果划栓,因?yàn)槟軌蛲ㄟ^ CSS 設(shè)置表格元素的樣式:
<!DOCTYPE html>
<html>
<head>
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>
</head>
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
</html>
html內(nèi)聯(lián)框架
iframe 用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁设凹,定義內(nèi)聯(lián)的子窗口(框架)。
<html>
<body>
<iframe src="/example/html/demo_iframe.html" width="200" height="200" frameborder="0" name="iframe_a"></iframe>
<p><a target="iframe_a">W3School.com.cn</a></p>
<p><b>注釋:</b>由于鏈接的目標(biāo)匹配 iframe 的名稱茅姜,所以鏈接會(huì)在 iframe 中打開。</p>
<p>某些老式的瀏覽器不支持內(nèi)聯(lián)框架月匣。</p>
<p>如果不支持钻洒,則 iframe 是不可見的。</p>
</body>
運(yùn)行:html腳本
<script> 標(biāo)簽用于定義客戶端腳本锄开,比如 JavaScript素标。script 元素既可包含腳本語句,也可通過 src 屬性指向外部腳本文件萍悴。必需的 type 屬性規(guī)定腳本的 MIME 類型头遭。JavaScript 最常用于圖片操作、表單驗(yàn)證以及內(nèi)容動(dòng)態(tài)更新癣诱。
<noscript> 標(biāo)簽提供無法使用腳本時(shí)的替代內(nèi)容计维,比方在瀏覽器禁用腳本時(shí),或?yàn)g覽器不支持客戶端腳本時(shí)撕予。noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素鲫惶。
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>不支持 JavaScript 的瀏覽器將顯示 noscript 元素中的文本。</p>
</body>
運(yùn)行:html頭部
元數(shù)據(jù)(metadata)是關(guān)于數(shù)據(jù)的信息实抡。
<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)欠母。元數(shù)據(jù)不會(huì)顯示在頁面上,但是對(duì)于機(jī)器是可讀的吆寨。
典型的情況是赏淌,meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞啄清、文檔的作者六水、最后修改時(shí)間以及其他元數(shù)據(jù)。<meta> 標(biāo)簽始終位于 head 元素中。元數(shù)據(jù)可用于瀏覽器(如何顯示內(nèi)容或重新加載頁面)缩擂,搜索引擎(關(guān)鍵詞)鼠冕,或其他 web 服務(wù)。
一些搜索引擎會(huì)利用 meta 元素的 name 和 content 屬性來索引您的頁面胯盯。
定義頁面的描述:<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
定義頁面的關(guān)鍵詞:<meta name="keywords" content="HTML, CSS, XML" />
<base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)(target):
<head>
<base />
<base target="_blank" />
</head>
<head> 定義關(guān)于文檔的信息懈费。
<title> 定義文檔標(biāo)題。
<base> 定義頁面上所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)博脑。
<link> 定義文檔與外部資源之間的關(guān)系憎乙。
<meta> 定義關(guān)于 HTML 文檔的元數(shù)據(jù)。
<script> 定義客戶端腳本叉趣。
<style> 定義文檔的樣式信息泞边。
html字符實(shí)體:
html URL
當(dāng)您點(diǎn)擊 HTML 頁面中的某個(gè)鏈接時(shí),對(duì)應(yīng)的 <a> 標(biāo)簽指向萬維網(wǎng)上的一個(gè)地址疗杉。
統(tǒng)一資源定位器(URL)用于定位萬維網(wǎng)上的文檔(或其他數(shù)據(jù))阵谚。
網(wǎng)址遵守以下的語法規(guī)則:
scheme://host.domain:port/path/filename
解釋:
scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機(jī)(http 的默認(rèn)主機(jī)是 www)
domain - 定義因特網(wǎng)域名烟具,比如 w3school.com.cn
:port - 定義主機(jī)上的端口號(hào)(http 的默認(rèn)端口號(hào)是 80)
path - 定義服務(wù)器上的路徑(如果省略梢什,則文檔必須位于網(wǎng)站的根目錄中)。
filename - 定義文檔/資源的名稱
以下是其中一些最流行的 scheme:
http 超文本傳輸協(xié)議 以 http:// 開頭的普通網(wǎng)頁朝聋。不加密嗡午。
https 安全超文本傳輸協(xié)議 安全網(wǎng)頁。加密所有信息交換冀痕。
ftp 文件傳輸協(xié)議 用于將文件下載或上傳至網(wǎng)站荔睹。
file 您計(jì)算機(jī)上的文件。