编程技术

Document

HTML+CSS 快速入门，五分钟教你写出一个新浪新闻

目录

一.Web开发常用技术

二.HTML

三.CSS

CSS的引入方式

行内样式：

内嵌样式：

外联样式：

CSS样式选择器

一.Web开发常用技术

        Web开发是指使用各种技术和工具创建和维护网站和Web应用程序的过程。它涉及使用前端技术（如HTML、CSS和JavaScript）开发用户界面，以及使用后端技术（如服务器端脚本语言、数据库和Web服务）处理和存储数据。Web开发的目标是创建具有良好用户体验、高性能和安全性的网站和应用程序。

Web开发过程中涉及的技术和工具有很多，以下是一些常见的技术和工具：

1. HTML（超文本标记语言）：用于结构化网页内容的标记语言，定义网页的基本结构和布局。

2. CSS（层叠样式表）：用于定义网页的样式和外观，包括字体、颜色、布局等。

3. JavaScript：用于实现网页的动态功能和交互，可以控制网页元素、处理用户输入，以及与后端服务器进行通信。

4. 前端框架（如React、Vue等）：提供了更高级别的抽象和工具，简化了前端开发的过程。

5. 后端脚本语言（如PHP、Python、Java等）：用于处理网页请求、与数据库交互等后端逻辑。

6. 数据库（如MySQL、MongoDB等）：用于存储和管理网站的数据。

7. Web服务器（如Apache、Nginx等）：用于接收和处理网页请求，并将结果发送给客户端浏览器。

8. 版本控制系统（如Git）：用于管理源代码的版本和协作开发。

除了以上列出的技术和工具，还有很多其他的技术和概念，如API（应用程序接口）、REST（表述性状态转移）、响应式设计等，都在Web开发中起着重要的作用。

二.HTML

        HTML是一种标记语言，用于创建网页的结构和内容。HTML代表超文本标记语言（HyperText Markup Language）。它由一系列标签组成，这些标签用于定义网页的元素和结构。通过使用HTML，可以指定标题、段落、链接、图像和其他元素的呈现方式。HTML文件可以通过浏览器解释和呈现给用户。

        通俗的理解，HTML相当于是一个网页的骨架，他是网页元素的基础，我们可以通过HTML来进行对网页的大体构建，前面说到HTML是一种标记语言，它通过一系列标签来构成网页，我们在使用的时候大致将他分为俩个部分：

  • <head>部分：一般是关于浏览的兼容性或者引入一些其他的资源的设置
  • <body>部分：网页的主要内容
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>

在上面的<head>部分，我们也可以通过<title>标签对网页的标题进行设置，而在<body>中我们就可以使用一些其他的标签来构成丰富的网页元素

常用的标签如下：

<a> 定义超链接
<img> 定义图像
<h1>~<h6> 标题标签
<br> 换行
<div> 定义文档中的节（片段）
<p> 定义段落
<style> 定义文档的样式信息
<table> 定义表格
<title> 定义文档的标题
<video> 定义嵌入的视频内容
<!-- ... --> 定义注释
<from> 定义供用户输入的 HTML 表单

还有其他很重要的标签，这里篇幅的原因就不再赘述，详情可以查询官方的参考手册

HTML 标签参考手册 (w3school.com.cn)

 有了基础的标签，我们就可以通过标签来构建一个简单的网页原型，在稍后的学习中，再加入一些CSS样式我们就可以自己制作一个完整的网站了，笔者这里简单的举个例子：

<!-- 文档类型为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>
</head>
<body>
    <!-- 使用网络绝对路径选择图片源 -->
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">国内新闻>正文
    <!-- 主要标题 -->
    <h1>“冰天雪地也是金山银山”</h1>
    <hr>
    2024年01月18日 09:01 央视
    <hr>
    <!-- 使用本地相对路径访问图片，并且设置宽度为500像素大小 -->
    <img src="../img/1.jpg" width="500px"> 
</body>
</html>

在上述代码中，我们可以在标签中间添加具体的值或者文字，只要是被标签所包含，浏览器都会自动渲染到界面中。我们也可以在使用标签的时候顺带着设置一下相关的属性，就比如这里在使用<img>标签的时候，我们需要在标签内部的 src 中写入图片所在的地址URL，这里导入地址的时候可以分为绝对地址和相对地址导入：

  • 绝对地址：可以是电脑上文件的绝对地址，也可以是互联网上的绝对地址（使用的时候本机也要联网）
  • 相对地址：可以使用当前页面的相对地址来进行访问“./”表示本级目录下，“../”表示上级目录下

我们使用浏览器打开这个html文件

可以看见已经有了大概的雏形，然后我们可以再插入段落和图片标签就可以得到一个初始版本的新浪新闻

        <div id="center">

        <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 
        <a href="https://news.sina.com.cn/china/" target="_blank">国内新闻</a>>正文

        <h1>“标题”</h1>
        <hr>
        <span class="time" id="timer1">2024年01月18日 09:01</span>
        <span> <a href="https://news.cctv.com/2024/01/17/ARTII4TyLcXjoQIi8cq1nufv240116.shtml" target="_blank">央视</a></span>
        <hr>

        <div class="center-container">
            <img src="../img/1.jpg" width="500px">
        </div>

        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>


	    <!-- 图片 -->
        <iv class="center-container">
            <img src="../img/2.jpg" />
        </div>

        <p>段落4</p>

	    <!-- 图片 -->
        <div class="center-container">
            <img src="../img/3.jpg" />
        </div>

        <p>段落5</p>
        <p>段落6</p>
        <p>段落7</p>
        <p>段落8</p>
        <p>…………</p>

	    <!-- 图片 -->
        <div class="center-container">
            <img src="../img/4.jpg" />
        </div>


    </div>

三.CSS

        CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于定义网页样式和布局的语言。通过CSS，可以控制网页的字体、颜色、背景、布局等方面的样式。CSS与HTML共同构成了网页的外观和样式。通过使用CSS，可以实现网页的美化和样式的统一，提高网页的可读性和用户体验。

        如果说HTML是网页的骨骼的话，那CSS就相当于是血肉和皮肤了，有了CSS才能让我们的网页看起来更加美观，从而提高用户体验。在HTML中有一个标签<style>就可以帮助我们来控制CSS样式。

CSS的引入方式

我们要使用CSS样式的话，可以通过三种方式来引入CSS样式：

行内样式：

<h1 style="color: #4d4f53;">“冰天雪地也是金山银山”</h1>

使用行内样式的有点就是随处都可以定义使用，只需要在标签内部通过style等属性进行设置相关的样式就可以。

内嵌样式：

<style>
    h1 {
       color: #4d4f53;
    }
</style>

使用内嵌样式的有点在于它可以同时控制多个内容，我们可以将多个内容编成一块，然后通过这个块来更改块内所有元素的样式。这样的<style>标签我们一般用在<head>中。

外联样式：

h1 {
    color: #4d4f53;
}

我们先将我们想用的样式保存在一个CSS样式文件中，然后通过下方的<link>标签来将这样的CSS样式导入，在导入的时候也需要注意路径不要错误

<link rel="stylesheet" href="../css/news.css">

CSS样式选择器

对于我们想要的CSS样式，我们可以上官方手册进行查找：

CSS 参考手册 (w3school.com.cn)

里面有丰富的样式和案例供我们使用 

 在选择好样式之后，我们就可以通过CSS样式选择器来导入我们的内敛样式：

  • 元素选择器：

    <span>2024年01月18日 09:01</span> <span>央视</span>

    span标签：无意义的布局标签

  • id选择器：

    <span id="timer1">2024年01月18日 09:01</span> <span>央视</span>
    #timer1 {
    color: #8888AA;
}

    在标签内部我们可以设置它的id属性，然后在<style>中使用 “#” 来访问这个id所对应的标签，从而设置它的样式

  • 类选择器：

    <span class="time">2024年01月18日 09:01</span> <span>央视</span>
    .time {
    color: red;
}

    在标签内部我们可以设置它的所属的类，然后在<style>中使用 “.” 来访问这个类所包含的标签，从而设置它的样式

优先级：id选择器 > 类选择器 > 元素选择器

对于我们刚才的网页，我们使用内嵌样式将CSS样式导入，就可以得到一个完整的新浪新闻，其中我们主要设置文字的颜色和大小还有对其方式，其余的可以根据自己的想法发挥

  • color：设置文本的颜色
  • font-size：设置文本字体的大小
<!-- 文档类型为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>


    <style>
        h1 {
            color: #4d4f53;
        }

        /* 元素选择器
        span {
            color: gray;
        } */

        /* 类选择器
        .time {
            color: red;
        } */

        /* ID选择器 */
        #timer1 {
            color: #8888AA;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        p {
            line-height: 25px;
            text-indent: 30px;
        }

        #edit {
            text-align: right;
        }

        #center {
            width: 50%;
            margin: 0 auto; /* 相当于是 0 auto 0 auto */
        }
    </style>
    <!--     
    方式三：外联样式
    <link rel="stylesheet" href="../css/news.css">
-->
</head>

<body>

            <div id="center">

        <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 
        <a href="https://news.sina.com.cn/china/" target="_blank">国内新闻</a>>正文

        <h1>“标题”</h1>
        <hr>
        <span class="time" id="timer1">2024年01月18日 09:01</span>
        <span> <a href="https://news.cctv.com/2024/01/17/ARTII4TyLcXjoQIi8cq1nufv240116.shtml" target="_blank">央视</a></span>
        <hr>

        <div class="center-container">
            <img src="../img/1.jpg" width="500px">
        </div>

        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>


	    <!-- 图片 -->
        <iv class="center-container">
            <img src="../img/2.jpg" />
        </div>

        <p>段落4</p>

	    <!-- 图片 -->
        <div class="center-container">
            <img src="../img/3.jpg" />
        </div>

        <p>段落5</p>
        <p>段落6</p>
        <p>段落7</p>
        <p>段落8</p>
        <p>…………</p>

	    <!-- 图片 -->
        <div class="center-container">
            <img src="../img/4.jpg" />
        </div>


    </div>
</body>

</html>

 本次的分享就到此为止了，希望我的分享能给您带来帮助，也欢迎大家三连支持，你们的点赞就是博主更新最大的动力！如有不同意见，欢迎评论区积极讨论交流，让我们一起学习进步！有相关问题也可以私信博主，评论区和私信都会认真查看的，我们下次再见