HTML基础标签应用

来源：互联网发布：逆袭之爱上情敌网络剧编辑：程序博客网时间：2024/06/05 11:15

HTML基本标签介绍

超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

HTML标签的大小写无关的，例如"主体"<body>跟<BODY>表示的意思是一样的，推荐使用小写。一个完整的网页文件包括网页声明，＜meta＞标签等其他网页基本信息。

注释：本章主要简介基本标签的应用，之后会介绍HTML高级标签的应用

1.段落标签和换行表标签的应用

1.1、段落标签p与换行br标签，使用上一点区别，是一对标签""，而br是单独的标签
1.2、段落标签，每个段落之间有一定距离，类似于一个p换段标签等于使用两个br标签换行
1.3、常常使用段落标签，让文章条理段落上下分割清晰，同时也对搜索引擎优化（SEO），让搜索引擎感到你的网页内容段落清晰更加友好清晰

示例如下：

我是css5!
我是第一段落；
我是第二段落；
我是第三段落， 我被br换行。

案例一

<!DOCTYPE HTML><html><head><meta charset="gb2312"> <title>段落标签应用</title> </head> <body>      <hl> 欢迎使用段落标签</hl>   //标题标签      <p>第一段</p> //段落标签      <p> 第二段</br> //换行标签  我被换行了</br>  </p> </body> </html>

注意：<hr/>表示在文字下面加下划线 &nbsp空白占位符
<front color=#></front>文字颜色

2.图像标签

在日常生活中，使用比较多的图像格式有四种，即JPG,GIF,BMP,PNG.
(1)JPG(Joint Photographic Expert Group)文件格式的缩写，广泛应用于因特网支持图像的格式。压缩之后体积很小，但是容易造成图像失真。
（2）GIF （graphics interchange format) 是网页中使用最广泛，最普通的一种图像格式。支持透明色，还支持动画。
(3）PNG 兼有GIF和JPG的优势，同时还具有GIF不具备的特性，是一种新兴的WEB图像格式。

2.1基本语法如下

<img scr="image/hetao.jpg图像地址" width="160"height="160" alt="无漂白薄皮核桃图像替代文字" title="鼠标悬停提示文字"

案例1

<!DOCTYPE HTML><html><head><meta charset="gb2312"> <title>图像标签应用</title> </head> <body>      <p><img src="file:///G:/images/hetao.jpg" width="160"height="160" alt="无漂白薄皮核桃"       title=" "无漂白薄皮核桃"/>        </p>       <p>新疆野生 </br>   无漂白薄皮核桃500*2包 </br>  48元/斤</p> </body> </html>

注意：图像路径得存放方式
绝对路径：图像与HTML文件不在同一目录下

<img src="file:///G|/images/yingtao.jpg" width="60"height="70" />
相对路径：
例如在G盘中建立images文件夹把yujinxiang.html文档与yujinxiang.jpg放在同一目录下

案例2

<!DECLARE HTML><html><head><meta charset="gb2312"><title>图像标签</title><head><body><p><img src="./eg_tulip.jpg"  alt="郁金香花"    title=" "上海鲜花港 - 郁金香"></p>     </body> </html>

注意：SEO方法*alt描述控制在100个字符内，内容要想符合

3.超链接标签<a>

超链接标签包含两部分内容：

一是链接地址，即连接的目标，它可以是某个网站或文件的路径。

二是链接文本或图像

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

代码如下：

<!DOCTYPE HTML><html><head><meta charset="gb2312"> <title>超链接图片标签应用</title> </head> <body> <a href="C:\Users\Administrator\Desktop\hetao.html"target="_blank">无漂白薄皮核桃</a><br/><br/>    <a href="C:\Users\Administrator\Desktop\hetao.html"target="_blank"> <img src="file:///G:/images/hetao.jpg" alt="无漂白薄皮核桃"       title=" "无漂白薄皮核桃"         /></a>      </body> </html>

网站链接

<!DECLARE HTML>  <html>  <head>  <meta charset="gb2312">  <html><title>创网站建链接</title></head><body><center><h2>创建链接</h2><hr><p><a href="http://www.sina.com.cn" title="打开新浪首页">新浪</a><br><a href="http://www.baidu.com" target=_blank>百度</a><br><a href="http://www.bit.edu.cn//">北 京 理工大 学</a></p></center></body></html>

阅读全文

0 1