超链接标签

<a href="" target="_blank">text</a>,此类标签通常是超链接。其中href后面跟进的是超链接的地址，target代表打开新页面的方式，_blank代表在新的标签页打开。

  • 通过超链接“text”跳转到百度首页。
  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="http:www.baidu.com">text</a>
  9. </body>
  10. </html>
  • 通过超链接跳转到需要查看的位置。通过id来判断跳转的位置，在href中必须加上’#‘，而且，id不能重复，否则会报错。
  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="#1">第一章</a>
  9.     <a href="#2">第二章</a>
  10.     <a href="#3">第三章</a>
  11.     <div id="1" style="height:600px;">第一章的内容</div>
  12.     <div id="2" style="height:600px;">第二章的内容</div>
  13.     <div id="3" style="height:600px;">第三章的内容</div>
  14. </body>
  15. </html>

插入图片和列表

  • 插入图片通常用img，具体使用方法很简单。可以通过嵌套实现图片的超链接，通过title显示图片的标识，当找不到图片的路径时，可以通过alt来实现对其描述。说也说不明白，贴段代码自己研究吧。
  • 插入列表更简单，有三种表现形式：ul-li, ol-li, dl-dt/dd,具体的表现形式自己可以研究，分别以点、数字和标题形式存在。同时可以插入<a href=""></a>来实现超链接。
  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="s1.html">
  9.         <img src="aa.jpg" style="height:200px;width:200px;" alt="beauty" title="大美女">
  10.     </a>
  11.     <ul>
  12.         <li>姓名</li>
  13.         <li>张钊</li>
  14.         <li>陈狗</li>
  15.     </ul>
  16.      <ol>
  17.         <li>姓名</li>
  18.         <li>张钊</li>
  19.         <li>陈狗</li>
  20.     </ol>
  21.     <dl>
  22.         <dt>姓名</dt>
  23.         <dd>张钊</dd>
  24.         <dd>陈狗</dd>
  25.     </dl>
  26.  
  27. </body>
  28. </html>

插入表格

  • 一个规范的表格结构-：table-----thead-----tr-----th(代表标题)/ -----tbody-----tr-----td(代表表格内容)。
  • 如果想要合并单元格，可以通过colspan="num"或者rowspan="num"来合并。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <table border="1">
  9.         <thead>
  10.             <tr>
  11.                 <th>姓名</th>
  12.                 <th>年龄</th>
  13.                 <th>操作</th>
  14.             </tr>
  15.         </thead>
  16.         <tbody>
  17.             <tr>
  18.                 <td>张钊</td>
  19.                 <td>18</td>
  20.                 <td><a href="#">查询信息</a></td>
  21.             </tr>
  22.         </tbody>
  23.         <tbody>
  24.             <tr>
  25.                 <td>陈狗</td>
  26.                 <td>28</td>
  27.                 <td><a href="https:www.baidu.com">查询信息</a></td>
  28.             </tr>
  29.         </tbody>
  30.     </table>
  31. </body>
  32. </html>

lable标签和fieldset标签

  • label标签运用场景较少，通常是输入用户名或密码时，不仅仅可以通过点击text部分，通过点击用户名或密码也可以进入文本框的光标。通过和text的id绑定使用。
  • fieldset标签应用的场景更少，只是构造某个边框时候才会使用，可以稍微对照着就能搞明白。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <fieldset>
  9.         <legend>
  10.             登录
  11.         </legend>
  12.         <label for="1">
  13.         用户名：
  14.         </label>
  15.         <input id="1" type="text" name="user"/>
  16.         <label for="2">
  17.         密码：
  18.         </label>
  19.         <input id="2" type="text" name="password"/>
  20.     </fieldset>
  21. </body>
  22. </html>

html的标签分类————body内标签系列的更多相关文章

  1. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  2. HTML开发之（块级标签，行内标签，行内块标签）

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  3. html标签的显示模式（块级标签，行内标签，行内块标签）（转）

    html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

  4. HTML基础知识（块级标签，行内标签，行内块标签）

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  5. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  6. 块级标签包含行内标签底部出现3px间隔的解决办法

    当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...

  7. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  8. Python-HTML 最强标签分类

    编程: 使用(展示)数据 存储数据 处理数据 前端 1. 前端是做什么的? 2. 我们为什么要学前端? 3. 前端都有哪些内容? 1. HTML 2. CSS 3. JavaScript 4.jQue ...

  9. 前端 HTML 标签分类

    三种: 1.块级标签: 独占一行,可设置宽度,高度.如果设置了宽度和高度,则就是当前的宽高.如果宽度和高度没有设置,宽度是父盒子的宽度,高度根据内容填充. 2.行内标签:在一行内显示,不能设置宽度,高 ...

随机推荐

  1. Dynamic Programming | Set 2 (Optimal Substructure Property)

    正如我们在 Dynamic Programming | Set 1 (Overlapping Subproblems Property) 中讨论的那样,当一个问题具有以下2种性质时,建议使用动态规划来 ...

  2. 微服务应用新趋势：Service Mesh、AIOps和中台化

    微服务技术由于天生支持快速迭代.弹性扩展的特点,使企业能够在不确定性下提升发展速度及抗风险能力,受到了越来越多的关注.当前,云服务商纷纷试水微服务产品,最为典型的,当属推出轻舟微服务平台.剑指整个微服 ...

  3. vue keep-alive解决关闭标签动态缓存问题

    直接上代码: <keep-alive :include='topNavMentNames'> <router-view ></router-view> </k ...

  4. 696. Count Binary Substrings

    Give a string s, count the number of non-empty (contiguous) substrings that have the same number of ...

  5. 周末，说声php的setter&getter（魔术）方法，你们辛苦了

    php 作为快速迭代项目的语言,其牛逼性质自不必多说.今天咱们要来说说php语言几个魔术方法,当然了,本文主要以setter&getter方法说明为主. 首先,咱们得知道什么叫魔术方法? 官方 ...

  6. centos7 安装oracle11g

    创建数据库的系统用户和用户组 $ su root #切换到root # groupadd oinstall #创建用户组oinstall # groupadd dba #创建用户组dba # user ...

  7. 【2019北京集训测试赛（七）】 操作 分治+FFT+生成函数

    题目大意:你有$n$个操作和一个初始为$0$的变量$x$. 第$i$个操作为:以$P_i$的概率给$x$加上$A_i$,剩下$1-P_i$的概率给$x$乘上$B_i$. 你袭击生成了一个长度为$n$的 ...

  8. JS闭包与JS函数

    先说说在网上看到的一个闭包案例: var add = (function () {var counter = 0;return function () {return counter += 1;}}) ...

  9. appium安装完成后运行和执行python脚本的错误合集

    1.第一个错误如下: main.js: error: argument "--app": Expected one argument. null 这个一般是appium服务端安装的 ...

  10. 深入浅出分析MySQL MyISAM与INNODB索引原理、优缺点分析

    本文浅显的分析了MySQL索引的原理及针对主程面试的一些问题,对各种资料进行了分析总结,分享给大家,希望祝大家早上走上属于自己的"成金之路". 学习知识最好的方式是带着问题去研究所 ...