web前端学习第一天

html与css标签

基本标签

1.<h1></h1>---主标题;<h2></h2>---副标题；字号越来越小

2.<p></p>段落标签

3.<!--与-->注释

4.style样式设计

<style>

.class选择器{font-size,font-family,font-color,color,width(控制元素宽度),height（控制元素高度），border-color（边框），border-width，border-style（soild），border-height，border-radius(%圆形边框，px弧形边框)，background-color，}

#id选择器{样式}

</style>

<p class="class1 class2" id="">

5.内联样式设计<p style="font-size:10px">

6.<link href=""> import链接引入字体、框架置于顶部

7.<img src="" alt="图片显示不出来时显示的文本"> 添加图片

8.<a href="(#时为一个固定链接)"></a>添加链接

9.nest嵌套，一个元素嵌套另一个

10.<ul><li></li></ul>无序列表

11.<ol><li></li></ol>有序列表

12.<form action="服务器地址"></form>与服务器交互的web表单

13.<input type="text"  required(设置为必填项) placeholder="输入框未输入东西时显示的文字">创建表单

14.<button type="submit">按钮名字</button>提交式按钮

15.<label><input type="radio" name="单选按钮name属性必须一致"  checked（默认选中）>按钮名字</label>单选按钮

16.<label><iuput type="checkbox" name="personality"  checked（默认选中）>按钮名字</label>复选按钮

17.<div id="" class="" style=""></div>盛装其他元素的容器

18.padding(内边距)，控制元素内容和边框之间的距离。（top,right,bottom,left）

    margin（外边距）,控制元素边框和元素实际所占空间的距离。若将margin值设为负，元素将会变大。

    border(边距).

19.<style>

        body

        {

        background-color:gray;

        }

    </style>  CSS 继承性，所有元素对body样式继承

20.body中的样式->class1->class2->id属性->style行内样式->!important      优先级从低至高

21.颜色表示方法

    hex code:#000000（黑色）#FFFFFF（白色）(前两位表示红色 中间表示绿色 最后两位表示蓝色)

    RGB值：rgb（0，0，0）rgb(255,255,255)

22.响应式框架bootstrap，根据屏幕大小来调整HTML元素大小<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

    img-responsive,text-center,btn,btn-block(块),btn-info（浅蓝）,btn-danger（红色）,

先将元素放在<div class="row">中class属性col-ml-x，指定各个元素的宽度。

well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果，动手写代码体会一下）。

23.<span></span>创建行内元素

24font-awesome <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

<i></i>用来显示图标