热搜：NVER node 开发 php

HTML文档 html,html5,css,css3_html/css_WEB-ITnose

2024-11-10 16:40:01
HTML文档 html,html5,css,css3_html/css_WEB-ITnose

HTML 各种标签及简单应用：

http://www.w3school.com.cn

 1 
 2 
 3 
横线  4 
   保留了标签内的空格和换行 5 Computer code 6 
 7 Keyboard input 8 
 9 Teletype text10 
11 Sample text12 
13 Computer variable14 
15 地址16 显示缩略词etc.17 WWW18   19 删除  20 插入  21  加粗  22  加重语气 23 斜体  24 小字体  25 加引号26 
长引用 27    链接在新的窗口打开 28   %20  代替空格号
   
   
    
 1  空格  2 标题  3    4 
 内边距   5  
 外边距 6 bgcolor="red"  background=""   7  
  • 左边有序号从50开始   10 
    11 
    12 13 14 15 19 22 
    23 ddd24 
     使表单周围有框25 重置26 27 28     29     30     31 实现在一个页面内垂直展示三个页面内容?------网页32 33     34     35         html5不支持了36 实现在一个页面内水平展示三个页面内容37 内嵌的38 里面的显示不支持Js的文本39 43 44 45     
       
     
       
        
     1  5 23 24 25 26 27   28 29 30 移动图片到另一个盒子里  ---拖放  （event 是固定的变量）31 32 44 45 46 显示坐标47 48 画画49 50 51 52 61 62 绘制圆、渐变、把一幅图像放置到画布上63 内联 SVG
       
       
    新元素HTML5等标签及事件
       
        
      1 ?    email  2 ?    url  3 ?    number  4 ?    range  5 ?    Date pickers (date, month, week, time, datetime, datetime-local)  6 ?    search  7 ?    color  8   9  10 ?    date - 选取日、月、年 11 ?    month - 选取月、年 12 ?    week - 选取周和年 13 ?    time - 选取时间（小时和分钟） 14 ?    datetime - 选取时间、日、月、年（UTC 时间） 15 ?    datetime-local - 选取时间、日、月、年（本地时间） 16 Date:  17  18  19 
     20 Webpage:  21  22      26  27  28  29  30 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 31  32  33  41  42  43 
    使用 output 元素的简易计算器：
     44 
     45   + 46   = 47   48  49 User name:  50 自动获得焦点 51 
     52 First name: 53  54  55 Last name:  56 form 属性规定输入域所属的一个或多个表单。 57  58  59 
     60 E-mail: 
     61  62 
     63  64 
     65  66 
     67  68 创建不同的提交按钮 69  70 height 和 width 属性只适用于 image 类型的  标签 71  72 ----选择文件 73  74 
    让不验证 75  76 Country code:    插入正则表达式 78 placeholder 提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失： 79  80 required="required"  （不能为空） 81   84 your browser does not support the canvas tag  85  86  94  95  标签 96                   flash 97 标记文章 98 
    头 99 中间放连接100 
    101 102 您的浏览器不支持 audio 标签。103 声音104 视频105 106 事件107 108 109 onblur110 onfocus 当元素失去焦点111 onchange 112 onselect113 onsubmit     提交表单时114 onclick115 onbclick  双击116  117 http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布
       
       
    CSS各种属性及应用；
       
        
     1 body { 2      3 } 4  5 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响： 6 body  7   { 8   background-image:url(/i/eg_bg_02.gif); 9   background-repeat:no-repeat;10   background-attachment:fixed11   }12 p {text-indent: -5em; padding-left: 5em;}首行缩进13 justify 水平对齐  text-align 14 a {text-decoration: none;}格式下划线取消啥的15 16 a:link {color:#FF0000;}        /* 未被访问的链接 */17 a:visited {color:#00FF00;}    /* 已被访问的链接 */18 a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */19 a:active {color:#0000FF;}    /* 正在被点击的链接 */20  21 ?    Serif 字体22 ?    Sans-serif 字体23 ?    Monospace 字体24 ?    Cursive 字体25 ?    Fantasy 字体26 border-style:dotted solid double dashed; 27 上边框是点状28 右边框是实线29 下边框是双线30 左边框是虚线31 body {font-family: sans-serif;}---字体32 33 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。34 35 ul {list-style-type : square}36 ul li {list-style-image : url(xxx.gif)}37 li {list-style : url(example.gif) square inside}列表样式38 img[alt] {border: 5px solid red;} 带有 alt 属性的图像应用样式39 40 *[lang|="en"] {color: red;}41 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素42   43 ul44 {45 list-style-type:none;46 margin:0;47 padding:0;48 }49 li50 {51 display:inline;         52 }                                ---块
       
       
    CSS3
       
        
      1 border-radius:25px;  2 -moz-border-radius:25px; /* 老的 Firefox */  3  加圆角  4   5 box-shadow: 10px 10px 5px #888888;         加阴影 11 div 12 { 13 border:15px solid transparent; 14 width:300px; 15 padding:10px 20px; 16 } 17  18 #round 19 { 20 -moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */ 21 -webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */ 22 -o-border-image:url(/i/border.png) 30 30 round;        /* Opera */ 23 border-image:url(/i/border.png) 30 30 round; 24 } 25  26 #stretch 27 { 28 -moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */ 29 -webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */ 30 -o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */ 31 border-image:url(/i/border.png) 30 30 stretch; 32 } 33  34  35  36  37 在这里，图片铺满整个边框。 38 
     39 在这里，图片被拉伸以填充该区域。42  43 background-size:63px 100px;   背景图片缩小 44  45 background-position:left; 46 background-origin:border-box; 47 background-origin:content-box;    背景定位 48 background-clip:content-box;   颜色背景定位 49 div.boxx 50 { 51 box-sizing:border-box; 52   53 width:50%; 54 border:1em solid red; 55 float:left; 56 } 59 text-shadow: 5px 5px 5px #FF0000; 文本阴影 60  61 允许对长单词进行拆分，并换行到下一行： 62 p {word-wrap:break-word;} 63  64 font-family:myFirstFont; 定义字体 65 font-weight:bold;  66  67 transform:rotate(9deg);   旋转   68 transform:translate(50px,100px);  移动 69 transform:scale(2,4); 横着放大2倍  竖着放大4倍 70 transform: skew(30deg,20deg);   水平旋转 垂直旋转 71  72 transform-origin:20% 80%;  定位 73   74 transition:width  10s; 75 div:hover 76 { 77 width:1000px; 78 }   渐变效果 79  80  81 .newspaper 82 { 83 -moz-column-count:3; /* Firefox */ 84 -webkit-column-count:3; /* Safari and Chrome */ 85 column-count:3; 86 }                                  三列 87 规定列之间 40 像素的间隔： 88 div 89 { 90 -moz-column-gap:40px;        /* Firefox */ 91 -webkit-column-gap:40px;    /* Safari 和 Chrome */ 92 column-gap:40px; 93 } 94 规定列之间的宽度、样式和颜色规则： 95 div 96 { 97 -moz-column-rule:3px outset #ff0000;    /* Firefox */ 98 -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */ 99 column-rule:3px outset #ff0000;100 }        101 column-span:all;  横跨所有列102 103 104 规定 div 元素可由用户调整大小：105 div106 {107 resize:both;108 overflow:auto;109 }110 111 text-shadow: 5px 5px 5px #FF0000;  水平阴影、垂直阴影、模糊距离，以及阴影的颜色：112 允许对长单词进行拆分，并换行到下一行：113 p {word-wrap:break-word;}
          
    学习心得，可供参考；
        
      
      
       
    

       
       
       
       
       
     
      
      
    
      
      
    
      
    
        
    本文是由用户编写整理，所有内容的版权归原作者所有。如果侵犯了您的权益，请联系我删除
    
      
    
    
    
           
      
    
                        
      
    
                
    
  
  
    
      
    
        
    
          
    相关推荐
    
        
    
        
      
    
    
    
  


    
  
    
      
    
        
    Copyright © 2009 mimiwuqi.com・ 晋ICP备2021011283号  

    
      
    
  
    
  
    
    TRUSTe Privacy Certification	
    可信网站
    网站安全
    服务时间
  
    

    
  
    反馈
    
  
    
  
    微信联系