HTML-CSS
初识web前端
Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。
三个组成部分： HTML：负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。
什么是HTML、CSS?
HTML（HyperText Markup Language）：超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言 HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。
一、HTML快速入门
1.HTML结构标签
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>
2.特点
HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散
二、VS Code开发工具介绍
Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。
VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。
VS Code 提供了非常强大的插件库，大大提高了开发效率。
官网： https://code.visualstudio.com
注意事项：作为一名软件开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。
三、基础标签 & 样式
1.标题标签
标签：<h1>…</h1>（h1 → h6 重要程度依次降低）
注意：HTML标签都是预定义好的，不能自己随意定义。
2.水平线标签
<hr>
3.图片标签
<img src="…" width="…" height="…">
绝对路径：绝对磁盘路径（D:/xxxx）、绝对网络路径（https://xxxx）
相对路径：从当前文件开始查找。 （./ : 当前目录, ../ : 上级目录）
4.<div>标签
一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）
5.<span>标签
<span> 是一个在开发网页时大量会用到的没有语义的布局标签
特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开
6.超链接标签
标签：<a>
属性：
href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
7.音频、视频标签
<audio> <video>
8.换行、段落标签
换行：<br> ; 段落：<p>
9.文本加粗标签
<b> <strong>
注意：在HTML中无论输入多少个空格，只会显示一个。 可以使用空格占位符：
1.CSS引入方式
行内样式：<h1 style="...">
内嵌样式：<style> … </style>
外联样式：xxx.css <link href="...">
2.颜色表示
关键字: red、green . . .
rgb表示法：rgb(255,0,0)、rgb(134,100,89)
十六进制: #ff0000、#cccccc、#ccc
3.颜色属性
color: 设置文本内容的颜色
4.CSS选择器
元素选择器：标签名 { … }
id选择器：#id属性值 { … }
类选择器：.class属性值 { … }
优先级：id选择器 > 类选择器 > 元素选择器
5.CSS属性
color：设置文本的颜色
font-size：字体大小 （注意：记得加px）
text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
6.CSS样式
line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式
1.CSS盒子模型
盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
width：设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000；
padding：内边距
margin：外边距
注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …
四、表格、表单标签
1.表格标签
2.表单标签
标签：<form>
表单项：不同类型的 input 元素、下拉列表、文本域等。
<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域
属性：
action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式。GET、POST