知识总结

表单

表单：最重要的一个标签form
用来收集用户输入或选择的信息，并提交到服务器上。
html表单是由网页上可以提供用户输入和选择的一些控件（表单元素）组成的。
表单元素：
元素：HTML中，是从开始标签到结束标签中的所有代码。
表单元素指的是不同类型的控件。
eg: 输入框，密码框，复选框，提交按钮等。
表单格式：

    <form>
        h1 p div span
        表单元素
    </form>

form标签
作用：用于为用户创建一个HTML表单。
action:表单提交的地址。
input标签： 单标签
作用：用于收集用户信息，是最重要的表单元素。
type:根据属性值不同，展示为不同的控件。比如：输入框，密码框，复选框，提交按钮
大多数情况下用到的是表单输入标签–最重要
输入字段可通过多种方式改变，取决于 type 属性,可以是文本框，密码等

<form action="https://www.baidu.com">
    <fieldset>
        <legend>注册表单</legend>
        <label for="accout">账户名</label>：<input id="accout" type="text" name="accout" placeholder="请输入账户名" value="张三" required>
        <br>
        密 码：<input type="password" name="password">
        <br>
        请选择：
        <input type="radio" name="gameOrG">游戏
        <input type="radio" name="gameOrG">女朋友
        <br>
        爱好：
        <input type="checkbox" value="sing" name="hobby">唱
        <input type="checkbox" value="dance" name="hobby">跳
        <input type="checkbox" value="rap" name="hobby">rap
        <input type="checkbox" value="basketball" name="hobby">篮球
        <br>
        地址：
        <select name="address">
            <option>---请选择---</option>
            <optgroup label="一线城市">
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
            </optgroup>
            <optgroup label="二线城市">
                <option>武汉</option>
                <option>重庆</option>
                <option>郑州</option>
            </optgroup>
        </select>
        <br>
        个人简介：
        <textarea cols="50" rows="30">1233456</textarea>
        <!-- 文件上传
        <input type="file" name="image_file"> -->
        <!-- 个人信息ID -->
        <!-- <input type="hidden"> -->
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="普通">
    </fieldset>

效果：

类、ID选择器

1、类选择器：
类选择器：
通过标签中的class属性来选择标签

    格式：
    .class值{
        声明;
    }

优点：可以选择一部分标签，设置相同的样式。
【注】

    1.class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
    2.一个标签可以拥有多个class值。
    3.命名规则与ID相同。

2、ID选择器：
ID选择器名字以“#”作为标志
id的属性值不能重复。

   #box{
		width: 100px;
		height: 200px;
		background-color: red;
	}

【注】：

    1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
    2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。
    3.见名知意。不要起毫无意思的名字。
    4.驼峰写法：SearchButton(大驼峰) searchButton(小驼峰，推荐) 多个单词，从第二个单词开始，每个单词的首字母大写。
    5.下划线写法：search_button   多个单词，从第二个单词开始，每个单词的前面添加一条下划线。

【注】：id选择器尽量不要在css中使用，而是配合js使用。

序选择器

序选择器
first-child
判断当前元素是否为父元素的第一个子元素，如果是，则选中。
last-child
判断当前元素是否为父元素的最后一个子元素，如果是，则选中。
only-child
判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。

    <ul>
    <li class="first-li">我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
    </ul> 

伪类选择器

伪类：
同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。

格式：
选择器：伪类名{
    声明;
}

伪类选择器大致可分为两种：

（1）静态伪类 只能用于超链接的样式。
：link 超链接点击之前
：visited 超链接被访问过之后。
（2）动态伪类 针对所有的标签都适用
：hover “悬停” 鼠标放在标签上时。
：active "激活" 鼠标点击标签，不松手时。

注意：a标签的四个伪类选择器顺序不能乱（lvha），乱了某些就不能生效

css的三大特性

1、层叠

层叠就是在HTML文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
所谓层叠性，就是后定义的样式，会层叠（可以理解为覆盖）掉前面定义的样式。我们说的层叠性，是在样式产生冲突的时候才层叠，不冲突就不层叠。

比较的是同一元素的同一属性
行内式优先级最高
内部式和外部式的优先级取决于两者的引用顺序，越往后优先级越高

2、继承性

所谓继承性，就是如果子元素没有定义样式，那么他默认会以父元素的样式来继承。
不是所有的样式都会继承，比如高度就从来不会继承，通常能继承的是一些文字相关的样式。
比如font-系列，text-系列，color 文字颜色，line-height行高等

注意：

通过继承，无法影响a链接的颜色和下划线
a链接的颜色下划线不能通过继承，要直接作用到a身上

3、优先级
有时候我们为同一元素设置了不同的CSS选择器，那么元素最终会用哪一个CSS样式呢
权重规则

标签选择器 权值为1
类、伪类、属性选择器 权值为10
id选择器 权值为100
行内样式 权值为1000
通配选择器（*），子选择器（>)不在这四个等级中，它们权值都为0
注意：
通过继承而来的权重是0，继承的优先级程度比自身的优先级低！

属性

1、字体属性

font-family属性： 设置元素的字体系列。
font-size属性 ：规定字体尺寸。
font-style属性：设置不同的字体样式。
font-style : normal；
italic；//斜体
font-weight属性 ：设置文本的粗细。
line-height属性：设置行高。
2、文本属性

text-align属性 ：规定文本在块元素中的对齐方式。
text-decoration属性：设置文本的修饰。
text-indent属性 ：设置文本块中首行文本的缩进。
letter-spacing属性：设置字符间距。
word-spacing属性 ：设置单词间距。
vertical-align：图片与文字的对齐方式，默认是基线对齐的。

css标签类型

1、块级元素

块级元素：

 ( div  h  p ),  ( ul  ol  li ), ( dl  dt  dd ) 

设置display:block就是将元素显示为块级元素。

块级元素特点：

    1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
    2、元素的高度、宽度可设置。
    3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致，除非设定一个宽度。
     margin:0 auto;
    让一个有宽度，宽度不为100%的块级元素 居中对齐 

2、行内元素
行内元素（inline）元素：

span   strong   em   del  ins   b  u   i  s  a

块状元素可以通过代码display:inline将元素设置为行内元素。

行内元素特点：

        1、一行可以放多个；
        2、元素的高度、宽度不可设置；
        3、元素的宽度就是它包含的文字或图片（一般a标签里面可以包图片）的宽度，不可改变。
        给包裹行内元素、行内块元素的元素添加text-align：center可以让行内、行内块元素在该元素中居中

3、行内块元素

行内块元素（inline-block）就是同时具备行内元素、块状元素的特点
代码display:inline-block就是将元素设置为行内块元素。

inline-block元素特点：

 1、和其他元素都在一行上；
 2、元素的高度、宽度可设置
 代表标签：img    input
 给包裹行内元素、行内块元素的元素添加text-align：center可以让行内、行内块元素在该元素中居中
        display:none  隐藏
        display:flex  弹性盒子布局
        display:table