基础学习（3）：新闻列表、图片的使用"/>
HTML5基础学习（3）：新闻列表、图片的使用
一、新闻列表
在网页中模拟百度新闻列表，如下图所示：
（1）新建新闻列表目录：
（2）<title>标签中编写的是网页的名字：
（3）科技后面的灰色字母暂时还无法实现，先用图片代替：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>百度新闻列表</title></head><body><h1>科技 <img src="img/img1.png"></h1><hr /></body>
</html>
<img>标签是一个单标签，src属性是图片所在路径。
（4）使用<ul>标签表示列表，<li>标签表示列表中的每一项：
<ul><li>今年第4败之后，长征11号成功从船上发射！实现中国..</li><li>DataFocus使用技巧陪你玩转数据分析</li><li>马云：现在创业不会选择互联网，机会在传统行业｜CE..</li><li>LG Wing正式发布：独创旋转双屏设计</li></ul>（5）新闻中的每一项都是可以点击的，使用<a>标签实现：
<ul><li><a href="=1677879200067849252">今年第4败之后，长征11号成功从船上发射！实现中国..</a></li><li><a href="=1677879220498964088">DataFocus使用技巧陪你玩转数据分析</a></li><li><a href="=1677793920629595859">马云：现在创业不会选择互联网，机会在传统行业｜CE..</a></li><li><a href="=1677869991382710304">LG Wing正式发布：独创旋转双屏设计</a></li></ul><a>标签叫超链接，href属性表示点击超链接跳转的地址。
（6）<ul>标签是无序列表标签，可以改成<ol>有序列表：
<ol><li><a href="=1677879200067849252">今年第4败之后，长征11号成功从船上发射！实现中国..</a></li><li><a href="=1677879220498964088">DataFocus使用技巧陪你玩转数据分析</a></li><li><a href="=1677793920629595859">马云：现在创业不会选择互联网，机会在传统行业｜CE..</a></li><li><a href="=1677869991382710304">LG Wing正式发布：独创旋转双屏设计</a></li></ol>二、图片的使用
新建图片的使用目录，在该子目录下创建img目录存放图片：
编写代码引入图片：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片的使用</title></head><body><img src="img/timg(12).jpg" /><img src="img/timg(13).jpg" /><img src="img/timg(14).jpg" /></body>
</html>从上图中我们可以看出，图片默认是从左到右的顺序在网页中展示，默认是底部对齐。当第一行放不下图片时则会换到下一行显示。
（1）调整图片的大小
width属性表示图片的宽度，px表示单位是像素。注意修改图片大小不管是宽度（width）还是高度（height）图片都会自动的进行等比例的放大或缩小。如果同时修改宽度和高度，要注意保持图片比例，否则可能导致图片变形。
<body><img src="img/timg(12).jpg" width="100px"/><img src="img/timg(13).jpg" width="100px"/><img src="img/timg(14).jpg" width="100px"/></body>（2）图片自适应网页窗口大小
向网页中添加一张比较大的图片：
我们发现因为图片过宽导致导致网页出现了横向的滚动条，通过如下设置图片可以自动根据窗口调整尺寸：
<img src="img/timg02.jpg" width="100%"/>更多推荐
HTML5基础学习（3）：新闻列表、图片的使用
发布评论