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

　　

　　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. 安装 android sdk 不能更新问题

    1 要更改host 文件 2在Android SDK Manager的Tool->Option中按照如下修改

  2. POJ C程序设计进阶 编程题＃3 : 排队游戏

    编程题#3:排队游戏 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 在幼儿 ...

  3. 菜鸟的js学习笔记

    学的越多感觉不会的越多.php+mysql学了点皮毛.知道搞web的是要会js的于是开始结合公司的项目开始学习js之旅(http://www.w3school.com.cn/b.asp) $(docu ...

  4. Lambda Grinding Miller From Zenith

    data = """ The Basic Things About Grinding Mill A grinding mill is a unit operation d ...

  5. [.ashx檔？泛型处理例程？]基础入门#1....能否用中文教会我？别说火星文？

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_01.aspx [.ashx檔?泛型处理例程? ...

  6. jquery学习笔记(4)--实现table隔行变色以及单选框选中

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  7. python2.7抓取豆瓣电影top250

    利用python2.7抓取豆瓣电影top250 1.任务说明 抓取top100电影名称 依次打印输出 2.网页解析 要进行网络爬虫,利用工具(如浏览器)查看网页HTML文件的相关内容是很有必要,我使用 ...

  8. python分片

    刚刚学习,很新 >>> numbers = [1,2,3,4,5,6,7,8,9,10] >>> numbers[0:10:2] [1,3,5,7,9] >& ...

  9. EXCEL处理数据小技巧

    1.EXCEL 中如何获得4*8这个数字中,*号前面的数字 输入  =LEFT(AC2,FIND("*",AC2)-1) 获得*右边的数字 输入 =RIGHT(AC2,FIND(& ...

  10. hdu 4027 Can you answer these queries?

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4027 Can you answer these queries? Description Proble ...