01 图片链接学习

1 前端的基础知识

主要包括:图片、链接、标题标签、段落标签


  标题标签    

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

段落标签

<p></p>

换行标签

<br>

其他标签

<b>加粗</b>、<i>倾斜</i>、<s>划线</s>


2 实际案例

主程序:

<!DOCTYPE html>   <!-- 文档类型的声明 -->
<html>             <!-- HTML5 -->
    <head>         <!-- 描述文档的头部信息,头部元素的容器,可以设置样式 -->
        <meta charset="utf-8" />   <!-- charset字符编码,使用通用字符编码 -->
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <!-- content属性值 :
             width:可视区域的宽度,值可为数字或关键词device-width
             height:同width
             intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
             maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
             maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
             user-scalable:是否可对页面进行缩放,no 禁止缩放 -->
      
 <title>test1新闻案例</title>     <!-- 页面的标题 -->
    </head>
    <body>
        <h1>XXXXXXXXXXXXXXXXXXXXXX</h1> <br>  <!-- 使用一级标题 -->
        <a href="hongxing.html" target="_blank">红星新闻</a> <br>    <!-- 这里面使用外部链接打开新页面红星新闻页面,target="_blank"表示打开新页面 -->
        <a href="#第一节">1 第一节</a> <br>    <!-- 锚点链接,点击时自动追踪到id="第一节"位置 -->
        <a href="#第二节">2 第二节</a> <br>
        <h3 id="第一节">第一节</h3>
        <p>“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXdddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
        <p>dashdajkdaskdakjdajkdhjaksdnkajsdnjandjakndjaskdnjasndjasdnas</p>
        <p>asdhjakshdjkahsdjkashdjkashdjkasdhjakshdjkahdjkahdkjasdhjkashdjk</p>
        <p></p>
        <img src="../image/boke/img1.jpeg" width="400px" >
        <h3 id="第二节">第二节</h3>
        <p>大手大脚爱神的箭卡号登记卡的空间ad卡红色的骄傲和第三次内数据阿斯加德哈大师大奖是的哈快速大家啊圣诞节啊还记得哈涉及到哈科技等哈就开始登记卡手动滑稽卡号</p>
        <p>sdjjkashdjkahdjahdjahsdjkahsdahdjkahdjahdjahdjahdjashdajsdhjshdj        </p>
        <img src="../image/boke/img2.jpeg" width="400px"> <br>   <!-- 路径问题,一般使用绝对路径(.. 表示返回上级目录) -->
        <a href="###">查看更多内容</a> <br>    <!-- 没有确定链接时可以使用###代替空连接 -->
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

外部链接:红星新闻

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>红星新闻</title>
    </head>
    <body>
        <h1>红星新闻</h1>
        <p>红星新闻是由成都传媒集团致力打造的一款聚焦热点新闻的主流新兴媒体。这里聚集了调查新闻记者和真知灼见的评论员。国内国际有价值的新闻,红星新闻都会冲在前,带来有锐度、有深度、有温度的报道。</p>
    </body>
</html>


3 显示效果

下面是分页显示(实际是整体,仅供参考)

 

 

 

 


4  所用图片

 

 

参考: https://baijiahao.baidu.com/s?id=1700548605575655195&wfr=spider&for=pc

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值