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

　　

　　1，html中的换行标签是 br，写法是： <br />

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

显示结果 描述 实体名称 实体编号
空格 &nbsp;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号  &apos; (IE不支持) '
￠ 分 &cent; ¢
£ 镑 &pound; £
¥ 日圆 &yen; ¥
€ 欧元 &euro; €
§ 小节 &sect; §
© 版权 &copy; ©
® 注册商标 &reg; ®
™ 商标 &trade; ™
× 乘号 &times; ×
÷ 除号 &divide; ÷

　　其实常用的也就是前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>

，html中的换行标签是 br </br>

,常用特殊字符    </br>

()空格&nbsp;空格    </br>

()小于号 &lt;        </br>

()大于号 &gt;        </br>

()和字符 &amp;        </br>

()双引号 &quot; 引号内的内容 &quot;    </br>

，html中添加注释，注释在网页中看不到 </br>

<!--  这是一段注释，方便我以后维护程序 -->

，html中插入一条横线使用标签 hr

<hr>

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

<p>

()p是一对标签，而br是单独的标签。

()段落标签，每个段落之间有一定距离，类似于一个p换段标签等于使用两个br标签换行。

()常常使用段落标签，让文章条理段落上下分割清晰，同时也对搜索引擎优化（SEO），让搜索引擎感到你的网页内容段落清晰更加友好清晰。

<p>

<p>

，使用pre标签，可以输出一段源程序代码，比如下面是一段C#代码：

<pre>

    for(int i=; i < ; i++)

    {

        Console.Write(i);

    }

</pre>

pre标签可定义预格式化的文本。</br>

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

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

</p>

<p>

,图片标签img，它有几个重要的属性：</br>

()属性src，指定图片的位置，可以使用相对路径指向本网站某个图片，如 src="a.jpg" </br>

也可以使用绝对路径，指向网络的某个图片，如src="http://img3.imgtn.bdimg.com/it/u=2725510359,1961955826&fm=21&gp=0.jpg" </br>

()属性alt，当指定的图片不存在，可以使用alt指定显示的文字，比如 alt="这是个图片"，

如果图片不存在，就会显示 “这是个图片” </br>

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

</p>

<p>

，行内标签span    </br>

span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

比如: <span>这段文字是放在span内的，基本没有变化吧</span> </br>

这个标签在以后讲样式的时候在详细说。

</p>

<p>

，块级标签 div </br>

div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的唯一格式表现。比如：

<div>

这是div内部的一段文字，是不是换行了，而span标签是不换行的，是行内标签。

</div>

div标签主要用来布局网页结构，以后讲样式的时候会提到。

</p>

</body>

</html>

我给女朋友讲编程html系列(4) -- html常用简单标签的更多相关文章

  1. 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

    首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...

  2. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  3. 我给女朋友讲编程html系列(2) --Html标题标签h1

    Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...

  4. 我给女朋友讲编程html系列(1) -- Html快速入门

    Html是一门编写网页的语言. 在我学习Html的时候,网上的很多朋友说,直接使用[记事本]编写就行了,最后保存为后缀名为 .html 的文件. 不过,我建议你用[Nodepad++]来编写网页,用这 ...

  5. 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  6. 我给女朋友讲编程CSS系列(4) CSS盒子模型

    什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school ...

  7. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  8. 我给女朋友讲编程总结建议篇，怎么学习html和css

    总共写了11篇博客了,7篇讲html的,4篇讲网络的.不敢说写的多么好吧,最起码的是我迈出了写作的第一步,写作的过程中了解了一些其他的知识,比如SEO.几种重定向等,由于个人能力和见识有限,写出来的东 ...

  9. 我给女朋讲编程网络系列(2)--IIS8 如何在本地发布网站

    通过IIS8 在本地发布网站,一个截图,你就全明白了,越是简单,越是实用. 如果有现成的网站,就将你的网站放到一个文件夹中,比如WebTest2中. 如何没有网站,可以在WebTest2中新建一个in ...

随机推荐

  1. 使用C#三维图形控件进行曲线曲面分析

    使用AnyCAD.Net三维图图形控件能够计算曲线的切线.法线.曲率.长度等,能够计算曲面的uv切线.法线.面积等. 代码示例一:曲线分析 Platform.LineStyle lineStyle = ...

  2. Min Stack [LeetCode 155]

    1- 问题描述 Design a stack that supports push, pop, top, and retrieving the minimum element in constant ...

  3. ctags对部分目录生成tags

    最近在研究Tiny6410上的uboot移植,看uboot源码时,生成tags文件用的是最粗暴的方法:“ctags -R *”,由于某些函数在各个平台下都有实现,导致在用“g+]”跳转到该函数的定义时 ...

  4. 软件工程 speedsnail 冲刺4

    2015-5-8 完成任务:学习了黑马android教学视频7.8.9集,对布局和计划做了调整: 遇到问题: 问题1 异常 Warning: Activity not started, its cur ...

  5. objective-C常量与变量

    1.Objective-C中声明常量使用关键字const.如:const double PI = 3.1514; 2.Objective-C中变量可以分为成员变量.局部变量和全局变量(用的很少,尽量不 ...

  6. excute和query

    query(update goods set is_delete=1 where goods_id=13)总是出错??为什么, excute(update goods set is_delete=1 ...

  7. Index of my articles

    65:一个表格说明RelativeLayout中的几个重要属性[Written By KillerLegend] (2013-10-16 21:59) 64:win7修改软件[授权给…]后面的名称 ( ...

  8. 十款基础级WordPress插件

    1.Akismet插件 Akismet是全球最受欢迎的反垃圾插件,专为对抗"博客spam"."评论spam"而生.Akismet是WordPress官方插件之一 ...

  9. 获取枚举的title

    public class StringValue : System.Attribute { private readonly string _value; public StringValue(str ...

  10. Java 第四天 Mysql

    下载地址 http://dev.mysql.com/downloads/  社区版是免费的 配置将zip 解压copy到本地,如:C:\mysql-5.6.15-winx64,复制配置文件my-def ...