HTML常用标签

1. a标签

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置，或者是跳转到邮箱或者电话等

1.1 属性

• target

  • 内置名字

    • _self在当前页面中打开超链接，默认值
    • _blank在新建页面中打开超链接
    • _top，_parent用于配合iframe指定打开的窗口

  • 程序员的命名

    • window的name
    • iframe的name

• href

  • 网址

    • baiduc.om
    • baidu.com
    • //baidu.com

  • 内部路径

  • 伪协议

    • javascript:代码;
    • mailto:邮箱
    • tel:手机号

  • id：href="#xxx"

• download

• ref=nooperner

<ul>
  <li><a href="https://www.baidu.com">Website</a></li>
    <li><a href="./index.html">Website</a></li>
  <li><a href="mailto:example@outlook.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

2. img标签

发出get请求，展示一张图片

2.1 属性

• src：属性指定的是外部图片的路径（路径规则和超链接是一样的）
• alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片

• width：图片的宽度（单位是像素）
• height ：图片的高度（单位是像素）

• 宽度和高度中如果只修改了一个，则另一个会等比例缩放

2.2 事件

• onload
• onerror

2.3 响应式

max-width:100%;

3.table标签

3.1 表格结构

• table

  • thead

    • tr

      • th

  • tbody

    • tr

      • td

  • tfooter

    • tr

      • td

3.2 表格属性

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td>女</td> <td>63</td>  </tr>
</table>

3.3 表头单元格标签th

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗

• 语法：

  • 只需用表头标签替代相应的单元格标签即可。

3.4 表格标题caption

• 定义和用法

<table>
   <caption>我是表格标题</caption>
</table>

• 注意：

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2. caption 标签必须紧随 table 标签之后。
3. 这个标签只存在 表格里面才有意义。你是风儿我是沙

3.5 合并单元格

3.5.1 合并单元格2种方式

• 跨行合并：rowspan="合并单元格的个数"
• 跨列合并：colspan="合并单元格的个数"

3.5.2 合并单元格顺序

合并的顺序我们按照 先上 后下 先左 后右 的顺序

跟我们以前学习汉字的书写顺序完全一致。

3.6 相关样式

• table-layout
• border-collapse
• border-spacing