web网站的组成： 浏览器 前端服务器 后端服务器 数据库服务器
前后端分离开发
前端web开发：
HTML，CSS，JavaScript
基于JavaScript封装的高级技术：Vue,Element
前端程序部署的服务器：Nginx
后端web开发：
Maven ， SpringBoot web 基础 ， Mysql ，Spring Boot Mybatis , SpringBoot web开发 ， SpringBoot web进阶
网页本质：前端代码
浏览器中对代码进行解析和渲染的部分：浏览器内核
前端基础技术：Html：网页结构
CSS：网页的表现（样式）
JavaScript：网页的行为
Html：超文本标记语言（由标签构成的语言），除了文字还可以定义文本·图片·视频·音频等。
Html的标签都是事先定义好的，由浏览器负责解析。
CSS：层叠样式表，用于控制页面的样式。
w3Schools：JavaWeb的标签参考网站。
Html快速入门：
1.创建文本文件，改后缀为.html
2.编写html结构标签
3.在<body>中填写页面内容，<title>填写网站地址名称
** Html不区分大小写，属性不区分单引号金和双引号，Html语法松散并不严格。
记事本开发Html页面
<html>
<head>
<title>原神官网</title>
</head>
<body>
<h1>元神启动！</h1>
<img src="1.jpg"/>
</body>
</html>
图片标签：<img>
src：指定图像的url(绝对路径/相对路径)
width：图像的宽度（像素:px/相对于元素的百分比:相对于父元素的百分比）
heigth：图像的高度（像素:px/相对于像素的百分比:相对于父元素的百分比）
父元素：body
绝对磁盘路径：右键图片->属性->安全->对象名称后面的就是绝对路径
绝对网络路径：通过点击网页图标到最后的图片页面地址，地址则为绝对网络路径（网络上必须要有此图片，且必须联网）
相对路径（推荐）：./ ：当前目录 ， ./ 可以省略
../ : 上一级目录
标题标签：<h1>~<h6>依次递减
水平线标签：<hr>
align ：设置水平线的对齐方式：left,right,center。
size:设置水平线的粗细，以像素为单位，默认为2px。
color:设置水平线的颜色：颜色名称，rgb，十六进制。
width:设置水平线的宽度：像素或者百分比。
css引入方式：
行内样式：写在标签的style属性中（只对当前的标签有效，不推荐）
<h1 style="***：***，***：***;">中国新闻网<h1>
前***为属性名 后***为属性值
例：<h1 style="color: brown;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>
内嵌样式：写在style标签中（可以写在页面的任何位置，但通常约定写在head标签中）
<style>
h1 {/*标签选择器 */
color: red;
}
</style>
这个内嵌的含义：针对于当前的html页面中的所有h1标签都是有效的
外联样式：写在一个单独的.css文件中（需要通过link 标签在网页中引入）
h1{
***:***;
***:***;
}
例：h1{/*标签选择器 */
color: red;
}
<link rel="stylesheet" href="../CSS/news.css">
颜色的表示形式：
关键字：预定义的颜色名 red,bkue,green... ...
rgb表示法：红绿蓝三原色，每项取值范围：0~255 rgb(红，绿，蓝) ， rgb(0,0,0) , rgb(255,255,255) , rgb(255,0,0)
例：color : rgb(0,0,255);;
十六进制表示法：#开头，将数字换成十六进制表示 #000000，#ff0000 , #cccccc , 简写（如果格式相 同）：#000 、 #ccc
例：color :#ff0000
颜色不确定：使用拾色器，会自动给出rgb表示和十六进制的表示方法
没有任何语义的标签<span>：用来组合行内元素的，在浏览器的一行中可以使用多个span标签。
CSS属性：color颜色 font-size字体大小
CSS选择器：用来选取需要设置样式的元素（标签）：
元素名称{ h1{
1·元素选择器： color：red； color:red; <h1>元素选择器</h1>
} }
#id属性值{ #hid{
2.id选择器： color：red； color：red； <h1 id="hid">CSS id Selector</h1>
} }
.class属性值{ .cls{
3.类选择器： color：red； color：red； <h1 class="cls">CSS class Selector</h1>
} font-size:13px -- 设置字体大小
}
CSS选择器的优先级：id选择器->类选择器->元素选择器
HTML超链接标签： <a href="......" target="......">央视网</a>
href：指定资源访问的url
target：指定在何处打开资源链接：
(下划线)-self：默认值，在当前页面打开
(下划线)-blank：在空白页打开
设置超链接在页面的表现（都可以在w3schools查看）
a{
color: black;//设置文本的页面颜色
text-decoration: none;设置文本为一个标准的文本（将超链接自带的下划线去掉）
}
视频标签：<video>
src ： 规定视频的url
controls : 显示播放控件
width ：播放器的宽度
heigth ：播放器的高度
<video src="1.mp4" controls="controls" width="300px" height="300px"></video>
音频标签：<audio>
src : 规定音频的url
controls：显示播放控件
<audio src="心之洛,十七刀DLS - 《吗喽》粤语版.mp3" controls></audio>
段落标签：<p>
p{
text-indent: 50px;//css段落标签缩进
line-height: 45px;//css设置段落行高；
}
文本加粗标签：<b> / <strong>
文本靠右对齐：
<p id="plast">
责任编辑：龚浩
</p>
#plast{
text-align: right;
}
空格展位符：
HTML页面布局：盒子模型
盒子模型的组成：内容区域（content） ， 内边距区域（padding）， 边框区域（border） ， 外边距区域（margin）
注意：盒子不包括外边距（margin）
**布局标签：实际开发网页中，会大量使用div和span这两个没有语义的布局标签
**标签：<div> <span>
**特点：
div标签：
1.一行只显示一个（独占一行）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高（width，heigth）
***注意布局标签的使用可以配合CSS来使用，如果只需要某一个方位的边框·内边距·外边距，可以在属性名后加上 -位置 ，如 ：padding-top , padding-left , padding-right。
span标签：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高（width,heigth）
表格标签：在网页中以表格的形式整齐的展示数据。
标签 描述 属性/备注
<table> 定义表格整体，可以包裹多个<tr> border：规定表格线的宽度 width：规定表格的高度 cellspacing：规定单元之间的空间
<tr> 表格的行数，可以包裹多个<td>
<td> 表格单元格（普通），可以包裹内容 如果是表头单元格，可以换成<th>:有加粗的效果
表单标签：在网页中主要负责数据采集功能，如登录，注册等数据采集。
标签：<from>
表单项：不同类型的input元素，下拉列表，文本域等。
1.<input>：定义表单项，通过type属性控制输入形式
2.<select>：定义下拉列表
3.<textarea>：定义文本域
属性：
1.action：规定提交表单时向何处发送表单数据，URL。如果不指定则默认将数据提交到当前页面。
如果使用get：在url后面拼接表单数据，如：？username=zhangsan&age=12,url长度是有限制的（大表单无法操作）
2.method：规定用于发送表单数据的方式。GET,POST
post请求：在消息体（请求体）中传递的，参数无大小限制的
表单项标签：
<input>：表单项，通过type属性控制输入形式
<select>：定义下拉列表，<option>定义列表项
<textarea>：文本域
date：年月日
time：时间 几点几分
datetime-local：date+time
<textarea name="description" cols="30" rows="10"></textarea> ： 可以输入10行，每行可以输入30个字符。在页面上可以拖动来改变大小。