HTML标签(2)

a标签(容器级单标签)

语义:跳转到指定的连接

属性

列表系列

1.无序列表

该列表由两部分组成：ul标签嵌套li标签(ul标签是典型的容器级标签)

图示：

2.有序列表

该列表由两部分组成：ol标签嵌套li标签(ol标签是典型的容器级标签)

3.定义列表

该列表由三部分组成:dr>dt+dd(dr嵌套dt和dd)！！！dt和dd是同级关系。

做一些练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>无序列表</title>

</head>

<body>

      <!--无序列表是由ul>li形成的,是典型的双标签容器级标签-->

      <ul>

          <li>春天</li>

          <li>秋天</li>

          <li>夏天</li>

          <li>冬天</li>

      </ul>

      <!--有序列表是由ol>li形成的,是典型的双标签容器级标签-->

      <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1497721471,3837702940&fm=26&gp=0.jpg"/>

      <ol>

          <li>第一名</li>

          <li>第二名</li>

          <li>第三名</li>

          <li>第四名</li>

      </ol>

      <!--定义列表是由dr>dt+dd完成的-->

      <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1497721471,3837702940&fm=26&gp=0.jpg"  />

      <dr>

          <dt>汪星人</dt>

          <dd>爱好：吃骨头</dd>

          <dd>性格：温顺</dd>

          <dt>喵星人</dt>

          <dd>爱好：睡觉,吃饭</dd>

          <dd>性格：温顺</dd>

      </dr>

</body>

</html>

div和span标签(典型的容器级双标签)

div：

相当于一个大盒子,对于网页的制作肯定不能是直接看作一个整体来制作的,我们一般都是把开头,中间,结尾分成三个盒子,这样便于维护,也不容易出错。

span:

相当于一个小盒子,我们可以把一小部分放入一个span,就比如说一个简单的动画之类的。

将元素放入盒子后。。。。。每一个盒子都有一个class值,我们可以在设计css样式时,根据其特定的class值去对某一个盒子设置样式,这样使代码可读性提高了。

做一些练习(a标签的锚点跳转,本页面的锚点跳转,跨页面的锚点跳转)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>锚点跳转</title>

</head>

<body>

    <!--第一个练习锚点往固定网页上的跳转-->

    <a href="https://www.taobao.com/">淘宝网</a>

    <!--打开新网页的跳转-->

        <a href="https://www.jd.com/" target="_blank">京东商城</a>

        <a href="#汪星人">汪星人</a>

        <a href="#喵星人">喵星人</a>

        <a href="img标签的学习.html#大象大象">大象大象</a>

        <!--以图片作为链接-->

        <p></p>

        <a href="https://www.tmall.com/" target="_black" title="天猫"><img src="cat.jpg" alt="天猫"/></a>

        <!--本页面锚点跳转到指定位置-->

         <span id="汪星人">

         <h2 >傲之追猎者----雷恩加尔</h2>

         <p>&nbsp;&nbsp;&nbsp;瓦斯塔亚的雷恩加尔是一名声名远扬又凶残无比的猎手。他的人生充满着

           追寻猎杀危险的生物的快感。他寻遍整个世界，只为寻

           找他能找到的最可怕的野兽，特别是寻找任何关于卡兹克的踪迹。这头来自虚空的野兽弄瞎了他的一只眼睛

           。雷恩加尔追寻着猎物，不为捕食也不为荣耀，只是为了纯粹的猎杀所带来的激烈美感。</p>

           <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1497721471,3837702940&fm=26&gp=0.jpg" title="狮子汪" alt="我真的是狮子汪"/>

       </span>

       <span id="喵星人">

       <h2 >最懒的动物----喵星人</h2>

           <p>猫，分多种，是鼠的天敌。各地都有畜养。有黄、黑、白、灰

               等各种颜色；身形像狸，外貌像老虎，毛柔而齿利（有几乎无毛的品种）。以尾长腰短

               ，目光如金银，上腭棱多的最好。身体小巧，样子招人喜爱。好奇心重。</p>

               <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2943876448,791526761&fm=26&gp=0.jpg" title="喵星人"/>

       </span>

       <!--跨页面跳转到指定位置-->

</body>

</html>

有些图片的网址好像一直在变,所以可能会出现无法显示的问题,可以试着将源码中的图片地址换成自己电脑上的,或者自己到网上搜到的。

HTML基础-------HTML标签(2)的更多相关文章

  1. C#基础---Attribute(标签） 和 reflect（反射) 应用二

    以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...

  2. [转] Git 基础 - 打标签

    2.6 Git 基础 - 打标签 打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列 ...

  3. h5标签基础 meta标签

    <meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/>  ,//u ...

  4. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  5. HTML&CSS基础-html标签的实体

    HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...

  6. HTML&CSS基础-meta标签

    HTML&CSS基础-meta标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...

  7. HTML基础 img标签 做一个图库

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. HTML基础-------HTML标签(3)

    HTML标签(3) 表格 作用:制作一个表格 属性: 标签;table>tr>td(或者th) 语义; table:一个表格 tr:一行 td:一个单元格 th:单元格的表头 captio ...

  9. 前端基础小标签3 H5新标签

    第二部分H5的新标签一.<!-- mark标签             1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样             2.浏览器通常会用黄色显示m ...

  10. html 基础--一般标签

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

随机推荐

  1. 必看！如何让你的LBS服务性能提升十倍！

    本文由云+社区发表 作者:腾讯云数据库团队 随着国内服务共享化的热潮普及,共享单车,共享雨伞,共享充电宝等各种服务如雨后春笋,随之而来的LBS服务定位问题成为了后端服务的一个挑战.MongoDB对LB ...

  2. libaio.so.1()(64bit) is needed by MySQL-server 问题解决办法

    [root@localhost upload]# rpm -ivh MySQL-server-5.5.25a-1.rhel5.x86_64.rpmerror: Failed dependencies: ...

  3. WEB框架-Django框架学习-关联管理器(RelatedManager)

    一.class RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器.它存在于下面两种情况: 1.一对多 ForeignKey关系的“另一边” ...

  4. iOS客户端图片智能裁剪

     概述 所谓智能裁剪其实就是按照指定尺寸裁剪或显示出包含图片核心特征的区域,目前很多智能裁剪都是在服务器端做的,在客户端需要访问时直接裁剪放到Redis或者提前裁剪好以备访问.但是找了一圈直接在iO ...

  5. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之九 || 依赖注入IoC学习 + AOP界面编程初探

    更新 1.如果看不懂本文,或者比较困难,先别着急问问题,我单写了一个关于依赖注入的小Demo,可以下载看看,多思考思考注入的原理: https://github.com/anjoy8/BlogArti ...

  6. 宁撞金钟一下，不打破鼓三千，IT人要有志气，要进就进大的好的公司

    最近我也在帮一些朋友面试,再结合自身的经验,发现了一个意料之外情理之中的事情:个别挣钱能力一般或规模比较小的公司,对候选人的要求普遍比一些大公司反而高,而且工作时间普遍会比一些好公司要长. 比如一个税 ...

  7. 【Android Studio安装部署系列】三十六、Android studio3.2使用过程中注意事项

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio升级到3.2之后,运行旧项目的时候出现了各种情况,特此记录下. 一.打包选项多了,一般情况下选择APK即 ...

  8. python学习第四讲,python基础语法之判断语句,循环语句

    目录 python学习第四讲,python基础语法之判断语句,选择语句,循环语句 一丶判断语句 if 1.if 语法 2. if else 语法 3. if 进阶 if elif else 二丶运算符 ...

  9. python3爬取网页图片路径并写入文件

    import reimport urllib.request # 获取网页文件def getHtml(url): response = urllib.request.urlopen('https:// ...

  10. 策略模式 Strategy 政策Policy 行为型 设计模式（二十五）

    策略模式 Strategy   与策略相关的常见词汇有:营销策略.折扣策略.教学策略.记忆策略.学习策略.... “策略”意味着分情况讨论,而不是一概而论 面对不同年龄段的人,面对不同的商品,必然将会 ...