HTML and CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/one_zero_one/article/details/96133925

本文介绍了HTML的基本概念与结构，展示了如何使用HTML标签创建简单的网页内容，并通过CSS进行样式设计，实现内容与表现的分离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一HTML

1什么是HTML

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。HTML文档也叫做 web 页面。<div>这是成对出现的标签</div>

2基本结构

<!DOCTYPE html> 文档声明类型，声明帮助浏览器正确地显示网页
<html> html文档的根标签

    <head>  网页头部信息，用来做网页的基本配置
        <meta charset="utf-8"> 网页字符编码
        <title>html的基本结构</title> 网页在浏览器窗口中显示的标题
    </head>
    
<body>此标签中写网页中显示的内容</body>
</html>

3常用标签

<h1~h6> 标题
a标签 链接
img  图片标签  scr  alt  title
p  标签
br  换行
div 块标签
span 圈住一块文字
&lt;  <
&gt;  >
&nbsp;  空格
&amp;   &

二CSS

1 层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，为了解决内容与表现分离的问题

三代码

<!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>08-今日头条</title>
    <style>
        /* 1.最外边的大框设置样式 */
        .box{
            width: 285px;
            height: 310px;
            border-top: 1px solid #c8dcf2;
            border-bottom: 1px solid #c8dcf2;
            /* 元素水平方向居中 */
            margin: 0px  auto;
            /* red  green  blue */
        }

        /* 头部 */
        .head{
            height: 40px;
        }

        /* 今日头条文字 */
        .head h3{
            margin: 0px;
            font-size: 16px;
            font-family: "Microsoft Yahei";
            color: #172c45;
            /* 浮动 用了浮动后所有的元素都能排在一行 */
            float: left;

            line-height: 40px;
            /* 设置下划线 */
            /* text-decoration: underline; */
        }

        /* 更多 */
        .head a{
            font-size: 12px;
            font-family: "Microsoft Yahei";
            color: #172c45;
            /* 右浮动 */
            float: right;
            /* 行高 设置文字垂直居中 */
            line-height: 40px;
            /* 清除下划线 */
            text-decoration: none;
        }


        /* 人工智能段落 */
        .box p{
            font-size: 12px;
            font-family: "Microsoft Yahei";
            color: #737373;
            line-height: 20px;
        }



    </style>
     
</head>
<body>
    <!-- 大div表示整个内容 -->
    <div class="box">
        <!-- 1 头部div -->
        <div class="head">
            <!-- 1.2 今日头条标签 -->
            <h3>今日头条</h3>
            <!-- 1.3 更多 a标签 -->
            <a href="#">更多&gt;&gt;</a>
        </div>

        <!-- 2.图片 -->
        <img src="banner.jpg" alt="人工智能">

        <!-- 3.段落 -->
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等.</p>

    </div>
</body>
</html>