【前端】html

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.rhkb.cn/news/82781.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android SystemServer中Service的创建和启动方式(基于Android13)

Android SystemServer中Service的创建和启动方式(基于Android13)

Android SystemServer创建和启动方式(基于Android13) SystemServer 简介 Android System Server是Android框架的核心组件&#xff0c;运行在system_server进程中&#xff0c;拥有system权限。它在Android系统中扮演重要角色&#xff0c;提供服务管理和通信。 system …
阅读更多...
浅析 C 语言的共用体、枚举和位域

浅析 C 语言的共用体、枚举和位域

前言 最近在尝试阅读一些系统库的源码&#xff0c;但是其中存在很多让我感到既熟悉又陌生的语法。经过资料查阅&#xff0c;发现是 C 语言中的共用体和位域。于是&#xff0c;趁着课本还没有扔掉&#xff0c;将一些相关的知识点记录在本文。 文章目录 前言共用体 (union)枚举…
阅读更多...
zookeeper常用命令

zookeeper常用命令

zookeeper常用命令 1. 下载安装2. 配置说明2.1 配置 3. zookeeper的常见命令3.1 server端启动停止等命令3.2 客户端连接等命令3.3 客户端简单常用命令3.3.1 查看目录&#xff08;查看数据结构&#xff09;3.3.2 删除目录3.3.3 创建目录3.3.4 创建目录并写入值 查看节点值3.3.5…
阅读更多...
原型链污染,nodejs逃逸例子

原型链污染,nodejs逃逸例子

文章目录 原型链污染原型链污染原理原型链污染小例子 原型链污染题目解析第一题第二题 Nodejs沙箱逃逸方法一方法二 原型链污染 原型链污染原理 原型链 function test(){this.a test; } b new test;可以看到b在实例化为test对象以后&#xff0c;就可以输出test类中的属性a…
阅读更多...
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio构建SpringSecurity权限框架

【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio构建SpringSecurity权限框架

1.Cloud Studio&#xff08;云端 IDE&#xff09;简介 Cloud Studio 是基于浏览器的集成式开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装&#xff0c;随时随地打开浏览器就能在线编程。 Clou…
阅读更多...
XSS漏洞原理及利用跨站请求伪造CSRF

XSS漏洞原理及利用跨站请求伪造CSRF

XSS漏洞原理及利用&跨站请求伪造CSRF XSS一、案例二、什么是XSS三、XSS危害四、XSS的分类4.1、反射型XSS4.1.1、介绍4.1.2、利用过程 4.2、存储型XSS4.2.1、介绍4.2.2、利用过程4.2.3、案例 4.3、DOM型XSS4.3.1、介绍4.3.2、常用的DOM方法4.3.3、案例4.3.3.1、代码分析4.3.…
阅读更多...
如何快速完成MySQL数据的差异对比｜NineData

如何快速完成MySQL数据的差异对比｜NineData

在现代商业环境中&#xff0c;数据库是企业存储核心数据的重要工具&#xff0c;而 MySQL 作为最受欢迎的关系型数据库管理系统&#xff0c;广泛应用于各行各业。在容灾、数据迁移、备份恢复等场景下&#xff0c;为了确保两端或多端之间数据的一致性&#xff0c;通常需要对数据进…
阅读更多...
Android 实现 RecyclerView下拉刷新，SwipeRefreshLayout上拉加载

Android 实现 RecyclerView下拉刷新，SwipeRefreshLayout上拉加载

上拉、下拉的效果图如下&#xff1a; 使用步骤 1、在清单文件中添加依赖 implementation ‘com.android.support:recyclerview-v7:27.1.1’ implementation “androidx.swiperefreshlayout:swiperefreshlayout:1.0.0” 2、main布局 <LinearLayout xmlns:android"http…
阅读更多...
渐进式云渲染和模块式云渲染：二者的区别与选择

渐进式云渲染和模块式云渲染：二者的区别与选择

云渲染是一种利用云计算技术&#xff0c;将本地的渲染任务分配到远程的服务器上进行高效、快速、低成本的渲染的服务。云渲染可以帮助用户节省时间、资金和硬件资源&#xff0c;提高工作效率和质量。但是&#xff0c;在使用云渲染时&#xff0c;用户需要面对一个重要的选择&…
阅读更多...
SpringBoot 底层机制分析[上]

SpringBoot 底层机制分析[上]

文章目录 分析SpringBoot 底层机制【Tomcat 启动分析Spring 容器初始化Tomcat 如何关联Spring 容器】[上]搭建SpringBoot 底层机制开发环境Configuration Bean 会发生什么&#xff0c;并分析机制提出问题&#xff1a;SpringBoot 是怎么启动Tomcat &#xff0c;并可以支持访问C…
阅读更多...
【iOS】autoreleasepool

【iOS】autoreleasepool

来说一下最近在了解的autoreleasepool吧&#xff0c;我们可能平时书写过许多脑残代码&#xff0c;其有很多的缺陷但是我们可能当时学的比较浅就也不太了解&#xff0c;就像下面这样的&#xff1a; for (int i 0; i < 1000000; i) {NSNumber *num [NSNumber numberWithInt…
阅读更多...
matlab使用教程(10)—脚本和函数

matlab使用教程(10)—脚本和函数

1.概述 MATLAB 提供了一个强大的编程语言和交互式计算环境。您可以使用此语言在 MATLAB 命令行中一次输入一个命令&#xff0c;也可以向某个文件写入一系列命令&#xff0c;按照执行任何 MATLAB 函数的相同方式来执行这些命令。使用 MATLAB 编辑器或任何其他文件编辑器可以创建…
阅读更多...
HCIP实验

HCIP实验

实验题目如下&#xff1a; 实验拓扑如下&#xff1a; 实验要求如下&#xff1a; 【1】两个协议间进行多点双向重发布 【2】R7的环回没有宣告在OSPF协议中&#xff0c;而是后期重发布进入的 【3】解决环路&#xff0c;所有路径选择最优&#xff0c;且存在备份 实验思路如下&…
阅读更多...
九、Spring 声明式事务学习总结

九、Spring 声明式事务学习总结

文章目录 一、声明式事务1.1 什么是事务1.2 事务的应用场景1.3 事务的特性&#xff08;ACID&#xff09;1.4 未使用事务的代码示例1.5 配置 Spring 声明式事务学习总结 一、声明式事务 1.1 什么是事务 把一组业务当成一个业务来做&#xff1b;要么都成功&#xff0c;要么都失败…
阅读更多...
网络安全的相关知识点

网络安全的相关知识点

网络安全威胁类型&#xff1a; 1.窃听&#xff1a;广播式网络系统。 2.假冒 3.重放&#xff1a;重复一份报文或者报文的一部分&#xff0c;以便产生一个被授权的效果。 4.流量分析 5.数据完整性破坏 6.拒绝服务 7.资源的非授权使用 8.陷门和特洛伊木马&#xff1a;木马病毒有客…
阅读更多...
解数独（Java）

解数独（Java）

题目链接&#xff1a; 力扣 题目详情&#xff1a; 37. 解数独t编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只…
阅读更多...
jmeter测试rpc接口-使用dubbo框架调用【杭州多测师_王sir】

jmeter测试rpc接口-使用dubbo框架调用【杭州多测师_王sir】

1.基于SOAP架构。基于XML规范。基于WebService协议。特点:接口地址?wsdl结尾2.基于RPC架构&#xff0c;基于dubbo协议&#xff0c;thrift协议。SpringCloud微服务。3.基于RestFul架构&#xff0c;基于json规范。基于http协议(我们常用的都是这种&#xff0c;cms平台也是) Rest…
阅读更多...
Git笔记--Ubuntu上传本地项目到github

Git笔记--Ubuntu上传本地项目到github

目录 1--基本配置 2--本地上传 1--基本配置 ① 创建ssh-key cd ~/.sshssh-keygen -t rsa -C "邮箱地址"② 查看并关联ssh-key gedit id_rsa.pub 复制内容&#xff0c;在 GitHub 中依次点击 Settings -> SSH and GPG keys -> New SSH key&#xff0c;将 id…
阅读更多...
实战指南：使用OpenCV 4.0+Python进行机器学习与计算机视觉

实战指南：使用OpenCV 4.0+Python进行机器学习与计算机视觉

&#x1f482; 个人网站:【办公神器】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 目录 1.背景2. 安装和配…
阅读更多...
CTF Stegano练习之隐写初探

CTF Stegano练习之隐写初探

今天要介绍的是CTF练习中的Stegano隐写题型 。做隐写题的时候&#xff0c;工具是很重要的&#xff0c;接下来介绍一些工具。 1、TrID TrID是一款根据文件二进制数据特征进行判断的文件类型识别工具。虽然也有类似的文件类型识别工具&#xff0c;但是大多数都是使用硬编码的识…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发