HTML入门笔记2-常用标签

2019-10-04  本文已影响0人  苏wisdom

1 a 标签的用法

1.1 作用

<a href="https://wikipedia.org/"  target="_blank">维基百科</a>
<a href="https://www.example.com/">
  <img src="https://www.example.com/foo.jpg">
</a>

1.2 属性

2 img 标签的用法

2.1 作用

发送一个get请求,然后展示图片。它是单独使用的,没有闭合标签

<img src="foo.jpg">

2.2 属性

2.3 事件

2.4 响应式

网页在不同尺寸的设备上,都能产生良好的显示效果,叫做“响应式设计”(responsive web design)。如果想让图片在页面大小随意拖动的情况下都能占满,看到比例不变,需要在reset整个css之后,使用max-width:100%的统一配置。

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
img{
    max-width:100%
}

2.5 可替换元素

面试可能会考可替换元素

CSS 中,可替换元素replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。

3 table 标签的用法

3.1 作用

以表格的形式展示数据

<table>
  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>张三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
</table>

3.2 相关标签

3.3 相关CSS样式

屏幕快照 2019-10-04 下午8.34.56.png

实际测试代码如下

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      img {
        max-width: 100%;
      }
      table {
        width: 200px;
        border: 2px solid black;
        table-layout: auto;
        border-collapse: collapse;
        border-spacing: 0;
      }
      td,
      th {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div>电话:<a href="tel:15612345678">susu的手机</a></div>
    <div>邮箱:<a href="tel:15612345678">susu的邮箱</a></div>
    <div>
      百度:<a href="//baidu.com" target="_blank" rel="noopener">百度搜索</a>
    </div>

    <img src="xiaohei.jpg" alt="罗小黑" />

    <table>
      <caption>
        班级表
      </caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>班级</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>王五</td>
          <td>2班</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>1班</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总人数</th>
          <td>2</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

4 form 标签的用法

4.1 作用

发送get或者post请求,然后刷新页面

<form action="https://example.com/api" method="post">
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="提交">
</form>

4.2 属性

4.3 事件

5 <input>标签的用法

5.1 作用

<form>表单有关的接收用户的输入的标签

5.2 属性

5.3 事件

5.4 验证器

必填required

<input id="POST-name" type="text" name="user" required>

6 <textarea>标签的用法

6.1 作用

多行的文本框

<textarea id="story" name="story"
          style="resize:none; width:50%; height:300px;">
这是一个很长的故事。
</textarea>

6.2 属性

7 <select>标签的用法

7.1 作用

用于生成一个下拉菜单

<label for="pet-select">宠物:</label>

<select id="pet-select" name="pet-select">
  <option value="">--请选择一项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="others">其他</option>
</select>

7.2 属性

8 感想

HTML的标签和属性非常多,但是实际工作中用到的,或者说能让大多数浏览器兼容的标签其实不多。学习的时候大概知道有这么回事就好了,实际使用的时候知道在哪查文档,怎么查文档,检查哪些点就OK。

参考资料

网道HTML教程

上一篇 下一篇

猜你喜欢

热点阅读