zoukankan      html  css  js  c++  java
  • JS基础 超链接、数列的用法,行内元素和块级元素

     一 超链接  

    1、爱恨原则

      每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。 

      “爱恨原则LoVe/HAte),即四种伪类的首字母:LVHA。定义A链接样式的正确的顺序:a:linka:visiteda:hovera:active

    a:link,    //定义正常链接的样式; 
    
    a:visited,  //定义已访问过链接的样式; 
    
    a:hover,   //定义鼠标悬浮在链接上时的样式; 
    
    a:active,  // 定义鼠标点击链接时的样式。

           a:hover a:visited 链接的状态(颜色、下划线等)一般 应该是相同的。

          a:active不能设置有无下划线(总是有的)。

     

    <style type="text/css"> 
    a:link{  
       color:red; 
       text-decoration:underline;
     } 
    a:visited { 
      color:white; 
      text-decoration:none;
     }  
    a:hover {  
       color:blue; 
      text-decoration:underline;
     }   
    a:active { 
      color:yellow; 
      text-decoration:none;
     }

     

    2、a 标签属性

     href = “ 链接到的地址 ” 
     text-decoration:none;    //去掉下划线
     target = “ _blank ”     //在新页面打开
     title = “ 链接的附加提示信息 ”  //隐藏的部分显示
    
    common      //一般属性  
    accesskey    //代表一个链接的快捷键访问方式 
    charset     //指定了链接到的页面所使用的编码方式,比如UTF-8 
    coords      //使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标 
    hreflang     //指出了链接到的页面所使用的语言编码 
    rel        //代表文档与链接到的内容(href所指的内容)的关系 
    rev         //代表文档与链接到的内容(href所指的内容)的关系 
    shape       //使用图像地图的时候可以使用shape指定链接区域 
    tabindex     //代表使用"tab"键,遍历链接的顺序 
    type       //代表链接的MIME类型

     title   

    //  鼠标放入图片上显示文字

    //显示全部文字(文字超出隐藏)

    placeholder = " 文字 " ;

    // 输入时文字消失

     

     二  数列   

     1、自定义列表

     <dl>                 //列表开始
         <dt>  </dt>      // 列表项的开始
           <dd> </dd>     // 列表项的定义     
         <dt>  </dt>
           <dd> </dd>      
     </dl> 

    2、列表中重要的样式

    <ul dtyle="list-style:none" > </ul>     
    //list-style:none 去掉无序列表前的黑点 <li style="float:left; padding-left:10px "> //float: left 横排 //padding-left: 10px 相距10 个像素 //用 margin 或 padding 进行左右上下的调整

     三 行内元素和块级元素

    (一)块级元素

    1、块级元素的特征

    (1)块级元素独占一行,之后的元素也只能另起一行,相邻的两个块级元素不能共用一行。

    (2)块级元素其元素的高度,宽度,行高和顶部底部边距都是可以设置的。

    (3)元素的宽度如果不设置的话,默认为父元素的宽度。

    (4)块级元素对应的属性为display:block

    2、常见块级元素

    <address>   <article>  <p>
    <aside>       //定义内容之外的内容.可作为标题的解释内容或副标题. 不会自动缩进
    <audio>       //音频标签 
    <blockquote>    //定义较长的引用内容,有首行缩进。
    <canvas>      //绘图标签 。 <caption>      //定义表格标题, <dd>         //表格中的项目描述 <div>        //定义文档流中小结,盒子模型标签 。 <dl>         //定义列表标签。 <dt>         //定义列表中的项目标题 <details>     //定义元素的细节 <fieldset>     //定义单中元素的边框 <figcaption>    //定义figure元素的标题, <figure>     //定义媒介内容的分组,以及标题。 <footer>     //定义section 或page的页脚 <form>       //表单 <h1>-<h6>     //定义html标题 <header> <hr>   //定义水平线 <legend>      //定义fieldset元素的标题 <li>        //定义列 <menu>        //定义列表或菜单 所有主流浏览器均不支持 menu 元素。 <meter>      //定义预定义范围内的度量 <nav>        //定义导航 <noframes>     //定义针对不支持的框架的用户的替代内容 <noscript>     //定义针对不支持客户端脚本的用户的替代内容 <ol>        //定义有序列表, <output>     //定义输出的一些类型 <pre>       //预格式标签 <section>      //部分段落标签 <table>       //表格 <tbody>     //表格主内容 <td>         //表格列 <tfoot>      //脚注标签 <th>       //表格表头标签 <thead>      //表格表头内容标签 <time>     //日期标签 <tr>      //表格行标签 <ul>       //无序列表标签

    (二)行级元素

    1、行级元素的特征

    (1)可以与其他元素共用一行,不必另起一行。

    (2)行级元素的高度,宽度,顶部,底部的边距不能设置。

    (3)元素的宽度就是它包含的文字图片的宽度,不可改变。

    (4)行内元素对应的属性为display :inline

    2、常见的行级元素

    <a> <abbr> //缩写标签 
    <acronym>//定义只取首字母的缩写 
    <b>//加粗 
    <bdo>//文字方向
    <big>//大号文本 
    <br>//简单的折行 
    <button>//按钮 
    <cite>//引用
    <code> //代码标签 
    <command> //命令按钮 
    <dfn> //项目描述标签,尽量少用 
    <del> //定义删除文本 
    <em> //定义强调文本 
    <i>//斜体 
    <img>//定义图像 
    <input>//定义输入 
    <kbd>//定义键盘 
    <label>//的标注
    <mark>//定义有记号的文本 
    <pregress>//定义任何类型的任务的进度 
    <q>//定义短应用 
    <samp> //计算机代码样本
    <select> //下拉列表 
    <small> //小号文本
    <span> //文档节 
    <strong> //强调文本标签 
    <sub> //定义下标文本 
    <sup>//上标文本
    <textarea> //文本框 

    (三)行级元素和块级元素的相互转换

    //块级元素===>行级元素
    display:inline 
    //将行级元素===>块级元素。 display:block
    //将元素设置为块-行级元素。 display:inline-block
  • 相关阅读:
    PCB封装分配
    1.26-CAD异形封装的制作
    1.40-CAE封装6个实例单门制作
    简单的URL解析
    冒泡排序和简单的递归
    作用域的提升
    数组的去重,以及随机一个验证码
    数组和字符串的相互转换。
    substring,substr,和slice的区别详解。
    去除Input输入框中边框的方式
  • 原文地址:https://www.cnblogs.com/Tanghongchang/p/6709423.html
Copyright © 2011-2022 走看看