HTML 基本标签学习

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <!--name的keywords的content内容用来便于搜索引擎机器人查找信息和信息分类用-->
    <meta name="keywords" content="meta的content属性内容说明">
    <!--name的description勇于描述网页,content为描述的内容-->
    <meta name="description" content="description网页描述信息">
    <!--网页访问30秒后自动跳转刷新至百度网页-->
    <!--http-equiv相当于http的文件头作用,可以向浏览器传回一些用的信息,
    以帮助正确和精确地显示网页内容,与之对应的内容为content,content中的内容其实就是各个参数的变量值-->
    <meta http-equiv="refresh" content="30;URL=https://www.baidu.com">
    <!--content-type告诉浏览器解析该页面的编码方式-->
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title标签:网页标题</title>
    <!--link标签的rel的icon属性显示网页标题中的图标-->
    <link rel="icon" href="//www.jd.com/favicon.ico">
    <style>
        div{
            color: blueviolet!important;
            background-color: chartreuse;
        }
        span{
            color: green!important;
            background-color: cyan;
        }
        #div1{
            height: 500px;
            background-color: red;
        }
        #div2{
            height: 500px;
            background-color: orange;
        }
        #div3{
            height: 500px;
            background-color: green;
        }
        #div4{
            height: 500px;
            background-color: forestgreen;
        }
        #div_top{
            color: black;
            background-color: burlywood;
        }
    </style>
</head>
<body>
    hello world,body标签:网页内容
    <div id="div_top" aria-current="location">目录</div>
    <a href="#div1">第一章节</a>
    <a href="#div2">第二章节</a>
    <a href="#div3">第三章节</a>
    <a href="#div4">第四章节</a>
    <br>
    <hr>hr标签:显示一条横线,表示结束,不闭合标签
    <h1 style="color: red">h1标签:标题标签</h1>
    <h2 style="color: orange"> h2标签:小于h1的标题标签</h2>
    <h3 style="color: yellow"> h3标签:小于h2的标题标签</h3>
    <h4 style="color: green"> h4标签:小于h3的标题标签</h4>
    <h5 style="color: forestgreen"> h5标签:小于h4的标题标签</h5>
    <h6 style="color: blue"> h6标签:小于h5的标题标签</h6>
    <p>p标签:段落标签 换行,隔行,块级</p>
    <p>p标签:段落标签 换行,隔行</p>
    <div style="color: red">div标签:块级标签,什么功能都没有的标签,需要自己设定属性格式</div>
    <div>使用head中的div css样式</div>
    <span style="color: blue">span标签:内联标签,接着后面显示,显示长度取决于内容的长度; 块级标签</span>
    所有的标签分为:块级标签和内联标签
    div:block 块级
    span:in-line 内联
    <!--下面的标签都是内联标签接着之前的显示在同一行上-->
    <b>b标签:加粗的作用</b>
    <em>em标签:字体变为斜体</em>
    <strike>strike标签:去除效果</strike>
    <!--sub标签为下标,sup标签为上标,br标签为换行标签,del标签为删除标签-->
    <div>
        sub下标:2<sub>3</sub><br>
        sup上标:2<sup>3</sup><br>
        <del>del标签:删除效果,类似于stricke标签效果</del>
    </div>
    <img src="http://pic1.win4000.com/wallpaper/2019-12-17/5df8a14493926.jpg" width="500px"  alt="图片加载失败" title="美女图片点击有惊喜">
    <br>
    a标签:1.超链接标签,
          2.锚: 用来设置类似小说目录跳转到对应章节
    <a href="https://baike.baidu.com/item/%E5%96%9C%E7%B3%96%E9%9F%B3%E4%B9%90/1469446?fr=aladdin" target="_blank" title="喜糖音乐">喜糖音乐,target="_blank"设置从新的标签中打开超链接</a>
    <br>
    <div id="div1">第一章节
        <br>
        <img src="https://img-blog.csdnimg.cn/2022010614544455890.jpeg" height="400px" title="卡通动漫">
    </div>
    <a href="#div_top">返回顶部</a>
    <div id="div2">第二章节
        <br>
        <img src="http://img5.imgtn.bdimg.com/it/u=2512863397,2193113276&fm=26&gp=0.jpg" title="昆虫" alt="图片加载失败" height="400px">
    </div>
    <a href="#div_top">返回顶部</a>
    <div id="div3">第三章节
        <br>
        <img src="http://img3.imgtn.bdimg.com/it/u=4211583159,4118431348&fm=26&gp=0.jpg" height="400px" title="胡萝卜">
    </div>
    <a href="#div_top">返回顶部</a>
    <div id="div4">第四章节
        <br>
        <img src="http://img5.imgtn.bdimg.com/it/u=1142277570,1251772169&fm=26&gp=0.jpg" alt="图片加载失败" title="人物合影" height="400px">
    </div>
    <a href="#div_top">返回顶部</a>

    <br>
    ul标签:无序列表显示的标签,其中嵌套li标签
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <br>
    ol标签:有序列表显示的标签,显示序号,其中嵌套li标签
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>

    <br>
    dl标签:章节显示标签,依次嵌套dt和dd标签
    <dl>
        <dt>第一章</dt>
        <dd>第1节</dd>
        <dd>第2节</dd>
        <dd>第3节</dd>
        <dd>第4节</dd>
        <dt>第二章</dt>
        <dd>第1节</dd>
        <dd>第2节</dd>
        <dd>第3节</dd>
        <dd>第4节</dd>
    </dl>
    <br>
</body>
</html>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
更新内容:<br> 1.优化viewthread中的虚拟形象显示算法,每一个有虚拟形象显示的帖子页面只增加一次数据库查询(原本为每显示一个一次或一次以上查询),对于一页显示十帖的页面可减少至少9次查询。<br> 2.虚拟形象中心算法优化,每页减少5个以上查询。<br> 3.采用新的算法显示虚拟形象中心的个人形象,增加穿戴类别为整体造型的形象的功能,并且无需独立的header模版,减少了为使风格统一而进行修改的麻烦。<br> 4.虚拟形象中心中增添按形象名查询的功能,增加管理员可直接点击形象名进行设置形象的功能<br> 5.虚拟形象后台管理集成至系统设置中,功能完善:可批量修改虚拟形象,可编辑用户拥有的虚拟形象,更添加了虚拟形象数据的备份导出导入,方便批量添加虚拟形象和虚拟形象数据的更新升级流通。<br> 6.添加GD库版本和形象图片路径两个参数变量,图片路径参数可实现调用远程图片,对于没有空间存放图片包的会员可减少负担,但失去了主动升级的能力(因为你的图片文件是别人的呀,无法控制添加减少。) <br> <br> 将虚拟形象所有文件上传到相应位置,运行images_install.php,根据个人情况选择全新安装或升级。<br> 安装或升级后进入系统设置,对虚拟形象基本变量进行设置。<br> 如选择的是全新安装,还需在后台中将虚拟形象原始形象数据包导入。<br> 修改viewthread/template/tplfile目录,virtualimage/photo目录和virtualimage/images_config.php文件的权限为777<br> 修改相关文件完成安装。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值