【零基础学web前端】初识html,html结构,html常见标签,图片标签,超链接标签

news2024/10/7 10:12:45

前言:
大家好,我是良辰丫,今天我们就开始进入前端知识的学习💞💞

🧑个人主页：良辰针不戳
📖所属专栏：零基础学web前端
🍎励志语句：生活也许会让我们遍体鳞伤，但最终这些伤口会成为我们一辈子的财富。
💦期待大家三连，关注，点赞，收藏。
💌作者能力有限，可能也会出错，欢迎大家指正。
💞愿与君为伴，共探Java汪洋大海。

在这里插入图片描述

目录

  • 1. 初识web前端
    • 1.1 前端背景
    • 1.2 关于前端(前端三剑客)
  • 2. 初识html
  • 3. html结构
    • 3.1 html标签
    • 3.2 html的基本结构
    • 3.3 html标签的层次结构
      • 3.3.1 父子关系
      • 3.3.1 兄弟关系
  • 4. html常见标签
    • 4.1 注释标签
    • 4.2 标题标签
    • 4.3 段落标签p
    • 4.4 换行标签
  • 5. 格式化标签
    • 5.1 加粗标签
    • 5.2 倾斜标签
    • 5.3 删除线标签
    • 5.4 下划线标签
  • 6. 图片标签
    • 6.1 img的alt属性
    • 6.2 img的title标签
    • 6.3 img宽度高度标签
    • 6.4 img的边框标签
  • 7. 超链接标签
    • 7.1 外部引用
    • 7.2 内部引用
    • 7.3 空链接
    • 7.4 下载链接
    • 7.5 网页元素链接
    • 7.6 锚点链接

1. 初识web前端

1.1 前端背景

什么是前端呢?

  • 我们先可以这样认为,前端就是一个网页;其实,前端开发就是从网页过渡而来的,以前的网页是静态的,只能简单的处理一些文字格式以及图片.
  • 随着时间的推移,静态的网页已经满足不了我们的需求,因此呢我们需要推出动态网页,也就是前端有了一定的雏形.
  • 慢慢的,前端越来越完善,现在的前端推出了很多框架,其难度不低于后端.
  • 再简单的介绍一下动态网页,就拿一个应用程序QQ举例,我们登录QQ需要输入账号和密码,点击登录按钮后,需要交给服务器(后端)进行处理,看输入的账号和密码是否正确,正确登录成功,错误登录失败.

1.2 关于前端(前端三剑客)

接下来我们需要简单了解一下前端三剑客,学习前端一般都是从这三方面入手的(html,css,JavaScript),但是前端要学的东西很多,远远不止这些.

  • html:超文本标记语言,填充页面的内容.(网页的结构)
  • css:层叠样式表,给内容增加一定的样式.(网页的外观)
  • JavaScript:脚本语言,让页面具有动态效果.(网页的行为)

先简单介绍一下前端三剑客,大家稍微不懂也没关系,后面我会带大家更加深入的去学习前端三剑客.

2. 初识html

html全称Hyper Text Markup Language,翻译为超文本标记语言.就是网页的结构,下面我找了一个汽车的框架图,可见只有html是非常不美观的.

在这里插入图片描述

3. html结构

3.1 html标签

html是由单标签或者双标签组成,大多数都是双标签.双标签的具体格式如下所示.

<标签符>内容</标签符>

在这里插入图片描述
在这里插入图片描述

小结:

  • 标签符放到 < > 中
  • 大部分标签成对出现. 为开始标签, 为结束标签,注意,结束标签有斜杠.
  • 少数标签只有开始标签, 称为 “单标签”,比如换行标签<br>
  • 开始标签和结束标签之间, 写的是标签的内容(你好,叶良辰!!!)
  • 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符,这里先了解,后序我们会重点讲.

3.2 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>Document</title>
</head>
<body>
    你好,叶良辰!!!
</body>
</html>
  • html 标签是整个 html 文件的根标签,最外层的标签.
  • head 标签中写页面的属性.,后序了解.
  • body 标签中是页面的显示内容.
  • title 标签中写的是页面的标题.
    在这里插入图片描述

我们可以使用快捷键 ! + tab键快速生成上述框架.

3.3 html标签的层次结构

3.3.1 父子关系

所谓标签的父子关系就是一个标签里面包含另一个标签.

3.3.1 兄弟关系

所谓标签的兄弟关系就是一个标签与另一个标签同级.

4. html常见标签

4.1 注释标签

编程语言都有注释,当然我们的html也不例外,我们也可以通过快捷键ctrl + / 快速生成注释.

<!-- 注释 -->

4.2 标题标签

html标题标签有6个,1-6依次等级降低.有时候我们会记不住到底一级标签大还是六级标签大,我们可以把这想象成自己的兄弟姐妹,姐姐比二姐大.

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

在这里插入图片描述

4.3 段落标签p

段落标签可以让文章分行,在我们没有使用段落标签的时候,它默认不会换行的.如下所示.

<body>
作者:鲁迅
    “我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的;后来想，凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，我于是以我所感到者为寂寞。”
    “是的，我虽然自有我的确信，然而说到希望，却是不能抹杀的，因为希望是在于将来，决不能以我之必无的证明，来折服了他之所谓可有，于是我终于答应他也做文章了，这便是最初的一篇《狂人日记》。
</body>

在这里插入图片描述

下面是我们使用了p标签的效果,大家可以看到区别了嘛?

<body>
    <p>作者:鲁迅</p>
    <p>“我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的;后来想，凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，我于是以我所感到者为寂寞。”</p>
    <p> “是的，我虽然自有我的确信，然而说到希望，却是不能抹杀的，因为希望是在于将来，决不能以我之必无的证明，来折服了他之所谓可有，于是我终于答应他也做文章了，这便是最初的一篇《狂人日记》。</p>
</body>

在这里插入图片描述

<body>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;测试一下空格
</body>

在这里插入图片描述

小结p标签:

  • 当前的 p 标签描述的段落, 前面还没有缩进.
  • 自动根据浏览器宽度来决定排版.
  • html 内容首尾处的换行, 空格均无效.
  • 在 html 中文字之间输入的多个空格只相当于一个空格.
  • html 中直接输入换行不会真的换行, 而是相当于一个空格.

4.4 换行标签

换行标签是一个单标签,一般情况下不会默认换行,我们需要通过br标签进行换行.

<body>
    第一行<br>
    第二行<br>
    第三行<br>
</body>

在这里插入图片描述

5. 格式化标签

所谓格式化,其实就是改变字体的样式.

5.1 加粗标签

我们可以利用 strong 标签 和 b 标签对文本进行加粗;这两种加粗效果是一样的.

<body>
    普通文本<br>
    <strong>strong加粗文本</strong><br>
    <strong>b标签加粗文本</strong><br>
</body>

在这里插入图片描述

5.2 倾斜标签

我们可以使用em 标签 和 i 标签对文本进行倾斜.

<body>
    普通文本<br>
    <em>em标签倾斜文本</em><br>
    <i>i标签倾斜文本</i>
</body>

在这里插入图片描述

5.3 删除线标签

删除线标签

  • del 标签
  • s 标签
<body>
    普通文本<br>
    <del>del删除线标签</del><br>
    <s>s删除线标签</s>
</body>

在这里插入图片描述

5.4 下划线标签

下划线标签:

  • ins 标签
  • u 标签
<body>
    普通文本<br>
    <br>
    <ins>ins下划线</ins><br>
    <u>u下划线</u>
</body>

在这里插入图片描述

6. 图片标签

  • 图片是我们html中经常使用的,我们通常用img标签来引入图片.
  • 图片标签的格式如下,src后面是我们跟的图片路径,不可以省略.
  • 图片路径可以是绝对路径,也可以是相对路径,同样也可以是网络路径.
<body>
    <img src="img.jpg" >
</body>

在这里插入图片描述

6.1 img的alt属性

  • 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
  • 当我们故意把图片路径写错了,他就是显示alt中的文本.
<body>
    <img src="img2.jpg" alt="这是一个风景图">
</body>

在这里插入图片描述

6.2 img的title标签

提示文本. 鼠标放到图片上, 就会有提示.

<body>
    <img src="img.jpg" title="风景图">
</body>

在这里插入图片描述

6.3 img宽度高度标签

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

<body>
    <img src="img.jpg" width="500px" height="500px">
</body>

在这里插入图片描述

6.4 img的边框标签

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<body>
    <img src="img.jpg" width="500px" height="500px" border = "5px">
</body>

在这里插入图片描述

img属性小结:

  • 属性可以有多个, 不能写到标签之前.
  • 属性之间用空格分割, 可以是多个空格, 也可以是换行.
  • 属性之间不分先后顺序.
  • 属性使用 “键值对” 的格式来表示.

7. 超链接标签

所谓超链接标签就是具有跳转功能:

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<body>
    <a href="http://www.baidu.com" target="_blank">点我跳转百度</a>
</body>

在这里插入图片描述

7.1 外部引用

外部链接: href 引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

7.2 内部引用

内部链接: 网站内部页面之间的链接. 写相对路径即可.

<body>
    <a href="test.html" target="_blank">点击进入test</a>
</body>

在这里插入图片描述

7.3 空链接

空链接: 使用 # 在 href 中占位.

<body>
    <a href="#">空链接</a>
</body>

7.4 下载链接

下载链接: href 对应的路径是一个文件.

<a href="test.zip">下载文件</a>

7.5 网页元素链接

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

<body>
    <a href="http://www.sogou.com" target="_blank">
        <img src="img.jpg" width="200px">
    </a>
</body>

在这里插入图片描述

7.6 锚点链接

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

<a href="#one">第一</a>
<a href="#two">第二</a>
<a href="#three">第三</a>
<p id="one">
  点击第一定位到这里
  
</p>
<p id="two">
   
 点击第二定位到这里
</p>
<p id="three">
   点击第三定位到这里
 
</p>

先简单了解一下锚点链接,后序我们更加深入的了解各种选择器.

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

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

相关文章

win10自带dll修复以及多种dll修复方法分享

win10自带dll修复以及多种dll修复方法分享

修复DLL文件是解决Windows系统中发生的许多问题的重要步骤之一。在Windows 10中&#xff0c;自带了一些工具和功能来修复损坏的DLL文件。本文将讨论Windows 10自带的DLL修复工具以及其他常见的DLL修复方法。 一.Windows 10自带的DLL修复工具 Windows 10自带了许多工具和功能来…
阅读更多...
bash简单常见用法

bash简单常见用法

bash新建自定义数组 myArray() for ((i 0 ; i < 5 ; i )) do myArray[$i]"AAAA{$i}DD" done echo ${myArray[]} #输出结果是AAAA{0}DD AAAA{1}DD AAAA{2}DD AAAA{3}DD AAAA{4}DD 提取文件名成功 projects"D:/Project/Program/IDEAWorkspace/myauto/automati…
阅读更多...
x509证书中的Issuer和Subject

x509证书中的Issuer和Subject

在x509标准中的位置 Issuer 颁发者字段标识已签署和颁发证书的实体。 颁发者字段必须包含一个非空的可分辨名称 (DN)。 颁发者字段定义为 X.501 类型名称 [X.501]。 名称由以下 ASN.1 结构定义&#xff1a; Name 描述了一个由属性组成的分层名称&#xff0c;例如国家名称&…
阅读更多...
利用Python+selenium技术，实现浏览器基本操作详解，代码有详细注释

利用Python+selenium技术，实现浏览器基本操作详解，代码有详细注释

首先&#xff0c;需要安装selenium库和对应的浏览器驱动程序。以Chrome浏览器为例&#xff0c;可以使用以下命令安装selenium和chromedriver&#xff1a; pip install selenium然后&#xff0c;需要下载对应版本的chromedriver&#xff0c;并将其添加到环境变量中。下载地址&a…
阅读更多...
关于DSP28335设置内存分配设置堆栈笔记

关于DSP28335设置内存分配设置堆栈笔记

关于DSP28335设置内存分 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 关于DSP28335设置内存分前言一、设置堆栈这里主…
阅读更多...
【头歌】二叉树的顺序存储及基本操作

【头歌】二叉树的顺序存储及基本操作

第1关&#xff1a;树和二叉树基本概念 任务描述 本关任务&#xff1a;根据所学树和二叉树的基本概念等相关知识&#xff0c;完成右侧的选择题。 相关知识 树的定义 从数据结构角度看&#xff0c;树包含n&#xff08;n≥0&#xff09;个结点&#xff0c;当n0时&#xff0c;…
阅读更多...
thinkphp6-配置设置与获取,Thinkphp6自定义配置文件以及调用(config文件夹下的配置)

thinkphp6-配置设置与获取,Thinkphp6自定义配置文件以及调用(config文件夹下的配置)

环境变量 设置环境变量 /.env [DATABASE] USERNAME root PASSWORD 123456 获取环境变量 app/controller/Index.php <?php namespace app\controller;use app\BaseController; use think\facade\Env;class Index extends BaseController {public function index(){$usern…
阅读更多...
IO模型的分类以及各个io模型之间的优劣势

IO模型的分类以及各个io模型之间的优劣势

本文主要讲解bio以及nio的一些问题和知识&#xff0c;会对aio进行简单讲解&#xff0c;但不会深入剖析 我们说熟知的io模型有哪些呢&#xff1f; 同步阻塞io同步非阻塞io同步多路复用异步非阻塞io java的io本身是不具有真正的io操作能力的&#xff0c;当调用io操作时&#x…
阅读更多...
基于ArcGIS：GIS空间分析复习-理论概念+案例分析

基于ArcGIS：GIS空间分析复习-理论概念+案例分析

目录 01 第一章 1.1 GIS空间分析的概念 1.2 GIS空间分析的研究对象、研究目标 1.3 研究目标是&#xff1a;认知、解释、预报、调控。 1.4 道路拓宽案例分析 1.5 GIS空间分析的核心问题 02 第二章 2.1 空间查询的概念、空间量算的概念 2.2 函数距离的概念 2.3 空间查询…
阅读更多...
Android之 常用数据库框架整理

Android之 常用数据库框架整理

一 简介 1.1 上节说了关系型数据库有以下几种&#xff1a; Oracle、Microsoft SQL Server、Microsoft Access、MySQL、SQLite 1.2 各自的领域也不一样 java&#xff0c;C#&#xff0c;php等用Oracle&#xff0c;Microsoft SQL Server&#xff0c;MySQL比较多。 移动端Andr…
阅读更多...
07 - 3系统容量规划

07 - 3系统容量规划

阿里系业务容量规划 Tair集群部署与水位调配 阿里系容量精调之单机压测场景 传统模拟请求 流量复制 流量转发 网关权重 线上测试注意点 阿里系混合部署技术 资源分时复用&#xff1a;提高资源利用率sigama框架做在线资源池调度&#xff0c;伏羲做离线资源池调度&#xff1b;…
阅读更多...
基于fpga的图像处理之图像灰度化处理(Vivado+Modelsim+Matlab联合仿真验证)

基于fpga的图像处理之图像灰度化处理(Vivado+Modelsim+Matlab联合仿真验证)

** 基于fpga的图像处理之图像灰度化处理 ** 本文的思路框架&#xff1a; ①本文采用两种算法进行灰度处理&#xff0c;平均法和加权均值法&#xff1b;加权均值法采用了直接公式求解和查找表两种方式验证 ②FPGA设计中三个设计技巧&#xff0c;可用于工程项目借鉴&#xff…
阅读更多...
Redis了解

Redis了解

Redis 源码大概做了哪些事情&#xff1f; 设置默认参数创建对象、持久化定时器回调加载文件参数 (使用配置文件替代部分默认参数)加载文件数据写入字典创建client connect事件handler&#xff08;accept后&#xff0c;写入读写事件select()&#xff0c;最新的版本用epoll&…
阅读更多...
xlsx 导出 （简单使用）

xlsx 导出 （简单使用）

下载数据为xlsx 安装 npm install xlsx 在src下创建文件utils文件夹&#xff0c;在utils文件夹下创建XLSX.js文件 // 下载excel功能 import * as XLSX from xlsx/*** param dataList 表格数据内容 array* param fileName 文件标题。必须以 .xlsx结尾*/ export const download…
阅读更多...
Linux网络——Shell编程之快捷命令

Linux网络——Shell编程之快捷命令

Linux网络——Shell编程之快捷命令 一、快捷排序 — sort 命令二、快捷去重 — uniq 命令三、快捷替换 — tr 命令四、快速裁剪 — cut 命令五、文件拆分 — split 命令六、文件合并 —paste 命令七、变量扫描器 — eval 命令 一、快捷排序 — sort 命令 sort命令用于以行为单位…
阅读更多...
五步看平台，选好安全的MT4交易外汇平台

五步看平台，选好安全的MT4交易外汇平台

在选择MT4外汇交易平台时&#xff0c;如何避免不正规的平台?以下是5招教你远离不正规MT4交易外汇平台。 1. 查看平台是否取得合法许可证 首要考虑的是该平台是否取得了合法的许可证。许可证是证明一个交易平台合法的最重要证据&#xff0c;因此务必在选择时核查该平台的许可证…
阅读更多...
得物深入浅出解析JVM中的Safepoint

得物深入浅出解析JVM中的Safepoint

1.初识Safepoint-GC中的Safepoint 最早接触JVM中的安全点概念是在读《深入理解Java虚拟机》那本书垃圾回收器章节的内容时。相信大部分人也一样&#xff0c;都是通过这样的方式第一次对安全点有了初步认识。不妨&#xff0c;先复习一下《深入理解Java虚拟机》书中安全点那一章…
阅读更多...
你真的了解Java类加载机制吗？

你真的了解Java类加载机制吗？

大家好&#xff0c;我是小米&#xff0c;一个喜欢分享技术的程序员。今天我来给大家简述一下Java类加载模型。 在Java中&#xff0c;类的加载过程是在程序运行时动态进行的。Java的类加载模型可以分为三个步骤&#xff1a;加载、连接和初始化。 类加载过程&#xff1a;加载 首…
阅读更多...
Android面试指南：谈谈你对Flutter的理解

Android面试指南：谈谈你对Flutter的理解

一、Flutter简介 Flutter是由Google开发的一种基于Dar编程语言的移动应用开发框架。可以帮助开发在构建高性能、美观、灵活的应用程序&#xff0c;从而实现跨平台开发&#xff0c;适用于与Android、ios、web、windows、macOS和linux等多个平台。 二、学习Flutter有什么优势 …
阅读更多...
Java EE企业级应用开发(SSM)第11章

Java EE企业级应用开发(SSM)第11章

第11章SSM框架 一.预习笔记 1.准备jar包&#xff08;注意版本&#xff09; Spring一套包 Springmvc两个 Mybatis一个 Spring整合mybatis一个 Jstl一个用于jsp显示数据 Mysql一个用于访问数据库 Gson一个用于返回json数据 2.准备配置文件web.xml applicationContext.xml…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023