1. < form >标签 定义整体的表单区域

* action 属性 定义表单数据提交地址
* method 属性 定义表单提交的方式，一般有"get"和"post"方式

2. < label >标签 为表单元素定义文字标注

* for 属性 点击文字标注也可激活如填写表单框内容，需配合 input 标签中的 id 属性一起使用

* 用法

html
<label fro="user">用户名: </label>
<input type="text" name="username" value="username" id="user" />

3. < input >标签 定义通用的表单元素

* type 属性
* type="text" 定义单行文本输入框
* type="password" 定义密码输入框
* type="radio" 定义单选框
* type="checkbox" 定义复选框
* type="file" 定义上传文件
* type="submit" 定义提交按钮
* type="reset" 定义重置按钮
* type="image" 定义图片作为提交按钮，用 src 属性定义图片地址
* type="hidden" 定义一个隐藏的表单域，用来存储值
* value 属性 定义表单元素的值
* name 属性 定义表单元素的名称，此名称是提交数据时的键名

4. < textarea >标签 定义多行文本输入框

5. < sleect >标签 定义下拉表单元素

* < option >标签 定义下拉表单元素中的选项

1. 外联式：通过 link 标签，链接到外部样式表到页面中

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式 </title>
<link rel="stylesheet" type="text/css" href="[css的文件路径]" />
</head>
</html>

2. 嵌入式：通过 style 标签，在网页上创建嵌入的样式表

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入式样式</title>
<style type="text/css">
h1{font-size: 22px;background-color: red;}
div{font-size: 18px;color:orange;}
</style>
</head>
<body>
<h1>页面标题</h1>
<div>这是一个div标签</div>
</body>
</html>

3. 行内样式的方式

html
<a href="http://www.itcast.cn" style="font-size:18px;color=red">传智播客</a>

"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。


选择器 示例  示例说明    CSS
.class    .intro  选择所有class="intro"的元素  1
#id   #firstname  选择所有id="firstname"的元素 1
* *   选择所有元素  2
element   p   选择所有<p>元素   1
element,element   div,p   选择所有<div>元素和<p>元素 1
element element   div p   选择<div>元素内的所有<p>元素  1
element>element   div>p   选择所有父级是 <div> 元素的 <p> 元素    2
element+element   div+p   选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 2
[attribute]   [target]    选择所有带有target属性元素    2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素  2
[attribute~=value]    [title~=flower] 选择标题属性包含单词"flower"的所有元素   2
[attribute|=language] [lang|=en]  选择 lang 属性等于 en，或者以 en- 为开头的所有元素    2
:link a:link  选择所有未访问链接 1
:visited  a:visited   选择所有访问过的链接  1
:active   a:active    选择活动链接  1
:hover    a:hover 选择鼠标在链接上面时  1
:focus    input:focus 选择具有焦点的输入元素   2
:first-letter p:first-letter  选择每一个<p>元素的第一个字母  1
:first-line   p:first-line    选择每一个<p>元素的第一行    1
:first-child  p:first-child   指定只有当<p>元素是其父级的第一个子级的样式。  2
:before   p:before    在每个<p>元素之前插入内容    2
:after    p:after 在每个<p>元素之后插入内容    2
:lang(language)   p:lang(it)  选择一个lang属性的起始值="it"的所有<p>元素   2
element1~element2 p~ul    选择p元素之后的每一个ul元素 3
[attribute^=value]    a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value]    a[src$=".pdf"]  选择每一个src属性的值以".pdf"结尾的元素  3
[attribute*=value]    a[src*="runoob"]    选择每一个src属性的值包含子字符串"runoob"的元素   3
:first-of-type    p:first-of-type 选择每个p元素是其父级的第一个p元素  3
:last-of-type p:last-of-type  选择每个p元素是其父级的最后一个p元素   3
:only-of-type p:only-of-type  选择每个p元素是其父级的唯一p元素 3
:only-child   p:only-child    选择每个p元素是其父级的唯一子元素   3
:nth-child(n) p:nth-child(2)  选择每个p元素是其父级的第二个子元素    3
:nth-last-child(n)    p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数   3
:nth-of-type(n)   p:nth-of-type(2)    选择每个p元素是其父级的第二个p元素  3
:nth-last-of-type(n)  p:nth-last-of-type(2)   选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child   p:last-child    选择每个p元素是其父级的最后一个子级。 3
:root :root   选择文档的根元素    3
:empty    p:empty 选择每个没有任何子级的p元素（包括文本节点）    3
:target   #news:target    选择当前活动的#news元素（包含该锚名称的点击的URL） 3
:enabled  input:enabled   选择每一个已启用的输入元素 3
:disabled input:disabled  选择每一个禁用的输入元素    3
:checked  input:checked   选择每个选中的输入元素   3
:not(selector)    :not(p) 选择每个并非p元素的元素  3
::selection   ::selection 匹配元素中被用户选中或处于高亮状态的部分    3
:out-of-range :out-of-range   匹配值在指定区间之外的input元素    3
:in-range :in-range   匹配值在指定区间之内的input元素    3
:read-write   :read-write 用于匹配可读及可写的元素    3
:read-only    :read-only  用于匹配设置 "readonly"（只读） 属性的元素   3
:optional :optional   用于匹配可选的输入元素   3
:required :required   用于匹配设置了 "required" 属性的元素    3
:valid    :valid  用于匹配输入值为合法的元素 3
:invalid  :invalid    用于匹配输入值为非法的元素 3
  1. 标签选择器

举例

*{margin:0;padding:0}
div{color:red;}

<div>......</div>   <!--对应以上两种样式-->
<div class="box">......</div>   <!--对应以上两种样式-->
  1. id 选择器
  1. 类选择器
  1. 层级选择器
  1. 组选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            width:300px;
            height:300px;
            background-color:gold;
            /* 第一种解决塌陷的方法 */
            /* border:1px solid; */

            /* 第二种解决塌陷的方法 */
            /* overflow:hidden; */
        }

        .box{
            width:200px;
            height:100px;
            background-color:green;
            margin-top:100px;
            margin-left:50px;
        }

        /* 第三种解决塌的方法 */
            /* 使用伪元素类方法解决塌陷： */
        .clearfix:before{
            content:"";
            display:table;
        }

    </style>
</head>
<body>
    <div class="con clearfix">
        <div class="box"></div>
    </div>
</body>
</html>

1. 去掉内联元素之间的换行
2. 将内联元素的父级设置 font-size 为 0，内联元素自身再设置 font-size

  1. 浮动元素有左浮动 (float left) 和右浮动 (float right) 两种
  2. 浮动的元素会向左或向右浮动，碰到父元素边界，其他元素才停下来
  3. 相邻浮动的块元素可以并在一起，超出父级宽度就换行
  4. 浮动让行内元素自动转化为行内块元素 (此时不会有行内块元素间隙问题)
  5. 浮动元素后面没有浮动的元素会占据浮动元素的设置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果
  6. 父元素如果没有设置尺寸 (一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
  7. 浮动元素之间没有垂直 margin 的合并


↙↙↙阅读原文可查看相关链接，并与作者交流