前端学习笔记一:HTML(2)插入图片和带超链接的列表

    技术2022-07-10  101

    好的,继续第二篇。

    来看第二段代码,我管它叫做百度新闻

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>百度新闻</title> </head> <body> <h1>科技 <img src="../img/小箭头.png"></h1> <ul> <li> <a href="http://baijiahao.baidu.com/s?id=1662766614286353414">哈啰发布第五代单车“云行”,模块化设计提升维修率及回收利用率</a> </li> <li> <a href="http://baijiahao.baidu.com/s?id=1662772291972814061">大热的智能家居风口,小豚当家靠什么“出道”即“出位”</a> </li> <li> <a href="http://baijiahao.baidu.com/s?id=1662766872263367720">疫情爆发不忘遏制华为,但美国当下恐难挡中方反制</a> </li> <li> <a href="http://baijiahao.baidu.com/s?id=1662765832988021804">投影仪长时间使用会卡吗?当贝投影D1教你如何流畅不卡顿</a> /li> <li> <a href="http://baijiahao.baidu.com/s?id=1662770113927950069">2020:华为P40手机发布背后的HMS野望</a> </li> </ul> <ol> <li> <a href="http://baijiahao.baidu.com/s?id=1662766614286353414">哈啰发布第五代单车“云行”,模块化设计提升维修率及回收利用率</a> </li> <li> <a href="http://baijiahao.baidu.com/s?id=1662772291972814061">大热的智能家居风口,小豚当家靠什么“出道”即“出位”</a> </li> <li> <a href="http://baijiahao.baidu.com/s?id=1662766872263367720">疫情爆发不忘遏制华为,但美国当下恐难挡中方反制</a> </li> <li> <a href="http://baijiahao.baidu.com/s?id=1662765832988021804">投影仪长时间使用会卡吗?当贝投影D1教你如何流畅不卡顿</a> </li> <li> <a href="http://baijiahao.baidu.com/s?id=1662770113927950069">2020:华为P40手机发布背后的HMS野望</a> </li> </ol> </body> </html>

    运行结果如下:

    可以看到一些前面讲过的标签,比如标题标签</h1>。

    下面是新的标签: <img>:插入一个图片。对,就这样。。当然不只这样(x ,至少得知道要插入什么图片把,即这个标签的必要属性有"src",即图片地址,当然这个标签可用的属性肯定不止这一个,但是学到用到的时候再另行讲解。 想想还是得来一行示例:<img src="../xxx/yyy.png"> 虽然都看到示例了,但是示例里又出现了新的东西,就是src属性的属性值,即图片的地址。 在使用HTML里表示一个文件或者素材的地址是,默认这个文件或者素材的起始地址是在该HTML文档所在的文件夹,即如果你想要引用的素材跟HTML文档在一个文件夹里,就用"./xxx.jpg/png/…"来表示: <img src="./yyy.png">。 如果素材在HTML所在文件夹里面的另一个或者隔了好几个文件夹里面,就这样表示: <img src="./xxx/zzz/....../yyy.png"> 但是,细心的人就会发现,欸,你第一个示例里是有两个点的啊。对,所以它就不一样啦(( 。用两个点就表示退回上一层文件夹,相当于win10里的alt+↑,即当你想引用的素材在该HTML文档的上一级或上若干级文件夹里,就这样表示: <img src="../../....../xxx/zzz/....../yyy.png"> 另外,图片的格式应该是随意的,有用不了的再说。顺便六个点是省略号应该都懂的吧 还有,html默认图片是放在往左看离img标签最近的元素的内容旁边的,左边没有标签就是贴着页面的最左边。这里的默认情况就是标签内没有相关的属性来设定标签内容的格式。其他属性的默认值,例如大小,默认就是图片本身的大小。其他的等用到再说。

    </ul>:创建一个无序列表。 </ol>:创建一个有序列表。 两个列表都用</li>来充当列表元素,需要几个就建立几个li标签。两者的运行结果却别看上面的运行结果可以看出来。 示例

    <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</ul> </ul> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>

    当然,列表的内容可以是文字,也可以是图片或者超链接,还可以是其它内容,但这是后话了需要的时候在里面嵌套相关的标签即可。 可以看到两个列表里的文字都指向了一个个网址。于是引申到了超链接标签:</a>,这个标签可以往该标签里的内容插入超链接。该标签的必要属性是网址的地址,属性名为“href“。 示例:<a href="http://www.baidu.com">度娘一下,你也不一定知道</a>

    总结一下:这次学习了怎么插入图片,创建列表和创建超链接。

    Processed: 0.015, SQL: 9