超链接标签

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

  • 通过超链接“text”跳转到百度首页。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="http:www.baidu.com">text</a>

</body>

</html>
  • 通过超链接跳转到需要查看的位置。通过id来判断跳转的位置，在href中必须加上’#‘，而且，id不能重复，否则会报错。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="#1">第一章</a>

    <a href="#2">第二章</a>

    <a href="#3">第三章</a>

    <div id="1" style="height:600px;">第一章的内容</div>

    <div id="2" style="height:600px;">第二章的内容</div>

    <div id="3" style="height:600px;">第三章的内容</div>

</body>

</html>

插入图片和列表

  • 插入图片通常用img，具体使用方法很简单。可以通过嵌套实现图片的超链接，通过title显示图片的标识，当找不到图片的路径时，可以通过alt来实现对其描述。说也说不明白，贴段代码自己研究吧。
  • 插入列表更简单，有三种表现形式：ul-li, ol-li, dl-dt/dd,具体的表现形式自己可以研究，分别以点、数字和标题形式存在。同时可以插入<a href=""></a>来实现超链接。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="s1.html">

        <img src="aa.jpg" style="height:200px;width:200px;" alt="beauty" title="大美女">

    </a>

    <ul>

        <li>姓名</li>

        <li>张钊</li>

        <li>陈狗</li>

    </ul>

     <ol>

        <li>姓名</li>

        <li>张钊</li>

        <li>陈狗</li>

    </ol>

    <dl>

        <dt>姓名</dt>

        <dd>张钊</dd>

        <dd>陈狗</dd>

    </dl>

</body>

</html>

插入表格

  • 一个规范的表格结构-：table-----thead-----tr-----th(代表标题)/ -----tbody-----tr-----td(代表表格内容)。
  • 如果想要合并单元格，可以通过colspan="num"或者rowspan="num"来合并。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>姓名</th>

                <th>年龄</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>张钊</td>

                <td>18</td>

                <td><a href="#">查询信息</a></td>

            </tr>

        </tbody>

        <tbody>

            <tr>

                <td>陈狗</td>

                <td>28</td>

                <td><a href="https:www.baidu.com">查询信息</a></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

lable标签和fieldset标签

  • label标签运用场景较少，通常是输入用户名或密码时，不仅仅可以通过点击text部分，通过点击用户名或密码也可以进入文本框的光标。通过和text的id绑定使用。
  • fieldset标签应用的场景更少，只是构造某个边框时候才会使用，可以稍微对照着就能搞明白。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <fieldset>

        <legend>

            登录

        </legend>

        <label for="1">

        用户名：

        </label>

        <input id="1" type="text" name="user"/>

        <label for="2">

        密码：

        </label>

        <input id="2" type="text" name="password"/>

    </fieldset>

</body>

</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. HTML中的文本标签

    <span></span> 请使用 <span> 来组合行内元素,以便通过样式来格式化它们. 注释:span 没有固定的格式表现.当对它应用样式时,它才会产生视觉上 ...

  2. div、span内容超出省略号

    span设置部分省略...: span{         overflow: hidden;         text-overflow: ellipsis;         -o-text-over ...

  3. 爬虫--反爬--css反爬---大众点评爬虫

    大众点评爬虫分析,,大众点评 的爬虫价格利用css的矢量图偏移,进行加密 只要拦截了css 解析以后再写即可 # -*- coding: utf- -*- """ Cre ...

  4. OC学习1——基本数据类型

    1.OC是在C语言的基础上进行扩展的一种面向对象的编程语言.很多基础知识都和C语言中的非常类似.首先介绍一下OC中的基本数据类型,整体框架如下图: 2.自动数据类型转换顺序:short --> ...

  5. 大数据项目相关技术栈（Hadoop周边技术）

    J2EE 框架Spring 开发框架 + SSH or SSM Lucene 索引和查询IKAnalyzer 分词Webmagic 爬虫 ETL工具:KettleSqoop 结构化数据库-hadoop ...

  6. vuex的module的简单实用方法

    当我们的项目越来越大的时候,我们就开始使用vuex来管理我们的项目的状态.但是如果vuex的状态多了呢,这个时候module就登场了.看了一下官方的文档,很详细,但是没有demo让初学者很头疼.那我就 ...

  7. 个人博客搭建( wordpress )

    最近同学买了一台虚机( centos7 系统 ).一个域名,让帮忙搭一个个人博客.本着简单快捷,个人博客采用 wordpress 来搭建.为了以后博客系统的迁移方便,使用 docker 来安装 wor ...

  8. springboot + mybatis

    这两天启动了一个新项目因为项目组成员一直都使用的是mybatis,虽然个人比较喜欢jpa这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关于spring boot ...

  9. 模板引擎之-jade

    ##### 首先我们安装jade模板引擎并编译`npm install jade --global`在项目文件夹下创建一个`index.jade`文件,并且写入```doctypehtml head ...

  10. docker私有仓库-https+nginx

    一.概述 使用的是registry-2.4版本,因为在这个版本开始提供了garbage-collect,能够清理掉blobs,2.1开始提供了api的删除功能,但是只是删除的index并没有释放掉磁盘 ...