前端系统课程 - 09. HTML (2)

常用标签

  • <a> 标签和 <button> 标签的选择：

    • 如果要跳转到一个链接，用 <a> 标签；

    • 如果要弹出提示或进行提交等操作，则可以使用 <button> 标签。

  • <main> 标签代表整个页面最主要的部分，每个页面中只能有一个 main 标签。

  • <section> 标签代表一个章节，一般用于一个完整文章或独立区块。

  • <h1> ~ <h6> 表示 6 个等级的标题，其中 <h1> 在整个页面一般也只有一个。

  • <nav> 标签表示导航，有导航性质的列表或菜单，要用此标签包裹。

  • <div> 和 <span> 标签没有语义，只是用来划分区域的，所以在使用这两种标签时，要给它们指定类名来使其语义化。

iframe 标签

  • 使用“src”属性可以指定 iframe 窗口打开的网址。

  • 使用“name”属性可以和 <a> 标签配合，使指定的 iframe 窗口打开新网页。

  • 将“frameborder”属性设置为“0”可以去除 iframe 窗口自带的边框。

a 标签

  • “target”属性有四个值，它们分别是：

    • _blank：代表在新窗口打开链接；

    • _self：代表在当前窗口或当前 iframe 窗口打开链接；

    • _parent：代表在当前 iframe 窗口外的父级窗口打开链接；

    • _top：代表在当前 iframe 窗口外的最顶层祖先窗口打开链接。

  • “download”属性，一般用在链接是一个需要下载的文件时，此属性会强制将目标链接的“Content-type”转换为“application/octet-stream”，使目标链接成为下载链接。

  • “href”属性值：

    • 如果只写了域名，会把这个值当作文件来打开，例如 href="qq.com"；当这种情况发生在是用 HTTP 协议打开时，会在网站的根目录寻找这个文件。

    • 如果不写协议，会把这个值按照当前协议来打开，例如 href="//qq.com"；当用文件协议打开网页时，便按照文件协议打开链接；当用 HTTP 协议打开时，便按照 HTTP 协议打开，才能正常访问目标网址。

    • 只有在把协议写全的时候，才能在协议不同的情况下，正常跳转到链接地址，正常应该写：href="http://qq.com。

    • 如果值是一个查询参数时，会向链接发起 GET 请求，页面会被刷新，例如：href="?name=user"。

    • 如果值是一个锚点时，会跳转到当前页的对应锚点位置；而如果只写一个“#”号，则会跳转到当前页面的顶部，两种情况都不会刷新页面；例如：href="#"，这种方式可以做“回到顶部”的功能。

    • 如果值是一个伪协议，例如：href="javascript:void(0);"，则会执行伪协议后面的脚本代码，例子中的意思是返回值为“0”，也就是什么都不做，最终达到的效果就是去除了 <a> 标签的默认操作，这样就得到了一个能点击，却不会有反应的 <a> 标签；void(0) 其实可以不写也可以。其他的伪协议还有”mailto“等……老师没说。

    • 如果值为空，点击 <a> 标签就会刷新当前页面。

form 标签

  • “action”属性用来设置表单提交的地址。

  • “method”属性用来指定提交表单的方式，只有两种方式，默认是 GET 方式，但提交表单都是用 POST 方式。

  • 使用 POST 方式提交表单时，请求中的“Content-Type”是“x-www-form-urlencoded”，这是表单数据所对应的类型，它会将汉字转换为 UTF-8 编码后，再提交到目标地址。

  • 表单中必须有提交按钮；如果 form 表单中有一个没有类型的 <button> 标签，那么这个按钮会自动成为该表单的提交按钮，从而具备点击后发起提交该表单的请求功能。

  • 表单中需要输入并提交数据的标签，都要有“name”属性，否则该标签中的数据将无法提交。

  • “target”属性可以指定表单提交成功后，在哪个窗口打开表单提交地址。

input 标签

  • 最主要的就是“type”属性，不同的值代表不同的输入方式，例如：“button”代表普通按钮，“submit”代表提交按钮，“checkbox”代表复选框等等，如果不设置，默认是“text”类型。

  • 要让 <input> 标签与指定内容关联，使之点击时获得焦点，要使用 <label> 标签包裹指定内容，并将其“for”属性与 <input> 标签的“id”属性设置为同一个值。

  • 使用“radio”类型的 <input> 标签可以做出单选按钮，要让多个单选按钮具有排外性，就得把这些按钮的“name”属性设置为同一个。

select 标签

  • 使用这个标签可以做下拉菜单，菜单的每一项，要用 <option> 标签包裹。

  • 要让某一项默认为选中状态，可以给此项添加“selected”属性并设置值为“true”，像此类的状态属性的属性值都可以省略，只要属性存在，浏览器就会使它的值自动为“true”。

  • 使用“disabled”属性可以使选项成为非可选状态。

  • 为 <select> 标签添加“multiple”属性，可以使之成为多选菜单。

textarea 标签

  • 这个标签被称为“文本域”，是用来输入和提交大量文字的文本框。

  • 默认情况下，文本框可以自由调整大小，如果要禁用这种效果，需要给 <textarea> 添加样式：resize: none。

  • 虽然文本域有设定宽和高的属性，但使用 CSS 样式设置最为靠谱。

table 标签

  • 按照规范，<table> 标签的子元素可以是 <thead>、<tbody>、<tfoot> 和 <colgroup>。

  • <colgroup> 标签的子标签是 <col> 标签，可以通过它来为每一列进行不同的设置，如宽度，背景色等，实际开发很少使用。

  • <table> 标签的子标签都可以省略，除了 <colgroup> 标签，其余的会自动生成；另外，如果这些标签的顺序颠倒，浏览器也会自动纠正为 <thead>、<tbody>、<tfoot> 的顺序。

  • <table> 标签的“border”属性可以设置表格的边框，但是每个表格元素都会有，如果要合并这些边框，可以给 <table> 标签添加样式 border-collapse: collapse。

课后拾遗

今天学的标签只是 HTML5 中很少的一部分，而且也只是初步的介绍，实际还有很多常用标签，这些标签也还有很多属性可以设置。标签的属性不需要全部记住，在实际开发中，多加练习，就会把最有价值的属性设置烂熟于心。