html+css的学习笔记

HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX

meta标签的name属性取值属性值说明keywords网页的关键字（关键字可以是多个，而不仅仅是一个，用英文逗号隔开）description网页的描述author网页的作者copyright版权信息

head标签内部标签内部标签说明<title>定义网页的标题<meta>定义网页的基本信息（供搜索引擎）<style>定义CSS样式<link>链接外部CSS文件或脚本文件<script>定义脚本语言<base>定义页面所有链接的基础定

块元素说明divdiv层h1～h61到6级标题p段落，会自动在其前后创建一些空白hr水平线ol有序列表ul无序列表

常见行内元素行内元素说明strong加粗强调em斜体强调s删除线u下划线a超链接span常用行级<span>span区域（行内元素），可定义文档中的行内元素img图片

段落与文字标签标签语义说明<h1>～<h6>header标题<p>paragraph段落<br>break换行<hr>horizontal rule水平线
<div>division分割（块元素）span填充

文本格式化标签标签语义说明<strong>strong（加强）加粗<em>emphasized（强调）斜体<cite>cite（引用）斜体<sup>superscripted（上标）上标<sub>subscripted（下标）下标

有序列表type属性取值属性值列表项的序号类型1数字1、2、3……a小写英文字母a、b、c……A大写英文字母A、B、C……i小写罗马数字i、ii、iii……I大写罗马数字I、II、III……

无序列表type属性取值属性值列表项的序号类型disc默认值，实心圆“●”circle空心圆“○”square实心正方形“■”

有序列表list-style-type属性取值属性值说明decimal默认值，数字1、2、3……lower-roman小写罗马数字i、ii、iii……upper-roman大写罗马数字I、II、III……lower-alpha小写英文字母a、b、c……upper-alpha大写英文字母A、B、C……
无序列表list-style-type属性取值

无序列表list-style-type属性取值属性值说明disc默认值，实心圆“●”circle空心圆“○”square实心正方形“■”

HTML列表标签语义说明olordered list有序列表ulunordered list无序列表dldefinition list定义列表

表格基本标签标签语义说明tabletable（表格）表格trtable row（表格行）行tdtable data cell（表格单元格）单元格
表格结构标签标签语义说明theadtable head表头tbodytable body表身tfoottable foot表脚thtable header表头单元格
<td rowspan="跨度的行数">
<td colspan="跨度的列数">

border-collapse属性取值属性值说明separate边框分开，不合并，这是默认值collapse边框合并，如果相邻，则共用一个边框

separate意思是“分离”，而collapse意思是“折叠，瓦解”。根据英文意思，可以帮助我们记忆。
表格边框间距border-spacing
表格标题位置caption-side
caption-side属性取值属性值说明top默认值，标题在顶部bottom标题在底部

img标签常用属性属性说明src图像的文件地址alt图片显示不出来时的提示文字title鼠标移到图片上的提示文字

a标签target属性取值属性值语义_self默认方式，即在当前窗口打开链接_blank在一个全新的空白窗口中打开链接_top在顶层框架中打开链接_parent在当前框架的上一层里打开链接

method属性取值属性值说明get默认值，表单数据被传送到action属性指定的URL，然后这个新URL被送到处理程序上post表单数据被包含在表单主体中，然后被传送到处理程序上

target属性取值属性值说明_self默认值，表示在当前的窗口打开页面_blank表示在新的窗口打开页面_parent表示在父级窗口中打开页面_top表示页面载入到包含该链接的窗口，取代当前在窗口中的所有页面

enctype属性取值属性值说明application/x-www-form-urlencoded默认的编码方式multipart/form-dataMIME编码，对于“上传文件”这种表单必须选择该值

文本框属性属性说明value定义文本框的默认值，也就是文本框内的文字size定义文本框的长度，以字符为单位maxlength设置文本框中最多可以输入的字符数

密码文本框password属性属性说明value定义文本框的默认值，也就是文本框内的文字size定义文本框的长度，以字符为单位maxlength设置文本框中最多可以输入的字符数

select标签属性属性说明multiple可选属性，只有一个属性值“multiple”。默认情况下下拉列表只能选择一项，当设置multiple=“multiple”时，下拉列表可以选择多项size下拉列表展开之后可见列表项的数目

option标签属性属性说明value选项值selected是否选中
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
scrolling属性取值属性值说明auto默认值，整个表格在浏览器页面中左对齐yes总是显示滚动条

CSS字体样式属性属性值说明font-family字体类型font-size字体大小font-weight字体粗细font-style字体斜体color颜色
font-size属性取值属性值说明xx-small最小x-small较小small小medium默认值，正常large大x-large较大xx-large最大

font-weight属性取值属性值说明normal默认值，正常体lighter较细bold较粗bolder很粗（其实效果跟bold差不多）

font-style属性取值属性值说明normal默认值，正常体italic斜体，这是一个属性

font-style属性取值属性值说明normal默认值，正常体italic斜体，这是一个属性oblique将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique
CSS文本属性属性说明text-decoration下划线、删除线、顶划线text-transform文本大小写font-variant将英文文本转换为“小型”大写字母text-indent段落首行缩进text-align文本水平对齐方式line-height行高letter-spacing字距word-spacing词距
text-decoration属性取值属性值说明none默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式underline下划线line-through删除线overline顶划线

text-transform属性属性值说明none默认值，无转换发生uppercase转换成大写lowercase转换成小写capitalize将每个英文单词的首字母转换成大写，其余无转换发生
font-variant属性取值属性值说明normal默认值，正常效果small-caps小型大写字母的字体
首行缩进text-indent

text-align值说明left默认值，左对齐center居中对齐right右对齐 left

vertical-align属性取值属性值说明top顶部对齐middle中部对齐baseline基线对齐bottom底部对齐

CSS文本样式属性属性说明text-decoration下划线、删除线、顶划线text-transform文本大小写font-variant将英文文本转换为“小型”大写字母text-indent段落首行缩进text-align文本水平对齐方式line-height行高letter-spacing字距word-spacing词距

text-decoration属性取值属性值说明text-decoration下划线、删除线、顶划线none默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式underline下划线line-through删除线overline顶划线

text-transform属性取值属性值说明none默认值，无转换发生uppercase转换成大写lowercase转换成小写capitalize将每个英文单词的首字母转换成大写，其余无转换发生

边框的三个属性属性说明border-width边框的宽度border-style边框的外观border-color边框的颜色

border-style属性值(最常用)属性值说明none无样式hidden与“none”相同。不过应用于表除外。对于表，hidden用于解决边框冲突solid实线dashed虚线dotted点线double双线，双线的宽度等于border-width
border-style属性值（3D边框样式）属性值说明inset内凹outset外凸ridge脊线groove槽线
背景图像属性属性说明background-image定义背景图像的路径，这样图片才能显示background-repeat定义背景图像显示方式，例如纵向平铺、横向平铺background-position定义背景图像在元素哪个位置background-attachment定义背景图像是否随内容而attachment定义背景图像是否随内容而滚动

CSS背景图像属性属性说明background-image定义背景图像的路径，这样图片才能显示background-repeat定义背景图像显示方式，例如纵向平铺、横向平铺background-position定义背景图像在元素哪个位置background-attachment定义背景图像是否随内容而滚动

background-repeat属性取值属性值说明no-repeat表示不平铺repeat默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺repeat-x表示在水平方向（x轴）平铺repeat-y表示在垂直方向（y轴）平铺

background-positon属性的长度取值设置值说明x（数值）设置网页的横向位置，单位为pxy（数值）设置网页的纵向位置，单位为px

background-position属性的关键字取值属性值说明top left左上
top center靠上居中top right右上left center靠左居中center center正中right center靠右居中bottom left左下bottom center靠下居中bottom right右下

属性说明background-image定义背景图像的路径，这样图片才能显示background-repeat定义背景图像显示方式，例如纵向平铺、横向平铺background-position定义背景图像在元素哪个位置background-attachment定义背景图像是否随内容而滚动

超链接伪类属性说明a:link定义a元素未访问时的样式a:visited定义a元素访问后的样式a:hover定义鼠标经过显示的样式a:actived定义鼠标单击激活时的样式

float属性取值属性值说明left元素向左浮动right元素向右浮动

CSS盒子模型4个属性属性说明border（边框）元素边框margin（外边距）用于定义页面中元素与元素之间的距离padding（内边距）用于定义内容与边框之间的距离content（内容）可以是文字或图片
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
padding写法有三种，分别如下。 “padding:20px;”表示4个方向的内边距都是20px。 “padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。 “padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。 语法：

CSS盒子模型4个属性属性说明border（边框）元素边框margin（外边距）用于定义页面中元素与元素之间的距离padding（内边距）用于定义内容与边框之间的距离content（内容）可以是文字或图片

clear属性取值属性值说明left清除左浮动right清除右浮动both左右浮动一起清除
① 固定定位（fixed） ② 相对定位（relative） ③ 绝对定位（absolute） ④ 静态定位（static）