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:usersadminDesktophtml常用标签.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>