HTML笔记

<link />导入外部资源
块状标签：<p>,<h1>到<h6>,<table>,<ul>,<div>等等<span>
行内标签: <a>,<img>,<span>等等
<br />换行
<hr align="对齐"  color="颜色"  size="粗细" width="宽度"  />水平线
<b></b>,<strong></strong>粗体
<i></i>斜体
特殊字符
&nbsp;用来显示空格
表单
<form name="表单名称" action="提交的服务器的路径"  method="提交的方式"></form>
1）action用来指示由谁来处理表单，默认为当前页面
2）post方式是将数据打包成一个数据快来发送，所以比较安全并且可以发送大量数据;
get方式不打包数据，只能发送少量数据，但是速度快；默认为get;
输入控件
<input type="类型" size="显示宽度" name="名称" />
注意：
1）同名的单选框会自动形成一组，一个组中只能选一个
2）在一个组中的复选框最好也同名
属性说明：
1）type取值可以有多个，eg:
text:默认值,单行文本框
password:密码框
radio:单选框
checkbox:复选框
file:文件域(用于上传文件)
button:普通按钮
submit:提交按钮
reset:重置按钮
image:图像按钮
2）value:提交的值
3）maxlength:允许输入的最大长度
4）readonly:设置为只读
5）disabled:设置为禁用
<textarea name="名称" cols="列数" rows="行数></textarea>文字域
<buttom></buttom>定义按钮
select下拉框
1）格式
<select   name="名称">
<option value="值1">选项1</option>
<option value="值2">选项2</option>
...
</select>
注意：
选项1和2不会提交，真正提交给服务器的是value属性的值;
selected表示下拉框的选项被选中;
checked表示复选框或单选框被选中;
表单验证
1.required必填验证
2.表单匹配验证
<input type="email"/>
<input type="date"/>
3.验证输入范围
<input type="number"  min="18" max="35" step="5"/>
4.设置自定义的提示信息
<input type="email"  oninvalid="setCustomValidity('提示信息')"/>
表单end
<img alt=“提示信息” title=“提示信息” src=”图片路径”"align="对齐方式"
border="边框大小" width="宽度" height="高度" />插入图片
音频标签
1）格式：
<audio width="宽" height="高"  src="路径" controls="controls">
您的浏览器不支持audio标签
</audio>
视频标签：将audio换成video即可
超链接
<a href=”链接位置”target="目标窗口" ></a>
注意：
_self:表示在当前窗口打开;
_blank：表示在新窗口中打开
a:link    未点击的超链接样式
a:hover  鼠标悬停在超链接上的样式
a:active  点击时未释放的超链接样式
a:visited  访问后的超链接样式
<ul><li></li></ul>无序列表
<ol><li></li></ol>有序列表
<dl></dl>自定义列表<dt></dt>标题<dd></dd>标题的描述
<table></table>表格
1）border:边框
2）cellspacing:设置格子之间的距离
3）cellpadding:设置格子边框和内容的
<caption></caption>总表头
<tr></tr>行
<td colspan="列数" rowspan="行数></td>单元格
<thead></thead>表头
<tbody></tbody>表格内容
<tfoot></tfoot>表注
<style></style>css样式
Css
背景
background复合属性
background-color:关键字  | rgb()|  #6个十六进制的数 背景颜色
background-image:url(图片路径)背景图片
background-position:参数1   参数2;背景图片位置
参数1控制水平方向x定位
参数2控制垂直方向y定位
background-repeat:repeat | no-repeat |repeat-x |  repeat-y背景图片如何重复
background-size背景图片大小
1.线性渐变
1）不重复
background:linear-gradient(角度或方向,颜色1，颜色2...);
2）重复
background:repeating-linear-gradient(...)
2.径向渐变(注意：当容器是正方形时，径向渐变永远是正圆形)
1）不重复  radial-gradient(...)
2）重复   repeating-radial-gradient(...)
边框
border复合属性
border-style: solid/dashed/none边框样式
border-width:边框的宽度
border-color:边框的颜色
border-bottom下边框
border-left左边框
border-right右边框
border-top上边框
border-radius圆角矩形
border-image边框图片
盒子
box-shadow:水平距离 垂直距离 模糊半径 颜色；盒子阴影
Color
opacity透明度
尺寸
height元素高度
max-height最大高度
min-height最小高度
width元素宽度
max-width最大宽度
min-width最小宽度
列表
list-style列表属性
list-style-image:url(图片路径)列表图像
list-style-position列表项位置
list-style-type列表项形状
外边距
margin复合属性
margin-bottom下边距
margin-left左边距
margin-right右边距
margin-top上边距
内边距
padding复合属性
padding-bottom下边距
padding-left左边距
padding-right右边距
padding-top上边距
定位属性
bottom下距离
top上距离
right右距离
left左距离
cursor光标显示形状
display转变元素类型
1）block:块状
2）inline:行级
3）none:无（隐藏并且不占据位置）
float：left/right/none浮动
overflow当元素溢出时发生事件
position定位类型
1.static静态定位(默认值)
1)保持在标准文档流中默认的位置，不做任何移动
2)left,top等属性无效
2.relative相对定位
1)相对于原来的位置进行偏移，可以用left,top,right,bottom设置偏移量
2)不会脱离标准文档流
3.absolute绝对定位
1)默认以浏览器的左上角为坐标原点，水平向右是X正轴,垂直向下是Y正轴线
2)会脱离标准文档流
3)z-index决定元素的叠放次序,值越大越在上面
4.fixed固定定位
1)脱离了标准文档流
2)始终以浏览器左上角为坐标原点
vertical-align垂直对齐方式
visibility设置元素是否可见
z-index元素堆叠顺序
字体
font-family字体
font-size字体大小
font-weight字体粗细
color:    字体颜色
文本属性
direction书写方向
letter-spacing字符间距
line-height行高
text-align文本水平对齐方式
text-decoration设置文本修饰(下划线)
text-indent首行缩进
text-shadow:水平距离 垂直距离 模糊半径 颜色;  文本阴影
text-transform文本的大小写