美文网首页
2018-08-13 HTML5学习文本.图片.列表标签

2018-08-13 HTML5学习文本.图片.列表标签

作者: 随雪而世 | 来源:发表于2018-08-13 19:27 被阅读0次

文本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
        <!--1.标题标签(h1-h6)-->
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <h4>我是标题4</h4>
        <h5>我是标题4</h5>
        <h6>我是标题4</h6>
        <!--<h7>我是错误的标题格式</h7>-->
        
        <!--
            2.段落标签(p)
            a.一个p标签对应一个段落
            b.p标签的内容结束后会和其他的内容之间默认有一个空行
        -->
        <p>
            世界经济长远发展的动力源自创新。总结历史经验,
        我们会发现,体制机制变革释放出的活力和创造力,科技进步造就的新产业和新产品,
        是历次重大危机后世界经济走出困境、实现复苏的根本。
        
        </p>
        <p >
            面向未来,增强自主创新能力,最重要       的就是要坚定不移走中国特色自主创新道路,
        坚持自主创新、重点跨越、支撑发展、引领未来的方针,
        加快创新型国家建设步伐。&frac12;</p>
        
        <!--3.文本符号
            &nbsp;  --- 空格
            其他的查手册
        -->
        <p>
        &nbsp;&nbsp;&nbsp;&nbsp;世界经济长远发展的动力源自创新。总结历史经验,
        我们会发现,体制机制变革释放出的活力和创造力,科技进步造就的新产业和新产品,
        是历次重大危机后世界经济走出困境、实现复苏的根本。
        
        </p>
        
        <!--4.换行标签(br)-->
        <p>
        &nbsp;&nbsp;&nbsp;&nbsp;世界经济长远发展的动力源自创新。总结历史经验,<br />
        我们会发现,体制机制变革释放出的活力和创造力,科技进步造就的新产业和新产品,<br />
        是历次重大危机后世界经济走出困境、实现复苏的根本。
        </p>
        
        
        <!--5.超链接(a)-->
        <a href="http://www.baidu.com">百度一下</a>
        
        <!--6.文字加粗(b/strong)
            <b>加粗文字</b>
            <strong>加粗文字</strong>  -- 有强调的作用
        -->
        
        <p>
        &nbsp;&nbsp;&nbsp;&nbsp;世界经济长远发展的动力源自创新。<hr />总结历史经验,<br />
        我们会发现,<b>体制机制</b>变革释放出的活力和<strong>创造力</strong>,科技进步造就的新产业和新产品,<br />
        是历次重大危机后世界经济走出困境、实现复苏的根本。
        </p>
        <hr />
        
        <!--7.文字倾斜(i/em)
            <i>倾斜文字</i> 
            <em>倾斜文字</em> -- 有强调的作用
        -->
        <p>
        &nbsp;&nbsp;&nbsp;&nbsp;世界经济<i>长远发展</i>的动力源自创新。总结<em>历史</em>经验,<br />
        我们会发现,<b><i>体制机制</i></b>变革释放出的活力和<strong>创造力</strong>,科技进步造就的新产业和新产品,<br />
        是历次重大危机后世界经济走出困境、实现复苏的根本。
        </p>
        
        <!--8.水平线-->
        <hr />
    
    </body>
</html>

文本标签

图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--1.图片标签(img)
            a.src属性:图片的地址(本地地址、网络地址)
            本地地址:相对路径(相对于工程目录)
            注意:本地图片需要放到工程目录下的img文件夹下
            
            b.title属性:图片的标题(鼠标停留在图片上,隔一段时间才显示出来)
            c.alt属性:图片加载失败后显示的提示信息
        -->
        <h1>图片1</h1>
        <img src="img/luffy.png"/>
        <img id="image1" alt="图片加载失败" title="山治" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534152944837&di=6f15150dbd694d66d199f66c6b0c6612&imgtype=0&src=http%3A%2F%2Fp6.qhimg.com%2Ft01764dfada8dc1af26.jpg"/>
        
        <h1 id="imge2">图片2</h1>
        <img src="img/luffy.png"/>
        <h1>图片3</h1>
        <img src="img/luffy.png"/>
        
        <!--2.超链接(a)
            网页上点击后可以跳转的标签都是超链接
            
            href属性:跳转地址(本地地址,网络地址)
                网络地址:跳转到对应的网页
                本地地址: 当前工程的其他的html文件路径
                空串/#: 刷新页面回到网页的顶部
                选择器:让网页滚动到网页上的任意的位置
            
            target属性:
                _self(默认的): 在当前页面中打开href的地址
                _blank: 在新的页面中打开href的地址
            
            
            a. 点击文字跳转
        -->
        <a href="#">百度一下</a>
        <a href="03-列表.html" target="_blank">列表</a>
        <a href="#imge2">图片2</a>
        <a href="#image1">图片11111</a>
        
        <!--b.点击图片跳转-->
        <a href="http://www.mobiletrain.org/?pinzhuanbdtg=biaoti">
            <img src="img/luffy2.png"/>
        </a>
          </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>html基础</title>
    </head>
    <body>
        <!--列表
        有序列表
        无序列表
        自定义列表-->
        
        <!--有序列表ol-->
        <ol>
            <li>元素</li>
            <li>语文</li>
            <li>数学</li>
        </ol>
        <!--无序列表ul-->
        <ul>
            <li>成都</li>
            <li>重庆</li>
            <li>北京</li>
        </ul>
        
        <!--自定义列表-->
        <dl>
            <dt>城市:</dt>
            <dd>成都</dd>
            <dd>重庆</dd>
            <dd>北京</dd>
            <dd>天津</dd>
        </dl>
</body>
</html>
列表

相关文章

  • 2018-08-13 HTML5学习文本.图片.列表标签

    文本 图片

  • 认识html

    认识html 文本标签 列表标签 图片标签 超链接(重点!!!!!!!!!!!!!) 表格标签

  • Day21HTML

    HTML标签 文本标签 列表标签 图片和超链接 数据表格 复杂表格

  • html基础

    html标签 文本标签 列表标签 图片和超链接 数据表格 不规则表格

  • 2018-10-29-day1-html

    一.标签 == 标记 二.文本标签 三.列表标签 四.图片和超链接

  • 初识HTML

    HTML基础 文本标签 列表 图片和超链接 表格 homework.html

  • 学习纲要:常见标签和属性

    学习目标 知道什么是标签和属性。 知道 超链接,标题,段落,图片,列表,标签,表格,表单相关(文本输入框,单选框,...

  • html标签

    1、html标签 2、文本标签 3、列表标签 4、图片超链接 5、数据表格 6、复杂表格

  • Python小白学习进行时---HTML标签(2018-7-09

    一、认识网页开发 二、文本标签 三、列表标签 四、图片和超链接 五、表格标签 六、复杂的表格 ==========...

  • Markdown初步学习

    MarkDown学习 无序列表 文本1 文本2 文本3 有序列表 文本1 文本2 文本3 超链接 简书 插入图片 ...

网友评论

      本文标题:2018-08-13 HTML5学习文本.图片.列表标签

      本文链接:https://www.haomeiwen.com/subject/rfzubftx.html