HTML新浪新闻标题排版

一、基本操作

1、图片标签：<img>

①src：指定图像的ur1

②width：图像的宽度（px，像素；%，相对于父元素的百分比）

③height：图像的高度（px，像素；%，相对于父元素的百分比）

2、标题标签：<h1>-<h6>

3、水平线标签：<hr>

二、VSCode的使用

1、新建的文件要加上.html的后缀

2、快捷键

①！+回车，即可生成html的基本代码

②选中代码，ctrl+shift+/可以生成注释

③img+回车，可以生成img的代码，后面的src和alt二选一，把用不到的删掉

④写完代码以后要ctrl+s保存一下，右键点文档Open in Default Brower可以预览

三、代码

<!-- 声明文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!--   声明当前页面的字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!--  设置浏览器的兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--上面的代码都不需要改动，我们要改动的是title中的标题-->
  <!--  标题就是网页一打开，上面标签页呈现的文字 -->
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    <!-- src路径书写有两种方式：
    一、绝对路径
    1、绝对磁盘路径：D:\APPdata\VSCodeData\Picture\xinlanglogo.png
     <img src="D:\APPdata\VSCodeData\Picture\xinlanglogo.png" >
    2、绝对网络路径： https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
    去搜索新浪新闻的网站，点击logo右键，在新标签中打开图像，然后复制网址
    二、相对路径
    ./：表示当前目录，./是可以省略的；(可以在src双引号中写./然后找到目标图片)
    ../:表示上一级目录，是不可以省略的
    -->
   <!--  三、设置图片的宽度和高度有两种方法：像素和百分比
     1、像素<img src="./Picture/xinlanglogo.png" width="300px" height="300px">
    但是这样图片会被拉变形，所以一般我们只会设置其中一个，那么图片会自动的等比例缩放 
    <img src="./Picture/xinlanglogo.png" width="300px" >
    2、百分比<img src="./Picture/xinlanglogo.png" width="80%" > 这表示图片占整个body元素的80%-->
   <img src="./Picture/xinlanglogo.png" > 新浪政务>正文
     <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <!-- <h1>-<h6>的区别就是文字的大小 -->
    <!-- 两条水平分割线就是两个hr -->
     <hr>
     2023年03月02日 21：50 央视网
    <hr>
</body>
</html>
posted @ 2025-05-08 21:17  琬六岁  阅读(47)  评论(0)    收藏  举报