1. 常见内容标签分类

根据标签的实际作用类型

  • 语义结构标签
  • 文本标签
  • 列表标签
  • 图像标签
  • 链接标签
  • iframe标签
  • 媒体标签
  • 表格
  • 表单

这里我们列举一些使用频率较高的标签.

2. a 标签

a 标签(anchor), 又叫锚点, 作用是在网页中引入一个链接, 访问其它页面和资源.

2.1 href属性

hyper reference , 超级引用, 其实就是超链接的意思, 属性值多种取值.

网址

这里有三种引入外部网址的形式

  • href="https://google.com" 引入一个https链接
  • href="http://google.com" 引入一个http链接

  • href="//google.com" 不指定协议类型, 让浏览器自己去判断, 防止自己指定协议有误的情况, 比较推荐

    路径

  • /a/b/c绝对路径, 从服务器根目录开始的路径, 预览时要求开启http-server, 以访问服务器的视角来查看网页

    一定要通过这种方式查看网页, 直接查看本地HTML页面相当于使用file协议, 没有意义, 也会有有很多 bug.

  • a/b/c相对路径, 相对于当前目录的路径.

  • 如果链接文件是和当前HTML文件同一个层级下, index.html 和 ./index.html 都可以

    伪协议

  • href="javascript:;" 用来插入一段js脚本, 点开链接时执行. 例如这段代码的作用是使 a 被点击时不产生任何效果, 是唯一可以达到这个要求的方法.

  • href="mailto:" 用来跳转邮箱, 点击链接会打开电脑默认邮箱程序并进入编辑邮件界面, 邮箱地址可以指定, 也可以不指定直接用"mailto:"

  • href="tel:134########" 用来跳转拨号, 点击链接会唤起拨号界面, 并把刚才的号码复制上.

    id

    href="#xxx" , # 后面接一个元素的 id, 点击链接后会在页面内找到这个链接并且跳转(相当于一个锚点), 并且元素出现在页面的最上方.

    2.2 target属性

    指定链接被点击后打开这个链接的位置. 常见的有

  • _blank 在新窗口打开

  • _self 在当前窗口打开, 这是默认值
  • _parrent 在上层窗口打开, 一般用于iframe 中的链接, 会在它的父级窗口打开, 如果没有父级窗口, 则效果是在当前窗口打开, 跟_self效果一样.

  • _top 在顶层窗口打开, 用于多级 iframe 的页面结构中, 如果当前页面已经是最高级, 它等同于_self.

    2.3 download属性

    布尔属性, 强制下载链接中的内容, 适用于不想链接被打开浏览而希望直接下载的场景, 但是在部分浏览器中不适用.

    2.4 rel属性

    向浏览器说明指明这个链接的性质, 以及与当前页面的关系, 常见取值

  • noreference 告诉浏览器打开链接的时候, 不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。

  • noopener 告诉浏览器打开链接时, 不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，提高当前页面的安全性。

    3. img 标签

    作用是发送一个GET请求, 在相应位置展示一张图片, 属于可替换元素.

    3.1 src属性

    source 的缩写, 意思是资源地址, 也就是图片的地址,

    3.2 alt属性

    找不到图片时的替代文本, 用于想用户说明图片资源暂时丢失了.

    3.3 height, width属性

    指定图片的高和宽, 一般只指定宽度, 让高度等比例的自适应, 两者都指定会压缩图片使图片变形, 一定要避免, 图片比例不满意可以先用工具裁剪.

    3.4 onload 和 onerror 事件

    用来监听图片是否加载成功, 加载失败的时候触发一个补救行为, 比如换一张图片.

    3.5 响应式图片

    因为移动设备通常屏幕像素比较少, 一些大图片可能超出范围, 所以使用max-width: 100%对图片宽度进行限制使它全部展示.

    4. table 标签

    4.1 和 和

    这三个都是<table>的一级子元素, 一次表示表头, 表体和表尾.

    4.3

    和

    前者表示表格所有的总和, <col>是它的子元素, 表示其中一列, 可以给某个col设置样式, 会使整个表格中的这一列样式发生变化.

    1. <table>
    2. <colgroup>
    3.   <col class="c1">
    4.   <col class="c2">
    5.   <col class="c3">
    6. </colgroup>
    7. <tr>
    8.   <td>1</td>
    9.   <td>2</td>
    10.   <td>3</td>
    11. </tr>
    12. </table>

    可以看出, col标签是一个空元素, 没有结束标签没有子元素.
    值得注意的一点是, 可以用<col>的span属性来定义一个几倍宽度的列, 下面这个表格的第二列实际宽度有两列宽, 一共有4列.

    1. <table>
    2. <colgroup>
    3.   <col>
    4.   <col span="2">
    5.   <col>
    6. </colgroup>
    7. </table>

    4.4

    行

    表示表格的一行(table row) , 下面是一个三行的表格

    1. <table>
    2. <tr>...</tr>
    3. <tr>...</tr>
    4. <tr>...</tr>
    5. </table>

    4.5

    都是块级元素, 所有的表格内容都要包含在<table>内, <caption>是它的第一个子元素, 表示表格的标题.

    4.2

    和

    这两个都表示单元格, 都是<tr>的子元素, <th>是标题单元格,

    		是数据单元格.

    1. <table>
    2. <tr>
    3.   <th>学号</th><th>姓名</th>
    4. </tr>
    5. <tr>
    6.   <td>001</td><td>张三</td>
    7. </tr>
    8. <tr>
    9.   <td>002</td><td>李四</td>
    10. </tr>
    11. </table>

    上面这个表格共三行, 第一行是标题行, 二三两行是数据行.

    5. form 标签

    表单（form）是用户输入信息与网页互动的一种形式。用户提交的信息会通过表单发给服务器，比如网站的搜索栏就是表单, 登录框也是表单.
    表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。
    <form>用来定义一个表单, 所有的表单内容都包含于这个容器内. 一个常见的表单例子:

    1. <form action="https://example.com/api" method="post">
    2. <label for="POST-name">用户名：</label>
    3. <input id="POST-name" type="text" name="user">
    4. <input type="submit" value="提交">
    5. </form>

    这个表单包含了三个表单控件, 分别是

    5. 1 form重要属性

  • action, 提供服务器接受数据的url.

  • method, 指定发送HTTP请求的方法, 常见的有 GET 和 POST 两种, 不区分大小写但一般用大写.
  • name, 表单的名字, 是唯一的. 如果一个表单控件没有设置name, 那么他的value也不会被发送.

  • target, 指定一个窗口用于接受服务器返回的数据, 默认是_self (当前窗口), 用法与a元素的target属性类似.

    5.2

    用来存放提示输入的说明文字, 让用户知道自己正在进行的交互操作是什么

    1. <label for="user">用户名：</label>
    2. <input type="text" name="user" id="user">

    上面可以告诉用户正在输入的是用户名.
    另外, 用label包裹表单控件, 可以使用户在点击到label元素时就能选到里面的控件, 提高用户体验.

    1. <label>用户名：
    2. <input type="text" name="user">
    3. </label>

    <label>的有:

  • for：关联表单控件的id属性, 点击label后跳到对应的表单控件的输入焦点.

  • form：关联表单的id属性. 设置了该属性后，<label>可以放置在页面的任何位置, 否则只能放在<form>内部.

    5.3 控件

    一个行内元素, 用来接收用户的输入, 单标签, 它有丰富的表现类型, 取决于它的type属性值, 默认type属性值是text, 表示一个输入框. 常见的有下面的多种属性值.

    5.3.1 text

    单行文本输入框, 不支持换行符. 一起使用的配套属性有:

  • maxlength: 最大字符数, 需要大于等于0

  • minlength: 最小字符数, 大于等于0
  • placeholder: 占位字符, 用于提示用户输入, 在用户输入字符时这个占位字符会消失.

  • readonly: 布尔属性, 表示只读, 不能输入

    5.3.2 button

    一个没有默认行为的按钮, 用value属性指定里面包含的文字, 通常配合js指定的点击事件来使用. 尽量不要使用这个属性而用<botton> 标签来代替.

    5.3.3 submit

    这是表单的提交按钮, 点击之后会将表单提交给服务器, 默认的value值通常是Submit, 与系统语言有关. 一般还是指定下value值.

    5.3.4 image

    将一个图像作为提交按钮, 用法与type="submit"基本一样.

    5.3.5 checkbox

    复选框, 点击后可以选中, 再次点击取消选中. 可以把多个name值相同的checkbox放到一个<fieldset>元素中, 表示一组多选选项. 提交表单时时多个[name]=[value]的键值对都会被提交到服务器.

    1. <fieldset>
    2. <legend>你的兴趣</legend>
    3. <div>
    4.   <input type="checkbox" id="coding" name="interest" value="coding">
    5.   <label for="coding">编码</label>
    6. </div>
    7. <div>
    8.   <input type="checkbox" id="music" name="interest" value="music">
    9.   <label for="music">音乐</label>
    10. </div>
    11. </fieldset>

    5.3.6 radio

    单选框, 一组之中只能选中一项. 表现为一个小圆点, 提交时只有其中其中value值会被提交到服务器.
    配套属性有:

  • checked: 布尔属性, 表示默认选中当前这一项.

  • value, 提交到服务器的值, 默认为"on".

    5.3.7 password

    密码输入框, 用户输入会变成 * 或 • 而不可见, 可以设定隐藏字符出现的时间.

    5.3.8 file

    文件选择框, 用于本地文件的上传.

    5.4

    与input[tpye="button"] 类似是一个没有默认行为的按钮, 但是它可以包含其他元素, 包括文字和图像.

    5.5 

    1. 下拉菜单中的每一项由子元素`<option>`确定, 选中的`<option>`中 `value`的属性值, 就是`<select>`控件传给服务器的值. `<option>有`一个`selected`属性, 是布尔属性, 代表默认选择这一`option`项.
    2. <a name="FATpI"></a>
    3. ### 5.6 <textarea>控件
    4. 表示一个多行的文本框, 块级元素, 可以用 `rows` 和 `cols` 分别控制文本框的长和宽, 其他用法和属性很多与<input>控件相近. 默认样式可以随意拖动大小, 一般要用样式以下样式固定文本框大小
    5. ```html
    6. <textarea style="resize: none;">

    6 其他

    6.1 相关 js 事件

    • onchange：用户输入改变时触发
    • onfocus：用户鼠标集中时触发

    • onblur：用户鼠标离开时触发

      6.2 表单验证器

      HTML5新增功能, 可以限定表单输入必须符合给定的条件.

      6.3 注意事项

    • 一般不监听 input 的 click 事件

    • form 里面的表单控件要有name
    • form 里面一定要有一个 [type=submit] 的控件, 才能触发submit 事件, 传数据到服务器.