Web开发网站-01
目录
Web：全球广域网，也称为万维网（www World Wide Web），能够通过浏览器访问的网站。
项目开发模式：前后端分离开发和混合开发
主要学习前后端分离开发
1 Web前端开发
网页组成部分：文字、图片、音频、视频、超链接等
我们日常看到的网页，背后的本质是程序员写的前端代码。
前端代码是通过浏览器转化（解析、渲染）成用户看到的网页，浏览器中对代码进行解析渲染的部分，称为浏览器内核。
注意：不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异。
2 Web标准
Web标准也称为网页标准，有一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。
三个组成部分：
HTML:负责网页的结构（页面元素和内容）。
CSS:负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。
3 HTML
HTML(HyperText Markup Language）：超文本标记语言。
· 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
· 标记语言：由标签构成的语言
HTML标签都是预定义好的。例如：使用<a>展示超链接， <img>展示图片，<video>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
特点：html不区分大小写，属性可以使用双引号和单引号，规则语法松散。
HTML结构标签：最外层<html>,两个子标签<head>和<body>,在<head>当中，可以通过<title>来制定文件的标题，
4 CSS
· CSS(Cascadin Style Sheet):重叠样式表，用于控制页面的样式（表现）。
5 基础标签&样式
图片标签：<img>
·src：制定图像的url（绝对路径/相对路径）
·width：图像的宽度（像素px/相对于父元素的百分比%）
·height：图像的高度（像素px/相对于父元素的百分比%）
注意：一般width和height只设置一个，另一个会自动等比例缩放
标题标签：<h1> - <h6> 一级标题到六级标题
水平线标签<hr>
无语义标签<span> 是一个在开发网页是大量会用到的没有语义的布局标签
特点：一行可以显示多个（组合行内元素），宽度和高度默认有内容撑开
路径
绝对路径：绝对磁盘路径和绝对网络路径
相对路径：当前目录（./,可以省略）和上一级目录（../，不可以省略）
6 CSS引入方式
- 行内样式：写在标签的style属性中（不推荐）
<h1 style="xxx: xxx; xxx: xxx; ">中国人民网</h1>
- 内嵌样式：写在style标签中（可以写在页面任何位置，当通常约定写在head标签中）
<style>
h1{
xxx: xxx;
xxx: xxx;
}
</style>
- 外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）
7 颜色表示形式
| 表示方式 | 表示含义 | 取值 |
| 关键字 | 预定义的颜色名 | red、green、blu... |
| rgb表示法 | 红绿蓝三原色，每项取值范围：0-255 | rgb(0,0,0)、rgb(255,255,255),rgb(255,0,0) |
| 十六进制表示法 | #开头，将数字转换成十六进制表示 | #000000，#ff0000，#cccccc，简写：#000、#ccc |
8 CSS选择器
- css选择器：用来选取需要设置样式的元素（标签）
| 元素选择器 | 元素名称{ color：red; } |
h1{ color:red; } |
<h1> Hello CSS </h1> |
| id选择器(不能重复） | #id属性值{ color:red; } |
#hid{ color:red; } |
<h1 id="hid"> CSS id Selector</h1> |
| 类选择器（可以重复） | .class属性值{ color:red; } |
.cls{ color:red; } |
<h1 class="cls"> CSS class Selector</h1> |
以上三种选择器优先级：id选择器>类选择器>元素选择器