码迷,mamicode.com
首页 > Web开发 > 详细

Html5之基础-4 HTML文本

时间:2016-03-16 19:23:32      阅读:468      评论:0      收藏:0      [点我收藏+]

标签:浏览器   网页   下划线   element   制表符   

一、HTML 文本标记概述


文本标记的作用

  (1)文本是网页上的重要组成部分

  (2)直接书写的文本会用浏览器默认的样式显示

  (3)包含在标记中的文本则会被显示为标记所拥有的样式

        - 特殊字符

        - 注释

        - 标题元素

        - 段落元素

        - 换行元素

        - 分区元素

        - ...


文本与特殊字符

  (1)空格折叠

        - 多个空格或制表符压缩成单个空格,即只显示一个空格

  (2)特殊字符(如空格),需要进行转义(使用字符实体)

Code:
<!DOCTYPE html>
<body>
    The &lt;p&gt; element.&nbsp;&nbsp;&nbsp;&nbsp;&copy; 2016 by Jason.
</body>
</html>

  显示结果:

技术分享


二、使用文本标记


文本样式

  (1)文本样式的作用是对文本进行修饰,如加粗、倾斜等

        - <b>...</b>:加粗

        - <b>...</b>:倾斜

        - <b>...</b>:下划线

        - <b>...</b>:删除线

        - <b>...</b>:上标

        - <b>...</b>:下标

技术分享

标题元素<hn>

  (1)标题元素让文字以醒目的方式显示,往往用于文章的标题

  (2)基本语法:<h#>...</h#>

        - # = 1,2,3,4,5,6

        - 从 <h1> 到 <h6>,即 标题1-标题6

技术分享

段落元素<p>

  (1)<p> 元素提供了结构化文本的一种方式

  (2)<p> 元素中的文本会用单独的段落显示

        - 与前后的文本都换行分开

        - 添加一段额外的垂直空白距离,作为段落间距

        - 常用属性:align

技术分享

换行元素<br>

  (1)使用<br>元素在任何地方创建收手工换行

        - 空标记

技术分享

分区元素<span>和<div>

  (1)分区元素用于为元素分组,常用于页面布局

  (2)块分区元素:<div></div>

  (3)行内分区元素:<span></span>

        - 设置同一行文字内的不同格式

技术分享

行内元素与块级元素

  (1)块级元素

        - 默认情况下,块级元素会独占一行,即元素前后都会自动换行

        - 如: <p>、<div>、<hn>

  (2)行内元素

        - 不会换行,可以和其他行内元素位于同一行

        - 如: <span>、<b>、<i>、<u>


分割线元素<hr>

  (1)<hr> 元素用于在页面上创建一条水平线

        - 空标记

        - 常用于将页面的不同部分隔开

        - <hr>后面的文本将出现在新段落中

  (2)常用属性

        - size、width、align、color

技术分享


预格式化<pre>

  (1)保留源文档中的格式,即保留原来的换行和文本中的空白

技术分享


总结:本章内容主要介绍了HTML文本标记。

本文出自 “技术交流” 博客,谢绝转载!

Html5之基础-4 HTML文本

标签:浏览器   网页   下划线   element   制表符   

原文地址:http://jasonteach.blog.51cto.com/5192112/1751811

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!