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（层级）

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