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

　　

　　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. Jquery获取selelct选中值

    误区: 一直以为jquery获取select中option被选中的文本值,是这样写的: $("#s").text();  //获取所有option的文本值 实际上应该这样: $(& ...

  2. javaSE第八天

    第八天    43 1. 如何制作帮助文档(了解)    43 2. 通过JDK提供的API学习了Math类(掌握)    44 (1)API(Application Programming Inte ...

  3. wp仿系统截图

    wp上直接调用CameraCaptureTask,并没有参数设置截图大小,刚好项目需求要截成正方型,于是写了个仿系统截图的demo出来. 截图如下:     需要做的逻辑运算为: 1.初始化照片时:判 ...

  4. debug版本和release版本的区别?

    好久没有做web项目了,这项目完成了要发布网站,不好忘了 以前操作过的? 还好脑子还是有点印象 现还是 写个文档吧记录吧 免得 以后作别的了又忘了 那可不妙啊 网站发布步骤:1.先将

  5. 当数据0跟if判断冲突的时候

    我是很无奈的,以后都要2,3,4,5这样去标志状态: 分配状态:<select name="is_send" > <option selected="s ...

  6. JS获取网页属性包括宽、高等

    JS获取网页属性包括宽.高等. function getInfo()  { // www.jbxue.com var s = "";  s += " 网页可见区域宽:&q ...

  7. SVN客户端解决authorization failed问题

    遇到authorization failed问题 进人 [root@localhost conf]# pwd /opt/svndata/shell/conf [root@localhost conf] ...

  8. APK反编译之一

    初步接触APK反编译.刚刚使用android-apktool软件反编译了一下QQ.apk,目的只是想看看QQ这个应用软件是内部是如何设计的,希望可以在某些方面借鉴一下.下面就如何反编译做一个简单的记录 ...

  9. adb 修改system文件

    1. $ adb push SecureSetting.apk /sdcard/  // 上传要安装的文件,为安装做准备.     2. $ adb shell     3. $ su // 切换到  ...

  10. 【转】DCC32的参数详解

    完整的内容如下: // DCC32编译器的设置说明. // Dcc32 [options] filename [options] // DCC32 [操作选项] 文件名称 [操作选项] // -A&l ...