Div布局和Css样式的结合

当我们对HTML有一点了解之后，就会想做一个自己的网页，这时我们就需要对一些基础知识的巩固和加深了，盒子布局（也叫div布局），使用div布局的时候就不像table布局那么直观了，需要对它的属性及用法有一定的掌握。从而操作它们，对样式有一定的认识至少知道怎么写，如何用。

• 标签：排版标签
  • </br>换行
  • </hr>水平
  • color：颜色
  • <p>断落标签</p>
  • align：对齐方式
  • div：块级元素
  • span：行内元素
  • <b>加粗</b>
  • <i>斜体</i> 标签可以内嵌内容
  • font：字体标签
  • size:最大值为：7，最小值为：1

• 特殊字符
  • <<>> & &
• 滚动的字幕
  • <marquee>内容</marquee>
• 列表标签
  • 数据格式化列表
    • <dl>
      • <dt>上层项目</dt>
      • <dd>下层项目</dd>
      • <dd>下层项目</dd>
    • </dl>

• 有序列表：
  • <ol>
    • <li>内容</li>
  • </ol>

• 无序列表：
  • <ul>
    • <li>内容</li>
  • </ul>

• 图片标签
  • <img src="图片地址 "/>
    • 属性：宽高
    • alt ：图片说明
• 超链接标签
  • <a href="链接地址"><a/>
    • 属性：href="链接地址"
    • name：属性的用法 <a name="top"></a>
    • <a href="#top"><a/>(上中下，用于本页面返回)描点

• 表格标签
  • <form>用户输入的内容
  • input   type=“类型”
  • text文本框
  • password密码框
  • radio单选按钮
  • checkbook多选按钮
  • 默认值checked或true
  • reset重置
  • submit提交
  • file 选择文件
  • hidden  隐藏的组件
  • button按钮一般和js一起用绑定事件
  • type=“image”图片
  • 表提交
  • select文本域（下拉）

• 多媒体文件的使用<bgsound  src=”媒体文件” loop=”-1”>无限循环

• 框架标签
  • <frameset  rows=”80,*”>
    • <frame  name=”属name的名称” src=”页面”>
  • </frameset>

Css的简介：层叠样式

• Css做什么用：设置网页的显示效果
• CSS将网页显示的效果分离，减少耦合性，方便修改和管理

CSS与HTML结合

CSS与HTML结合有四种方式：

• （1）、在HTML的标签上，提供一个属性，style=’’CSS代码”（内嵌样式）
• （2）、在HTML的文件，提供一个标签<style  type=”text/css”>CSS代码<style>
• （3）、引用外部样式@import url(“CSS文件的地址”);

• （4）、链接样式<link rel=”styesheet”  type=”text/css”  href=”文件.CSS”>CSS的优先级和规范
  • 由上到下，由外到内，由低到高。（一般情况下）
  • CSS的写法div{css的属性名称：值......}
  • 如果一个属性有多个值，值与值之间使用空格隔开

CSS的选择器：

• 选择器就是告诉CSS的代码作用在哪个标签上。
  • （1）、基本选择器
    • ①、类选择器：在HTML的标签上，提供了属性class（经常用的样式）设置不同的标签，具有相同的样式
    • ②、 ID选择器：在HTML的标签上，属性 设置样式（一般情况下设置不同的ID）多半是给js语言来使用的
  • 优先级：（特殊情况下）
    • 标签名<类选择器<ID选择器<style属性
  • （2）、扩展选择器
    • ①、关联选择器：标签可以嵌套，标签与标签之间的关系
      • 写法：中间用空格隔开   例子  div  font{   }
    • ②、组合选择器：对多个不同的选择器进行相同的样式 
      • 写法：早多个不同的选择器之间有逗号（，）隔开
  • ③、伪元素选择器：定义好一些选择器，用就ok。
    • 如果使用超链接的伪元素选择器，使用是有顺序的：Link、visited、hover、active（L、V、H、A）