HTML5+CSS3初期学习篇(二)

 HTML中的文本标签

1.标题标签

<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>

标题(H1-H6)标签是指网页html 中对文本标题所进行的着重强调的一种标签制作<h>标签的主要意义是告诉搜索引擎这个是一段文字的标题,起强调作用。<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

我们运行一下代码

<DOCTYPE html>

<html>

    <head>

        <title>HTML小白学习初期(二)</title>

    </head>

  <body>       

         <h1>我是一级标题</h1> 
        <h2>我是二级标题</h2>
        <h3>我是三级标题</h3>
        <h4>我是四级标题</h4>
        <h5>我是五级标题</h5>
        <h6>我是六级标题</h6>

 </body>

</html>

我们会发现随着数字的增大字体的大小渐渐减小,以标签<h1>、<h2>、<h3>到<h6>依此显示重要性的递减

 

比如说我们现在看到的博客,他就是需要一个标题来突显自己的定位内容是什么。这个标题标签在实际运用中也是比较广泛的。

 然后我们再来学习一下

2.文字标签 <p></p>

<p> 你好 ,现在我们来学习一看下文字标签</p>

 这个是非常简单的我们再综合一下之前学习的

<DOCTYPE html>

<html>

    <head>

        <title>HTML小白学习初期(二)</title>

    </head>

  <body>       

 <p>

let 's go <a href="http://t.csdn.cn/Ib0hc" target="_blank">点击开始你的HTML学习生涯之旅</a>

</p>

</body>

</html>

 

对于文字标签和我们的word文档一样可以设置文本格式

粗体设置  <strong>需要设置的粗体内容</strong>

斜体设置 <em>需要设置的斜体内容</em>

删除线设置<del></del>

下划线设置<ins></ins>

效果如图所示:

 现在我们来学习极其有趣的列表标签了

HTML中的列表标签

又分为:无序列表<ul></ul> 、有序列表<ol></ol> 和 自定义列表 <dl></dl>

①无序列表的格式:

 <ul>

    <li>   </li>

 </ul>

<DOCTYPE html>

<html>

    <head>

        <title>HTML小白学习初期</title>

    </head>

    <body>

 <ul>

            <li>唧唧复唧唧 </li>

            <li>木兰当户织</li>

            <li>不闻机杼声 </li>

            <li>惟闻女叹息 </li>

        </ul>

  </body>

</html>

 

 

 我们会发现每个字的前面都有一个小点点,后期我们学习到css是可以修改样式的或者我们不要它。而且在ul里面只能放li

②有序列表格式:

<ol>

    <li> </li>

 </ol>

 

<DOCTYPE html>

<html>

    <head>

        <title>HTML小白学习初期</title>

    </head>

    <body>

 <ol>

            <li>唧唧复唧唧 </li>

            <li>木兰当户织</li>

            <li>不闻机杼声 </li>

            <li>惟闻女叹息 </li>

        </ol>

  </body>

</html>

有序列表的特点:有顺序的(1. 2. 3.…),ol里面只能放li。 

③自定义列表的格式:

 <dl>

    <dt></dt>

   <dd></dd>

 </dl>

 其中<dl>一般用来定义描述列表

        <dt>一般用来定义项目/名字

        <dd>一般是用来描述定义的项目/名字

        dt和dd 二者是并列关系。

<DOCTYPE html>

<html>

    <head>

        <title>HTML小白学习初期</title>

    </head>

    <body>       
         <dl>
            <dt>HTML</dt>
            <dd>页面的基本框架</dd>
            <dt>CSS</dt>
            <dd>基于框架设置页面样式</dd>
         </dl>
    </body>
</html>

所呈现的效果: 

 

                           ◎◎◎今天学习笔记的分享就到这了谢谢各位的观看!◎◎◎

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值