HTML标签（上）

最新推荐文章于 2022-11-08 12:19:04 发布

い栗子学长つ

最新推荐文章于 2022-11-08 12:19:04 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/qq_45631420/article/details/104346221

版权

1.HTML语法规范

1.1基本语法概述

1.HTML标签是由尖括号包围的关键词，例如<html>。

2.HTML标签通常是成对出现的，例如<html>和</html>，我们成为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

3.有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称之为单标签。

1.2标签关系

双标签关系可分为俩类：包含关系和并列关系。

包含关系：
<head>
    <title></title>
</head>
并列关系：
<head></dead>
<body></body>

2.HTML基本结构标签

2.1第一个html网页

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

HTML页面也称为HTML文档。

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        键盘敲烂，月薪过万！
    </body>
</html>

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></head>	头部	在头部中必须设置title
<title></title>	标题	网页标题
<body></body>	主体	页面内容

2.2文档类型声明标签

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

2.3lang语言种类

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

1.en定义于艳伟英语。

2.zh-CN定义语言为中文。

2.4字符集

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

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

<meta charset="UTF-8" />

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。必须要写，否则会引起乱码情况。

3.HTML常用标签

3.1标题标签<h1> - <h6>

1.加了标题的文字会变得加粗，字号也会依次变大。

2.一个标题独占一行。

<h1>这是个标题</h1>

3.2段落标签和换行标签

p标签用于定义段落，他可以将整个页面分成若干个段落。

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

1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空隙。

如果希望某段文本强制换行显示，就需要使用换行标签<br/>。

<br />

<br />是个单标签。

<br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

3.3文本格式化标签

语义	标签	说明
加粗	<strong></strong>或<b></b>	推荐用<strong>语义更强烈
倾斜	<em></em>或<i></i>	推荐使用<em>
删除线	<del></del>或<s></s>	推荐使用<s>
下划线	<ins></ins>或<u></u>	推荐使用<ins>

3.4<div>和<span>标签

<div>这是头部</div>
<span>几日价格</span>

1.div标签用来布局，但是现在一行只能放一个div，大盒子。

2.span标签用来布局，一行上面可以放多个span，小盒子。

3.5图像标签和路径

1.图像标签

img标签用于定义HTML页面中的图像。

<img src="图像地址" />

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

① 图像标签可以拥有多个属性，必须写在标签名的后面。

② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

2.路径

相对路径：

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级：<img src="baidu.gif"/>
下一级路径	/	图像文件位于HTML文件下一级：<img src="images/baidu.gif" />
上一级路径	../	图像文件位于HTML文件上一级：<img src="../baidu.gif" />

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。

绝对路径：

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

例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

3.6超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

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

属性	作用
href	用于指定链接目标的url地址，当为标签应用href属性时，他就具有了超链接的功能。
target	用于指定连接页面的打开方式，_self是默认值，_blank为在新窗口打开方式。

链接分类：

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。

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

3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页。

4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置

在链接文本的 href 属性中，设置属性值为 #名字的形式

找到目标位置标签，里面添加一个 id 属性 = 刚才的名字