复习HTML+CSS

1、w3c 标准

    （1）结构的标准（XHTML）--HTML
    （2）表现的标准（CSS）
    （3）行为的标准（ESCRIPT）--JavaScript

2、HTML--超文本标记语言

    （1）超文本--文字、音频、视频、图片
    （2）标记
    （3）跨平台--跨浏览器
    （4）不区分大小写

3、标签

    （1）H1-H6   标题标签

①独占一行
②加粗
③字体越来越小
④根据语义化来选择

    （2）p 段落

 ①独占一行

    （3）div区域

 ①没有任何样式的块元素

    （4）span

 ①没有任何样式的行内元素

    （5）hr水平线
    （6）br换行
    （7）strong加粗
    （8）em斜体
    （9）center
    （10）转义字符

①&nbsp；空格
②©版权符号
③<
④>

  （11）图片标签

        ①src   相对地址    ..回到上一级
        ②alt   图片显示不出来时，显示文字
        ③鼠标悬浮时显示
        ④width
        ⑤height

 （12）a标签   超链接

        ①页面间的跳转
        ②定点跳转--锚链接
            1）确定锚点   id属性
            2）a标签上   href=“页面相对地址#id属性”

  （13）结构标签--h5新增--容器--布局

        ①header  头部
        ②footer  尾部
        ③section  区域
        ④aticle  独立的一个区域
        ⑤aside  侧边栏
        ⑥nav  导航

   （14）table 

        ①基本不用布局
        ②局部的内容还会使用
        ③border
        ④colspan  跨列
        ⑤rowspan  跨行

   （15）列表

        ①无序   ul-li   比较规律的界面
        ②有序   ol-li   有序的，比如考卷、调查问卷
        ③定义   dl-dt-dd-dt-dd-dt-dd

    （16）iFrame   内联框架   一种容器
    （17）音频 autodio
    （18）视频 video

4、表单元素

    （1）Form  一个可以一起提交数据的容器

        ①action 处理数据的地方 servlet，jsp，html
        ②method 传递方式
            1）get
                a、数据显示地址栏
                b、不安全
                c、数据长度有限制
                d、传输速度比较快
            2）post
                a、打包之后传递
                b、相对安全
                c、大文件
                d、传输速度慢

    （2）input

        ①name  必须有，才能把数据提交
        ②type
            1）text   普通文本
            2）password 密码  掩码
            3）radio   单选
            4）checkbox   多选
            5）file   文本域
            6）submit   提交按钮
            7）image   图片提交按钮   src
            8）reset   重置
            9）button   普通按钮
            10）新增
                a、url
                b、Email
                c、number
                d、range
                e、color        

    （3）select  下拉框

        ①option  value属性
        ②selected  默认选中

    （4）textarea  多行文本  cols  rows
    （5）高级属性

 

        ①隐藏域
            1）type=hidden
        ②表单的标注
            1）o男
            2）被标记的元素添加id
            3）标注的元素上  label     配置for属性

        ③只读     readonly
        ④禁用     disabled
        ⑤表单的验证
            1）placeholder 提示语
            2）required 必填项
            3）pattern 正则表达式（模式）

 

5、CSS

    （1）层叠样式表
    （2）颜色、背景、宽高、间距、定位等 
    （3）结构和表现分离--重用--统一管理，便于开发、维护
    （4）不区分大小写

6、CSS的嵌入方式

    （1）行内样式   style=“font-size：16px；”起始标签
        ①作用域当前标签
        ②测试
    （2）内部样式 <style>p{  }</style>
        ①结构和样式的初步分离
        ②作用域当前文件
    （3）外部样式
        ①.css文件--css文件
        ②<link href=""/>   ---推荐
        ③<style>  @import   url() </style>
        ④结构和样式的完全分离
        ⑤推荐
    （4）优先级
        ①就近原则
        ②行内>内部>外部

7、CSS的选择器

    （1）基本选择器
        ①标签选择器
            1）  p   span   header   div   a   body
        ②类选择器
            1）class=“container”
            2）.container
            3）可以跨标签
            4）可以多个
        ③id选择器
            1）ld="t"
            2）#t{}
            3）唯一
        ④优先级
            1）id选择器>类选择器>标签选择器
        ⑤复合选择器
            1）全局选择器    *{margin=0;padding=0;}
            2)并局选择器   选择器1，选择器2{}
    （2）高级选择器
        ①层次选择器     划分范围
            1）后代     E F
            2）子选择器E>F
            3）相邻兄弟
            4）通用兄弟
        ②结构伪类选择器
            1）E:nth-child（）先计数，再看类型
            2）E:nth-of-type（）先看类型，再计数
        ③属性选择器
·            1）E[attr]包含属性
            2）E[attr1][attr2]同时包含多种属性
            3）E[att="value"]属性名=属性值    （完全匹配--区分大小写）
            4）E[attr^="value"]       以什么开头
            5）E[attr$="value"]     以什么结尾
            6）E[attr*="value"]        包含什么值 

 

8、CSS的样式

    （1）字体
        ①font-size   字体大小
        ②font-style   字体风格--设置倾斜 italic
        ③font-weight   字体粗细  bold
        ④font-family   字形--宋体    英文在前，中文在后
        ⑤font
    （2）文本
        ①color   字体颜色
            1）英文单词
            2）rgb--r red g green b blue
                a、十进制0-255   rgb（255，255，255）
                b、十六进制0-FF #FF0000--红色   #F00
            3）rgba--a alpha   透明度0-1  0--完全透明   1--完全不透明
                a、rgba（255，210，21，0.2）
        ②text-align   文本水平对齐方式
            1）left   center   right
            2）通常设置在块元素上，设置内容水平对齐方式
            3）<center></center>
        ③text-indent
            1）缩进   段落首行缩进
            2）px     em（相对值）em=2
        ④text-decoration    文本修饰--更多设置在a标签上
            1）underline    下划线
            2）overline    上划线
            3）line-through    删除线
            4）none
        ⑤line-height   行高
            1）单行文本竖直对齐方式   
        ⑥vertical-align   竖直对齐方式
            1）图文竖直对齐   给图片上添加vertical-align="middle "
            2)img--border 显示出来  vertical-align="middle "
            3）display 属性  div元素排在一行   如果两个div内容高度不一致--vertical-align="top"
        ⑦text-shadow   文本阴影 css3新增
            1）text-shadow：颜色  X轴偏移  Y轴偏移  模糊半径
        ⑧背景
            1）背景色 background-color
            2）背景图background-image
            3）background-repeat   是否重复
            4）background-position   背景图的位置
                a、px
                b、百分比
                c、英文单词   left   center   right  //top   center   bottom
            5）background：color   image   repeat   position
            6）css3新增   渐变   linear-gradient（to right bottom，#a00，#abc）
                a、background:linear-gradient（to right bottom，#a00，#abc）

    （3）超链接    伪类状态值
        ①link   访问前
        ②hover   悬浮时
        ③active    按住不动
        ④visited    访问完之后
        ⑤通常这样设置
            1）a{}
            2）a：hover{}
            3）div：hover{}
    （4）列表    
        ①list-style
            1）none   去掉li前面的小圆点

 

9、盒子模型

    （1）块元素和行内元素
        ①块元素
            1）独占一行
            2）设置宽高
            3）p div ul form
        ②行内元素
            1）不换行
            2）靠内容填充宽高，设置宽高无效
    （2）其实是吧页面上所有元素都看成一个盒子
        ①宽width
        ②高height
            1）在行内元素无效
        ③边框border
            1）border:border-width border-style border-color
            2）显示某一边线
            3）左 上 右 下   缺省找对边
        ④外边距margin
            1）设置块元素水平居中
                a、给块元素宽度
                b、margin:0 auto;
        ⑤内边距padding
            1）盒子内容水平竖直居中
        ⑥box-sizing   盒子大小
            1）border-box:          width指的是盒子的的大小
            2）content-box          width指的是内容的大小
        ⑦box-shadow   盒子阴影    CSS3新增

        
10、display和浮动

    （1）布局
    （2）多个块元素排在一行
        ①display
            1）block    块元素
            2）inline    行内元素
            3）none   不显示
            4）inline-block    行内块元素
                a、行内元素    不换行
                b、块元素        可以设置宽高
                c、特点：
                    a）解析换行   font-size=0；
                    b）多个块元素实际内容高度不一致，就会竖直方向不对齐   vertical-align=top
                    c）没有节约空间的理念
        ②浮动
            1）float
                a、left   左浮动
                b、right    右浮动
                c、none    不浮动
            2）本质
                a、浮动元素脱离标准文档流--其后面的兄弟元素就会顶上来
                b、层级提高
                c、按照浮动的方向，左或右依次摆放
                d、如果父控件内的所有元素都浮动了，就会造成父控件的边框塌陷
                    a）会影响父控件的兄弟元素
            3）清除浮动
                a、避免受浮动元素的影响
                b、clear
                    a）left
                    b）right
                    c）both
                c、认为浮动元素不是浮动摆放在此，而是标准文档流的效果
            4）解决父控件边框塌陷
                a、添加空div
                b、设置固定高度
                c、overflow:hidden
                d、after   伪类
            5）特点
                a、灵活
                b、解决空间理念
                c、处理浮动