HTML-02-常用标签演示 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>常用HTML块级标签</title>
  6     </head>
  7     <body>
  8         <!--块级元素标签-->
  9             <!--标题标签-->
 10                    <!--块级元素，独占一行，有默认样式-->
 11                    <h1>一级标题</h1>
 12                    <h2>二级标题</h2>
 13                    <h3>三级标题</h3>
 14                    <h4>四级标题</h4>
 15                    <h5>五级标题</h5>
 16                    <h6>六级标题</h6>
 17             <!--段落标签-->
 18                    <!--块级元素，独占一行，有默认样式-->
 19                    <p>块级元素，独占一行，有默认样式</p>
 20             <!--换行标签-->
 21                    <!--强制换行，单标签-->
 22                    <br />
 23             <!--列表标签-->
 24                 <!--有默认样式，独占一行-->
 25                 <!--type属性用于设置列表项序列样式-->
 26                    <!--无序列表-->
 27                    <ul type="square">
 28                        <li>列表项一</li>
 29                        <li>列表项二</li>
 30                        <li>列表项三</li>
 31                    </ul>
 32                    <!--有序列表-->
 33                    <!--start属性用于设置列表项从第几个标记开始-->
 34                    <ol type="A" start="2">
 35                        <li>列表项</li>
 36                        <li>列表项</li>
 37                        <li>列表项</li>
 38                    </ol>
 39                    <!--自定义列表-->
 40                    <dl>
 41                        <dt>标题</dt>
 42                        <dd>列表项一</dd>
 43                        <dd>列表项二</dd>
 44                    </dl>
 45             <!--表格标签-->
 46                 <!--border边框属性-->
 47                 <!--cellpadding内容距离表框的距离-->
 48                 <!--cellspacing单元格间的距离-->
 49                 <!--rowspan垂直合并,设置单元格占用的竖直方向的单元格数量-->
 50                 <!--colspan水平合并,设置单元格占用的水平方向的单元格数量-->
 51                 <!--align内容水平对齐方式-->
 52                 <!--valign内容垂直对齐方式-->
 53                 <table border="5px" cellspacing="0" cellpadding="20px" width="500px" height="350px" ><!--声明表格-->
 54                     <tr><!--行-->
 55                         <th colspan="4">Header</th><!--表头-->
 56                     </tr>
 57                     <tr align="center">
 58                         <td rowspan="2">Datatitle</td><!--列-->
 59                         <td>Data</td><!--列-->
 60                         <td>Data</td><!--列-->
 61                         <td  align="right" valign="top">Data</td><!--列-->
 62                     </tr>
 63                     <tr align="center">
 64                         <td align="left" valign="bottom">Data</td><!--列-->
 65                         <td>Data</td><!--列-->
 66                         <td>Data</td><!--列-->
 67                     </tr>
 68                 </table>
 69             <!--水平分割线标签-->
 70                 <hr />
 71             <!--div 区块标签，没有默认样式-->
 72             <div>这是div标签，一般配合CSS使用，划定一块区域，很常用的标签</div>
 73             
 74             
 75         <!--行内元素标签-->
 76             <!--链接标签-->
 77                 <!--herf属性用于填写跳转目标页面的网址-->
 78                 <!--target属性设置新打开页面跳转方式-->
 79                 <!--路径问题-->
 80                     <!--相对路径-->
 81                         <!--./--><!--表示当前目录-->
 82                         <!--../--><!--表示上一级目录-->
 83                     <!--绝对路径-->
 84                         <!--C:\users\admin\Desktop\html常用标签.html-->
 85                 <a href="https://www.baidu.com" target="_blank">链接a标签</a>
 86                 <br />
 87             <!--图片标签-->
 88                 <!--单标签-->
 89                 <!--src属性用于填写图片地址-->
 90                 <!--alt属性用于图片加载失败时的替代文字-->
 91                 <!--title属性用于鼠标移动到图片上时的显示解释文字-->
 92                 <!--width、height设置图片宽度和高度，一般只给图片设置一个量，因为这样能保持图片的原比例-->
 93                 <img src="http://t-1.tuzhan.com/cad992696923/c-1/l/2012/12/12/07/457ae21d310a43149dab684aa1557b85.jpg" alt="这是一张图片" title="纸箱人" width="300px" height="200px"/>
 94                 <br />
 95                 
 96             <!--文本标签-->
 97                 <b>b标签加粗</b><br />
 98                 <i>i标签倾斜</i><br />
 99                 <strong>strong标签加粗</strong><br />
100                 <em>em倾斜</em><br />
101                 <span style="color: darkgreen;">span标签为无语义的行内元素，一般和css配合使用，来设置文本中的一部分内容</span>
102             <!--表单标签-->
103                 <form action="" method="" enctype="multipart/form-data">
104                     <!--action为提交地址-->
105                          <!--get提交：通过url地址方式提交，不安全，能在url地址中看得见，传输数据有大小限制，是默认提交方式-->
106                          <!--post提交：在url地址中是看不到的，相对安全，数据传输没有具体的大小限制，建议提交方式-->
107                     <!--method为提交方式-->
108                     <!--enctype属性用于表单中有文件上传必须添加这个属性，属性值为"multipart/form-data"，用于转码-->
109                     <!--表单控件
110                         type:指定文本框类型，（普通文本，密码框，单选框，多选框）
111                     必须填写name属性作为数据的键-->
112                     <!--name:1234-->
113                     <!--普通文本输入框-->
114                     用户名：<input type="text" name="username" value="" placeholder="请输入用户名"/><br />
115                     
116                     <!--密码输入框-->
117                     密码：<input type="password" name="password"/><br />
118                     
119                     <!--单选框-->
120                     <!--name属性必须相同-->
121                     性别：<input type="radio" name="sex" value="1" />男
122                           <input type="radio" name="sex" value="0" />女<br />
123                           
124                     <!--多选框-->
125                     <!--name属性必须相同-->
126                     <!--value属性不同-->
127                     爱好：<input type="checkbox" name="love[]" value="1"/>篮球
128                           <input type="checkbox" name="love[]" value="2"/>足球
129                           <input type="checkbox" name="love[]" value="3" checked/>乒乓球<br />
130                           
131                     <!--下拉框-->
132                     学历：<select name="xl">
133                            <option value ="0">小学</option>
134                            <option value ="1">初中</option>
135                            <option value ="2">高中</option>
136                     </select><br />
137                     
138                     <!--文件上传选框-->
139                     请选择上传文件：<input type="file" name="file"/><br />
140                     
141                     <!--文本域-->
142                     <span >请输入个人信息：</span><textarea name="" id="" cols="30" rows="5" readonly=""></textarea><br />
143                     
144                     <!--按钮-->
145                     <input type="submit" value="确定"/>
146                     <button>确定</button>
147                     <input type="reset" value="重置" disabled=""/>
148                     
149                     <!--隐藏域-->
150                     <!--不需要用户查看和填写的信息-->
151                     <input type="hidden" name="" id="" value="" />
152                     
153                 </form>
154     </body>
155 </html>
posted @ 2019-07-21 18:22  我只是一个码农  阅读(217)  评论(0)    收藏  举报