• 我给女朋友讲编程html系列(4) -- html常用简单标签


      今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多。好了,废话不说了,还是写今天的教程吧。

      

      1,html中的换行标签是 br,写法是: <br />

     

      2,html中有一些特殊的字符,不能直接输入,需要使用对应的字符实体来代替,比如使用 &nbsp; 来代替空格,下面按照重要性列举出来一些常用的特殊字符。

    显示结果描述实体名称实体编号

     

    空格 &nbsp; &#160;
    < 小于号 &lt; &#60;
    > 大于号 &gt; &#62;
    & 和号 &amp; &#38;
    " 引号 &quot; &#34;
    ' 撇号  &apos; (IE不支持) &#39;
    &cent; &#162;
    £ &pound; &#163;
    ¥ 日圆 &yen; &#165;
    欧元 &euro; &#8364;
    § 小节 &sect; &#167;
    © 版权 &copy; &#169;
    ® 注册商标 &reg; &#174;
    商标 &trade; &#8482;
    × 乘号 &times; &#215;
    ÷ 除号 &divide; &#247;

     

      其实常用的也就是前5个,如果需要输出对应的“显示结果”,就可以输入“实体名称”来达到目的。

      &nbsp; 的全称是:Non-Breaking SPace 非间断空格

      &lt; 的全称是 : less than  小于 ,对应 <

      

      &gt; 的全称是:great than 大于 ,对应 >

      

      &amp; 的全称是:ampersand ,意思就是  “&的记号名称”

          &quot; 的全称是:  quote , 意思是 “引号”

     

     

      

      3,在html中添加注释,使用 <!--   你的注释  -->  ,注释中的内容不会显示在网页中,注释是方便开发人员维护网站而添加的。

      

      4,html中插入一条横线使用标签 hr,写法是<hr>

      

      5,一个段落的内容可以放在 p 标签内,比如段落标签p与换行br标签的区别如下:

      (1)p是一对标签,而br是单独的标签。
      (2)段落标签,每个段落之间有一定距离,类似于一个p换段标签等于使用两个br标签换行。
      (3)常常使用段落标签,让文章条理段落上下分割清晰,同时也对搜索引擎优化(SEO),让搜索引擎感到你的网页内容段落清晰更加友好清晰。

     

      6,使用pre标签,可以输出一段源程序代码,pre标签可定义预格式化的文本。

       被包围在 pre 中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

       pre标签的一个常见应用就是用来表示计算机的源代码。

      

      效果看后面的例子。

     

      7,图片标签img,它有几个重要的属性:
      (1)属性src,指定图片的位置,可以使用相对路径指向本网站某个图片,如 src="a.jpg"
    也可以使用绝对路径,指向网络的某个图片,如src="http://img3.imgtn.bdimg.com/it/u=2725510359,1961955826&fm=21&gp=0.jpg"

      (2)属性alt,当指定的图片不存在,可以使用alt指定显示的文字,比如 alt="这是个图片",
    如果图片不存在,就会显示 “这是个图片” ,注意对于img标签,src属性和alt属性是必须的,如果图片没有显示出来,最好是有替代的文字。

      (3)属性width和height,图片的宽度和高度,一般图片的大小都是提前算过的,然后使用作图工具按照算出来的宽度和高度来切图,设置图片的宽度和高度,防止网页因为图片过大而变形。

     

      8,行内标签span 
      span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
      比如: <span>这段文字是放在span内的,基本没有变化吧</span>
      这个标签在以后讲样式的时候在详细说。

     

      9,块级标签 div
      div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 div 固有的唯一格式表现。比如:
    <div>
    这是div内部的一段文字,是不是换行了,而span标签是不换行的,是行内标签。
    </div>
    div标签主要用来布局网页结构,以后讲样式的时候会提到。

     

    下面是例子,新建一个 a.html文件,自己动手输入下面的内容,练习一下吧。可以在浏览器中查看效果。

     

    <html>
    <head>
    <title>
    html常用简单标签
    </title>
    </head>
    <body>
    1,html中的换行标签是 br </br>
    
    2,常用特殊字符    </br>
    (1)空格&nbsp;空格    </br>
    (2)小于号 &lt;        </br>
    (3)大于号 &gt;        </br>
    (4)和字符 &amp;        </br>
    (5)双引号 &quot; 引号内的内容 &quot;    </br>
    
    3,html中添加注释,注释在网页中看不到 </br>
    <!--  这是一段注释,方便我以后维护程序 -->
    
    4,html中插入一条横线使用标签 hr
    <hr>
    5,一个段落的内容可以放在 p 标签内,比如段落标签p与换行br标签的区别如下:
    <p>
    (1)p是一对标签,而br是单独的标签。
    (2)段落标签,每个段落之间有一定距离,类似于一个p换段标签等于使用两个br标签换行。
    (3)常常使用段落标签,让文章条理段落上下分割清晰,同时也对搜索引擎优化(SEO),让搜索引擎感到你的网页内容段落清晰更加友好清晰。
    <p>
    
    <p>
    6,使用pre标签,可以输出一段源程序代码,比如下面是一段C#代码:
    <pre>
        
        for(int i=0; i < 10; i++)
        {
            Console.Write(i);
        }
    
    </pre>
    
    pre标签可定义预格式化的文本。</br>
    被包围在 pre 中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</br>
    pre标签的一个常见应用就是用来表示计算机的源代码。</br>
    </p>
    
    <p>
    7,图片标签img,它有几个重要的属性:</br>
    (1)属性src,指定图片的位置,可以使用相对路径指向本网站某个图片,如 src="a.jpg" </br>
    也可以使用绝对路径,指向网络的某个图片,如src="http://img3.imgtn.bdimg.com/it/u=2725510359,1961955826&fm=21&gp=0.jpg" </br>
    (2)属性alt,当指定的图片不存在,可以使用alt指定显示的文字,比如 alt="这是个图片",
    如果图片不存在,就会显示 “这是个图片” </br>
    (3)属性width和height,图片的宽度和高度,一般图片的大小都是提前算过的,然后使用作图工具按照算出来的宽度和高度来切图,设置图片的宽度和高度,防止网页因为图片过大而变形。</br>
    </p>
    
    <p>
    8,行内标签span    </br>
    span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
    比如: <span>这段文字是放在span内的,基本没有变化吧</span> </br>
    这个标签在以后讲样式的时候在详细说。
    </p>
    
    <p>
    9,块级标签 div </br>
    div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 div 固有的唯一格式表现。比如:
    <div>
    这是div内部的一段文字,是不是换行了,而span标签是不换行的,是行内标签。
    </div>
    div标签主要用来布局网页结构,以后讲样式的时候会提到。
    </p>
    
    
    </body>
    </html>
  • 相关阅读:
    linux mint安装成功
    js 兼容性
    程序员的肚子有多大,水平就有多高
    财富通直连接口for rails3
    ubuntu live cd版本是没有recuse broken system功能
    生活百科
    省市县导入mysql代码,通过csv
    省市县导入mysql代码,通过csv
    休眠、挂起、待机三者之间的区别 收藏
    支付宝接口for rails3
  • 原文地址:https://www.cnblogs.com/workest/p/3859275.html
Copyright © 2020-2023  润新知