【前端】html

news2024/12/23 15:00:50

HTML标签（上）

目标：
-能够说出标签的书写注意规范
-能够写出HTML骨架标签
-能够写出超链接标签
-能够写出图片标签并说出alt和title的区别
-能够说出相对路径的三种形式

目录：

  1. HTML语法规范
  2. HTML基本结构标签
  3. 开发工具
  4. HTML常用标签
  5. HTML中的注释和特殊字符

1.HTML语法规范

1.1基本语法概述

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

1.2标签关系

双标签关系可以分为两类：包含关系和并列关系。
在这里插入图片描述

2.HTML基本结构标签

2.1第一个HTML网页

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

在这里插入图片描述

3.开发工具

3.1 vscode的使用

1.新建文件并存储为 .html 文件
2.输入 ! 按tab键，生成页面骨架结构
3.利用插件在浏览器中预览页面：
单击右键，点击open in default browser

3.2 插件的安装

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

文档类型声明标签

文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页 这句代码的意思是：当前页面采取的是HTML5版本来显示网页

注：

  1. 声明位于文档中最前面的位置，处于标签之前。
  2. 不是一个HTML标签，它就是文档类型声明标签

lang语言种类

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

  1. en定义语言为英语
  2. zh-CN定义语言为中文

简单来说。定义为en就是英文网页，定义为zh-CH就是中文网页。
其实对于文档显示来说，定义为en的文档也可以显示中文，定义为zh-CH的文档也可以显示英文。

这个属性对浏览器和搜索引擎来说还是有作用的。

必须写，采用UTF-8来保存文字，如果不写就会乱码

4.HTML常用标签

4.1标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

在这里插入图片描述

4.2 标题标签

-

(重要)

为了使网页更具有语义化，经常在页面中用到标题标签。HTML提供了6个等级的网页标题，即

-

.

<h1> 我是一级标题</h1>

单词head的缩写，意为头部、标题。

标签语义：作为标题使用，并且根据重要性递减

特点：
1.加了标题的文字会变的加粗，字号也会依次变大。
2.一个标题独占一行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    标题标签
    <h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
</body>

</html>

在这里插入图片描述

4.3 段落和换行标签（重要）

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。

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

标签语义：可以把HTML文档分割为若干段落

特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行
2.段落和段落之间保有空隙

在这里插入图片描述

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

单词break的缩写，意为打断、换行。

在这里插入图片描述

特点：
1.
是个单标签
2.
标签只是简单的开始新的一行，跟段落不太一样，段落之间会插入一些垂直的间距。

4.4文本格式化标签

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

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

在这里插入图片描述
更推荐使用前面的标签，语义更强。

重点记住加粗和倾斜。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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>

在这里插入图片描述

4.5
和 标签

和 是没有语义的，它们就是一个盒子，用来装内容的。 
<div>这是头部</div>
<span>今日价格</span>

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

特点：
1.

标签用来布局，但是现在一行只能放一个
,大盒子。
2. 标签用来布局，一行上可以多个,小盒子。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span标签</title>
</head>

<body>
    <div>我是一个div标签我一个人单独占一行</div>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>

</html>

在这里插入图片描述

div是大盒子，span是小盒子，没有语义都是用来布局的。、

4.6 图像标签和路径（重点）

1.图像标签

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

<img src="图像URL"/>

（单标签，img后加空格和/）
src是标签的必须属性，它用于指定图像文件的路径和文件名

将图片插入文件中：
在这里插入图片描述
第一步必须先把图像文件和html文件放到一起，这样就可以把图片插入网页文件中。

<body>
    <img src="img.jpg" />
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h4>图像标签的使用</h4>
    <img src="img.jpg" />
</body>

</html>

在这里插入图片描述

图像标签的其他属性：
在这里插入图片描述

alt：
在这里插入图片描述

在这里插入图片描述

title：
在这里插入图片描述

在这里插入图片描述

alt和title都是显示文字，alt只有在图片不能正常显示时出现，title是鼠标放到图片上就显示。

width，height

<body>
    <h4>图像标签的使用</h4>
    <img src="img.jpg" />
    <h4>alt 替换文本 图像显示不出来的时候用文字替换：</h4>
    <img src="img1.jpg" alt="我是pink老师" />
    <h4>title 提示文本 鼠标放在图像上，提示的文字：</h4>
    <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" />

    <h4> width 给图像设置宽度：</h4>
    <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500" />
    <h4> height 给图像设置高度：</h4>
    <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" height="100" />
</body>

在这里插入图片描述

border：设置图像的边框粗细

<h4> border 给图像设定边框：</h4>
    <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" height="100" border="15" />

在这里插入图片描述

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

2.路径（前期铺垫知识）

  1. 目录文件夹和根目录
  2. VSCode打开目录文件夹

1）目录文件夹和根目录：
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

新建一个网站：
-桌面新建一个文件夹，命名为web。（这个文件夹就是目录文件夹）

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

-在web文件夹里面新建一个index.html文件
-在web文件夹里面新建一个images文件夹，用来存放图片

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

2）VSCode打开目录文件夹
文件—打开文件夹—选择目录文件夹
后期非常方便管理文件

路径

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

相对路径

**相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说：图片相对于HTML页面的位置
在这里插入图片描述

**同一级路径：**直接使用即可。
下一级路径:
想要使用images文件里的图片
在这里插入图片描述

上一级路径：

绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如：“D：\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”(在网络中复制图片的地址）

MAC显示文件路径的方法：右键—显示简介，即可看到文件路径

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="/Users/zhanghanyue/Desktop/前端基础/img.jpg" />
</body>

</html>

在这里插入图片描述

使用网络中存在的图片：
复制网页中图片的地址，直接使用：
在这里插入图片描述

4.7 超链接标签（重点）

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

目录：
–链接的语法格式
–链接的分类

  1. 链接的语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

单词anchor的缩写，意为：锚

属性：
**href：**用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。

**target：**用于指定链接页面的打开方式，其中_self为默认值 当前窗口打开页面，_blank为在新窗口中打开页面。

  1. 链接的分类：
    目录：
    -1. 外部链接：例如< a href= “http://www.baidu.com”>百度

-2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如首页

-3. 空链接：如果当时没有确定链接目标时，首页。用#代表是一个空链接。（当不确定要跳转到哪个页面时，用#代替）

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

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

**6.锚点链接：**点击链接，可以快速定位到页面中的某个位置。
· 在链接文本的href属性中，设置属性值为 #名字 的形式，如第二集
· 找到目标位置标签，里面添加一个id属性=刚才的名字，如：

第二集介绍

链接标签使用步骤：
-链接标签
-在标签间加名字，腾讯
-a里有必须属性 href，在href里加上地址 腾讯
-第二个属性可以指定新窗口的打开方式， 腾讯

内部链接：
不需要加http，在同一目录下的内部链接直接写名字。

    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="gsjj.html" target="_blank">公司简介</a>

空链接：

    <h4>3.空链接：#</h4>
    <a href="#">公司地址</a>

下载链接：
-先把img.jpg压缩一下
-img.zip

    <h4>4.下载链接：地址链接的是文件 .exe 或者是 zip 等压缩包形式 </h4>
    <a href="img.jpg.zip">下载文件</a>

网页元素链接：
-把图片当文字用即可

    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"></a>

-点击出现的图片即可跳转到对应的链接。

锚点链接：
例：在个人生活和主要作品处添加锚点链接，点击跳转到对应位置
在这里插入图片描述
在这里插入图片描述

5.HTML中的注释和特殊字符

5.1 注释

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

HTML中的注释以" "结束。

快捷键：ctrl+/

5.2特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替。
在这里插入图片描述
重点记住：空格、大于、小于这三个

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/841058.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言案例 99乘法口诀-04

C语言案例 99乘法口诀-04

难度2复杂度2 题目&#xff1a;打印99乘法口诀 步骤一&#xff1a;定义程序目标 编写一个C程序&#xff0c;打印99乘法口诀。 步骤二&#xff1a;程序设计 整个程序分别为两个部分&#xff0c;第一部分是使用for循环打印的行数&#xff0c;第二部分是使用for循环控制打印的列…
阅读更多...
基于Azure OpenAI Service 的知识库搭建实验⼿册

基于Azure OpenAI Service 的知识库搭建实验⼿册

1.概要 介绍如何使⽤Azure OpenAI Service 的嵌⼊技术&#xff0c;创建知识库&#xff1b;以及创建必要的资源组和资源&#xff0c;包括 Form Recognizer 资源和 Azure 翻译器资源。在创建问答机器⼈服务时&#xff0c;需要使⽤已部署模型的 Azure OpenAI 资源、已存在的…
阅读更多...
一键翻译，实现文件名简体中文转日语的便捷改名！

一键翻译，实现文件名简体中文转日语的便捷改名！

您是否曾经遇到过想要将文件名从简体中文翻译成日语&#xff0c;却苦于没有合适的工具&#xff1f;现在&#xff0c;让我们为您介绍一款便捷的解决方案——文件名简体中文转日语翻译工具&#xff01; 首先&#xff0c;第一步&#xff0c;我们需要打开文件批量改名&#xff0c;…
阅读更多...
无涯教程-Perl - binmode函数

无涯教程-Perl - binmode函数

描述 此函数设置在区分两者的操作系统上以二进制形式读取和写入FILEHANDLE的格式。非二进制文件的CR LF序列在输入时转换为LF,在LF时在输出时转换为CR LF。这对于使用两个字符分隔文本文件中的行的操作系统(MS-DOS)至关重要,但对使用单个字符的操作系统(Unix,Mac OS,QNX)没有影…
阅读更多...
付款方式谈得好，订单跑不了

付款方式谈得好，订单跑不了

在与客户商讨付款方式时出现分歧&#xff0c;其实是非常常见的情况。 在这种情况下&#xff0c;我们需要紧握谈判的节奏&#xff0c;不可忽视任何细节&#xff0c;更不能让自己陷入混乱之中。 先看一个案例~ 客户发来邮件&#xff1a; Dear... Please find our attached f…
阅读更多...
远程访问桌面软件 OpenText Exceed TurboX（ETX）如何提高企业生产力

远程访问桌面软件 OpenText Exceed TurboX（ETX）如何提高企业生产力

远程访问桌面软件 OpenText Exceed TurboX&#xff08;ETX&#xff09;如何提高企业生产力 几乎所有规模和行业的企业&#xff0c;员工的工作方式、时间和地点方面发生重大变化&#xff0c;这主要得益于新技术和全球商业与协作。业务领导者正在推动其 IT 部门提出解决方案&…
阅读更多...
使用yarn启动项目报错

使用yarn启动项目报错

使用yarn启动项目报错 解决方法&#xff1a; 1.点击“开始”菜单搜索找到 Windows PowerShell ISE并以管理员身份运行(注&#xff1a;不是以管理员的身份直接运行cmd) 2. 输入 set-ExecutionPolicy RemoteSigned 回车 3.输入&#xff08;选择全是&#xff09; 4.再输入get-Exe…
阅读更多...
【Linux】五、进程

【Linux】五、进程

一、冯诺依曼体系结构 存储器&#xff1a;指的是内存&#xff1b; 输入设备&#xff1a;键盘、摄像头、话筒&#xff0c;磁盘&#xff0c;网卡&#xff1b; 输出设备&#xff1a;显示器、音响、磁盘、网卡&#xff1b; 中央处理器&#xff08;CPU&#xff09;&#xff1a;运算器…
阅读更多...
【架构】Java 系统架构演进的思考

【架构】Java 系统架构演进的思考

文章目录 1 前言2 单体应用架构3 垂直应用架构4 分布式架构5 SOA 架构6 微服务云架构7 总结 1 前言 随着移动互联的发展&#xff0c;网站、H5、移动端的应用规模也不断扩大&#xff0c;不管是应用的数量还是质量都得到了指数级的提升。开发者的数量与日俱增&#xff0c;应用的…
阅读更多...
Python实现GA遗传算法优化Catboost回归模型(CatBoostRegressor算法)项目实战

Python实现GA遗传算法优化Catboost回归模型(CatBoostRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;最早是由美国的 John holland于20世…
阅读更多...
The ‘kotlin-android-extensions‘ Gradle plugin is no longer supported.

The ‘kotlin-android-extensions‘ Gradle plugin is no longer supported.

Android使用kotlin开发&#xff0c;运行报错 The kotlin-android-extensions Gradle plugin is no longer supported. Please use this migration guide (https://goo.gle/kotlin-android-extensions-deprecation) to start working with View Binding (https://developer.an…
阅读更多...
FPGA优质开源项目 - UDP RGMII千兆以太网

FPGA优质开源项目 - UDP RGMII千兆以太网

本文介绍一个FPGA开源项目&#xff1a;UDP RGMII千兆以太网通信。该项目在我之前的工作中主要是用于FPGA和电脑端之间进行图像数据传输。本文简要介绍一下该项目的千兆以太网通信方案、以太网IP核的使用以及Vivado工程源代码结构。 Vivado 的 Tri Mode Ethernet MAC IP核需要付…
阅读更多...
HTTP——九、基于HTTP的功能追加协议

HTTP——九、基于HTTP的功能追加协议

HTTP 一、基于HTTP的协议二、消除HTTP瓶颈的SPDY1、HTTP的瓶颈Ajax 的解决方法Comet 的解决方法SPDY的目标 2、SPDY的设计与功能3、SPDY消除 Web 瓶颈了吗 三、使用浏览器进行全双工通信的WebSocket1、WebSocket 的设计与功能2、WebSocket协议 四、期盼已久的 HTTP/2.01、HTTP/…
阅读更多...
antv/l7地图，鼠标滚动，页面正常滑动-- 我们忽略的deltaY

antv/l7地图，鼠标滚动，页面正常滑动-- 我们忽略的deltaY

背景 在官网项目中&#xff0c;需要使用一个地图&#xff0c;展示产品的分布区域及数量。希望的交互是&#xff0c;鼠标放上标点&#xff0c;tooltip展示地点和数量等信息。鼠标滚动&#xff0c;则页面随着滚动。但是鼠标事件是被地图代理了的&#xff0c;鼠标滚动意味着地图的…
阅读更多...
yum出现Could not retrieve mirrorlist解决方法

yum出现Could not retrieve mirrorlist解决方法

Loaded plugins: fastestmirror, security Loading mirror speeds from cached hostfile Could not retrieve mirrorlist http://mirrorlist.centos.org/?release6&archi386&repoos error was 14: PYCURL ERROR 6 - “Couldn’t resolve host ‘mirrorlist.centos.org…
阅读更多...
revit建模理解

revit建模理解

关于Revit族的理解 Revit 和族术语实心和空心形状几何图形类型 Revit 和族术语 图元 - Revit Architecture 项目中的任何内容。&#xff08;斜体图元可在族编辑器中创建和编辑。&#xff09; 模型图元 - 代表建筑的实际几何图形的内容。 主体图元 - 可以接收/支持其他模型图元…
阅读更多...
Ansible环境搭建，CentOS 系列操作系统搭建Ansible集群环境

Ansible环境搭建，CentOS 系列操作系统搭建Ansible集群环境

Ansible是一种自动化工具&#xff0c;基于Python写的&#xff0c;原理什么的就不过多再说了&#xff0c;详情参考&#xff1a;https://www.itwk.cc/post/403.html https://blog.csdn.net/qq_34185638/article/details/131079320?spm1001.2014.3001.5502 环境准备 HOSTNAMEIP…
阅读更多...
apple pencil性价比高吗？比较好用的电容笔

apple pencil性价比高吗？比较好用的电容笔

从压力感、充电器、接口、以及价格上来看&#xff0c;这种平替电容笔都要比原装电容笔的要好得多。平替的电容笔只能给人一种倾斜的压感功能&#xff0c;但苹果的电容笔却是既拥有着倾斜压感功能&#xff0c;又拥有着重力的压感。另外&#xff0c;由于技术的不断发展&#xff0…
阅读更多...
SpringBoot3---核心特性---2、Web开发III（模板引擎、国际化、错误处理）

SpringBoot3---核心特性---2、Web开发III（模板引擎、国际化、错误处理）

星光下的赶路人star的个人主页 夏天就是吹拂着不可预期的风 文章目录 1、模板引擎1.1 Thymeleaf1.2 基础语法1.3 属性设置1.4 遍历1.5 判断1.6 属性优先级1.7 行内写法1.8 变量选择1.9 模板布局1.10 devtools 2、国家化3、错误处理3.1 默认机制3.2 自定义错误响应3.3 最佳实战 …
阅读更多...
string类函数--深入浅出了解

string类函数--深入浅出了解

目录 1.为什么学习string类1.1C语言中的字符串1.2OJ题中的优势 2.标准库中的string类3.string类的常用接口函数3.1string类对象的常见构造3.2string类对象的容量操作3.3string类对象的访问及遍历操作3.4string类的修改操作3.5string类的非成员函数 总结 1.为什么学习string类 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023