前端——基础篇(2)

tamaraisaacson 计算机知识 9 次浏览 没有评论

1.从简单网页学标签

简单网页不简单

下面四个网页展示了基本标签的用法,以及一些框架

唐诗.html

<!--第一个网页,这是注释--> <html>   <head>     <title> 演示</title>     <meta name="author" content="演示">   </head>   <!--head是头部标签,其内容不展示,如meta标签会告诉搜索引擎本网页关键字-->   <body>     <h1 align="center">《春雪》</h1>     <h2 align="center">韩愈</h2>     <hr>     <p align="center"> 新年都未有芳华,<br> 二月初惊见草芽。<br> 白雪却嫌春色晚,<br> 故穿庭树作飞花。<br> </p> <!--h标签有6个级别,h1,h2,h3...h6,字体依次减小,h7无意义,hr横线,br换行,它们都是单标签>   <hr>   <!--列表标签,ol有序,ul无序,dl自定义-->   <ol type="1" start="1">     <li>韩愈(768年-824年12月25日),字退之,河南河阳(今河南省孟州市)人</li>     <li>文学家、思想家、哲学家、政治家</li>     <li>韩愈是唐代古文运动的倡导者,被后人尊为“唐宋八大家”之首,与柳宗元并称“韩柳”,有“文章巨公”和“百代文宗”之名 </li>   </ol>   <!--现在是一个table表格,tr是table row(表格一行) 缩写,td是table data(表格数据单元)缩写-->     <table border="1">       <tr>         <td>           <img height="100px"  width="100px" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=7d2f15d4b58f8c54f7decd7d5b404690/314e251f95cad1c875f82f1d7e3e6709c93d514d.jpg">         </td>         <td>           韩愈头像         </td>       </tr>       <tr>         <td>           更多信息         </td>         <td>         <!--此处为超链接href值就是跳转地址-->           <a href="#">点击链接</a>         </td>       </tr>     </table> </body> </html> 

表单.html

<!DOCTYPE html> <html >   <head>     <meta charset="utf-8">     <title>登录</title>   </head>   <body>     <form class="" action="index.html" method="post">       <label for="">用户名:</label>       <input type="text" name="" value="">       <label for="">密码:</label>       <input type="password" name="" value="">       <input type="button" name="" value="登录">     </form>   </body> </html>  

内嵌框架.html

<!DOCTYPE html> <html >   <head>     <meta charset="utf-8">     <title></title>   </head>   <body>     <iframe src="http://www.sohu.com" width="300px" height="150px">       <p>         浏览器不支持iframe       </p>     </iframe>     <iframe src="http://www.baidu.com" width="300px" height="150px">       <p>         浏览器不支持iframe       </p>     </iframe>   </body> </html> 

iframe 适用于将其他网站的页面内嵌到本网站页面中

框架.html

<html>   <frameset rows="20%,*,20%">     <frame src="表单.html">       <frameset cols="">       <frame src="唐诗.html">     </frameset>     <frame src="内嵌框架.html">   </frameset> </html> 

frameset元素独占一个空html页面,即body标签里面的内容不会被显示 。

框架包括框架集和框架,框架集的标签是frameset,frame-set顾名思义就是frame的集合,即框架集合,一个html界面就是框架,多个页面组合的html就是框架集。

2.标签

目前为止,已经基本明白了标签的意义了。大多数的标签支持属性设置,如:

<p align="center">内容</p>中align代表段落样式,值为center表示居中。   <img src="" width="30px" height="10px">中src表示资源位置,width表示宽度,height表示高度 

标签的属性大部分相同,只是设置的值不一样。
html的标签有很多,不可能一一学来,可以把基础的学会,其他的作为扩展。忘了的时候,可以百度,这不失为一种好方法。

3.总结

基本的html到此也就暂告一段落,接下来的内容会稍微复杂一点,但万变不离其宗,学习就是要做到触类旁通。

内容如有侵犯你的权益,请联系删除

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go