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

　　

　　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. Java Swing打猎射击游戏源码

    代码如下 <font size="3">package Game; import java.awt.Graphics; import java.awt.Image; i ...

  2. MyEclipse使用手册(详细版)

    0. 快捷键================================================================================编辑:Ctrl+Shift+ ...

  3. SQL如何查询对应的object

    SQL如何查询对应的Object   编写人:CC阿爸 2014-6-17 在日常SQL数据库的操作中,常常需要查询那些对象,如那些sp会包括对该表的操作,那些job会对应执行该sp等相关内容.总之是 ...

  4. VS2008无法切换到视图设计器

    编写人:CC阿爸 2014-2-17 近来用于干活的笔记本电脑实在太慢了,在领导的安排下,有幸更换了一台配置好的电脑.经过一天的努力,所有之前的开发软件都安装完成了.并且OS从xp升级到win7.SQ ...

  5. postgresql 入门（含java、scala连接代码）

    1.下载安装包 官网:http://www.postgresql.org/download/ 按自己需求,下载安装包, 我下载的windows版32位的.http://get.enterprisedb ...

  6. 什么是Ajax无刷新技术？

    浏览器实例化一个Ajax对象,这个对象发送一个HTTP请求,并且携带一定的参数,传输到后台.后台服务器接收这些参数,同时过滤一下传过来的参数,做出逻辑判断.如果需要数据库操作参与,就要取出数据,格式化 ...

  7. HTTP协议中PUT/GET/POST/HEAD等介绍

    HTTP协议中GET.POST和HEAD的介绍 GET: 请求指定的页面信息,并返回实体主体. HEAD: 只请求页面的首部. POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体 ...

  8. 【MySql】5.6.14版本的安装和测试

    当前状态:apache2.4.6和php5.5.6已经安装成功: mysql的安装和测试: 一.安装mysql5.6.14,参考http://wenku.baidu.com/link?url=_0jk ...

  9. 用友二次开发之U810.1销售预订单导入

  10. Mysql 简单问题汇总（持续更新）

    主从架构相关问题 问题现象:从机连接主机时报错 [ERROR] Slave I/O: error connecting to master 'repl@192.168.0.50:3306' - ret ...