html标签及分类,css样式

最新推荐文章于 2024-06-13 23:29:27 发布

不友好

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量341

点赞数 2

本文链接：https://blog.csdn.net/weixin_44916019/article/details/89322537

版权

标签分类

1.按照闭合：带结尾的单闭合；
2.按照换行: 不换行为行级标签，换行为块级标9签；

各种标签

1.h标签有加粗，由大到小，自带换行作用；

<h1>html</h1>
<h2>html<h2>
<h3>html</h3>

2.b标签格式化标签由上到下加粗；

<b>html</b>
<b>html</b>

3.i标签斜体为行级标签；

<i>html</i>

4.u标签下划线标签；

<u>html</u>

del标签删除线标签；

<del>$200</del>

sup标签上下标标签；

3<sup>2</sup>=9
H<sup>2</sup>O

type li 标签有序无序；
span标签文字标签；

<span>我的html</span>
<span>我的html</span>
<span>我的html</span>
<span>我的html</span>

P标签段落标签；

<p>html</p>\
<p>html</p>

img src标签图像标签建议使用相对路径；
超级链接a链接 a href；
12.div区块框架元素为表单元素标签；
name 名字 value 值 placeholder 提示 maxlength 最大输入长度；
13.submit 提交按钮和form一起使用；
14.select 下拉菜单 multiple变成多选；

<select>
    <option>—请选择—</option>-->
    <option>—宝鸡—</option>-->
    <option selected>—西安—</option>-->
    <option>—延安—</option>-->
</select>-->

表单元素 form action 提后天的服务器路径；
table：表格 tr：行 td：列；
属性：border；
文本对齐方式：align;
合边线：cellspacing;

伪类

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>

      /* 访问之前*/
      a:link{
          color: deeppink;
      }
      /*访问过的伪类*/
      a:visited{
          color: yellow;
      }
      /*鼠标悬停伪类*/
      a:hover{
            color: red;
        }
      /*鼠标激活伪类*/
      a:active{
          color: green;
      }

  </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

元素的水平浮动

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
      .parent {
          width: 200px;
          border: 1px solid black;
          /*height: 100px;*/
          /*overflow: hidden;/!*超出部分隐藏*!/*/
      }

      .block {
          width: 100px;
          height: 100px;
          border: 1px solid red;
          box-sizing: border-box;
          float: right;
      }
  </style>
</head>
<body>
<!--
<div class="parent">
  <div class="block">
      1
  </div>
  <div class="block">
      2
  </div>
  <div style="clear: both"></div>
</div>
</body>
</html>

元素的相对定位和固定定位搭配使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .par{
            /*margin: 0 auto;*/
            position: relative;
            margin: auto;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .child{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .fix{
            position: fixed;
            width: 30px;
            height: 400px;
            right: 0;
            top: 0;
            background-color: silver;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child"></div>
    <div class="fix"></div>
</div>
</body>
</html>

元素的转化

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style>
        .par{
           font-size: 0;
       }
       .block{
           display: inline-block;
           width: 200px;
           height: 200px;
           background-color: red;
           font-size: 14px;
       }
       .block1{
           display: inline-block;
           width: 200px;
           height: 200px;
           background-color: black;
           font-size: 14px;
       }
       span{
           display:block;
           width: 200px;
           height: 200px;
       }
   </style>
</head>
<body>
<div class="par">
   <div class="block">111</div>
   <div class="block1">1111</div>
</div>

<span>
   我是span
</span>
</body>
</html>

不友好

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html标签及分类,css样式

标签分类1.按照闭合：带结尾的单闭合；2.按照换行: 不换行为行级标签，换行为块级标9签；各种标签1.h标签有加粗，由大到小，自带换行作用；2.b标签格式化标签由上到下加粗；3.i标签斜体为行级标签；4.u标签下划线标签；5.del标签删除线标签；6.sup标签上下标标签；7. type li标签有序无序；8. span标签文字标签；9.P标签段落...
复制链接

扫一扫