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> （列表项描述）