[HTML、CSS、JavaScript学习]No.01 以新浪新闻页面为样例

WaODream

已于 2023-06-06 10:45:24 修改

阅读量592

点赞数 3

分类专栏： JavaWeb 文章标签： javascript css html

于 2023-06-05 23:38:54 首次发布

本文链接：https://blog.csdn.net/qq_36439118/article/details/131057268

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

【简介HTML、CSS、JavaScript】
【No.01 新浪新闻的标题排版】
回顾一下再分析一下
**关于这个网站的标题部分就做到这里就暂时告一段落，下一篇文章将对标题样式进行美化。**
**如果你觉得本篇文章对你的学习有些许帮助，不妨留下点赞和收藏再走，持续更新个人学习日志！！**

【简介HTML、CSS、JavaScript】

HTML

HTML，即 Hypertext Markup Language，是一种用于创建网页的标记语言。它使用一系列标记来描述网页中的文本、图像、超链接等元素的结构和显示方式。HTML标记通常被称为标签，一般用尖括号括起来，比如 <html>、<body>、<p> 等等。这些标记告诉浏览器如何显示页面的内容和布局。

HTML是一种非常基础的技术，它被广泛用于网页开发和设计。随着HTML的发展和改进，现代的网页开发已经逐渐转向使用更先进的技术，如CSS和JavaScript，来控制页面的样式和交互。但是HTML仍然是网页开发的基础，理解HTML对于成为一名优秀的网页开发者非常重要。

CSS

CSS（层叠样式表）是一种用于描述网页样式的语言。CSS可以控制网页的布局、字体、颜色、背景等方面的样式。通过CSS，可以将网页的内容与样式分开，使得网页的设计变得更加灵活、易于维护和修改。

CSS 的工作原理是以“样式规则”为基础。样式规则由两个主要部分组成：选择器和声明块。选择器指定了需要样式化的HTML元素，而声明块则包含了一条或多条样式规则，每条规则包含一个属性和值。

CSS可以通过多种方式应用于HTML文档，包括内部样式表、外部样式表和内联样式。

JavaScript

JavaScript是一种脚本语言，它用于为Web应用程序添加交互性和动态性。JavaScript是一种轻量级的编程语言，它可以通过在网页上嵌入脚本（script）标签实现交互效果。

JavaScript可以用于以下方面：

动态地改变HTML和CSS内容，使网页更加动态和交互
在网页上处理用户的输入，例如表单验证
与Web服务器进行通信，把数据发送到服务器或者从服务器获取数据
创建动态图像和动画效果

【No.01 新浪新闻的标题排版】

样式如下：
这个网页的标题可以分为以下几个部分：

在这里插入图片描述

h1-h7标题标签和title浏览器标题标签

<!-- 首先来学习HTML中的标签，HTML是标签的集合，各个标签可以实现对应效果 -->
<!-- 标题标签 由h1-h6  注意没有h7  写在body标签里-->
<!-- 标题文字需要被<h1></h1>包裹起来 -->
<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>
<h4>我是标题h4</h4>
<h5>我是标题h5</h5>
<h6>我是标题h6</h6>

<!-- 浏览器标题标签 -->
<!-- 浏览器标题文字需要被<title></title>包裹起来 -->
<title>演示</title>

填入标准HTML文件中->

<!-- 声明文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器的兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 浏览器的标题部分 -->
    <title>演示</title>
</head>

<body>
    <h1>我是标题h1</h1>
    <h2>我是标题h2</h2>
    <h3>我是标题h3</h3>
    <h4>我是标题h4</h4>
    <h5>我是标题h5</h5>
    <h6>我是标题h6</h6>
</body>

</html>

以上代码，除了<body></body>包围的和<title></title>包围的内容，
其他全不是自己书写的，都是由VSCode新建html文件输入 ! (英文状态) 自动补全

演示效果：

在这里插入图片描述

在浏览器中，顶端的小标签里的文字可以用title标签进行修改，title标签写在head标签中。

在浏览器的主页里面展示的内容，都是在body标签里：

在这里插入图片描述

img图片标签

<!-- img标签-->
<!-- 
    img标签三个属性
        src 图片资源路径
        width 宽度(px 像素)(% 百分比)
        height 高度 (px 像素)(% 百分比)
    
    路径的书写方式
        绝对路径 1、绝对磁盘路径
                 2、绝对网络路径 https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
        相对路径 ./ 本级目录 可省略  推荐
                ../ 上级目录
    -->
    <!-- 1、绝对磁盘路径 -->
    <!-- <img src="D:\JavaWebCode\Day01\img\1.png"> -->
    <!-- 2、绝对网络路径 -->
    <!-- <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> -->
    
    <!-- 相对路径 -->
    <!-- <img src="./img/1.png"> -->
    
	<!-- 添加width 和 height 属性 单位为px  仅仅展示如何添加 实际上不添加-->
   <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" width="114514px" height="1919810px">

填入标准HTML文件中->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
</head>

<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
</body>

</html>

以上代码，除了<body></body>包围的和<title></title>包围的内容，
其他全不是自己书写的，都是由VSCode新建html文件输入 ! (英文状态) 自动补全

演示效果：

在这里插入图片描述

hr水平线标签

	<!-- hr是水平线标签 一个hr标签可以画一条水平线-->
    <hr>
    我是文字
    <hr>

填入标准HTML文件中->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
</head>

<body>
    <!-- hr是水平线标签 -->
    <hr>
    我是文字
    <hr>
</body>

</html>

以上代码，除了<body></body>包围的和<title></title>包围的内容，
其他全不是自己书写的，都是由VSCode新建html文件输入 ! (英文状态) 自动补全

演示效果：
在这里插入图片描述

回顾一下再分析一下

	<!-- 标题标签-->
	<h1>我是标题h1</h1>
	<h2>我是标题h2</h2>
	<h3>我是标题h3</h3>
	<h4>我是标题h4</h4>
	<h5>我是标题h5</h5>
	<h6>我是标题h6</h6>
	
	<!-- 浏览器标题标签 -->
	<title>演示</title>

    <!-- img标签-->
	<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" width="114514px" height="1919810px">

	<!-- hr是水平线标签 一个hr标签可以画一条水平线-->
    <hr>
    我是文字
    <hr>

那么，让我们来根据所学，来分析
在这里插入图片描述

一、对于左上角的image，显然可以用img标签，后面紧跟着的文字可以直接在img标签后面添加，src图片路径，可以直接选用绝对网络路径，后面的width、height在此处并未用到，不加。

二、中间的大标题，可以用h1标签来包围。

三、分界线，用hr标签。

四、文本，没实际意义，直接填写对应内容。

五、分界线，用hr标签。

根据此番分析，就可以编写代码啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国国防部长：请各国管好自家的军舰飞机</title>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务 > 正文
    <h1>中国国防部长：请各国管好自家的军舰飞机</h1>
    <hr>
    2023年06月04日 15:06 央视网作者：央视新闻
    <hr>
</body>
</html>

最后的网页效果就是如图所示啦！

在这里插入图片描述

关于这个网站的标题部分就做到这里就暂时告一段落，下一篇文章将对标题样式进行美化。

如果你觉得本篇文章对你的学习有些许帮助，不妨留下点赞和收藏再走，持续更新个人学习日志！！

在这里插入图片描述

By:WaODream
Date:2023.6.5

WaODream

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
[HTML、CSS、JavaScript学习]No.01 以新浪新闻页面为样例

HTML，即 Hypertext Markup Language，是一种用于创建网页的标记语言。它使用一系列标记来描述网页中的文本、图像、超链接等元素的结构和显示方式。HTML标记通常被称为标签，一般用尖括号括起来，比如、、等等。这些标记告诉浏览器如何显示页面的内容和布局。HTML是一种非常基础的技术，它被广泛用于网页开发和设计。随着HTML的发展和改进，现代的网页开发已经逐渐转向使用更先进的技术，如CSS和JavaScript，来控制页面的样式和交互。
复制链接

扫一扫