Html简单命令_html命令大全-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52939514/article/details/136514412

简单命令（代码形式）：

HTML主要分三个层次
1.块标签如div可以设置宽高等
2.行标签如span不能设置宽高，水平排列
3.行内块标签如img可以设置宽高

<!--块标签（独占一行）-->
<div></div>
<!--1.1标题标签 -->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<!-- 1.2段落标签 -->
<p>hssggfsgf</p>

<!-- 行标签（水平排列,所以不能设置宽高） -->
<span>保<sup>[上标]</sup>皇</span>
<span>保<sub>[下标]</sub>皇</span>
<!-- 超链接标签 -->
<a href="https://www.baidu.com/">跳转</a>
<b>加粗</b>
<strong>加粗</strong>
<i>倾斜</i>
<em>倾斜</em>
<del>删除</del>
<!-- 行内块标签 -->
<img src="C:\Users\20373\Desktop\images\1.jpg" alt="加载失败"><br>
<!-- 表单标签 -->
<!-- type 文本类型输入框 placeholder框内提示语 -->
<!-- br 换行 -->
<!-- button 按钮 -->
<!-- radio 单选按钮 checkbox 复选框  name要保持一致 -->
<input type="text" placeholder="请输入用户名"><br>
<input type="password" placeholder="请输入密码"><br>
<input type="radio" name="sex"id="">男
<input type="radio" name="sex"id="">女<br>
<input type="checkbox">1
<input type="checkbox">2
<input type="checkbox">3<br>

<button>登录</button>

简单样式

<style>
         div{
             /* 背景颜色  颜色写法：1.单词 2.rgb 3.16进制0-9 a-f*/
             background-color: rgb(59, 236, 5);
             /* 字体颜色 */
             color: rgb(22, 129, 190);
            /*字体大小  */
            font-size:25px;
            /* border 边框  宽度 样式 颜色 */
            border:1px solid rgb(196, 12, 165);
            width: 300px;
            height: 300px;
            /* 圆角 */
            border-radius: 50%;
            /* 文本水平对齐 */
            text-align: center;
            /* 行高与文字高度相同时，文字竖直对齐（行数多，行间距也变大，所以可根据行数进行对齐（行高=总高/行数）） */
            line-height: 300px;
         }
  /* id唯一标识某块，在样式（style）里用#前缀*/
        #b{
            color: rosybrown;
        
         }
         img{
             width: 300px;
         }
    </style>
</head>
<body>
    <div >aaa</div>
    <span id="b">bbb</span>
    <span id="c">ccc</span><br>
    <img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2F240228%2Fnews%2Fc84410d27c7ab8b06f2afeafad2f954c6432.jpeg%40c_1%2Cw_3240%2Ch_2160%2Cx_300%2Cy_0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1709658000&t=df274285f92e2712e4721205aff8c63d" alt="">
</body>

实现块标签的水平排列（方法之一）

<div id="box">
    <div class="mi">

将div块视为一个盒子在盒子内部再进行分块

<style>
#box{
width: 1000px;
height: 600px;
background-color: rgba(233, 227, 227, 0.938);
}
/*class标注某块时，并不唯一，可多次调用，<style>里前面用.前缀*/
.mi{
    width: 230px;
    height: 280px;
    background-color: white;
    display: inline-block;
    text-align: center;
    margin: 5px;
}
</style>