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 属性

href：指向
- 网址，如http://baidu.com,https://baidu.com,//baidu.com
- 路径，如/a/b/b1.html,a/b/b1.html，这里要注意根目录指的是当前服务
- 伪协议，如javascripy:;
- 锚点，和id属性相关，如#demo
target：指定如何展示打开的链接
- _self 默认值，在当前窗口打开
- _blank 在新窗口打开
- _parent 在父窗口打开
- _top 在顶层窗口打开
- 其他自定义命名
download：点击后，会出现下载对话框，兼容有问题，特别是手机
rel：说明链接与当前页面的关系
- noopener告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。

2 `img` 标签的用法

2.1 作用

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

<img src="foo.jpg">

2.2 属性

src：指定图片的网址
alt：设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本
height：指定图片高度，单位是像素或百分比
width：指定图片宽度，单位是像素或百分比

2.3 事件

onload: 图片加载成功的事件
onerror：图片加载失败的事件，这时候可以换一张默认的失败图片

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 相关标签

table:所有表格的内容都放在这个里面
thead:table的一级子元素，表示表头
tbody:table的一级子元素，表示表体
tfoot:table的一级子元素，表示表尾
tr:table row, 表格的一行
th:标题单元格
td:数据单元格

3.3 相关CSS样式

table-layout：控制列宽度,主要使用auto宽度取决于内容，fixd仅由该列首行的单元格
border-collapse:collapse：边框合并，表格中相邻单元格共享边框
border-spacing:0：边框之间的距离设置为0

屏幕快照 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 属性

action: 控制请求哪个服务器接口
autocomplete: off（不自动填写）和on（自动填写），与input中的name属性配合使用，比如<input name="username" type="text">
method: 提交数据的 HTTP 方法
- method=post 表单数据作为 HTTP 数据体发送
- method=get 表单数据作为 URL 的查询字符串发送
target: 在哪个窗口展示服务器返回的数据。可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe>标签的name属性（即表单返回结果展示在<iframe>窗口）。

4.3 事件

onsubmit，要触发这个事件，必须要有一个type="submit"的控件，如果没有就默认<button>为submit
注意，一般不监听input的click事件;form的input要有name属性

5 `<input>`标签的用法

5.1 作用

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

5.2 属性

type: 控件类型
- type="text"普通的文本输入框
- type="color"选择颜色的控件
- type="password"密码输入框。用户的输入会被遮挡
- type="radio"单选框，多个单选框的name属性值一致时表示一组
- type="checkbox"多选框，多个多选框的name属性值一致时表示为一组
- type="file"选择文件，添加multiple属性允许用户选择多个文件
- type="hidden"，不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交
- <input type="submit" value="提交"> 与<button>提交</button>的区别是，input里面不能再有其他东西，而button里可以有其他标签
name: 控件的名称
value: 控件的值

5.3 事件

onchange 当用户输入改变的时候触发
onfocus
onblur

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 属性

style="resize:none;"使用css避免右下角拖来拖去

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 属性

selected默认选中某一项

8 感想

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

参考资料

网道HTML教程

HTML入门笔记2-常用标签

1 `a` 标签的用法

1.1 作用

1.2 属性

2 `img` 标签的用法

2.1 作用

2.2 属性

2.3 事件

2.4 响应式

2.5 可替换元素

3 `table` 标签的用法

3.1 作用

3.2 相关标签

3.3 相关CSS样式

4 `form` 标签的用法

4.1 作用

4.2 属性

4.3 事件

5 `<input>`标签的用法

5.1 作用

5.2 属性

5.3 事件

5.4 验证器

6 `<textarea>`标签的用法

6.1 作用

6.2 属性

7 `<select>`标签的用法

7.1 作用

7.2 属性

8 感想

参考资料

猜你喜欢

热点阅读

HTML入门笔记2-常用标签

1 a 标签的用法

1.1 作用

1.2 属性

2 img 标签的用法

2.1 作用

2.2 属性

2.3 事件

2.4 响应式

2.5 可替换元素

3 table 标签的用法

3.1 作用

3.2 相关标签

3.3 相关CSS样式

4 form 标签的用法

4.1 作用

4.2 属性

4.3 事件

5 <input>标签的用法

5.1 作用

5.2 属性

5.3 事件

5.4 验证器

6 <textarea>标签的用法

6.1 作用

6.2 属性

7 <select>标签的用法

7.1 作用

7.2 属性

8 感想

参考资料

猜你喜欢

热点阅读

1 `a` 标签的用法

2 `img` 标签的用法

3 `table` 标签的用法

4 `form` 标签的用法

5 `<input>`标签的用法

6 `<textarea>`标签的用法

7 `<select>`标签的用法