HTML
HTML(Hyper Text Markup Language): 超文本标记语言
超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图
片、音频、视频等各种格式）
标记：也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容。
HTML结构详解
文档声明:
根标签:
头部分:
体部分:
预防网页乱码:
HTML标签
图像标签
超链接标签
这里可以包裹文本或图片表格标签
table: 定义一个表格
tr: 定义表格中的行
td/th: 定义表格中的单元格, th用于定义表头中的单元格,其中的文本默认加粗并居中
table上的html标签属性:
border(边框), cellspacing(指定边框和单元格之间的距离), cellpadding(指定单元格边框和内容之间的距离)bgcolor(背景颜色), bordercolor(边框颜色), align(设置排列方式,left/center/right)
表头1
表头2
表头3
11
12
13
21
22
23
31
32
33
表单标签
表单标签的作用: 用于向服务器提交数据, 此外在超链接或者url地址的后面拼接参数也可以向服务器提交数据!
表单项标签
a) 文本输入框:(比如:用户名/昵称/邮箱/验证码等)
b) 密码输入框: (比如:密码/确认密码等)
c) 单选框: (比如:性别/部门等)
d) 多选框:(比如:爱好/岗位等)
e) 按钮:(比如:换一张图片)
f) 提交按钮:(比如:提交/注册/登录)
g) 下拉选框:
select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置当前option选项默认被选中
h) 多行文本输入框：
cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提示消息!
表单细节
1、提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添
加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。
2、如何让多个单选框只能有一个被选中？
要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！
性别:
男
女
3、为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值
都是on)
男
女4、如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。
男
女
篮球
足球
排球
5、如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中。
6、下拉选框中option选项上的value属性的作用是什么？
如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。
如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容
CSS
CSS: 层叠样式表，用于修饰、渲染网页的一门技术
使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！
在HTML中引入CSS
方式1：通过style属性引入css（不推荐）
这是一个div...方式2：通过style标签引入css
方式3：通过link链接引入外部的css文件
CSS选择器
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
标签名选择器
格式: 元素名/标签名{ css样式... }
通过元素名称(或标签名称)选中指定名称的所有标签
span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}class选择器
格式：.class值{ css样式... }
可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。
另外，一个元素也可以设置多个class值，多个class值中间用空格分隔
.s1{ /* 选中所有class值为s1的元素 */
background: #faf77b;
border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
background: #5eff1e;
color: #ec0e7e;
}内容补充：选择器优先级顺序：
（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。
（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)
id选择器
格式：#id值{ css样式 }
通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。
#p1{ /* 选中id值为p1的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}后代选择器
格式: 祖先 后代{ css样式... }
选中指定元素内部的指定后代元素
p span{ /* 匹配所有p元素内部的所有span元素 */
font-size:18px;
color: red;
background: pink;
}/* p,span{} 匹配所有的p元素和所有的span元素 */匹配的标签：
这是一个p元素!!!
这是一个span元素!!!
属性选择器
格式：选择器[属性条件]...{ css样式 }
在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
background: #FF7CCC;
font-size: 22px;
text-indent: 15px;
}
input[type='text'][name='email']{
/* 选中所有的input并且type值为text、并且name为email的元素 */
background : yellow;
}常用属性
文本属性
text-align ：设置元素内的文本水平对齐方式，其常用取值为
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
text-decoration ：设置文本的下划线样式，其常用取值为:
underline: 有下划线
none: 没有下划线text-indent ：设置文本首行缩进，单位: 像素/百分比
letter-spacing ：设置字符间隔/间距，其常用取值为:
normal
像素值text-shadow ：设置字体阴影，其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色字体属性
font-size ：设置字体大小
font-weight ：设置字体粗细 normal、bold、bolder 100/200/300../900
font-family ：设置字体，比如微软雅黑、黑体、楷体等
color ：设置字体颜色
背景属性
background-color ：设置背景颜色
background-image ：设置背景图片，url('图片的路径');
background-repeat ：设置或检索对象的背景图片是否及如何排列，常用取值：
repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)background-position ：设置或检索对象的背景图片位置
background : 背景颜色 背景图片 背景图片是否重复 背景图片的位置
边框（border）
border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)
border属性可以拆分为如下设置:
border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：
border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度其他属性
width：设置元素的宽度
height：设置元素的高
margin: 设置元素的外边距
margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;display属性
display用来设置元素的类型，常用取值：
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素元素类型
div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
span：行内元素，默认可以和其他元素显示在同一行。
块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素
行内元素（inline）
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)