目录
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的相关手册即可。
至此，全文结束。
