HTML标签 2022年4月26日


1. HTML标签是由尖括号包围的关键词，如< html >。 2. 标签成对出现，如 <html ></html > 3. 标签关系：包含关系，并列关系


注意

所有标签的< 与其后边跟的字符间没有空格，本文加了空格是防止自动识别为HTML语言，切记切记

基本结构标签


<html>
    <head>
       <title>我的第一个页面</title>
    </head>
    <body>
       niubi
    </body>
</html>


标签名

定义

说明

<html>

HTML标签

最大的标签，称之为跟标签

<head>

文档的头部

在head标签中必须设置title标签

<title>

文档的标题

让页面拥有属于自己的网页标签

<body>

文档的主题

元素包含文档的所有内容，页面内容基本都是放在body里边的

< !DOCTYPE html> 表示采用html5版本，处于最前面，是文档类型声明标签。

lang 语言种类，用来定义当前文档显示的语言。

en---英语

zh-CN---中文

常用标签

学习标签，重点是要记住每个标签的语义，根据语义，在何时的地方给一个最为合适的标签，可以让页面结构更为清晰。

标题标签

6个等级的< h1>---< h6>,作为标题使用，依据重要性递减

特点：

1.由大到小，从重到轻依。

2.独占一行，只在一行内显示效果

段落标签

< p> 段落标签 < /p>

换行标签

< br />，单标签，只是简单的另起一行，与分段还是不一样的

文本格式化标签

比如设置粗体、斜体、或下划线效果。

标签语义：突出重要性，比普通文字更重要。

语义

标签

说明

加粗

<strong></strong>或者<b></b>

更推荐使用<stong>标签加粗 语义更强烈

倾斜

<em></em>或者<i></i>

更推荐使用<em>

删除线

<del></del>或者<s></s>

推荐使用<del>

下划线

<ins></ins>或者<u></u>

推荐使用<ins>

特殊标签

< div> 和< span>没用语义，就像一个盒子，用来装内容的。

div是division的缩写，表示分割，分区，span意为跨度、跨距。

特点：

1.< div> 标签用来布局，一行只能放一个< div>标签

2.< span>,一行可以放多个< span>。

图像标签和路径

< img src="图像URL"/>，图片和网页代码在一个路径下。

图像标签的其它属性

属性

属性值

说明

src

图片路径

必须属性

alt

文本

替换文本，图像不能显示时的显示该文本

title

文本

提示文本，鼠标放到图像上，显示的文字

width

像素

设置图像的宽度

height

像素

设置高度

border

像素

设置边框粗细

注意：

  1. title时鼠标放在照片上要等几秒才会显示提示文本 2. border一般通过css指定 3. 必须写在标签名的后边 4. 属性不分先后顺序，标签名与属性，属性与属性间均已空格隔开

相对路径分类

符号

说明

同一级

< img src="wf.jpg" />

下一级

/

上一级

../

绝对路径，可以选择自己电脑里的文件的绝对位置，也可以选择完整网络地址。

超链接标签

< a href="跳转目标" target="目标窗口的弹出方式"> 文本或者图像

< /a>。

href, 指定链接目标的地址

target，指定链接页面的打开方式，_self 为默认值, _blank为在新窗口中打开。

链接分类

1.外部链接，例如< a href="百度一下，你就知道"> 百度< /a>

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如< a href="index.html">首页< /a>

3.空链接：当前没有确定的链接目标，< a href="#">首页< /a>。

4.下载链接：herf里面地址是一个文件或者压缩包，一般在项目中，该地址与html文件在一个根目录下。

5.网页元素链接：网页中的各种元素，效果是，点击这些元素就会跳转页面

6.锚点链接：点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如< a href="#two"> 第二集< /a>；找到目标位置标签，里面添加一个id属性=名字，如< h3 id="two">第二集介绍< /h3>。

注释和特殊字符

注释标签

注释以<!--开头，以-->结束

快捷方式：ctrl+/ 来把文本注释或者取消注释

特殊字符

有一些字符已经有使用意义，或者其它的不方便打出，就有如下的特殊字符。

特殊字符

描述

字符的代码

空格

&nbsp

<

小于号

&lt

>

大于号

&gt

&

和号

&amp

￥

人民币

&yen

©

版权

&copy

®

注册商标

&reg

℃

摄氏度

&deg

±

正负号

&plusmn

✖

乘号

&times

➗

除号

&divide

平方

&sup2

立方

&sup3

注意：代码后边都有";",这里防止自动识别为HTML语言