HTML常用标签(自用，可能不严谨，勿怪)

Posted 2020-07-28 MacoLee

html标签中‘<’和‘>’默认被占用，如果想要显示出这些符号，就需要使用特殊字符来实现
‘<‘：使用&lt实现
‘>‘：使用&gt实现
空格：html中再多的空格默认也只显示一个，要想显示多个空格，可以使用&nbsp实现，一个&nbsp代表一个空格
<div>&lt;div&gt;&nbsp</div>

换行：<br/>

链接：target=‘_blank‘表示使用新页面打开链接时

<a href=‘http://www.baidu.com‘ target=‘_blank‘>百度</a>


链接除了可以跳转到外部地址外，还可以在页面内进行跳转
跳转到指定id处，使用#id名
跳转到指定class处，使用.class名

目录：
<div>
   <a href=‘#id1‘>第一章</a>
   <a href=‘#id2‘>第二章</a>
   <a href=‘#id3‘>第三章</a>
</div>
内容
<div id=‘id1‘>第一章内容</div>
<div id=‘id2‘>第二章内容</div>
<div id=‘id3‘>第三章内容</div>


标题标签：h1-h6
<h1>ddd</h1>
<h6>ddd</h6>


选择框：selected=‘selected‘表示默认选中的选项

<select>
   <option value=‘1‘>上海</option>
   <option value=‘2‘>北京</option>
   <option value=‘3‘ selected=‘selected‘>广州</option>
</select>

size：设置下拉框大下
<select size=‘4‘>
   <option>上海</option>
   <option>北京</option>
   <option>广州</option>
</select>

多选：multiple=‘multiple‘

<select size=‘3‘ multiple=‘multiple‘>
   <option>上海</option>
   <option>北京</option>
   <option>广州</option>
</select>

选项分组：<optgroup label=‘xxx‘></optgroup>

<select>
   <optgroup label=‘湖北省‘>
      <option>武汉</option>
      <option>襄阳</option>
      <option>宜昌</option>
   </optgroup>
   <optgroup label=‘广东省‘>
      <option>广州</option>
      <option>深圳</option>
      <option>东莞</option>
   </optgroup>
</select>





文本框：
<input type=‘text‘ maxlength=‘3‘ />

密码框：
<input type=‘password‘ />

复选框：
<input type=‘checkbox‘ />
<input type=‘checkbox‘ />
<input type=‘checkbox‘ />

单选框:
<input type=‘radio‘ name=‘sex‘ />
<input type=‘radio‘ name=‘sex‘ />
<input type=‘radio‘ name=‘sex‘ />

按钮：
<input type=‘button‘ value=‘按钮‘ />

提交：
<input type=‘submit‘ />
<br/>

<input type=‘file‘ />

多行文本框：
<textarea></textarea>

表单：
<form action=‘/‘ method=‘POST‘>
   Name:&nbsp;&nbsp;<input name=‘username‘ /><br/>
   Password:<input name=‘password‘ type=‘password‘ /><br/>
   <input type=‘submit‘ />
</form>


点击‘姓名‘可以使文本框获得光标：

<label for=‘name‘>姓名：<input id=‘name‘ /></label>


无序列表：
<ul>
   <li>hello</li>
   <li>oh</li>
   <li>god</li>
</ul>

有序列表：
<ol>
   <li>apple</li>
   <li>bike</li>
   <li>shoes</li>
</ol>


表格：tr：行  td：列  th：标题
<table border=‘1‘>
   <tr>
      <th>IP</th>
      <th>IDC</th>
      <th>Status</th>
   </tr>
   
   <tr>
      <td>192.168.1.2</td>
      <td>北京</td>
      <td>Online</td>
   </tr>
   <tr>
      <td>192.168.1.2</td>
      <td>北京</td>
      <td>Online</td>
   </tr>
</table>

表格：border：边框  colspan：合并列    rowspan：合并行
<table border=‘1‘>
   <tr>
      <th>IP</th>
      <th>IDC</th>
      <th>Status</th>
   </tr>
   
   <tr>
      <td colspan=‘2‘>192.168.1.2</td>
      <td rowspan=‘2‘>Online</td>
   </tr>
   <tr>
      <td>192.168.1.2</td>
      <td>北京</td>
   </tr>
</table>

将表单内容的一部分打包，生成一组相关表单的字段：
<fieldset>
   <legend>登录</legend>
   <p>用户名：</p>
   <p>密码：</p>
</fieldset>