导航菜单
  • 首页
  • 首页>前端万博manbext备用网址>HTML万博manbext备用网址

    HTML第三课:认识标题、段落、区块、强调等文本标签

    一个网页中文字是传达信息的主要元素,文本主要由重要的标题、文章段落、被强调的文本、普通的文本组成。

    一、标题

    标题标签有六个,依次是h1,h2,h3,h4,h5,h6。

    <h1>网页最重要的文字标签,一般用在logo、三级页面文章标题上。</h1>
    <h2>重要性次于h1,一般用在首页、二级页面的模块标题,三级页面文章的二级标题上。</h2>
    <h3>重要性次于h2,一般用在文章列表的标题上。</h3>
    <h4>不太重要</h4>
    <h5>不常用</h5>
    <h6>不常用</h6>

    比如,腾讯网的logo就是使用h1,代码如下:

    <h1><a href="http://www.qq.com/" class="qqlogo"><span class="undis">腾讯网</span></a></h1>

    首页中很多的新闻模块,模块的标题使用的h2,代码如下:

    <h2><a href="http://view.news.qq.com/" target="_blank">今日话题</a></h2>

    “今日话题”新闻模块下的头条新闻,新闻标题使用了h3,代码如下:

    <h3 id="todaytop"><a target="_blank" href="http://view.news.qq.com/original/intouchtoday/n3517.html">女子动车上拒给老人让座:别强行拔高道德水准</a></h3>

    二、段落标签<p>段落内容</p>

    段落标签很简单,文章是由段落构成的,不过默认的段落样式没有符合中国人首行缩进的习惯。需要后期css样式重新设置。

    <p>段落文本</p>

    三、特殊的文本

    1、强调文本<strong>标签

    文章中有一些文字相对来说比较重要,但是还不足以成为标题的时候,可以使用强调标签,该标签要和<b></b>标签区别开来。虽然两个标签都能让文字加粗,但是<b></b>也只是让文字样式加粗,并没有强调文字重要性的含义,而且也建议用CSS样式代替文字加粗的样式。

    <strong>强调的文本</strong>

    2、<pre>预格式化文本,pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。常见应用就是用来表示计算机的源代码。

    <pre></pre>

    3、<blockquote></blockquote>引用文本

    毛泽东说过:
    <blockquote>帝国主义都是纸老虎 ... </blockquote>

    4、<code>定义计算机代码文本。和pre有点差不多呢。

    <code>
    for(var i=0;i<100;i++){
    
    }
    </code>

    5、<cite>定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。和blockquote还是有差别的。

    ……还有一些使用频率较少的关于文本的标签请自行查手册。

    四、区块文本<span></span>

    该标签一般用来表示一块文本需要区别出来,而且该文本一般不具有特别重要的意义。比如文章发表的作者、日期、评论次数、点赞等等。

    <span>评论次数:</span>

    五、普通文本

    文本没有用具体的标签来描述,直接放在结构性标签里面。比如直接把文本放在div、li等结构性标签中。这种做法不太友好。

    <div>文本内容</div>

    在html5中增加了很多具有语义化的文本标签,比如<time>日期</time>、<address>地址</address>、<small>不够重要的小号文本</small>等,还是查阅万能的手册吧。

    html4手册下载

    xhtml_reference.chm

    html5手册下载

    w3c标准html5手册.chm

    还有一个好办法就是看优质的网站是如何使用标签的。下载一个谷歌浏览器,利用右键菜单中“审查元素”的命令,可以很好的查看当前文档的html、css、js等内容。

    谷歌浏览器审查元素.png谷歌浏览器控制台.png当然火狐的firebug更专业,不过我一直鄙视火狐的开启速度,还是平民的谷歌更让我喜欢,萝卜白菜,各有所爱啦!

    点赞


    6
    保存到:

    相关文章

    发表评论:

    ◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

    Top