HTML基本知识
1.标签语法：tagcontent/tag
.html注释：!--注释内容--
.常用标签：
htmlheadbody#文件结构标签hx#x=[1,,,,5,6]标题标签strongem#粗体斜体span#空标签以提供样式设定q#短引用==双引号(")blockquote#长引用br#分行=回车效果nbsp;#空格hr#水平线addss#地址标签code#单行代码p#多行代码ul#无序列表子标签li(列表项)ol#有序列表子标签li(列表项)div#容器标签table#表格子标签th(表头)tr(行)td(列)caption(表标题)a#链接mailto#emailimg#图片form#表单搭配表签(可单独使用):labelinputselectlabel#关联标签input#输入select#下拉列表option(下拉项)style#样式标签link#文件引用标签
CSS基本知识
1.代码语法：
selector{property:value;}#selector:选择符property:属性value:值;分割属性值对如下：
p{font-size:1px;color:d;/*注释*/}
.代码注释：/*多行注释*/
.用法：
内联式使用,直接复制给标签style属性：p我的字体是红色/p
嵌入式使用,使用样式标签：
!--样式一般写于head标签--styletype="text/css"span{color:d;}/style!--html内容--divspan教程示例/span/div
外部式使用,样式写在单独文件，使用link标签导入：
#style.css文件styletype="text/css"span{color:d;}/style#html文件!--html内容--!--link一般写于head标签--headlinkhf="***/***/style.css"l="stylesheet"type="text/css"/head
优先级：内联式嵌入式外部式
.selector选择符（例中样式参照css用法使用）
标签选择器：tag例p{color：d;}p示例/p类选择器(.)：.className例.d{color:d}divclass="d"示例/divID选择器(#)：#IDName例#d{}div示例/div子选择器()：selector1selector例.dp{}divclass="d"p示例/p/div后代选择器(空格)：selector1selector例.dp{}divclass="d"p示例/p/div通用选择器()：例*{}div示例/div伪类选择器(:)：selector:state此类特殊常用A标签上的各种状态设置样式例a:hover{}a鼠标悬浮于此样式/a分组选择器(,)：selector1,selector,selector...例div,p{}divclass="d"p示例/p/div
注意事项：
优先级：ID选择器类选择器标签选择器子标签会继承父标签样式最高优先级!important放在属性值之后，分隔符分号之前：p{color:d!important;}
5.常用属性
5.1.字体
div{font-family:"MicrosoftYahei";#类型font-size:1px;#大小color:d;#红色font-weight:bold;#粗体font-style:italic:#斜体line-height:em;#行高1em=font-sizepxfont:1px/1.5em"宋体",sans-serif;#缩写大小/行高类型}
5..排版
div{text-decoration:underline;#下划线text-decoration:line-through;#删除线text-indent:em;#缩进letter-spacing:50px;#中文字间隔、字母间隔word-spacing:50px;#单词间距设置text-align:center;#块元素中内容对齐方式}
5..盒模型
盒子模型图：
标签元素分类：块状元素、内联元素（又叫行内元素）和内联块状元素。
1.常用的块状元素有：div、p、h1...h6、ol、ul、dl、table、addss、blockquote、form
每个块级元素都从新的一行开始，并且其后的元素也另起一行元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的%（和父元素的宽度一致），除非设定一个宽度。
.用的内联元素有：a、span、br、i、em、strong、label、q、var、cite、code
其他元素都在一行上元素的高度、宽度及顶部和底部边距不可设置元素的宽度就是它包含的文字或图片的宽度，不可改变
.常用的内联块状元素有：img、input
和其他元素都在一行上元素的高度、宽度、行高以及顶和底边距都可设置
div{display:block;#元素显示分类blockinlineinline-blockborder:pxsolidd;#边框样式缩写:border-width,border-style,border-colorborder-bottom:1pxsolidd;#单边框width:00px;#宽height:00px;#高padding:0px;#填充缩写上右下左margin:10px;#边距缩写上右下左}
5..布局模型
元素三种布局模型：1、流动模型（Flow）、浮动模型（Float）、层模型（Layer）
1.流动模型（Flow）：默认的网页布局模式
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布内联元素都会在所处的包含元素内从左到右水平分布显示
.浮动模型（Float）：
块状元素不会独占一行，根据宽度排列，且块元素默认宽度为内容宽度
.层模型（Layer）:
层模型三种形式：1.绝对定位（position:absolute）.相对定位（position:lative）.固定定位（position:fixed）
绝对定位：相对于其最接近的一个具有定位属性（position:lative）进行偏移,没有时相对body定位相对定位：相对自己进行偏移定位，偏移前的位置保留不动（之前空间仍然被占用）固定定位：相对视图（屏幕内的网页窗口）进行偏移，不占据文档流位置
上三种使用left、right、top、bottom属性定位
div{float;left;#浮动模型position:absolute;#层模型-绝对布局left:#层模型-左偏移}
6.常用技巧
水平居中：
div{text-align:center;#块元素-行内居中(块中内容居中)#定宽width:00px;margin:0pxauto;#块元素自身居中(相对父容器)#不定宽#方法1：利用table标签长度自适应性与定宽居中结合实现不定宽居中#方法：利用display:inline改内联元素，设置父容器tetext-align:center;#方法：利用position:lative先右偏移50%，再左偏移50%，注意将父容器设为float(第二偏移为内容宽度的一半)}
垂直居中：
div{#单行:通过设置父元素的height和line-height高度一致来实现垂直居中height:px;line-height:px;#多行：设置如下，兼容性差display:table-cell;vertical-align:middle;}
7.特殊字符
（回车换行）br（空格符）nbsp;（AND符号）amp;（左尖括号、小于号）lt;（右尖括号、大于号）gt;°（度）deg;?（间隔符）#19;′acute;"quot;“ldquo;”rdquo;←larr;↑uarr;→rarr;↓darr;?harr;√radic;￥（RMB）yen;≠ne;≡equiv;≤le;≥ge;⊕oplus;nr（上标情形）nsupr/supCi（下标情形）Csubi/sub加粗b加粗/b斜体i斜体/i下划线u下划线/u±（加减符号）plusmn;×（乘法符号）times;÷（除法符号）divide;?（版权所有）copy;?（注册商标）g;?（商标符号）trade;—（破折号）#;