HTML元素与自定义标签-优快云博客

　　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>