前端基础：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 声明用分号分隔，声明块用花括号括起来。

例如，所有 <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的相关手册即可。

至此，全文结束。