Html标签的分类

最新推荐文章于 2024-08-16 17:54:29 发布

御裔宸

最新推荐文章于 2024-08-16 17:54:29 发布

阅读量352

点赞数

分类专栏： css知识点文章标签： HTML标签分类

本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79144432

版权

css知识点专栏收录该内容

25 篇文章 1 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
   charset= 
  "utf-8" 
   /> 
 
  < 
  meta 
   http-equiv= 
  "X-UA-Compatible" 
   content= 
  "IE=edge" 
  > 
 
  < 
  title 
  >Page Title 
  </ 
  title 
  > 
 
  < 
  meta 
   name= 
  "viewport" 
   content= 
  "width=device-width, initial-scale=1" 
  > 
 
  < 
  link 
   rel= 
  "stylesheet" 
   type= 
  "text/css" 
   media= 
  "screen" 
   href= 
  "main.css" 
   /> 
 
  < 
  script 
  src= 
  "main.js" 
  > 
  < 
  / 
  script 
  > 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
  p{ 
 
  width: 
  800px; 
 
  height: 
  100px; 
 
  background-color: 
   aqua; 
 
   } 
 
  div{ 
 
  width: 
  300px; 
 
  height: 
   100px; 
 
  background-color: 
   green; 
 
   } 
 
  span{ 
 
  background-color: 
   teal; 
 
   } 
 
  img{ 
 
  width: 
  300px; 
 
  height: 
  300px; 
 
   } 
 
  input{ 
 
  width: 
  300px; 
 
  height: 
  30px; 
 
   } 
 
  /* Display: inline           将元素转化为行内元素 
 
  Display：inline-block    将元素转化行内块元素 
 
    Display: block               将元素转化为块元素 */ 
 
  a{ 
 
  width: 
   300px; 
 
  height: 
   300px; 
 
  background-color: 
   red; 
 
  /* display: inline-block; */ 
 
  /* 将行内元素转化为行内块元素 */ 
 
  display: 
   block; 
 
  /* 将行内元素转化为块元素 */ 
 
                } 
 
  div{ 
 
  width: 
   300px; 
 
  height: 
   300px; 
 
  background-color: 
   pink; 
 
  /* 将行内元素转化为行内元素 因为行内元素不能设置宽度与高度所以不起作用 */ 
 
  display: 
   inline; 
 
                } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  p 
  >段落标签 
 
   典型代表： 
 
   div,p,li,h1... 
  < 
  br 
  > 
 
   特点： 
 
          ☞元素自己独占一行显示（与宽度无关） 
  < 
  br 
  > 
 
          ☞可以设置宽度和高度 
  < 
  br 
  > 
 
         ☞当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。 
 
  </ 
  p 
  > 
 
  < 
  div 
  >div标签 
 
  < 
  p 
  > 
 
  < 
  span 
  >块级元 
  </ 
  span 
  > 
 
  </ 
  p 
  > 
 
  </ 
  div 
  > 
 
  < 
  br 
  > 
 
  < 
  br 
  > 
 
  < 
  p 
  > 
  < 
  span 
  > 
 
   行标签 
 
   行内元素 
 
   典型代表: 
 
   Span， a, font, strong... 
 
   特点： 
  < 
  br 
  >     
 
   ☞元素在一行上显示 
  < 
  br 
  > 
 
   ☞不能直接设置宽度和高度 
 
  </ 
  span 
  > 
 
  </ 
  p 
  > 
 
  < 
  strong 
  >中国 
  </ 
  strong 
  > 
 
  < 
  a 
   href= 
  "https://www.baidu.com" 
  >百度 
  </ 
  a 
  > 
 
  < 
  br 
  > 
 
  < 
  br 
  > 
 
  < 
  p 
  > ３.3  行内块元素 
 
        典型代表: 
 
   Image, input(表单控件) 
 
   特点： 
  < 
  br 
  > 
 
   ☞ 元素在一行上显示 
  < 
  br 
  > 
 
   ☞ 可以设置宽度和高度 
 
  < 
  br 
  > 
 
  </ 
  p 
  > 
 
  < 
  img 
   src= 
  "D:\html\img\TIM图片20180116211527.jpg" 
  alt= 
  "女孩" 
  > 
 
  < 
  input 
  type= 
  "text" 
  > 
 
  < 
  input 
  type= 
  "button" 
  value= 
  "提交" 
  > 
 
  < 
  br 
  > 
 
  < 
  br 
  > 
 
  < 
  br 
  > 
 
  <!-- Display: inline             将元素转化为行内元素 
 
  Display：inline-block     将元素转化行内块元素 
 
  Display: block              将元素转化为块元素 --> 
 
  < 
  div 
  ></ 
  div 
  > 
 
  < 
  a 
   href= 
  "#" 
  >百度 
  </ 
  a 
  > 
 
  < 
  a 
   href= 
  "#" 
  >google 
  </ 
  a 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >