我们在上一章讲了一些要通过后台程序实现交互的标签，下面我们看一看一些不通过后台实现交互的标签。

一.a标签

a标签主要实现超链接的功能

1.跳转效果

这个效果比较简单，直接在属性里添加一个网址，然后可以做成链接效果

  1. <a href="http://www.baidu.com"target='_blank'>百度</a>

其中的target='_blank'意思是在新窗口内打开链接。targe还有其他的属性，但是这个是用的比较多的。

2.锚效果

有些比较好的博客，在页面前面会有个菜单，我们点击菜单会跳转到页面内对应的部分，这里用的就是锚效果，方法如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <a href="#i1">第一章</a>
  9.     <a href='#i2'>第二章</a>
  10.     <a href="#i3">第三章</a>
  11.     <a href="#i4">第四章</a>
  12.  
  13.     <div style="height:600px;"id='i1'>第一章的内容</div>
  14.     <div style="height:600px;"id='i2'>第二章的内容</div>
  15.     <div style="height:600px;"id='i3'>第三章的内容</div>
  16.     <div style="height:600px;"id='i4'>第四章的内容</div>
  17. </body>
  18. </html>

要注意的是，html里的id是不能够重复的（有时候即便重复了也不会显性的报错 ），但是name属性可以重复。

二.图片标签

图片标签的用法比较简单

  1. <img src='a.jpg' style='height:200px;width:200px;'>

有些时候，比方说淘宝，会点击图片以后跳转到一个界面里，其实就是用一个a标签把图片包裹起来

  1. <a href="http://www.baidu.com">
  2.         <img src="1.jpg" style="height: 200px;width: 100px;">
    </a>

这就是点击图片跳转。

其中图片标签还有两个比较常用的属性：alt和title。

alt是图片从路径加载失败时显示的字符串，而title是鼠标指向图片显示的字符串。

三.列表显示标签

列表有三种方式

  1.     <ul>
  2.         <li>a</li>
  3.         <li>b</li>
  4.         <li>c</li>
  5.         <li>d</li>
  6.     </ul>
  7.  
  8.     <ol>
  9.         <li>a</li>
  10.         <li>b</li>
  11.         <li>c</li>
  12.         <li>d</li>
  13.     </ol>
  14.  
  15.     <dl>
  16.         <dt>aa</dt>
  17.         <dd>b</dt>
  18.         <dd>c</dt>
  19.         <dt>bb</dt>
  20.         <dd>c</dd>
  21.         <dd>d</dd>
  22.     </dl>

显示效果分别如下

但是一般我们都是用css来改造其显示效果，真实情况用的比较少。

四.表格标签

表格便签也比较简单

  1.     <table border="3">
  2.         <tr>
  3.             <td>第一行第一列</td>
  4.             <td>第一行第二列</td>
  5.             <td>第一行第三列</td>
  6.         </tr>
  7.         <tr>
  8.             <td>第二行第一列</td>
  9.             <td>第二行第二列</td>
  10.             <td>第二行第三列</td>
  11.         </tr>
  12.         <tr>
  13.             <td>第三行第一列</td>
  14.             <td>第三行第二列</td>
  15.             <td>第三行第三列</td>
  16.         </tr>

tr标签就是指行，td就是指列，为了显示的比较清楚，我们在table里加了边框border属性，出来的效果

但是我们在chrome里查看一下这个表格的代码

为什么会有个tbody呢？说明我们前面的代码不是特别规范。正常情况下table会有一个thead，里面放的是表头

  1. <table border="3">
  2.     <thead>
  3.         <th>第一列</th>
  4.         <th>第二列</th>
  5.         <th>第三列</th>
  6.     </thead>
  7.     <tbody>
  8.         <tr>
  9.             <td>第一行第一列</td>
  10.             <td>第一行第二列</td>
  11.             <td>第一行第三列</td>
  12.         </tr>
  13.         <tr>
  14.             <td>第二行第一列</td>
  15.             <td>第二行第二列</td>
  16.             <td>第二行第三列</td>
  17.         </tr>
  18.         <tr>
  19.             <td>第三行第一列</td>
  20.             <td>第三行第二列</td>
  21.             <td>第三行第三列</td>
  22.         </tr>
  23.  
  24.     </tbody>
  25. </table>

看看加上thead的效果

合并单元格。

如果想要合并单元格呢？两个属性：clospan和rowspan，后面加上要合并的格数就好，但是要记得合并了以后要把原先的单元格删掉，否则会被挤出表格

  1. <table border="3">
  2.     <thead>
  3.         <th>第一列</th>
  4.         <th>第二列</th>
  5.         <th>第三列</th>
  6.     </thead>
  7.     <tbody>
  8.         <tr>
  9.             <td>第一行第一列</td>
  10.             <td colspan="2">第一行第二列</td>
  11.         </tr>
  12.         <tr>
  13.             <td rowspan='2'>第二行第一列</td>
  14.             <td>第二行第二列</td>
  15.             <td>第二行第三列</td>
  16.         </tr>
  17.         <tr>
  18.  
  19.             <td>第三行第二列</td>
  20.             <td>第三行第三列</td>
  21.         </tr>
  22.     </tbody>
  23. </table>

上面的代码就做了两个合并单元格，一个是水平合并，一个垂直合并，效果如下

五.label标签

label标签常常和input的文本输入结合使用但是有个小细节，就是和后面的文本输入建立连接，效果是点击这个label就可以使和他建立连接的输入框获取焦点（获得光标）

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

六.fieldset

这个标签基本上是用不到的，就放一个效果图和基本用法吧

  1. <fieldset>
  2.     <legend>登录</legend>
  3.     <label>用户名：</label>
  4.     <input type="text"><br>
  5.     <label>密&nbsp;&nbsp;&nbsp;码：</label>
  6.     <input type="password">
  7. </fieldset>

效果如下：

〇二——body内标签之交互输入标签二的更多相关文章

  1. 〇一——body内标签之交互输入标签一

    今天来搞一下body内的input标签 在一般的网页中,我们经常会遇到一些交互界面,比如注册.登录.评论等环境.在这些交互界面里最常使用的就是input标签. 一.input标签基本使用 input标 ...

  2. HTML标签----图文详解（二）

    HTML标签超详细的图文演示再来一波~~~ 如果还没有看过昨天的福利的,那可要抓紧喽,传送门:HTML标签----图文详解 本文主要内容 列表标签 表格标签 框架标签及内嵌框架<iframe&g ...

  3. html 05-HTML标签图文详解（二）

    05-HTML标签图文详解(二) #本文主要内容 列表标签:<ul>.<ol>.<dl> 表格标签:<table> 框架标签及内嵌框架<ifram ...

  4. javaweb学习总结(二十八)——JSTL标签库之核心标签

    一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...

  5. Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互

    Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 目录 Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 前言 一.效果 二.实现过程 ...

  6. html:常见行内标签，常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

  7. （转载）Android项目实战（二十七）：数据交互（信息编辑）填写总结

    Android项目实战(二十七):数据交互(信息编辑)填写总结   前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: ...

  8. Linux--shell交互输入与循环语句--06

    一.交互输入 1.命令用法:read a b c   -> aa bb cc read命令同时可以定义多个变量值:而输入的内容默认以空格为分隔符,将值输入到对应的变量中:如果默认值输入过多,最后 ...

  9. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

随机推荐

  1. 从 ssh private key 中重新生成 public key

    Use the -y option to ssh-keygen: ssh-keygen -f ~/.ssh/id_rsa -y > ~/.ssh/id_rsa.pub From the 'man ...

  2. 掌握Pod-Pod调度策略

    一 Pod生命周期管理 1.1 Pod生命周期 Pod在整个生命周期过程中被系统定义了如下各种状态. 状态值 描述 Pending API Server已经创建该Pod,且Pod内还有一个或多个容器的 ...

  3. powerDesigner连接数据库连接失败

    powerDesigner连接数据库总是提示连接失败 原因是这个软件不能使用64位的jdk只能使用32位的jdk 在软件安装文件夹根目录下创建start.bat Set JAVA_HOME=E:\Ja ...

  4. 在C语言中函数及其调用过程

    目录 函数 C语言中的变参函数 函数的本质是什么 内存区域的区分技巧 函数的调用过程 栈帧的概念 调用过程细节 按照约定传参 函数 如果一个函数有声明没实现,那么就会出现链接错误: 以上代码会出现链接 ...

  5. python 爬虫 目录

    爬虫 介绍 python 爬虫 urllib模块 python 爬虫 requests模块

  6. EXKMP模版

    这道题目折腾了我好一会啊,出于尊重我要先放我们师兄的博客 1178: [视频]EXKMP模版:最长共同前缀长度 时间限制: 1 Sec  内存限制: 128 MB提交: 180  解决: 123[提交 ...

  7. ATM机小程序

    用规范化项目录的格式模拟一个ATM系统. 项目功能: 登录(可支持多个账户(非同时)登录) 注册 查看余额 存钱 转账(给其他用户转钱) 查看账户流水 退出 提供的思路:ATM直译就是取款机,但是咱们 ...

  8. 操作系统（五）CPU调度

    CPU调度是多道程序操作系统的基础.

  9. MySQL性能优化(四)：SQL优化

    原文:MySQL性能优化(四):SQL优化 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ ...

  10. pytorch中的torch.repeat()函数与numpy.tile()

    repeat(*sizes) → Tensor Repeats this tensor along the specified dimensions. Unlike expand(), this fu ...