HTML 常用标签

HTML (hypertext markup language)
html 负责结构

1.  表示空格
2. <div> 其中<是小于（less than）； >是大于（greater than）
3. <br> 表示换行
4. 有序列表

• type的值可以是 1, a, A, i(罗马数字), I。默认是阿拉伯数字。
• reversed="reversed" 属性倒序。
• start="2" 从第二个开始排序

<ol type="i" start="2">
  <li>胡萝北</li>
  <li>白萝北</li>
</ol>

5. 无序列表

• type的值可以是 circle
• 最常用的使用场景：导航栏

<ul type="circle">
  <li>夏目友人帐</li>
  <li>齐木楠雄的灾难</li>
</ul>

6. img 标签

• src="" 填图片的地址，可以是 网上url、 本地的绝对路径、 本地的相对路径
• alt="" 当图片展示出错时，展示文字信息。alt是图片占位符。
• title="" 图片提示符， 鼠标挪到图片上，会有提示信息。

<img src="cat.jpg" alt="这是猫猫" title="猫猫真可爱">

7. a 标签

• href即 hypertext reference
• target="_blank" 点击跳转时会去新窗口打开。 _self 是默认值。
• 常见使用场景：超链接； 锚点；打电话；协议限定符

<a href="https://www.baidu.com" target="_blank">www.baidu.com</a>
<a href="tel:13000000000">打电话</a>
<!-- 发邮件功能 -->
<a href="mailto:xxx@163.com">发邮件</a>
<!-- 协议限定符 -->
<a href="javascript:while(1){alert('让你手欠鸭');}">你点我试试呀</a>

8. form表单标签

• 能实现数据发送
• method 表发送数据的方式，有两个值 get 和 post
• action 表发送给谁，action中填的是发送给谁的地址

<style type="text/css">
  input {
    border: 1px solid #999;
  }
</style>
... ...
<form method="get" action="">
  <p>
    username: <input type="text" name="username">
  </p>
  <p>
    password: <input type="password" name="pwd">
  </p>
  <input type="submit" value="login">
</form>

单选框/ 复选框

• checked="checked" 表示默认选中
• name='xxx'表示分组
• value 表示值

<form method="get" action="">
  ... ...
  <!-- 单选框：name统一组；value表示各自对应的值 -->
  红 <input type="radio" name="star" value="red" checked="checked">
  绿 <input type="radio" name="star" value="green">
  蓝 <input type="radio" name="star" value="blue">
  ... ...
</form>

<!-- 复选框：name统一组；value表示各自对应的值 -->
  红 <input type="checkbox" name="star" value="red">
  绿 <input type="checkbox" name="star" value="green">
  蓝 <input type="checkbox" name="star" value="blue">

select标签：下拉菜单

<form method="get" action="">
  ... ...
  <select name="province">
    <option>Shanghai</option>
    <option>Beijing</option>
    <option>Chengdu</option>
  </select>
  <input type="submit">
</form>