前端基础：HTML和CSS简介-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端基础：HTML和CSS简介。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 指的是超文本标记语言 (Hyper Text Markup Language)，标记语言 (markup language) 不是一种编程语言，而是一套标记标签 (markup tag)，标记标签来描述网页

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

一些常用的 HTML 实例，点击这里：W3C_HTML实例。

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

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

（1）在 HTML 中引入外部 CSS

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

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

（2）在 HTML 中引入外部 JavaScript

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

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

<script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

2、CSS 简介

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <style> <!--CSS样式，也可以单独保存在一个文件中-->
            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。

（1）CSS 的基本语法

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

前端基础：HTML和CSS简介,CSS,HTML,网页

选择器指向需要设置样式的 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标签进行引入*.css文件-->
        <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> <!--内部css样式-->
            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的相关手册即可。

至此，全文结束。文章来源地址https://www.toymoban.com/news/detail-578363.html

到了这里，关于前端基础：HTML和CSS简介的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！