HTML day2 新闻列表+图片的使用

最新推荐文章于 2024-05-10 21:27:17 发布

肝JOJO

最新推荐文章于 2024-05-10 21:27:17 发布

阅读量538

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_34620296/article/details/98994137

版权

HTML+CSS 专栏收录该内容

18 篇文章

订阅专栏

1.新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嘴臭新闻</title>
</head>
<body>
 <h1>
    嘴臭资讯&nbsp<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3191169278,4012911419&fm=85&app=52&f=JPG?w=121&h=75&s=3041F302495211FDDBF93B95030080C0">
</h1>   
<hr>
<ul type="circle">  <!-- 带.符号的无序列表(disc-实心圆;circle-空心圆;quare-实心方块) -->
    <li>
        <a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565366646905&di=43f4b634924f19def6616d54a28944eb&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F3955d8f294424f2477b042fa17d1684347edca78.jpg">dio的替身能力和楼梯究竟有什么关系?</a> 
    </li>
    <li>
        <a href="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1034901271,298100114&fm=179&app=42&f=JPEG?w=121&h=140">乔碧萝.乔斯达的黄金精神</a>
    </li>
    <li>
        <a href="http://img0.imgtn.bdimg.com/it/u=2488920953,566651947&fm=11&gp=0.jpg">超越琦玉的存在,神上108阶,爆山大爷</a> 
    </li>
</ul>

<ol type="I">  <!-- 带数字符号的有序列表(1-数组排序;A/a-大小写字母排序;I-罗马数字排序) -->    
    <li >
            <a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565366646905&di=43f4b634924f19def6616d54a28944eb&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F3955d8f294424f2477b042fa17d1684347edca78.jpg">dio的替身能力和楼梯究竟有什么关系?</a> 
    </li>
    <li>
            <a href="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1034901271,298100114&fm=179&app=42&f=JPEG?w=121&h=140">乔碧萝.乔斯达的黄金精神</a>
    </li>
    <li>
            <a href="http://img0.imgtn.bdimg.com/it/u=2488920953,566651947&fm=11&gp=0.jpg">超越琦玉的存在,神上108阶,爆山大爷</a> 
    </li>
</ol>
<p>
    <a href="http://www.baidu.com">打开百度(当前页面跳转)</a>
</p>
<p>
    <a href="http://www.baidu.com" target="_blank">打开百度(新页面跳转)</a>
</p>
<p>
    <del>
        给文字加删除线
    </del>
</p>
<p>
    10<sup>2</sup> 把文字变成上标
</p>
<p>
    <u>给文字加下划线</u>
</p>
<p>
    <center>把文字居中显示</center>
</p>
</body>
</html>

2.图片的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 默认图片在网页中从左到右排列,底部对齐 -->
    <img src="images/-47285a582502c16.jpg" width="100%">
    <img src="images/20180625230859_hpsep.jpeg" width="100px">
    <!-- width="100px/100%"设置图片宽度为100像素/铺满屏幕 -->
</body>
</html>

在这里插入图片描述