菜鸟教程-HTML 教程学习笔记
教程鏈接是:
https://www.runoob.com/html/html-tutorial.html
##########################################################################3
HTML 網(wǎng)頁結(jié)構(gòu)
下面是一個可視化的HTML頁面結(jié)構(gòu)：
HTML版本
從初期的網(wǎng)絡(luò)誕生后，已經(jīng)出現(xiàn)了許多HTML版本:
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
不同的HTML版本的聲明方式不同，如下：
<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。
網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。
doctype 聲明是不區(qū)分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
##########################################################################3
html語言中class其實是初始化一個類，讓文字的屬性(例如字體顏色啊等等)根據(jù)類中的定義來描繪。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> h1.intro {color:blue; } p.important {color:green; } </style> </head> <body><h1 class="intro">標題 1</h1> <p>段落。</p> <p class="important">注意：這是一個很重要的段落。 :)</p></body> </html>關(guān)于html中的事件函數(shù)，可以在https://www.runoob.com/tags/ref-eventattributes.html中查詢，
所謂的事件，其實就是一個函數(shù)接口。
##########################################################################3
畫布的作用是把一張圖繪制到另外一張圖
##########################################################################3
下面是css的案例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div><div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"><div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div><h3>Look! Styles and colors</h3><div style="letter-spacing:12px;">Manipulate Text</div><div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span> </div><div style="color:#000000;">and more...</div></div></body> </html>上面其實就是,css就是style嵌入到div中,然后整出一堆方框的效果，如下:
##########################################################################3
HTML表格代碼如下:
<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><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>效果如下:
##########################################################################3
span的用法:
<!DOCTYPE html> <html> <head>? <meta?charset="utf-8">? <title>菜鳥教程(runoob.com)</title>? </head> <body><p> 我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛，<br> 我的父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛。 </p></body> </html>##########################################################################3
HTML布局
<!DOCTYPE html> <html> <head>? <meta?charset="utf-8">? <title>菜鳥教程(runoob.com)</title>? </head> <body><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的網(wǎng)頁標題</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜單</b><br> HTML<br> CSS<br> JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 內(nèi)容在這里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版權(quán) ? runoob.com</div></div></body> </html>其實一大堆的方框都是"html+css"(div+style)搞出來的
表單:
表單就是輸入框。
##########################################################################3
Iframe的作用就是在頁面中嵌入一個頁面:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p><p><b>注意：</b> 因為 a 標簽的 target 屬性是名為 iframe_a 的 iframe 框架，所以在點擊鏈接時頁面會顯示在 iframe框架中。</p></body> </html>效果如下:
########################################################################
HTML腳本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p> JavaScript 能夠直接寫入 HTML 輸出流中： </p> <script> document.write("<h1>這是一個標題</h1>"); document.write("<p>這是一個段落。</p>"); </script> <p> 您只能在 HTML 輸出流中使用 <strong>document.write</strong>。 如果您在文檔已加載后使用它（比如在函數(shù)中），會覆蓋整個文檔。 </p></body> </html>#################################################################
HTML速查列表:
https://www.runoob.com/html/html-quicklist.html
總結(jié)
以上是生活随笔為你收集整理的菜鸟教程-HTML 教程学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宽带651以及光猫红色灯闪烁-故障维修
- 下一篇： 浏览器的headers