html标签简要概述

最新推荐文章于 2023-04-02 14:32:57 发布

吗吗哈哈

最新推荐文章于 2023-04-02 14:32:57 发布

阅读量258

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44715697/article/details/106678509

版权

HTML标签

一、HTML语法规范

1.基本语法概述

（1）html中所有的标签都是由尖括号包围的关键词。
（2）大部分标签成对出现(开始标签和结束标签)，称之为双标签，如：

<html></html>

（3）同时也存在单独出现的标签，称之为单标签，如：

<br />

2.标签之间的关系

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

（1）包含关系

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

（2）并列关系

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

二、HTML基本结构标签

1.第一个html网页

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

<html>
    <head>
         <title>我的第一个网页</title>
    </head>
    <body>
        我也有一个大佬梦
    </body>
</html>

标签名	定义	说明
< html >< /html >	HTML标签	页面中最大的标签，称之为根标签
< head >< /head >	文档的头部	在head标签中必须要设置的是< title >标签
< title >< /title >	文档的标题	让页面拥有一个属于自己的网页标签
< body >< /body >	文档的主体	元素包含文档的所有内容，网页内容基本都是放到body里的

注意：HTML文档的后缀名必须是.html或htm。浏览器的作用是读取HTML文档，并以网页的形式展示它们。

三、网页开发工具

1.文档类型声明标签

< !DOCTYPE >文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采用的是HTML5版本来显示网页。

注意：
a. < !DOCTYPE >声明位于文档中的最前位置，处于< html >标签之前。
b. < !DOCTYPE >不是HTML标签，它是文档类型声明标签。

2.Lang语言种类

用来定义当前文档显示的语言

（1）“en” 用来定义显示语言为英文
（2）“zh-CN” 用来定义显示语言为中文

对于文档显示来说，定义为en的文档可以显示中文；同样，定义为zh-CN的文档也可以显示英文。

3.字符集

字符集（character set）是多个字符的集合，以便计算机能够识别和储存各种文字。

在< head >标签内，可以通过< meta >标签中的charset属性来规定HTML文档应该使用那种字符编码。

<meta charset = "UTF-8" />

注意：此代码是必要的书写代码，如果没有可能会造成乱码的情况。

四、HTML常用标签

1.标签的语义

理解标签的含义是学习标签的最重要的方法。
在合适的地方设置体现含义的标签，可以让页面结构更加清晰。
在这里插入图片描述

2.标题标签

为了使标题更具语义，我们经常在页面中使用标题标签，html提供了6个等级的标签，即< h1 > -----< h6 >。

<h1>一级大佬</h1>
<h2>二级大佬</h2>
<h3>三级大佬</h3>
<h4>四级大佬</h4>
<h5>五级大佬</h5>
<h6>六级大佬</h6>

语义：作为标题使用

特点：
（1）加了标题标签的文字会加粗，字体变大。
（2）每一个标题独占一行。
（3）标题标签的重要性逐级递减。

3.段落和换行标签

（1）段落标签

在网页中，要想把文字有条理的显示出来，就需要将这些文字分段。在HTML文档中，< p >标签用于定义段落，它能将整个网页分段显示出来。

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

语义：能将HTML文档分成若干段落。

特点：
（1）文本中的段落会根据浏览器窗口的大小自动换行。
（2）段落与段落之间会留有一定间隙。

（2）换行标签

在HTML中，一个段落的文字会从左往右依次排列，直到到达浏览器右端。而如果想要另起一行排列文字，简单的回车是无法执行的，这时就需要换行标签< br / >。

<br />

语义：br是break的缩写，意为强制换行

特点：
（1）< br / >是个单标签。
（2）< br / >标签只是简单的完成换行工作，并不会与之后的内容产生间隙。

3.文本格式化标签

在网页中，有时需要为文本设置粗体，斜体，下划线，~~删除线~~ 等效果，这时就需要HTML的文本格式化标签，使文字以特殊的形式显示。

语义	标签
加粗	< strong >< /strong>或< b >< /b >
斜体	< em >< /em >或< i >< /i >
下划线	< ins >< /ins >或< u >< /u >
删除线	< del >< /del >或< s >< /s >

4.< div >标签和< span >标签

< div >标签和< span >标签是没有语义的，它们表示像盒子一样的容器，用来装载内容。

<div>大盒子</div>
<span>小盒子</span>

语义：div是division的缩写，表示分割，分区；span表示跨度，跨距。

特点：
（1）< div >标签用来布局，但一行只能放一个< div >,表示一个大容器。
（2）< span >标签用来布局，一行能放多个< span >,表示一个小容器。

5.图像标签和路径

(1) 图像标签

在HTML中，< img >标签用于定义HTML页面中的图像。

<img src="图像URL" />

语义：img是image的缩写，意为图像。
src是< img >标签的必须属性，用于指定图像文件的路径和文件名。

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，将不能显示的图像替换为文本
title	文本	提示文本，鼠标放在图像上，显示提示文本
border	像素	设置图像的边框粗细
height	像素	设置图像的高度
width	像素	设置图像的宽度

<h3>图像标签的使用</h3>
<img src="pic.jpg" />    <!--将图片命名为pic.jpg-->
<h3> alt 替换文本 图片显示不出来的时候用文本显示：</h3>
<img src="pic1.jpg" alt="我是一张没有显示的图片" />
<h3> title 提示文本，鼠标移动到图片上出现的文字：</h3>
<img src="pic.jpg" title="我是一张图片" />
<h3> 给图像设置宽度：</h3>
<img src="pic.jpg" width="500" />
<h3> 给图像设置高度：</h3>
<img src="pic.jpg" height="300" />
<h3> 给图像设置边框：</h3>
<img src="pic.jpg" border="15" />

(2)路径

（1）相对路径

以引用文件位置（图片相对HTML页面的位置）为基准，建立出的目录文件路径。

相对路径分类	符号	说明
同一级相对路径		图像文件位于HTML文件同一级< img src=“baidu.jpg” / >
下一级相对路径	/	图像文件位于HTML文件下一级< img src=“images（文件夹名）/baidu.jpg” / >
上一级相对路径	…/	图像文件位于HTML文件上一级< img src="…/baidu.jpg" / >

（2）绝对路径

目录下的绝对路径，直接到达目标位置，通常是从盘符开始的路径。

6.超链接标签

(1)链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文字或图片</a>

属性	做用
href	用于指定链接目标的url地址，当标签使用href属性时，它就有了超链接功能（必须属性）
target	用于指定链接页面的打开方式，其中_self为默认方式，_blank为在新窗口中打开

(2)链接的分类

（1）外部链接
从当前网页跳转到其他网站的链接，必须要在连接中输入http://

<a href="http://www.baidu.com" target="_blank">百度</a>

（2）内部链接
网站内部页面之间的相互链接，直接输入网站的名字即可。

<a href="index.html"></a>      <!--index.html为自定义网页-->

（3）空链接
如果当前没有链接对象。

<a href="#"></a>

（4）下载链接
如果href中的地址是一个文件或一个压缩包，则会下载这个文件或解压压缩包。

<a href="img.zip">下载文件</a>

（5）网页元素链接
在网页中的各种元素，如图片，视频，音频，表格等都可以添加超链接。

<a href="http://www.baidu.com"><img src="pic.jpg" /></a>

（6）锚点链接
可以快速定位到页面中的位置，分为两个步骤。
1.在链接文本的href属性中，设置属性值 #+名字的形式

<a href="#one">第一章</a>

2.找到目标位置标签，里面添加一个“id属性=名字”。

<h1 id="one">第一章介绍</h1>

五、HTML中的注释和特殊字符

1.注释

如果在HTML文档中添加一些便于阅读和理解的但是不需要显示的注释文字，就需要注释标签。

<!--这是一条注释-->

快捷键 ctrl+/

2.特殊字符

在HTML中，一些符号很难或不方便直接使用，此时我们就可以使用下面的字符代替。

特殊字符	字符描述	代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`

吗吗哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html标签简要概述

HTML标签（上）一、HTML语法规范1.基本语法概述（1）html中所有的标签都是由尖括号包围的关键词。（2）并且大部分标签成对出现(开始标签和结束标签)，称之为双标签，如：<html></html>（3）同时也存在单独出现的标签，称之为单标签，如：<br />2.标签之间的关系双标签关系可以分为两类：包含关系和并列关系（1）包含关系<head> <title> </title></head&g
复制链接

扫一扫