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