html、css、js入门-2：HTML的文本标记

 

文本标记的作用

   . 文本是网页上的基本成分
   . 直接书写在文本会用浏览器默认的样式显示
   . 包含在标记中的文本则会被显示为标记所拥有的样式

 
      -- 特殊字符
      -- 注释
      -- 标题元素
      -- 段落元素
      -- 换行元素
      -- 分区元素

 

文本与特殊字符

    . 空格折叠
 
       -- 多个空格或制表符压缩成单个空格，即只显示一个空格

    .  特殊字符(如空格)，可以用转义字符，也称为字符实体

 
    The <p> element.   
     ©2011 by tarena.

     页面显示如下:
      The <p> element.    2011 by tarena.

 

 

标题元素  <hn>

    . 标题元素让文字以醒目的方式显示，往往用于文章的标题

    . 基本语法: <h#> ... </h#>

        -- #=1,2,3,4,5,6
        -- 从<h1>到<h6> ,即 标题1--标题6

例如：

       <h1>h1 text</h1>
       <h2>h2 text</h2>

 

 

段落元素 <p>

  .  <p> 元素提供了结构化文本的一种方式
  .  <p> 元素中的文本会用单独的段落显示

      -- 与前后的文本都换行分开
      -- 添加一段格外的垂直空白距离，作为段落间距
      -- 常用属性: align

  例如:

     <p>The first paragraph.</p>
     <p align="right">The second paragraph.</p>
 

  页面显示:
        The first paragraph.
                            The second paragraph.

 

 

换行元素 <br>

   .使用<br> 元素在任何地方创建手工换行

        -- 空标记

   例如:

    <p>This is a<br>paragraph.</p>

   
   页面显示:

            This is a
            paragraph.

 

分区元素 <span>和<div>

  . 分区元素用于为元素分组，常用于页面布局
  . 块分区元素 : <div></div>
  . 行内分区元素: <span></span>

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

      <div style="color:blue;">
            <p>first</p>
            <p>second</p>
      </div>
      <p>一周畅销<span style="color:red;">榜</span></p>

 

 

行内元素与块级元素

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

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

   . 行内元素

         -- 出现在句子中，不会换行
         -- 如:<span>、<a>    

 

 

文本标记

 
   1、 创建 html 文档
   2、 使用文本标记为页面添加内容