零基础前端Vue的小白学习路——HTML基础（三）超链接、列表、表格、表单、框架标签、字符实体

         在前面一节大概讲述了HTML的排版标签、文本标签以及图片标签的用法。排版标签<h1>——<h6>为不同层级的标题标签，<div>盒子标签则可以包裹标签元素，帮助网页的布局，<p>标签作为一个特殊的块级元素，但不能嵌入别的块元素。文本标签中<em><strong><span><i>使用最为频繁。

        本节主要记录HTML中超链接、列表、表格、表单、框架标签、字符实体等内容的学习。

        一、超链接

        超链接：  完成到目的网页或者当前网页某一标签的跳转。 

• 超链接： <a href="目的网址" target="打开标签页的方式">超链接字体内容</a>
  • target属性：打开标签页的方式
    • _self：当前标签页直接跳转
    • _blank：新标签页中打开
  • 特殊规则：<a>标签是行内元素，但是可以包含除自己外的任何元素
  • 超链接跳转文件：
    • 可以跳转打开的文件：mp4,pdf,jpg......
    • 不可以打开的文件，只能下载：zip......
    • 强制触发下载：<a href=" " dowload=" ">链接字体内容</a>
  • 超链接跳转锚点：
    • 1、设置锚点：
      • 第一种方式：<a name="..."></a>
      • 第二种方式：<p id="...">文本内容</p>
    • 2、超链接跳转：<a href="#...">链接字体内容</a>
    • 3、特殊用法：
      • 回到顶部：<a href="#">回到顶部</a>
      • 刷新页面：<a href="">刷新页面</a>
      • 跨网页超链接：<a href="另一个HTML文件路径或网址#id名或者设置的<a>锚点name名">文本内容</a>
      • 执行JS代码（例如：弹窗）：<a href="javascript:alert(666);">点我弹窗</a>
  • 超链接唤起指定应用：
    • 打电话：<a tel:10010>文本内容</a>
    • 发短信：<a sms:10086>文本内容</a>
    • 发邮件：<a mailto:[email protected]>文本内容</a>
  • 超文本的真正含义：一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读内容直接跳转到超链接所指向的内容。
  • 

                          点击超链接后跳转的示意图

• 二、列表
• 有序列表：<ol>列表内容</ol>，子元素标签<li></li>
• 无序列表：<ul>列表内容</ul>，子元素标签<li></li>
• 自定义列表：<dl>列表内容</dl>
  • <dt>术语名称</dt>
  • <dd>术语描述</dd>
• 规则：可以嵌套，自定义列表一个术语名称可以有多个术语描述

• 三、表格：<table>表格内容</table> 。属性：border，width，height，cellspacing.....
  • 标题：<caption>标题内容</caption>
  • 头部：<thead>头部内容</thead>。属性：height，align，valign......
    • 一行表格：<tr>一行表格内容</tr>。属性跟头部一样。
    • <th>头部表格内容</th>。属性：width，height，align，valign......
  • 主体：<tbody>主体内容</tbody>。属性：height，align，valign.....
    • 一行表格：<tr>一行表格内容</tr>
    • <td>主体表格内容</td>。属性：width，height，align，valign......
  • 脚注：<tfoot>脚注内容</tfoot>。属性：height，align，valign.....
    • 一行表格：<tr>一行表格内容</tr>
    • <td>脚注表格内容</td>
  • 表格的跨行与跨列：
    • 跨列：在单元格属性中添加：clospan=""。
  • • 跨行：在单元格属性中添加：rowspan=""。

 

• 四、表单：<form>表单内容</form>。属性：action(目的网址)，target（是否在新的网页中跳转），method......
  • 表单的基本控件：
    • 输入框：input。
      • 属性：type(text文本\radio单选框\checkbox复选框\hidden隐藏域\submit按钮)，name，value，maxlength，checked，disabled。
        • radio、checkbox、hidden需要和name，value配合使用。
        • submit需要和value配合使用，value值代表按钮名称，不需要name值。
        • hidden隐藏域是一个用户不可见的输入区域，可以让表单携带一些固定数据。应用：防脚本批量注册......
    • 按钮：button。
      • 属性：type(submit，reset，button)，value，name
        • submit为提交按钮，按钮默认为submit属性
        • reset为重置按钮
        • button为普通按钮
        • 一般不需要name值，需要value值表示按钮名称
    • 文本域与下拉框：textarea，select
      • 文本域：<textarea>文本内容</textarea>
        • 属性：cols,rows设置文本框的列、行数。
      • 下拉框：<select></select>
        • 内部选项：<option>选项内容</option>
    • 禁用表单控件：控件属性内添加 disabled
    • label标签：实现标签文字和表单控件的关联，点击文字后对应表单控件就会获取焦点。
      • 写法1、<label for="关联控件的id">标签文本内容</label>
      • 写法2、<label>label关联的控件代码</label>
    • 表单控件分组标签：为表单控件进行分组，legend为分组标题
      • <fieldset><legend>分组标题名</legend>表单控件代码</fieldset>
• 五、框架标签：iframe,在网页中嵌入其他网页或文件
  • 属性：src，name，width，height，frameborder
  • 作用：常用于网页中嵌入广告
• 字符实体：用一种特殊形式表示某个符号（下面列出常用的几个，其他字符可在MDN官网中查询）
  • &nbsp；（空格）
  • &lt；（<）&gt；(>)
  • &amp;(&)
  • &yen;(￥)
  • &copy;（©）
  • &times;(×)
  • &divide;（÷）