HTML基础标签应用

最新推荐文章于 2024-07-24 16:53:23 发布

天涯追梦人

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量822

点赞数

分类专栏： html 文章标签： html 标签

本文链接：https://blog.csdn.net/dreamflygril/article/details/72427656

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

`HTML基本标签介绍`

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

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

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

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

1.1、段落标签p与换行br标签，使用上一点区别，<p>是一对标签"<p></p>"，而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

收藏

觉得还不错? 一键收藏
0
评论
HTML基础标签应用

HTML基本标签介绍超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。HTML标签的大小写无关的，例如"主体"跟表示的意思是一样的，推荐使用小写。一个完整的网页文件包括网页声明，＜meta＞标签等其他网页基本信息。注释：本章主要简介
复制链接

扫一扫

专栏目录