HTML和CSS

标记样式：<标记>内容</标记>

                <input(特殊标记)  内容                                />注：元素和属性的名字必须小写

       标记名称必须小写

　　标记必须正确嵌套

　　标记必须关闭（开始标记必须有结束标记）

　　即使是空元素也必须关闭

　　属性值必须用双引号括起来

注释：不会出现在浏览器中

     　<!--标识了注释开始--> ctrl+/：注释

定义正文标题：h1、h2、h3、h4、h5、h6依据重要性递减 <h1>是最高的等级

定义一个段落：<p>段落文本</p>

定义引用文本：<blockquote>将段落缩进，使其与周围文字偏离；用于界定一个引用文本

定义列表：<ul>无序列表--<li>

　　　　　<ol>有序列表--<li>

　　　　　<dl>自定义列表--<dt>

定义预编排文本：pre

定义分区块文本：<div></div>

跨越多个字符：<span></span>

特殊字符：空格：&nbsp;等

块级元素换行显示，内嵌元素同行显示

 

 

提交方式method{1:post   安全，数据大，难度大  2:get  反之}

<input>输入框

   当type="text"时，输入框为文本输入框
   当type="password"时, 输入框为密码输入框

<textarea>多行文本输入

下拉列表：<select><option value="">。。。</option></select>

单选、复选框：type="radio"时，控件为单选框；type="checkbox"时，控件为复选框

隐藏字段：type="hidden"

提交：type="submit"  重置： type="reset"

 

 

p（选择器）{
   font-size:12px;
   color:red;
   font-weigh（属性）t:bold;
}

加入CSS方式：

1：内联

　　<p style="color:red">这里文字是红色。</p>

2：嵌入

　　<style type="text/css"></style>

3：外联

　　<link href="base.css" rel="stylesheet" type="text/css" />

简单选择器：

1：元素选择器：p，span，div，h1等

　　　　　　　　元素{样式}

2：类选择器：

　　　　　　　　<.class="">

3：ID选择器：#id名  （只能用一次）

4：伪类和伪元素选择器：link 未访问 visited已访问 active点击 hover鼠标在上

5：通配符选择器：用于所有元素，用*代替

复合选择器：

1：并集选择器：多个标签使用同一个样式，用逗号隔开

2：交集元素器：a：元素选择器b：类或ID选择器 ab之间不能有空格

3：后代选择器：p  sapn {color：#。。。}p和span必须以空格分离

层叠样式表的优先级别：外联<内嵌<内联

简单选择器优先级别：元素<类<ID

长度单位{

　　　　相对长度：px像素，em以目前字符高度为单位

　　　　绝对长度：代表相同长度　

　　　　　　　}

设置斜体效果：font-style:italic;斜体  

　　　　　　   font-style:normal正常字体

加粗效果：font-weight:bold;粗体 

　　　　   font-weight:normal正常

　　　　   font-weight:bolder加粗  

　　　　　 font-weight:100范围数字越大越粗

英文字母大小写转换：p one{text-transform:capitalize;}单词首字母大写

　　　　　　　　　　p one{text-transform:uppercase;}全部大写

　　　　　　　　　　p one{text-transform:lowercase;}全部小写

文字装饰效果：p a{text-decoration:line-through;}删除线

　　　　　　　p a{text-decoration:none;}正常显示

　　　　　　　p a{text-decoration:underline;}下划线

　　　　　　　p a{text-decoration:overline;}顶线

段落排版--缩进：p{text-indent:2em;}

间距{

　　　　字词间距：word-spacing:

　　　　字母间距：letter-spacing:　　

　　　　　　}

设置行高：line-height（长度px，倍数em，百分比%）

控制文本的水平位置：text-align：

　　　　　　　　　　　　left左对齐，right右对齐，center居中对齐，justify两端对齐

设置文字与背景颜色：background-color

设置段落的垂直对齐方式：vertical-algin

图片样式：边框border-width粗细

　　　　　　　border-color颜色

　　　　　　　border-style线性

分框分为四个方向：left right top bottom

　　　　　　　　　　eg：border-left-style    border-top-width

图片缩放：img{

　　　　　　　　width：50% /*相对宽度*/

　　　　　　　　height:100px  /*绝对高度*/

　　　　　　　　　　}

图文混排：img{

　　　　　　　　　　float left /“图片在文字左边”/

　　　　　　　　　　}

图片与文字的对齐方式：

　　　　　　　　　　水平对齐：text-align

　　　　　　　　　　垂直对齐：vertical-align

设置背景图片平铺：repeat：水平和垂直方向平铺，默认值

　　　　　　　　　no-repeat：不平铺

　　　　　　　　　repeat-x:只沿水平方向平铺

　　　　　　　　　repeat-y：只沿垂直方向平铺

设置背景图像位置：background-position

设置背景图像固定值：background-atlachment

盒子概念：content内容   border边框   padding内边框   margin外边框

　　　　　设置一个属性值时：表示上下左右4个padding值均为设置

　　　　　···············2···············：前者为上下padding值，后者为左右padding值

　　　　　　········3··················：第一个是上·······第二个是左右········第三个是下·······

　　　　　　···········4···············：均为上右下左

盒子定位：

1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

浮动：div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}

z-index：用于调整定位时重叠块的上下位置