HTML+CSS详细教程，有这一篇文章就够了，还赶紧保存[通俗易懂]

欢迎大家来到IT世界,在知识的湖畔探索吧!

Html

<link />导入外部资源

块状标签：<p>,<h1>到<h6>,<table>,<ul>,<div>等等<span>

行内标签: <a>,<img>,<span>等等

<br />换行

<hr align=”对齐” color=”颜色” size=”粗细” width=”宽度” />水平线

<b></b>,<strong></strong>粗体

<i></i>斜体

特殊字符

用来显示空格

表单

<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文本的大小写