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{
    200px;
    height:200px;
    border:2px red solid;
    float:left;
}

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

原文地址:https://www.cnblogs.com/8834760y/p/5245269.html