HTML_CSS笔记

• 常用标记
  • 水平标记：<hr/>
  • 换行标记：<br/>
  • 段落标记：<p></p>
  • 标题标记：<h1></h1>~~<h6></h6>(从大到小)
  • 文本格式化标记
    • 加粗：<b></b> <strong></strong>
    • 斜体：<i></i> <em></em>
    • 加删除线：<s></s> <del></del>
    • 加下划线：<u></u> <ins></ins>
  • 图像标记
    • 基本格式：<img src="图像URL"/>
    • img属性
      • src URL 图像的路径
      • alt 文本 图像不能显示时的替换文本 ？
      • title 文本 鼠标悬停显示的内容
      • width 文本（像素，百分比） 设置图像宽度（XHTML不支持百分比页面）
      • height 文本（像素，百分比） 设置图像高度（XHTML不支持百分比页面）
  • 超文本链接标签
    • 基本格式<a href="URL">链接文本</a>
    • target属性
      • —blank 弹出新窗口，载入目标文本
      • —self
      • _parent
      • _top
• 特殊字符
  • 小于号：< <
  • 大于号：> >
  • 和号：&
  • 人民币：¥
  • 版权：©
  • 注册商标：®
  • 摄氏度：°
  • 正负号：±
  • 乘号：×
  • 除号：divide
  • 平方2（上标2）：²
  • 平方3（上标3）：³
• 表格
  • 基本格式
    • <table> <tr> <td></td> </tr> </table>
    • 标题标签：<caption> </caption>
  • 特殊格式
    • 表头: <thead> <th>代替<td> </thead>
    • 主体：<tbody></tbody>
    • 页脚: <tfoot></tfoot>
  • 属性
    • border （边框）
      • border-top （边框顶部）
      • border-bottom （边框底部）
      • border-left （边框左部）
      • border-right （边框右部）
    • cellpadding （文字与边框的距离）
    • cellspacing （单元格之间的距离）
    • align （表格对齐方式）
      • life 左对齐
      • center 居中
      • right 右对齐
    • bgcolor （背景颜色）
    • bordercolor （表格边框颜色）
    • border-collapse：collapse（设置表格边框合并）
  • 合并单元格
    • 行--------rowspan
    • 列--------colspan
• 表单
  • form属性
    • name：定义表单的名称
    • method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get
    • action：用来指定表单处理程序的位置（服务器端脚本处理文件）
    • fieldset：把表单分组
    • legend：分组名称
  • inpue控件
    • <input type="控件类型"
      • text 单行文本输入框 placeholder（提示符）
      • passward 密码输入框
        • maxlength 定义最大长度
        • radio 单选按钮
        • checkbox 复选框
        • button 普通按钮
          • 属性 value 名称自定义
        • submit 提交按钮
        • reset 重置按钮
        • image 图像形式的提交按钮
        • hidden 隐藏域
        • file （上传文件）
    • name
      • 由用户自定义 控件名称
    • value
      • 由用户自定义 控件的名称
    • size
      • 正整数 input控件在页面中显示的宽度
    • readonly
      • readonly 该控件内存为只读（不能编辑修改）
  • 下拉列表框
    • <select> <option>选项名称</option> </select>（类似列表）
    • selected="selected" （设置默认选项）
  • 多行文本域
    • <textarea  cols=“”  rows=“” ></textarea>
    • cols:设置文本域宽度    rows：设置文本域高度
  • 轮廓线
    • outline-style：none
  • 获取焦点
    • ：focus 获取鼠标光标状态
  • 取消表单边框
    • border：0 none
  • label标签
    • <label for="id名">
• 列表
  • <ol></ol> （有序列表）
    • <li></li> (列表项)
  • <ul></ul> （无序列表）
    • <li></li> （列表项）
  • <dl></dl> （自定义列表）
    • <dt></dt> （列表项）
    • <dd></dd> （列表项描述）

• ·  选择器分类

  ·  标签选择器

  ·  定义：p{属性：属性值;........}

  ·  引用：<p> 文本 </p> (直接引用标签)

  ·  类选择器

  ·  定义：.custom{属性：属性值；}

  ·  引用：class="custom"

  ·  <span></span> 用法 (把要修饰的内容标记起来)

  ·  id选择器

  ·  定义：#custom{属性：属性值；}

  ·  引用：id="custom"

  ·  复合选择器

  ·  CSS设置样式结构与样式属性

  ·  <style type="text/css"> </style>

  ·  文本属性

  ·  字体，字号

  ·  font （缩写形式）

  ·  font-weight （粗细）

  ·  ——px

  ·  bold

  ·  bolder

  ·  font-size （大小）

  ·  font-family （字体样式）

  ·  Font-style (设置字体风格)

  ·  italic （）斜体

  ·  字符

  ·  letter （缩写）

  ·  letter-spancing （字符间距）

  ·  文本

  ·  text （缩写）

  ·  text-align （对齐方式）

  ·  text-indent （文本缩进）

  ·  em （字符单位）

  ·  行距

  ·  line （缩写）

  ·  line-height （行高）

  ·  背景属性

  ·  background （缩写）

  ·  background-color （背景颜色）

  ·  padding （内边距）

  ·  background-image （背景图）

  ·  background-repeat （背景图重复方式）

  ·  repeat-x （水平重复）

  ·  repeat-y （垂直重复）

  ·  no-repeat （不允许重复）

  ·  background-position （位置坐标，偏移量）

  ·  background-attachment（背景图像是否固定或者随着页面的其余部分滚动。）

  ·  fixed （固定）

  ·  background-size （填充）

  ·  background: linear-gradient （渐变）

  ·  linear-gradient（to bottom）从上到下

  ·  linear-gradient（to right）从左到右

  ·  linear-gradient（to bottom right）对角

  ·  每个颜色属性后面可以跟百分比

  ·  红色red：ff0000

  ·  黑色black：000000

  ·  紫色violet：ee82ee

  ·  粉色pink：ffc0cb

  ·  蓝色blue：0000ff

  ·  绿色green：008000

  ·  橙色orange：ffa500

  ·  链接属性

  ·  链接样式

  ·  text-decoration（缩写）

  ·  text-decoration：none （去下划线）

  ·  text-decoration：underline （每行都加下划线）

  ·  text-decoration：line-through （中间加一行）

  ·  text-decoration：overline （上面加一行）

  ·  a:link - 普通的、未被访问的链接

  ·  :visited - 用户已访问的链接

  ·  a:hover - 鼠标指针位于链接的上方

  ·  a:active - 链接被点击的时刻

  ·  <a href="jie">到下面</a>

  ·  <a name="jie">回顶部</a>

  ·  <a href="#" target="-top">回顶部</a>

  ·  列表属性

  ·  list-style-type  （列表项标记类型）

  ·  disc (默认,标记是实心圆)

  ·  circle (标记是空心圆)

  ·  square (标记是实心方块)

  ·  decimal (标记是数字)

  ·  decimal-leading-zero （0开头的数字标记）

  · 

  · 

  ·  显示模式相互转换

  ·  行内元素转行内块元素

  ·  dispaly：inlinge－block

  ·  行内元素转块元素

  ·  dispaly：block

  ·  行内块转块

  ·  CSS框模型

  ·  内边距

  ·  padding (缩写)

  ·  padding-top （上内边距）

  ·  padding-bottom （下内边距）

  ·  padding-left （左内边距）

  ·  padding-right （右内边距）

  ·  边框

  ·  border-color （边框颜色）

  ·  border-color: transparent （透明）

  ·  border -style（边框样式缩写）

  ·  dotted （虚线）

  ·  double （双边框）

  ·  solid （实线）

  ·  outset （像凸起按钮）

  ·  none （无边框）（系统默认）

  ·  border-width （边框宽度）

  ·  border-radius （设置圆角）

  ·  外边距

  ·  margin （缩写）

  ·  合并

  ·  给父级元素设置边框

  ·  给父元素设置overflow

  ·  auto

  ·  visible （可见）

  ·  hi （可见）

  ·  列表属性

  ·  list-style-type （修改列表的标志类型）

  ·  none （无标记）

  ·  square （方块）

  ·  disc （实心圆）

  ·  decimal （数字）

  ·  decimal-leading-zero0 （开头的数字标记。01, 02, 03)

  ·  lower-roman 小写罗马数字(i, ii, iii, iv, v)

  ·  upper-roman 大写罗马数字(I, II, III, IV, V)

  ·  lower-alpha (小写英文字母)

  ·  list-style-imagin （标记图像）

  ·  list-style-position

  ·  inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。

  ·  outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

  ·  inherit 规定应该从父元素继承 list-style-position 属性的值。

  ·  定位

  ·  position （属性）

  ·  static （默认值，静态定位）

  ·  absolute （绝对定位）

  ·  relative （相对定位）

  ·  fixed （固定定位）

  ·  overflow 属性（元素溢出）

  ·  visible 默认值。内容不会被修剪，会呈现在元素框之外。

  ·  hidden 内容会被修剪，并且其余内容是不可见的。

  ·  scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

  ·  auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

  ·  inherit 规定应该从父元素继承 overflow 属性的值。

  ·  vertical-align （垂直对齐方式）

  ·  text-top

  ·  子绝父相定义

  ·  如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素 以其父元素为标准来定位。如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。

·  常用标记

·  水平标记：<hr/>

·  换行标记：<br/>

·  段落标记：<p></p>

·  标题标记：<h1></h1>~~<h6></h6>(从大到小)

·  文本格式化标记

·  加粗：<b></b> <strong></strong>

·  斜体：<i></i> <em></em>

·  加删除线：<s></s> <del></del>

·  加下划线：<u></u> <ins></ins>

·  图像标记

·  基本格式：<img src="图像URL"/>

·  img属性

·  src URL 图像的路径

·  alt 文本 图像不能显示时的替换文本 ？

·  title 文本 鼠标悬停显示的内容

·  width 文本（像素，百分比） 设置图像宽度（XHTML不支持百分比页面）

·  height 文本（像素，百分比） 设置图像高度（XHTML不支持百分比页面）

·  超文本链接标签

·  基本格式<a href="URL">链接文本</a>

·  target属性

·  —blank 弹出新窗口，载入目标文本

·  —self

·   _parent

·  _top

·  特殊字符

·  小于号：< <

·  大于号：> >

·  和号：&

·  人民币：¥

·  版权：©

·  注册商标：®

·  摄氏度：°

·  正负号：±

·  乘号：×

·  除号：divide

·  平方2（上标2）：²

·  平方3（上标3）：³

·  表格

·  基本格式

·  <table> <tr> <td></td> </tr> </table>

·  标题标签：<caption> </caption>

·  特殊格式

·  表头: <thead> <th>代替<td> </thead>

·  主体：<tbody></tbody>

·  页脚: <tfoot></tfoot>

·  属性

·  border （边框）

·  border-top （边框顶部）

·  border-bottom （边框底部）

·  border-left （边框左部）

·  border-right （边框右部）

·  cellpadding （文字与边框的距离）

·  cellspacing （单元格之间的距离）

·  align （表格对齐方式）

·  life 左对齐

·  center 居中

·  right 右对齐

·  bgcolor （背景颜色）

·  bordercolor （表格边框颜色）

·  border-collapse：collapse（设置表格边框合并）

·  合并单元格

·  行--------rowspan

·  列--------colspan

·  表单

·  form属性

·  name：定义表单的名称

·  method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get

·  action：用来指定表单处理程序的位置（服务器端脚本处理文件）

·  fieldset：把表单分组

·  legend：分组名称

·  inpue控件

·  <input type="控件类型"

·  text 单行文本输入框 placeholder（提示符）

·  passward 密码输入框

·  maxlength 定义最大长度

·  radio 单选按钮

·  checkbox 复选框

·  button 普通按钮

·  属性 value 名称自定义

·  submit 提交按钮

·  reset 重置按钮

·  image 图像形式的提交按钮

·  hidden 隐藏域

·  file （上传文件）

·  name

·  由用户自定义 控件名称

·  value

·  由用户自定义 控件的名称

·  size

·  正整数 input控件在页面中显示的宽度

·  readonly

·  readonly 该控件内存为只读（不能编辑修改）

·  下拉列表框

·  <select> <option>选项名称</option> </select>（类似列表）

·  selected="selected" （设置默认选项）

· 

·  多行文本域

·  <textarea  cols=“”  rows=“” ></textarea>

·  cols:设置文本域宽度    rows：设置文本域高度

·  轮廓线

·  outline-style：none

·  获取焦点

·  ：focus 获取鼠标光标状态

·  取消表单边框

·  border：0 none

·  label标签

·  <label for="id名">

·  列表

·  <ol></ol> （有序列表）

·  <li></li> (列表项)

·  <ul></ul> （无序列表）

·  <li></li> （列表项）

·  <dl></dl> （自定义列表）

·  <dt></dt> （列表项）

·  <dd></dd> （列表项描述）