HTML主体：
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
=================================================================
字体效果：
<b></b> 字体加粗
<i></i> 字体倾斜
<u></u> 字体下划线
<br /> 换行 (shift+回车)
<hr/> 网页分割线
<h1></h1>~<h6></h6> 统一称为h标签(一般作为标题)
<marquee></marquee> 弹幕
空格 (shift+空格)前提：关掉输入法（ctrl+空格）
====================================================================
属性
写法：属性名=“属性值”
color=“red”
属性写在标签名的后面，尖括号的里面。
双标签：<标签名 属性名=“属性值” 属性名=“属性值”>开始标签 </标签名>结束标签
单标签：<标签名 属性名=“属性值” 属性名=“属性值”/>
字体标签
<font color=“” size="" face="">内容</font>
color=“” 作用：改变字体颜色
属性值：颜色值
例如：red blue
size="" 作用：改变字体大小
属性值：1---7
从小到大
face="" 作用：改变字体样式
属性值：宋体 黑体 楷体
段落标签
<p align="left/center/right">内容</p> 自动换行
插入图片
<img src="图片的路径" width=“数字” height=“数字”/>
插入图片步骤：
1、先把图片复制到img文件夹中
2、插入图片
====================================================
a标签 超链接标签 作用：实现多个页面相互访问/跳转！
书写格式：
<a href="将内容转换为超链！" title="内容提示框">度/内容/图片</a>
属性：
href 作用：表示将内容转换为超链接;
属性值：网址的路径;
属性：title 作用：表示内容提示框！
属性值：自定义！
注意：href属性值必须要填写全域名！
======================================================
列表标签：
无序列表：ul标签 作用：没有顺序的排列;
书写格式：
<ul type="列表的类型"> un ordered list
<li>内容/文字/图片/超链接...ul</li>
</ul>
属性：
type 作用：表示无序列表的类型！
属性值：
circle空心圆 disc实心圆 square方框 none消除！
有序列表：ol标签 作用：有顺序的排列;
select标签 下拉框标签 作用：让我们有目的去选择内容！（比如选择省市）
书写格式：
<select>
<option>山东省</option>
</select>
=======================================================
input标签 输入框标签 作用：让我们在浏览器中输入内容！
书写格式：
<input type="输入框的类型"/>
属性： type 作用：表示输入框的类型！
属性值：
1、文本输入框 text; 用户名;
2、密码输入框 password; 密码;
3、数字输入框 number; 数字;
4、邮箱输入框 email; 邮箱;
5、日期输入框 date; 日期;
6、文件输入框 file; 文件;
7、单选输入框 radio; 单选按钮;
8、多选输入框 checkbox; 多选按钮;
9、提交输入框 submit; 提交;
10、充值输入框 reset; 重置;
============================================
form标签 表单标签 作用：将输入框与按钮相互连接！
书写格式：
<form action="数据提交的地址;">
<input type="..."/>
<input type="..."/>
</form>
============================================
属性：
1、name 作用：区分输入框内容是否同组！
属性值：属性值如果相同那么就是一组！
2、value 作用：表示修改输入框的默认值！
属性值：自定义！
3、placeholder 作用：表示提示用户信息！
属性值：自定义！
4、autofocus 作用：表示自动获得焦点！
属性值：autofocus;
5、required 作用：表示必须填写项目！
属性值：required;
4.11
==============================================
table标签 表格标签 作用：网页布局/ 像一个Excel一样的表格！
书写格式：
<table> ==> 表示表格的边框！
<tr> ==> 表示表格的行数！
<td></td> ==>表示表格的列数/单元格！
</tr>
</table>
表格中的属性：
1、border 作用：表示边框！
属性值：数值,自定义！
2、width 作用：表示宽度！
属性值：数值,自定义！
3、height 作用：表示高度！
属性值：数值,自定义！
4、align 作用：表示表格在主体中的位置;
属性值：left 左 center中 right右！
5、cellspacing 作用：表示单元格与单元格之间的距离;
属性值：数值,自定义！ 默认距离为2px;
6、background 作用：表示添加背景图片;
属性值：图片的地址;
7、bgcolor 作用：表示添加背景颜色;
属性值：三种取值方式！
8、bordercolor 作用：表示边框颜色;
属性值：三种取值方式！
表格中行的属性：
1、align 作用：表示每一行中的内容于单元格的水平位置！
属性值：left 左 center中 right右！
2、valign 作用：表示每一行中的内容与单元格的垂直位置！
属性值：top上 center中 bottom下！
3、bgcolor 作用：表示给每一行添加背景颜色;
属性值：三种取值方式！
==============================================
表格中列/单元格的属性：
1、align 作用：表示每一个中的内容于单元格的水平位置！
属性值：left 左 center中 right右！
2、valign 作用：表示每一个中的内容与单元格的垂直位置！
属性值：top上 center中 bottom下！
3、bgcolor 作用：表示给每一个添加背景颜色;
属性值：三种取值方式！
==============================================
合并单元格：
合并列：从左到右为合并列！
属性：colspan,
属性值 ：自定义 ，想合并几列，就写几！
注意：首先在你想合并的首个单元格中填写属性colspan, 属性值填写你要合并的列数！
之后,自左向右删掉多余的单元格！
删掉N-1个单元格！
合并行：从上到下为合并行！
属性：rowspan,
属性值：自定义，想合并几行，就写几！
注意：
首先在你想合并的首个单元格中填写属性rowspan,属性值填写你要合并的行数！
之后,自上向下删掉多余的单元格！
删掉N-1行个单元格！
=======================================================
CSS基础（前部分）
css : Cascading Style Sheet
层叠 样式 表
层叠：对一个元素 重复添加样式, 最终以最后一个样式为主！
样式：美化页面,
表 ： 样式表
前端的知识：
Html + Css + JavaScript + UI == 前端界面！
Html：标签组成 作用：搭建前端网页 比喻：盖房子！
Css : 样式组成 作用：美化前端网页 比喻：装修房子！
JavaScript： 脚本代码组成, 作用：给页面添加额外的功能！
===================================================
回顾一下HTML的属性：
【属性：】
定义：属性通常是以键值对的方式存在 , 属性名="属性值"
作用：给标签添加额外的功能！（行内）
位置：存在于标签名的后面,尖括号的里面,
【样式：】
定义：样式通常也是以键值对的方式存在; 样式名:样式值;
作用：美化页面,添加效果！
====================================================
常见的几种样式：
1、color 作用：表示修改字体颜色;
样式值：三种取值方式！
2、font-size 作用：表示修改字体大小;
样式值: 数值,自定义; 单位：px(像素) em(相对单位) rem %(百分比);
注意：一定要添加单位！
3、font-family 作用：表示字体家族;
样式值：楷体/ 宋体/ 仿宋体...
===================================================
如何区分样式与属性：
属性：
1、属性名与属性值用【=】链接;
2、属性名与属性名用【空格】隔开;
3、属性值需要【双引号】引起来;
样式：
1、样式名与样式值用【：】链接;
2、样式名与样式名用【；】隔开;
3、样式值不需要双引号/单引号 引起来;
================================================
样式的好处？
1、字体的大小可以随意设置;
2、输入框的大小,位置可以随意设置;
3、背景图片的大小,位置,可以随意设置;
=================================================
添加样式的方式：3种方式！
1、行内样式表 添加方式：(通过style属性添加样式！)
书写格式：
<标签名 style="样式名:样式值;样式名:样式值;"></标签名>
好处：style属性是共有属性！
=========================================================
2、内部(内嵌)样式表 添加方式：(通过嵌套在head标签中的style标签添加样式！)
书写格式：
<head>
<style>
选择器{样式名:样式值;}
</style>
</head>
选择器：{}
1、标签名选择器： 标签名{样式名:样式值;}
我选择的是标签名：比如加粗的<b>标签之类。
注意：给相同标签添加相同样式的时候！
2、class类选择器 ： .属性值{样式名:样式值;}
我给标签分类
注意：给相同标签添加不同样式的时候！
1、class属性值可以自定义, 但是不能使用数字开头！
2、class属性值不能使用关键字！
3、class属性值可以重复使用！
3、id选择器： #{样式名:样式值;}
注意：
1、id属性值可以自己定义, 但是不能使用数字开头！
2、id属性值不能使用关键字！
3、id属性值不能重复使用！
==========================================================
选择器优先级关系：
行内样式表> id选择器 > class类选择器 > 标签名选择器
==========================================================
4、给多种标签同时添加样式： 多元素选择器 {样式名:样式值;}【有逗号】
b,p,i,h1,u{color: red;}
5、给标签1后面的标签添加样式：后代元素选择器{样式名:样式值;}【无逗号】
h1 b{color: red;}
添加样式的方式：
1、行内样式表 (通过写在标签名后面的style属性添加样式！)
2、内部样式表 (通过嵌套在head标签中的style标签添加样式！)
选择器：
1、标签名选择器 {}
2、class类选择器{}
3、id选择器 {}
4、多元素选择器{}
5、后代元素选择器{}
===================================================================
常见的样式：
背景样式：
1、background-image 作用：表示添加背景图片!
样式值：url(图片的地址;)
2、background-repeat 作用：表示背景图片是否重复出现！
样式值：no-repeat 不重复！ repeat重复 repeat-x横向重复
repeat-y纵向重复！
3、background-position 作用：表示背景图片在主体中的位置！
样式值：
1、图片的水平位置; left(默认) center right
2、图片的垂直位置; top上(默认) center中 bottom下
注意：需要去掉<!DOCTYPE html> ==> 表示html的版本！
4、background-size 作用：表示背景图片的大小;
样式值：
1、图片的宽度 %;
2、图片的高度 %;
5、background-attachment 作用：表示背景图片跟随内容滚动！
样式值：fixed固定的 scroll滚动的！
6、background-color 作用：表示添加背景颜色;
样式值：三种取值方式;
=====================================================
文本样式：部分的文本样式只能应用于块级元素！
行内元素：
定义：
自己不独占一行, 且不自动换行, 浏览器解读代码的顺序是从左向右！
例：b、i、u、img、input、...span,
块级元素：
定义：自己独占一行,且自动换行,浏览器解读代码的顺序是从上向下！
例：p、li、h1(标题标签) ...div,
=======================================================
超链接样式：
选择器：
伪类选择器：
定义：属性值不需要自己定义, 人家给你定义好了,你直接拿过来用;
1、:link{} ==》 指的是超链接访问之前的状态！
2、:visited{} ==》指的是超链接访问之后的状态！
注意：访问之后只能修改颜色值;
在设置a伪类时,上下顺序不能颠倒！
3、:hover{} ==> 指的是当鼠标划过超链接时发生的状态！
4、:active{} ==》 指的是当鼠标点击超链接时发生的状态！
注意：需要添加标签名选择器;
【部分背景文本样式：
background-image：url("背景图片的路径");
background-repeat： 1.repeat重复(默认) 2.no-repeat 不重复 3.repeat-x 横向重复 4.repeat-y 纵向重复
background-size： 数字 单位:百分比 % 1：背景图片的宽度 2：背景图片的高度
background-attachment：fixed 固定 scroll 滚动 改变背景图片是否滚动
background-color：三种取值颜色改变背景颜色
text-indent：数字 ：自己定义 单位:像素 px 相对单位 em 厘米(cm ) 改变字体首行缩进
text-align：left 左边（默认）right 右边 center 中间 改变文本的位置
text-decoration：三种样式值可以连续使用 中间用空格隔开：underline 下划线/ overline 上划线/ line-through 中划线 类似于删除线 s标签 / none 清除划线 应用于a标签超链接
font-style:1.oblique 斜体 2.italic 字体倾斜 3.normal 正常字体
改变文本的样式
line-height :数字 : 自己定义 单位:px em文本的行高
word-spacing :数字 : 自己定义 单位:px em单词之间距离
letter-spacing :数字: 自己定义 单位:px em字母之间距离 字间距
font-size :数字: 自己定义 单位:px em改变字体的大小
background-color :三种取值颜色改变字体的背景颜色
color :三种取值颜色改变字体的颜色
font-family :楷体、宋体、仿宋体 自己定义改变字体的样式】
