简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

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

WBOY
Release： 2016-06-24 11:47:09
Original
1824 people have browsed it

HTML 各种标签及简单应用：

http://www.w3school.com.cn
Copy after login 

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 
         Copy after login
        

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
        
    
         Copy after login
        
    
       
       
    
       
    
       
    
       
    
        
    1  5 23 

    24 25 26 
    27 HTML文档 html,html5,css,css3_html/css_WEB-ITnose28 
    29 
    30 移动图片到另一个盒子里 ---拖放 （event 是固定的变量）31 32 44 
    45 
    46 显示坐标47 48 画画49 50 51 52 61 62 绘制圆、渐变、把一幅图像放置到画布上63 内联 SVG
    
        
    
         Copy after login
        
    
       
    
       
    
       
    新元素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 声音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 画布
    
        
    
         Copy after login
        
    
       
    
       
    
       
    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 } ---块
    
        
    
         Copy after login
        
    
       
    
       
    
       
    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;}
    
        
    
         Copy after login
        
    
       
    
       
    学习心得，可供参考；
    
       
    
       
    
       
    
       
    
       
    
       
    
       
    
       
    
      
     
     
    
      
    
       Related labels：
       
    
        css
        css3
        html5
       
    
      
    
      
    
       source：php.cn
      
    
     
    
     
    
      Previous article：Android页面的切换动画代码实现_html/css_WEB-ITnose
      Next article：HTML+CSS_html/css_WEB-ITnose
     
    
     
    
      
    
       Statement of this Website
      
    
      
    
       The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      
    
     
    
     
    
     
    
      
    
       Latest Articles by Author
      
    
      
     
    
     
    
      
    
       Latest Issues
      
    
      
    
       
    
        
    
         Best way to preload route data before accessing the route.
         Before rendering the page for a given route, I want to first get the necessary data synchr...
         
    
          
    
           From 2023-11-17 14:54:42
          
    
          
    
           
    
            0
           
    
           
    
            2
           
    
           
    
            379
           
    
          
    
         
    
        
    
       
    
       
    
       
    
        
    
         Module is not defined in Vue project
         I just created a new Vue application by running npmini tvue@latest as specified in the off...
         
    
          
    
           From 2023-11-17 12:38:53
          
    
          
    
           
    
            0
           
    
           
    
            2
           
    
           
    
            394
           
    
          
    
         
    
        
    
       
    
       
    
       
    
        
    
         Nuxt.js SSG (Static Site Generator) Get API Data
         When building a project using a static site generator, I understand that documentation cre...
         
    
          
    
           From 2023-11-16 21:36:07
          
    
          
    
           
    
            0
           
    
           
    
            1
           
    
           
    
            176
           
    
          
    
         
    
        
    
       
    
       
    
       
    
        
    
         Catching Guzzle exceptions
         I'm trying to catch exceptions in a set of tests running on an API I'm developing, and I'm...
         
    
          
    
           From 2023-11-16 14:36:03
          
    
          
    
           
    
            0
           
    
           
    
            12
           
    
           
    
            290
           
    
          
    
         
    
        
    
       
    
       
    
       
    
        
    
         Leverage VueJS components in PHP
         I want to mix basic HTML generated by Php and VueJS components without having to use VueJS...
         
    
          
    
           From 2023-11-11 00:01:44
          
    
          
    
           
    
            0
           
    
           
    
            2
           
    
           
    
            288
           
    
          
    
         
    
        
    
       
    
       
    
      
    
     
    
     
    
      
    
       
    
        Related Topics
       
    
       More>
      
    
      
    
       
      
    
     
    
    
   
   
    
    
    
     
    
      Popular Recommendations
     
    
     
    
      
     
    
    
    
    
    
     
    
      
    
       Popular Tutorials
      
    
      More>
     
    
     
    
      
    
       
    
        Related Tutorials
        
    
       
    
       
    
        Popular Recommendations
        
    
       
    
       
    
        Latest courses
        
    
       
    
      
    
      
      
      
     
    
    
    
    
    
     
    
      
    
       Latest Downloads
      
    
      More>
     
    
     
    
      
    
       
    
        Web Effects
        
    
       
    
       
    
        Website Source Code
        
    
       
    
       
    
        Website Materials
        
    
       
    
       
    
        Front End Template
        
    
       
    
      
    
      
      
      
      
     
    
    
    
   
    
  
  
    
   
    
    
    
     
    
      
    
       
    
        About us
        Disclaimer
        Sitemap
        
    
       
    
       
    
        php.cn：Public welfare online PHP training，Help PHP learners grow quickly！