zoukankan      html  css  js  c++  java
  • html、css重难点总结

    1、<a href="html02" target="_blank">html02</a> 
     target:链接中的内容在哪儿打开
     _blank:在新的窗口中打开
     _self:在当前窗口打开(默认)
    2.使用图像作为链接地址
     <a href="html02.html"><img src="images/cp.gif" border="0"></a>
    3.发邮件
     <a href="mailto:chengzh@tarena.com.cn">mail to me</a>
    4.锚点(一个页面内容的跳转)
      命名一个锚点
      <a name="top">top</a>
      跳转到锚点
      <a href="#top">to top</a>
    5.使用热点
      将一个图片划分成多个区域,每一个区域表示一个
      链接。
      <img src="index04.jpg" width="500"
      height="500" border="0" usemap="#m1" />
      <map name="m1" id="m1">
       <area shape="rect" coords="…" href="#" />
       <area shape="circle" coords="…" href="#" />
       <area shape="poly" coords="…" href="#" />
      </map>
       当shape="rect"(矩形)时,coords的值为左上角和右下角的坐标值; 当shape="poly"(多边形)时,
       为各顶点值; 当shape="circle"(圆形)时,为圆心坐 标值和半径值。 coords值依照图片大小的不同
       和所希望链接区域的不同而有所不同
      </map>

    6、框架
      (1)什么是框架
      将一个窗口划分成多个子窗口,每一个子窗口都
      可以放置一个页面。
      frameset:
      
      iframe:
      frameset页面中不能出现body,而iframe可以
      用在body标记里。
    7.xhtml与html的关系
      xhtml:可扩展的超文本标记语言
      html是一种语法宽松的语言,大小写不敏感,
      一些错误会忽略,w3c对html语法做了进一步的要求,
      即按照xml语法的要求重新定义了html标记。
      按照以下方式来写html
      第一行,写文档类型声明(可以省略)
      XHTML 过渡型
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
      Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      XHTML 严格型
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      HTML严格型
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      HTML松散型
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    8.实体代替某些符号:引号(&quot;),&(&amp;) >(&gt;) <(&lt;),空格(&nbsp;)

    9.图片提交按钮:

      <button type="submit">
          <img src="images/cp.gif" border="0">
         </button>

    10.选择器
      A.标签选择器(选择器的名称是一个标签的名字)
       标记的名称{
       }
      B. class选择器
       .任意的名称{
       }
       或者
       标记名称.任意的名称{
       }
      C.id选择器
       #任意的名称{
       }
      D.包含选择器
       
      E. 群组选择器
         
    11.样式的继承
      子标记会继承父标记的样式
    12.样式的优先级
      内联样式>内部样式>外部样式
      浏览器内部也有一个默认的样式
    13.重点的属性
      文本相关的属性
      font-size: 12px;/15px; //字体大小
      font-weight:900 //磅 100-900 共9个数字
      text-align:rigth center left
      color:
      背景相关的属性
      background-color:#ff88ee;//背景
      background-image:url(images/t1.jpg)//背景图片
      background-repeat:no-repeat repeat-x repeat-y //平铺
      background-attachment:fixed //固定
      边框
      border:1px solid red;//宽度 样式 颜色
      border-left:
      border-right:
      border-top:
      border-bottom:
      位置
      100px //宽度
      height:100px //高度
      margin: 10px 9px 8px 7px;//外边距
      margin-left:7px;
      margin-right:9px;
      margin-top:10px
      margin-bottom:8px;
      margin:1px;//上,右,下,左都是1个像素
      margin:20px auto;//上下各20px,左右居中
      padding://内边距 有可能会将父元素撑大
      padding-left:
      padding-top:
      padding-right:
      padding-bottom:
      padding:10px 9px 8px 7px;
      
      块元素与行内元素:
      块元素:
       另起一行: h1..hn, p,div,form,ul/ol,li,img
      行内元素:
       在一行内:span
       
      display属性://元素的显示方式
       none:不显示
       block:以块元素的方式来显示
       inline:以行内元素的方式来显示
      position属性://元素的摆放方式
       static://默认摆放,从左到右,从上到下。
       absolute://按照父元素的位置偏移
       relative://先按照默认方式摆放,然后偏移
      
      float属性:
       left://取消独占一行的特性,向左浮动。
      text-decoration:none underline;//下划线
      链接的伪样式:
       a:link { color: red} 没有访问时
       a:visited { color: blue} 访问后
       a:active { color: lime} 鼠标点击但还没有放开时
       a:hover { color: aqua} 鼠标指向时
       
      
      

  • 相关阅读:
    【pandas】'Styler' object has no attribute 'highlight_between'
    【原创】3行代码搞定:Python批量实现多Excel多Sheet合并
    【挑战阿里面试题-10种方法实现DataFrame转list】
    SpringCloud+RocketMQ实现分布式事务
    分布式事物SAGA
    分布式事务TCC
    多线程学习——思维导图
    .NET CLI简单教程和项目结构
    使用Google Fonts注意事项
    如何在印刷品中使用遵循SIL Open Font License协议的字体
  • 原文地址:https://www.cnblogs.com/smile361/p/2647299.html
Copyright © 2011-2022 走看看