HTML|CSS总结与补充

知识内容：

1.HTML总结

2.CSS总结

一、HTML总结

详细内容见：http://www.cnblogs.com/wyb666/p/8733699.html

1.HTML介绍及前端入门

(1)HTML是一套规则，浏览器认识的规则

(2)开发者：
学习Html规则
开发后台程序：
         - 写html文件（充当模板的作用） ******
         - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

(3)本地测试
         - 找到文件路径，直接浏览器打开
         - pycharm打开测试

2.编写Html文件
        - doctype对应关系
        - html标签，标签内部可以写属性 ====> 只能有一个
        - 注释：  <!--  注释的内容  -->

3.标签分类
        - 自闭合标签
            <meta charset="UTF-8">
        - 主动闭合标签
            <title>老男孩</title>

4.HTML常用标签：
    head内标签：
            - <meta  -> 编码，跳转，刷新，关键字，描述，IE兼容
                    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
            - title标签 网页标题
            - <link /> 引入CSS
            - <style /> CSS有关
            - <script> JavaScript有关

body内标签：
         - 图标，  &nbsp;  &gt;   &lt;

- p标签，段落

- br，换行

======== 小总结  =====
            所有标签分为：
                块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
                行内标签： span（白板）
            标签之间可以嵌套
            标签存在的意义，css操作，js操作
            ps:chorme审查元素的使用
                - 定位
                - 查看样式

- h系列(h1 h2 h3 h4 h5 h6 大小依次减小，均加粗加黑)

- div -> 块级标签

- span -> 内联标签

- input系列 + form标签  -> 表单
            input type='text'     - name属性，value="赵凡"
            input type='password' - name属性，value="赵凡"
            input type='submit'   - value='提交' 提交按钮，表单
            input type='button'   - value='登录' 按钮

input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
            input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
            input type='rest'     - 重置

<textarea >默认值</textarea>  - name属性
            select标签            - name,内部option value, 提交到后台，size，multiple

- a标签
            - 跳转
            - 锚     href='#某个标签的ID'    标签的ID不允许重复

- img图像标签
             src
             alt
             title

- 列表(ul ol li系列)
            ul
                li
            ol
                li
            dl
                dt
                dd

- 表格(table系列)
            table
                thead
                    tr
                        th
                tbody
                    tr
                        td
            colspan = ''
            rowspan = ''

- label
            用于点击文件，使得关联的标签获取光标
            <label for="username">用户名：</label>
            <input id="username" type="text" name="user" />

- fieldset -> 分组
          legend -> 定义标题

- 共计18组标签

二、CSS总结

详细内容见：http://www.cnblogs.com/wyb666/p/8970209.html

1.编写CSS样式的方法

(1)CSS样式可以写在标签的style属性中

例如: <p style="color: grey; font-size: 14px;">This a test code for html and css</p>
(2)在head里面 style标签中写样式

 - id选择区
     #i1{
            background-color: #2459a2;
            height: 48px;
        }

 - class选择器 ******
     .名称{
             ...
          }
 <标签 class='名称'> </标签>

 - 标签选择器
 　　div{
         　　...
    　　}
 所有div设置上此样式

 - 层级选择器（空格） ******
 　　.c1 .c2 div{
                 　　...
            　　}

 - 组合选择器（逗号） ******
 　　#c1,.c2,div{
 　　　　　　　　　 　　...　
            　　}

 - 属性选择器 ******
 对选择到的标签再通过属性再进行一次筛选
 　　.c1[n='alex']{ width:100px; height:200px; }

(3) css样式也可以写在单独文件中，再使用link标签引入
      <link rel="stylesheet" href="commons.css" />

关于CSS样式的优先级：标签的style属性->1000，#id->100，.class->10，HTML标签名(p\div\span)->1，按这些规则逐位相加得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较

2.CSS中的注释:     /*   */

3.CSS常用属性

(1)字体

• font-family  字体种类
• font-size     字体大小
• font-weight 字体加粗
• color字体颜色

(2)文本属性

• text-align 对齐(重要)
• text-indent 首行缩进
• text-decoration 装饰 (去除a标签的下划线(text-decoration: none))

(3)背景属性

• background-color  背景颜色
• background-image  背景图片(九宫格涮葫芦娃)  url("img/***.png") no-repeat 50% 50%

(4)color

• red (直接写名字)
• #FF0000
• rgb(255, 0, 0)  --> rgba(255,0,0,0.5)

(5) 边框属性 border

• border-width (边框宽度)
• border-style (边框样式)
• border-color (边框颜色)
• 简写: border: 1px solid red;

(6)居中

• text-align:ceter；水平方向居中
• line-height: 标签高度；垂直方向根据标签高度居中
• margin: 0 auto; 先对一个div设置一定的宽度

(7)高度宽度

• height         高度 百分比
• width          宽度 像素，百分比

(8)去掉样式

• text-decoration 装饰 (去除a标签的下划线(text-decoration: none))
• list-style li的样式 (去除li标签的样式(list-style: none或list-style-type: none))

(9)去掉所有标签的margin和padding

 *{
 　　margin: 0;
 　　padding: 0;
 }

4.float

• 多用于实现布局效果比如顶部的导航条和页面左右分栏 (博客页面:左边20%,右边80%)
• 任何标签都可以浮动，浮动之后都会变成块级，a标签float之后就可以设置高和宽，块级标签浮动之后可以堆积
• 浮动之后浮动的对象脱离文档流对象，不再占用原来的位置
• float取值：left、right、none

5.clear: 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)

结合伪元素来实现

 .clearfix:after {
     content: "",
     display: "block",
     clear: both;
 }

 .clearfix:before {
     content: "",
     display: "block",
     clear: both;
 }

lowB的清除方法: <div style="clear: both;"></div>

clear取值： left、right、both

6.display

• display: none; -- 让标签消失(不让标签显示，不占位)
• display: inline;
• display: block;
• display: inline-block;
• 具有inline,默认自己有多少占多少
• 具有block，可以设置高度，宽度，padding  margin

关于行内标签和块级标签:

• 行内标签：无法设置高度，宽度，padding  margin
• 块级标签：设置高度，宽度，padding  margin

7.CSS盒子模型

• content (内容)
• padding (内填充) 调整内容和边框之间距离时使用这个属性
• border  (边框)
• margin  (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
• padding和border都会扩大盒子的大小，而margin只是在盒子之间设置距离
• 注意: 要习惯看浏览器console窗口那个盒子模型

8.伪类和伪元素
伪类：

• :link
• :visited
• :hover (重要) -> 鼠标放上去后的效果
• :active
• :focus(input标签获取光标焦点)

伪元素：

• :first-letter
• :before(重要 在内部前面添加)
• :after(重要 在内部后面添加)

9.overflow（溢出）

• 溢出：标签的内容放不下
• hidden  --> 隐藏
• scroll  --> 出现滚动条
• auto
• scroll-x
• scroll-y

例子：圆形头像

 overflow: hidden
 border-radius: 50%  (圆角)

10.position（定位）

• static(默认)
• relative(相对定位 --> 相当于原来的位置)
• absolute(绝对定位 -->相当对于定位过的前辈标签)
• fixed (固定 --> 返回顶部按钮)

补充：脱离文档流的3种方式

• float
• absolute
• fixed

11.opacity (不透明度)

• 取值0~1，值越大越不透明，值越小越透明
• 和rgba()的区别: opacity改变元素\子元素的透明度效果；rgba()只改变背景颜色的透明度效果

12.z-index（层级）

• 数值越大,越靠近你
• 只能作用于定位过的元素
• 应用于模态框