您的位置：首页 > Web前端 > HTML

我给女朋友讲编程html系列(4) -- html常用简单标签

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

　　

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

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

显示结果描述实体名称实体编号
空格  
<小于号<<
>大于号>>
&和号&&
"引号""
'撇号 ' (IE不支持)'
￠分¢¢
£镑££
¥日圆¥¥
€欧元€€
§小节§§
©版权©©
®注册商标®®
™商标™™
×乘号××
÷除号÷÷
　　其实常用的也就是前5个，如果需要输出对应的“显示结果”，就可以输入“实体名称”来达到目的。

　　  的全称是：Non-Breaking SPace 非间断空格

　　< 的全称是 ： less than 小于 ，对应 <

　　

　　> 的全称是：great than 大于 ，对应 >

　　

　　& 的全称是：ampersand ，意思就是 “&的记号名称”

" 的全称是： 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>
1，html中的换行标签是 br </br>

2,常用特殊字符    </br>
(1)空格 空格    </br>
(2)小于号 <        </br>
(3)大于号 >        </br>
(4)和字符 &        </br>
(5)双引号 " 引号内的内容 "    </br>

3，html中添加注释，注释在网页中看不到 </br>
<!--  这是一段注释，方便我以后维护程序 -->

4，html中插入一条横线使用标签 hr
<hr>
5，一个段落的内容可以放在 p 标签内，比如段落标签p与换行br标签的区别如下：
<p>
(1)p是一对标签，而br是单独的标签。
(2)段落标签，每个段落之间有一定距离，类似于一个p换段标签等于使用两个br标签换行。
(3)常常使用段落标签，让文章条理段落上下分割清晰，同时也对搜索引擎优化（SEO），让搜索引擎感到你的网页内容段落清晰更加友好清晰。
<p>

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

for(int i=0; i < 10; i++)
{
Console.Write(i);
}

</pre>

pre标签可定义预格式化的文本。</br>
被包围在 pre 中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</br>
pre标签的一个常见应用就是用来表示计算机的源代码。</br>
</p>

<p>
7,图片标签img，它有几个重要的属性：</br>
(1)属性src，指定图片的位置，可以使用相对路径指向本网站某个图片，如 src="a.jpg" </br>
也可以使用绝对路径，指向网络的某个图片，如src="http://img3.imgtn.bdimg.com/it/u=2725510359,1961955826&fm=21&gp=0.jpg" </br>
(2)属性alt，当指定的图片不存在，可以使用alt指定显示的文字，比如 alt="这是个图片"，
如果图片不存在，就会显示 “这是个图片” </br>
(3)属性width和height，图片的宽度和高度，一般图片的大小都是提前算过的，然后使用作图工具按照算出来的宽度和高度来切图，设置图片的宽度和高度，防止网页因为图片过大而变形。</br>
</p>

<p>
8，行内标签span    </br>
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
比如: <span>这段文字是放在span内的，基本没有变化吧</span> </br>
这个标签在以后讲样式的时候在详细说。
</p>

<p>
9，块级标签 div </br>
div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的唯一格式表现。比如：
<div>
这是div内部的一段文字，是不是换行了，而span标签是不换行的，是行内标签。
</div>
div标签主要用来布局网页结构，以后讲样式的时候会提到。
</p>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航