HTML
1.定义
定义：超文本标记语言.html（后缀名）
IE chrom(谷歌) firefox(火狐) open
注释：
单标记双标记
双标记：成对出现
<html>内容</html> <head>内容</head>
单标记：只有一个
<meta/>
p标签
双标签 <p></p> 作用：段落标签
b标签 双标记 <b></b> 作用：文字加粗
i标签 双标记 <i></i> 作用:倾斜
s标签 双标记 <s></s> 作用:中划线
u标签 双标记 <u></u> 作用:下划线
空格
< 小于 less than
> 大于 big than
©
<hr/> 分割线
<br/>换行
<strong> </strong> 加粗
<em></em> 倾斜
src：路径
tltle：表示鼠标移入时的提示信息
alt：替换图片的文字
超链接：页面跳转
<a></a>
href="路径"
target：_self 在自身基础上打开页面
target：_blank 从新打开窗口
表单
1、表格的作用
按照一定的格式来显示数据
2、创建表格
1、定义表格:<table></table>
2、创建表行:<tr></tr>
3、创建单元格(列):<td></td>
注意：保证每行的列数都是一致的
3、表格的属性
1、table 属性
1、width ：宽度
2、height ：高度
3、align
作用：设置表格元素的水平对齐方式
取值：left/center/right
4、border ：边框宽度
5、cellpadding
内边距-单元格边框与内容之间的距离
6、cellspacing
外边距-单元格之间的距离
7、bgcolor ：背景颜色
2、tr 属性
1、align
当前行的文本 水平对齐方式
3、bgcolor
当前行的 背景颜色
4、colspan ：设置单元格跨列
5、rowspan ：设置单元格跨行
4、表格的子元素
1、<caption></caption>
作用：定义表格的标题
2、行标题/列标题
显示效果：水平居中，并且加粗显示文本
<th></th> --> <td></td>
1、colspan
跨列，合并列
横向向右 合并几个单元格(包含自己)
注意：被合并的td，一定要删除
2、rowspan
跨行，合并行
纵向向下 合并几个单元格(包含自己)
3、表格的嵌套
表格可以嵌套其他的表格
被嵌套的表格 要 出现在 <td></td>中
表单(重难点)
input
type="text" 文本类型
type="password" 密码类型
type="radio" 单选框
type="checkbox" 复选框
#
p
i em
b strong
s
u
a
img 但标记
<<
>>
©
表单
input 输入框 单标记
<input>
<!--type=text/password/radio/checkbox-->
<!--type="button"按钮-->
<input type="button" name="按钮" value="按钮">
<!--type="submit" 表单提交-->
<input type="submit" name="提交" value="提交">
<!--type="reset" (重置)-->
<input type="reset" name="重置" value="重置">
<input type="image" src="cat.jpg">
<!--html5 h5-->
<!--自动验证邮箱格式是否正确-->
<input type="email" name="email" value="邮箱">
<!--自动验证url是否正确-->
<input type="url" name="url" value="url">
<hr>
<!--number(数字) min(最小值) max(最大值) step(步)-->
<input type='number' min="5" max="10" step="2">
<!--range（范围）-->
<input type="range" value="范围" name="range" max="100" min="0">
<input type="search" value="search" name="搜索">
<input type='color' value="颜色" name="颜色">
<!--date（日期）-->
<input type="date" value="日期" name='date'>
css 样式
1.内部样式表:在元素标签内写的样式
style="属性:值"
<p style="color:red;width:500px;"></p>
2.内联样式
<head>
<style></style>
</head>
3.外联样式
/*注释 选择器：*/
/*p：元素选择器*/
p{
color:red;
background:yellow;
}
h3{
color:blue;
}
</style>
</head>
<body>
<!--
color:green 设置字体颜色
background:yellow 设置背景颜色
font-size:30px 改变字体大小
-->
<!--
可以独占一行的元素：
p div ul li ol li h1~h6 块元素
可以设置元素的宽和高
不可以独占一行的元素：
a i b s u em strong span 行内元素
不可以设置元素的宽和高
img input select-option textarea: 行内块元素
不可以独占一行的元素 ,可以设置元素的宽和高
-->
<!--color:颜色 设置字体颜色-->
···
css:
css选择器：
1.元素选择器:p{color:red} div
2.类选择器：
html
<div class="box"></div> .box{}
<div class="box"></div>
<div class="box"></div>
css:
.box{}
3.id选择器
html
<div id="container"></div> #container{}
<div id="con"></div>
css:
#container{}
注：同一个id选择器只能命名一次，因为id具有唯一性
4.后代选择器：选取的是父元素下的所有子元素
ul li{}
5.子代选择器：父元素下的直接子元素
ul>li{}
6.相邻兄弟选择器
.good+li
7.通用兄弟选择器
.good~li
8.结构伪类选择器
ul>li:first-child{} 第一个孩子
ul>li:last-child{} 最后一个孩子
ul>li:nth-child(n){} 第n个孩子
字体相关样式：
font-family:"宋体";设置字体类型
font-size:30px; 字体大小
font-style:"normal/italic(斜体)" 字体风格
font-weight:bold; /*bold加粗 normal正常*/700 //字体加粗
font-weight:100/200/....900; //字体加粗
4)边框与尺寸
css单位：
px 像素 屏幕上的一个点
% 相对单位 根据父元素的大小来变化
in 英寸 1 in=2.54cm
cm 厘米
mm 毫米
em/rem
颜色单位：
red blue #F0F0F0
红 （0-255）
绿 （0-25
蓝 （0-255）
rgb
r:red
g:green
b:blue
rgb(0,0,0) 黑色
rgb(255,255,255); 白色
rgb(255,0,0); 红色
rgb(0,255,0) 绿色
rgb(0,0,255) 蓝色
rgba()
a:alpha 透明度
范围：0-1
0:完全透明
1：完全不透明
opacity:.5;透明度
opacity与rgba()的区别：
opacity:能把所包含的所有内容都变成透明
rgba()只改变当前元素的透明度
5)边框
border:1px solid#000;
border-top:上边框
border-bottom: 下边框
border-left:左边框
border-right:右边框
border-width:2px; 边框的宽度
border-style:solid(实线) dotted(虚线)
border-color:red; 边框的颜色
特殊：transparent（透明边框）
溢出处理：使用尺寸限制元素大小时，如果内容所需要空间大于元素本身，会导致内容溢出
属性：
overflow:
overflow-x:横向溢出
overflow-y:纵向溢出
取值：
1.visible 溢出可见 默认值
2.hidden 隐藏
3.scroll 滚动 出现滚动条
4.auto 自动 出现滚动条
#边框
border-width: 宽度
border-style: 样式
border-color： transparent(透明) 颜色
border:1px solid #000; 简写
圆角
属性：
border-radius:5px/20%/50%;
border-top-left-radius:左上的圆角
border-top-right-radius:右上
border-bottom-left-radius:左下
border-bottom-right-radius:右下
#外边距内边距
外边距：围绕在元素周围的空白区域默认不被其他元素占用的
作用：拉开元素之间的距离
语法：
margin:值 5px 百分比 20%；
取值：
px 像素
% 百分比
auto(自动) 只在左右方向有效
负值 -5px;
margin:20px; 设置4个方向的外边距
margin-top:5px;设置的是上外边距
margin-bottom：5px;下外边距
margin-left: 左外边距
margin-right:右外边距
margin:20px; 设置4个方向的外边距
margin:10px 20px; 10px 代表上下 20px左右
margin:10px 5px 20px; 10px代表上 5px左右 20px下方向
margin:5px 10px 15px 20px; 上 右 下 左
此次VB发 ，
