前端筆記--HTML-2

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ī)上的文件。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末言蛇,一起剝皮案震驚了整個(gè)濱河市僻他,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌腊尚,老刑警劉巖中姜,帶你破解...
    沈念sama閱讀 218,546評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異跟伏,居然都是意外死亡丢胚,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門受扳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來携龟,“玉大人,你說我怎么就攤上這事勘高∠矿” “怎么了坟桅?”我有些...
    開封第一講書人閱讀 164,911評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蕊蝗。 經(jīng)常有香客問我仅乓,道長(zhǎng),這世上最難降的妖魔是什么蓬戚? 我笑而不...
    開封第一講書人閱讀 58,737評(píng)論 1 294
  • 正文 為了忘掉前任夸楣,我火速辦了婚禮,結(jié)果婚禮上子漩,老公的妹妹穿的比我還像新娘豫喧。我一直安慰自己,他們只是感情好幢泼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評(píng)論 6 392
  • 文/花漫 我一把揭開白布紧显。 她就那樣靜靜地躺著,像睡著了一般缕棵。 火紅的嫁衣襯著肌膚如雪孵班。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,598評(píng)論 1 305
  • 那天招驴,我揣著相機(jī)與錄音篙程,去河邊找鬼。 笑死忽匈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的矿辽。 我是一名探鬼主播丹允,決...
    沈念sama閱讀 40,338評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼袋倔!你這毒婦竟也來了雕蔽?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,249評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤宾娜,失蹤者是張志新(化名)和其女友劉穎批狐,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體前塔,經(jīng)...
    沈念sama閱讀 45,696評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嚣艇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了华弓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片食零。...
    茶點(diǎn)故事閱讀 40,013評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖寂屏,靈堂內(nèi)的尸體忽然破棺而出贰谣,到底是詐尸還是另有隱情娜搂,我是刑警寧澤,帶...
    沈念sama閱讀 35,731評(píng)論 5 346
  • 正文 年R本政府宣布吱抚,位于F島的核電站百宇,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏秘豹。R本人自食惡果不足惜携御,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望憋肖。 院中可真熱鬧因痛,春花似錦、人聲如沸岸更。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽怎炊。三九已至谭企,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間评肆,已是汗流浹背债查。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評(píng)論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瓜挽,地道東北人盹廷。 一個(gè)月前我還...
    沈念sama閱讀 48,203評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像久橙,于是被迫代替她去往敵國和親俄占。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案淆衷? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的缸榄,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,898評(píng)論 0 0
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,152評(píng)論 25 707
  • 落花不知恨 為何祝拯? 刺在心頭 痛難
    葉熏閱讀 269評(píng)論 0 1
  • 遠(yuǎn)方是別人的故鄉(xiāng) 我的故鄉(xiāng)在遠(yuǎn)方人的心里 去年年底打算去趟云南旅游砾莱,因?yàn)樯眢w的原因,后來將旅行計(jì)劃定在今年五一或者...
    小蘑菇在奔跑閱讀 397評(píng)論 2 2