前端基础：HTML和CSS简介

ゝ一世哀愁。 2024-03-22 17:05 66阅读 0赞

**目录**

1、HTML 简介

（1）在 HTML 中引入外部 CSS

（2）在 HTML 中引入外部 JavaScript

2、CSS 简介

（1）CSS 的基本语法

（2）三种使用 CSS 的方法

2.1 - 外部 CSS 的使用

2.2 - 内部 CSS 的使用

2.3 - 行内 CSS 的使用

--------------------

### 1、HTML 简介 ###

HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)，*标记语言* (markup language) 不是一种编程语言，而是一套*标记标签* (markup tag)，*标记标签*来描述网页

HTML -> 定义网页元素的一些标签，标签手册点击这里：[W3C\_HTML5][W3C_HTML5]。

一些常用的 HTML 实例，点击这里：[W3C\_HTML实例][W3C_HTML]。

// 页面布局，表单提交等标签内容

//一个前端页面的组成：html(标签) + css(样式) + js(动态页面) + 图片等

#### （1）在 HTML 中引入外部 CSS ####

当样式需要被应用到很多页面的时候，可以使用**外部样式表**，通过更改一个文件来改变整个站点的外观。

#### （2）在 HTML 中引入外部 JavaScript ####

JavaScript 使 HTML 页面更具动态性和交互性。

HTML *<script>* 标签用于定义客户端脚本（JavaScript）。*<script>* 元素即可包含脚本语句，也可通过 *src* 属性指向外部脚本文件。

### 2、CSS 简介 ###

*CSS* 是一种描述 HTML 文档样式的语言，CSS 描述应该如何显示 HTML 元素。

*CSS* 指的是层叠样式表 (*C*ascading *S*tyle *S*heets)，描述了如何在屏幕、纸张或其他媒体上显示 *HTML* 元素，外部样式表存储在 *CSS* 文件中。// 页面渲染的样式

*CSS* 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。下边为 CSS 使用样例示例：

<!DOCTYPE html>
    <html>
        <head>
            <style> 
                body {
                  background-color: lightblue;
                }
    
                h1 {
                  color: white;
                  text-align: center;
                }
    
                p {
                  font-family: verdana;
                  font-size: 20px;
                }
            </style>
        </head>
        <body>
            <h1>我的第一个 CSS 实例</h1>
            <p>这是一个段落。</p>
        </body>
    </html>

有关 CSS 样式设计的参考手册，请点击这里：[W3C\_CSS][W3C_CSS]。

#### （1）CSS 的基本语法 ####

CSS 规则集（rule-set）由选择器和声明块组成：

![a9e7f1dd76bc4c3cbf58d30ecae14fce.png][]

*  选择器指向需要设置样式的 HTML 元素。
 *  声明块包含一条或多条用分号分隔的声明。
 *  每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
 *  多条 CSS 声明用分号分隔，声明块用花括号括起来。

例如，所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {
      color: red;
      text-align: center;
    }
    
    解释：
    // p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
    // color 是属性，red 是属性值
    // text-align 是属性，center 是属性值

#### （2）三种使用 CSS 的方法 ####

##### 2.1 - 外部 CSS 的使用 #####

通过使用外部样式表，只需修改一个文件即可改变整个网站的外观，每张 *HTML* 页面必须在 *head* 部分的 *<link>* 元素内包含对外部样式表文件的引用。

例如，外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

<!DOCTYPE html>
    <html>
        <head> 
            <link rel="stylesheet" type="text/css" href="mystyle.css">
        </head>
        <body>
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </body>
    </html>

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。外部 .css 文件不应包含任何 HTML 标签。"*mystyle.css*" 是这样的：

body {
      background-color: lightblue;
    }
    
    h1 {
      color: navy;
      margin-left: 20px;
    }

##### 2.2 - 内部 CSS 的使用 #####

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式在 *head* 部分的 *<style>* 元素中进行定义。

例如，内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：

<!DOCTYPE html>
    <html>
        <head>
            <style> 
                body {
                  background-color: linen;
                }
    
                h1 {
                  color: maroon;
                  margin-left: 40px;
                } 
            </style>
        </head>
        <body>
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </body>
    </html>

##### 2.3 - 行内 CSS 的使用 #####

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，请将 ***style* 属性**添加到相关元素。*style* 属性可包含任何 *CSS* 属性。

例如，行内样式在相关元素的 *"style"* 属性中定义：

<!DOCTYPE html>
    <html>
        <body>
            <h1 style="color:blue;text-align:center;">This is a heading</h1>
            <p style="color:red;">This is a paragraph.</p>
        </body>
    </html>

前端基础的 HTML 和 CSS 样式就介绍到这里，涉及的知识都是一些网页的标签元素以及样式设计，本身跟编程关系不大，重点在于一些常用标签的熟悉以及对于标签的使用，查看W3C的相关手册即可。

至此，全文结束。

[W3C_HTML5]: https://www.w3school.com.cn/html/html5_intro.asp
[W3C_HTML]: https://www.w3school.com.cn/html/html_examples.asp
[W3C_CSS]: https://www.w3school.com.cn/css/index.asp
[a9e7f1dd76bc4c3cbf58d30ecae14fce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b3b4c60d2b244f3ab0f930ab77e81e09.png