HTML标签(一)(语法规范、常用标签)

最新推荐文章于 2024-03-27 22:16:12 发布

bear*6

最新推荐文章于 2024-03-27 22:16:12 发布

阅读量629

点赞数 8

分类专栏： HTML 文章标签： html html5 爬虫

本文链接：https://blog.csdn.net/m0_48375854/article/details/120491969

版权

HTML 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

一、HTML语法规范

1.基本语法概述

HTML 标签是由尖括号包围的关键词，例如 <html>。
HTML 标签通常是成对出现的，例如<html> 和 </html>，我们称为双标签。标签对中的第一个标签是
开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

2.标签关系

双标签关系可以分为两类：包含关系和并列关系。
例如
包含关系

<head> 
 <title> </title> 
</head>

并列关系

<head> </head>
<body> </body>

二、HTML基本结构标签

1.第一个HTML网页

<html> 
	<head> 
 		<title>我的第一个页面</title>
 	</head>
	 <body>
 		我的第一个完整的程序
 	</body>
</html>

2.标签解析

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	是所有头部元素的容器
<title></title>	文档的标题	定义文档的标题
<body></body>	文档的主体	元素包含文档的全内容，页面内容都是放在body里面的

三、HTML常用标签

1.HTML5文档头部相关标签

<title></title>

<title></title>标签用于标签用于定义HTML页面的标题，即给网页取一个名字，必须位于标签之内。

<title>我是一个标题</title>

<meta />

<meta name = 'keywords' content = 'javascript学习'
<meta name=“description“ content=“学习前端技术”/>
<meta name=“author” content=“西安邮电大学" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="10;url=http://www.itcast.cn" />

2.文本控制标签

标题标记<h1> - <h6>

HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>标题的重要性依次递减。

<h1>西安邮电大学</h1>
<h2>西安邮电大学</h2>
<h3>西安邮电大学</h3>
<h4>西安邮电大学</h4>
<h5>西安邮电大学</h5>
<h6>西安邮电大学</h6>

在这里插入图片描述

段落标签<p></p>

在网页中使用<p>标签来定义段落。<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

<p>这是一个段落！</p>

水平线标签<hr />

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过<hr />标签来定义。

<hr />

3、文本样式标签

<font></font>

用来控制网页中文本的字体、字号和颜色。

<font face ='隶书' size = '7' color = 'red'>可以控制网页中的文本的样式</font>

4.文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要

<b>文字以粗体显示</b>
<strong>文字以粗体显示</strong>
<i>文字以斜体显示</i>
<em>文字以斜体显示</em>
<s>文字以加删除线方式显示</s>
<del>文字以加删除线方式显示</del>
<u>文字以加下划线方式显示</u>
<ins>文字以加下划线方式显示</ins>

5.特殊字符标签

特殊字段	描述	字符的代码
	空格符	&nbsp ;
<	小于号	&lt ;
>	大于号	&gt ;
&	和号	&amp ;
￥	人命币	&yen ;
®	注册商标	&reg ;
©	版权	&copy ;
°	摄氏度	&deg ;
±	正负号	&plusmn ;
×	乘号	&times ;
÷	除号	&divide ;
²	平方（上标2）	&sup2 ;

6.图像标签

1.常见图片格式

GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。

JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。

2.图像标签<img />

图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

<img src="图像URL" alt="图像的替代文本" />

属性	值	描述
alt	text	指定图像的替代文本
src	URL	指定显示图像的URL
width	px %	设置图像的宽度（像素或百分比）
height	px %	设置图像的高度（像素或百分比）
ismap	URL	将图像定义为服务器端图像映射
longdesc	URL	指定包含长的图像描述文档的URL
usemap	URL	将图像定义为客户器端服务映射

其中，src属性和alt属性是必须的。

四、相对路径和绝对路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：

相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />
图像文件位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="../logo.gif" />
绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

bear*6

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML标签(一)(语法规范、常用标签)

文章目录一、HTML语法规范1.基本语法概述2.标签关系二、HTML基本结构标签1.第一个HTML网页2.标签解析三、HTML常用标签1.HTML5文档头部相关标签<title></title><meta />2.文本控制标签标题标记<h1> - <h6>段落标签<p></p>水平线标签<hr />3、文本样式标签<font></font>4.文本格式化标签5.特殊字符标签6.图像标签1.
复制链接

扫一扫