HTML（第一天） · 走進PHP的繽紛世界

1???? HTML：超文本標記[語言](http://baike.baidu.com/view/9793.htm)，即HTML（Hypertext Markup Language），是用于[描述](http://baike.baidu.com/view/491264.htm)網頁文檔的一種標記語言。可以顯示圖片、文字、視頻等 <input type=”text” name=”xxxx’> ?標記==元素 2????? 基本框架 <html> <head></head> <body></body> </html> 3????? HTML運行原理 1、? 本地運行直接用瀏覽器打開 2、? 遠程運行架設服務器apache，可訪問頁面。 ### 4 符號 ![](https://box.kancloud.cn/2016-06-03_5750fd4e530f3.jpg) 5???? 鏈接 <a href="`news:alt.html`">HTML Newsgroup</a> 6???? 圖片 <img src="D:\游戲\新建文件夾\深圳之行\109___12\IMG_0436.JPG" width="200px" style="border:3px solid red" alt="我的圖片"/></br> 2013/4/12 ???? 第一個練習： ~~~  <html> <head> <title>第一個練習hello world！！</title> <body>2013 4 11晚21點17分,學習HTML，不知道自己能堅持學習多久，能學習多久！</body> <a href="demo1.html">返回demo1.html</a> </head> </html> ~~~ 第二個練習： ~~~ <html> <head> <title>這是HTML基礎練習</title></head> <body> <h1>我愛你，我的故鄉</h1>  <b>無論身在何處</b><br/> <font color="red">請不要忘記，故鄉</font><br/>  <font color="blue" size=7>那是一個美麗的地方</font><br/> <p>這是一個段落</p> 版權符號 <font size="7">? ￥</font> <a href="hello.html">hello.html</a><br/>  <a href="http://blog.csdn.net/jsh13417" target="window_name">我的博客</a><br/>  <img src="D:\游戲\新建文件夾\深圳之行\109___12\IMG_0436.JPG" width="200px" style="border:3px solid red" alt="我的圖片"/></br> </body> </html> ~~~ 效果圖： ![](https://box.kancloud.cn/2016-06-03_5750fd4e73206.jpg) ### 7 表格 ~~~ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 表格練習 </title> </head> <body>   <table background="http://imgstatic.baidu.com/img/image/shouye/chuangyibizhi.jpg" tppabs="" bgcolor="red" bordercolor="#FAEBD7" cellpadding="5px" cellspacing="2px" align="center" width="500px" border="2px"> <tr>  <td align="center" colspan="3">菜譜</td> </tr> <tr > <td rowspan="2"> <font color="red"><b>素菜</b></font> </td> <td>清炒茄子</td> <td>花椒扁豆</td> </tr > <tr > <td>土豆絲</td> <td>地三鮮</td> </tr> <tr > <td rowspan="2">葷菜</td> <td>回鍋肉</td> <td>小炒肉</td> </tr> <tr > <td>魚香肉絲 <img src="http://imgstatic.baidu.com/img/image/shouye/xiaohua.jpg" width="80px" alt="這是我的女朋友，你信嗎?"/> </td> <td>大盤雞</td> </tr> </table> </table> </body> </html> ~~~ 顯示效果： ![](https://box.kancloud.cn/2016-06-03_5750fd4ee0adc.jpg) 8 liebiao ~~~ <html> <head> <title> 列表學習</title> </head> <body> </body> <h2>無序列表</h2>  <ul type="circle"> <li> C語言學習不好</li> <li> PHP學習不好</li> <li> SHELL學習不好</li> </ul> <h2>有序列表</h2>  <ol type="i" start="i"> <li> C語言學習不好</li> <li> PHP學習不好</li> <li> SHELL學習不好</li> </ol> <h2>一個嵌套列表：</h2> <ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>牛奶</li> </ul> <h2>一個定義列表：</h2> <dl> <dt>咖啡</dt> <dd>黑色的熱飲料</dd> <dt>Milk</dt> <dd>白色的冷飲料</dd> </dl> </html> ~~~ 效果： ![](https://box.kancloud.cn/2016-06-03_5750fd4f0781f.jpg) ### 9 frame 框架集 **通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面** **分為：垂直框架 cols=”30#,*”; 水平框架 rows="25%,50%,25%">? %數是頁面占的%比。** 下面具體事例： ~~~  <html> <head> <title> frame 框架學習</title> </head>  <frameset rows="40%,*"> <frame src="../table.html"/> <frameset cols="30%,*"> <frame name="frame1" src="a1.html"/> <frame name="frame2" src="a2.html"/> </frameset> </frameset> </html> ~~~ 上面 feameset.html 用于顯示其他頁面，這個需要注意代碼中的描述。 ~~~  <body bgcolor="prnk">  <a href="1.html" target="frame2">項目1</a><br/> <a href="2.html" target="frame2">項目2</a><br/> <body> ~~~ 注意： ?target屬性有4個：1、_black 表示打開一個全新的頁面。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2、_self 表示替換本頁面。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3、_top? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4\_parent ? 另外就是像上面寫的直接對應本例子中的名字frame2. a2.html 是個空什么都沒有 1.html，及2.html ~~~ <body> 本項目是針對公司系統產品進行的二次開發 </body> ~~~ 頁面效果： ![](https://box.kancloud.cn/2016-06-03_5750fd4f1d940.jpg) 10 內聯框架 ~~~ <html> <body> <iframe src="http://www.baidu.com/" width="500px" height="300px"></iframe> <p>一些老的瀏覽器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可見的。</p> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-06-03_5750fd4f3bfee.jpg) 默認新窗口打開所有超鏈接設置加下面的語句就可以了 <base target="_blank“>