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

　　

　　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. Nginx 下无法读取session 导致 thinkphp验证码错误

    打开php配置文件 php.ini 使用搜索命令 whereis php.ini 一般在:/etc/php.ini 目录下 使用vim命令打开 找到: session.save_path 找到php保 ...

  2. 数据库mysql的基本命令

    问题分析 当数据量很大的时候,所有数据都集中在一个文本文件中的话,读写会很困难,内存消耗大,速度很慢 操作很麻烦,因为读写都要根据指定的格式尽心解析,不通用 每次获取数据都要全部数据重新读写,不能通过 ...

  3. wpf仿QQ之窗体翻转

    很久以前在网上找过窗体翻转的Demo,但看得不是很明白,大多是内容的翻转,研究了下,现在分享给大家. 利用UIElement.RenderTransform 属性就能实现元素的呈现位置的转换,因此只需 ...

  4. JQuery Validate使用总结

    本文参考了  http://www.cnblogs.com/linjiqin/p/3431835.html 可以在mvc 或webform项目中使用,可以方便快捷的对前端表单进行校验 一.导入两个js ...

  5. LotusPhp入口文件解析

    LotusPhp也是单入口的框架,可以根据需要开启多个应用实例 例如前台页面可以用index.php作为入口文件,后台可以用admin.php作为入口文件,多个应用实例可以共享应用配置和类库或者根本每 ...

  6. 平衡二叉树(AVL)

    性质:它是一棵空树或它的左右两个子树的高度差的绝对值不超过1,并且左右两个子树都是一棵平衡二叉树. 定义:平衡二叉树或为空树,或为如下性质的二叉排序树: (1)左右子树深度之差的绝对值不超过1; (2 ...

  7. Windos中无法删除桌面IE图标的解决方法

    解决方法其实并不难,打开注册表,转到如下图的位置,详细地址在图片最下面: 需要注意的是,你需要在NameSpace中逐个查看各个项目的数据值,显示为数据值为Internet Explorer的项目即为 ...

  8. 银河英雄传说 （codevs 1540） 题解

    [问题描述] 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发战争.泰 ...

  9. 给Activity设置背景颜色

    为了使得错误提示更加显眼,再用Toast+振动效果之外考虑变换整个activity的背景颜色. 尝试一: activity并没像winform一样直接给个属性来设置,就想获取整个activity的la ...

  10. jQuery 插件开发解析

    那么首先我们来简单的看一下最正统的 jQuery 插件定义方式: (function ($) { $.fn.插件名 = function (settings) { //默认参数 var default ...