阅读 69

HTML常用标签

1. a标签

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

1.1 属性

  • target

    • 内置名字

      • _self在当前页面中打开超链接,默认值
      • _blank在新建页面中打开超链接
      • _top_parent用于配合iframe指定打开的窗口
    • 程序员的命名

      • window的name
      • iframe的name
  • href

    • 网址

    • 内部路径

    • 伪协议

      • 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
文章分类
前端
文章标签