码迷,mamicode.com
首页 > Web开发 > 详细

HTML5之标签(一)

时间:2017-09-20 14:44:29      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:splay   create   tle   tar   水平   form   自动   使用   height   

  HTML标签分为块级元素和行内元素。

行内元素和块级元素区别

  1、块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化

  2、 块级元素可以设置 width, height属性;行内元素设置width,  height无效

  3、 块级元素可以设置margin 和 padding;行内元素的margin 和 padding在水平方向有效,竖直方向无效

  4、行内元素和块级元素转换,通过设置CSS的display值;

    a)转块级元素:display:block;

    b)转行内元素:display:inline;

    c)转为行块元素:display:inline-block;

块级元素

  div,p,form,ul,ol,li,dl,address,hr,table,section,blockquote,h1~h6,nav,header,footer ...

行级元素

  a,abbr,b,br,i,img,input,label,select,span,strong,textarea ...

自定义标签

  通过JavaScript可以自定义标签,可通过css设置样式、可兼容低版本浏览器。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <!-- 给自定义标签添加样式 -->
 7         <style>
 8             myElement{
 9                 color: #ff6900;
10             }
11         </style>
12     </head>
13     <body>
14         <!-- 使用自定义标签 -->
15         <myElement>这是自定义标签</myElement>
16         
17         <script>
18             // 自定义标签
19             document.createElement("myElement");
20             
21         </script>
22     </body>
23 </html>

 

HTML5之标签(一)

标签:splay   create   tle   tar   水平   form   自动   使用   height   

原文地址:http://www.cnblogs.com/iyunpeng/p/7543861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!