【前端】HTML标签（上）

钥钥睡着了

已于 2022-10-28 18:23:19 修改

阅读量419

点赞数

分类专栏：前端黑马学习笔记文章标签： html 前端

于 2022-10-28 17:11:59 首次发布

本文链接：https://blog.csdn.net/qq_45764950/article/details/127559866

版权

前端黑马学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<div>和<span>标签

一、HTML语法规范

1.1基本语法概述

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

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

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

1.2标签关系

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

二、HTML基本结构标签

2.1第一个HTML网页

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

HTML页面也称为HTML文档。

<html>
     <head>
          <title>第一个页面</title>
     </head>
     <body>
          加油，研究生！
     </body>
</html>

结果展示：

HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。

2.2基本结构标签总结

三、网页开发工具

VSCode的使用

Ctrl+N：新建

Ctrl+S:保存

！Tab：出现骨架标签

Alt+B：浏览器预览（需要加插件扩展->open->open in browser）

Ctrl+加号键：调大字体

VSCode工具生成骨架标签新增代码

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

注意：<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。

<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

2.lang语言：用来定义当前文档显示的语言。

定义为en就是英文网页，定义为zh-CN就是中文网页。

3.<meta charset="UTF-8">：规定HTML文档应该使用哪种字符编码。避免乱码！！！

VS Code插件安装

安装方法

推荐安装的插件

JS-CSS-HTML Formatter不建议安装。

四、HTML常用标签

标题标签<h1> - <h6>（重要）

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

特点：

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

2.一个标题独占一行。

段落和换行标签（重要）

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

特点：

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

2.段落和段落之间有较大空隙。

<br />

特点：

1.<br />是个单标签

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育新闻</title>
</head>
<body>
    <h1>欧联杯-C罗+拉什福德进球 曼联3-0完胜提前出线</h1>
    <h4>罗庆祝进球</h4>
    <p>北京时间10月28日03:00(英国当地时间27日20:00)，2022/23赛季欧联杯E组第5轮展开争夺，曼联主场3比0完胜谢里夫，达洛特、拉什福德和C罗先后进球。</p>
    <p>C罗、加马乔、埃里克森、马拉西亚和林德洛夫轮换出场。第44分钟，埃里克森开出角球，达洛特前点小角度头球破门。</p>
    <h4>曼联1-0，达洛特</h4>
    <p>第65分钟，卢克-肖禁区左侧传中，拉什福德头球破门，2-0。第81分钟，B费右路斜传，C罗头球攻门被扑出后近距离补射入网，3-0。</p>
    <h4>曼联2-0，拉什福德</h4>
    <h4>曼联3-0，C罗</h4>
    <p>曼联(4-2-3-1)：1-德赫亚；20-达洛特(63',23-卢克-肖)，2-林德洛夫，6-马丁内斯(46',5-马奎尔)，12-马拉西亚；18-卡塞米罗(63',39-麦克托米奈)，14-埃里克森；21-安东尼(46',10-拉什福德)，8-B费，49-加马乔(79',34-范德贝克)；7-C罗。</p>
    作者：钥钥睡着了<br />
    时间：2022-10-28
</body>
</html>

结果展示：

文本格式化标签

加粗、斜体或者下划线等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
</body>
</html>

效果展示：

<div>和<span>标签

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

特点：

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

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

图像标签和路径（重点）

1.图像标签

src是<img>标签的必须属性，它用来指定图像文件的路径和文件名。

图像标签的其他属性：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
    <h4>图像标签的使用：</h4>
    <img src="ouc.jpg"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换：</h4>
    <img src="ouc1.jpg" alt="我是中国海洋大学"/>
    <h4>title 提示文本 鼠标放到图像上，提示的文字：</h4>
    <img src="ouc.jpg" alt="我是中国海洋大学" title="我是中国海洋大学"/>
    <h4>给图像设置宽度：</h4>
    <img src="ouc.jpg" alt="我是中国海洋大学" title="我是中国海洋大学" width="500"/>
    <h4>给图像设置高度：</h4>
    <img src="ouc.jpg" alt="我是中国海洋大学" title="我是中国海洋大学" height="100"/>
    <h4>给图像设定边框：</h4>
    <img src="ouc.jpg" alt="我是中国海洋大学" title="我是中国海洋大学" width="500" border="15"/>
</body>
</html>

结果展示：

注意点：

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

2.属性之间没有先后顺序，标签名与属性、属性与属性之间均为空格分开。

3.属性采用键值对的格式，即key = "value"的格式，属性 = “属性值”。

2、路径

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如HTML文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

VSCode打开目录文件夹：文件-------> 打开文件夹，选择目标文件夹。

路径可以分为：

1.相对路径：图片相对于HTML 的位置

2.绝对路径

盘符开始到达目标路径，完整的网络地址。

超链接标签（重点）

1.语法格式

<a href="跳转目标" target="目标窗口的弹出方式"></a>

属性作用：

2.链接分类

1、外部链接

2、内部链接

3、空链接

4、下载链接

5、网页元素链接

6、锚点链接：快速定位

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.ouc.edu.cn/main.htm" target="_blank">中国海洋大学</a>
    <p>target 打开窗口的方式 默认的值是_self当前窗口打开页面 _blank新窗口打开页面</p>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="02-第一个页面.html" target="_blank">第一个页面</a>
    <h4>3.空链接：#</h4>
    <a href="#">空的链接</a>
    <h4>4.下载链接：地址链接的是文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="ouc.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.ouc.edu.cn/main.htm"><img src="ouc.jpg"/></a>
</body>
</html>