猿创征文|【HTML】标签学习之路

news2025/7/16 1:30:29

💖目录

一、HTML语法规范

1.基本语法概述

2.标签关系

二、HTML基本结构标签

1.第一个HTML页面

2.HTML基本结构标签总结

一、HTML语法规范

1.基本语法概述

  • html是由尖括号包围的关键词,列如:<html>
  • html标签通常是成对出现的,列如:<html>和</html>,我们称为双标签。标签对里的第一个标签是开始标签,第二个标签是结束标签。
  • 有些特殊的标签必须是单个标签(极少情况),列如<br />,我们称为单标签。
    <html>开始标签
    </html>结束标签  成对出现
    <br /> 单标签
    

2.标签关系

双标签关系可以分为两类:包含关系并列关系

包含关系(俗称父子关系)

<head>
    <tilte></tilte>
</head>

并列关系(俗称兄弟关系)

<head></head>
<body></body>

二、HTML基本结构标签

1.第一个HTML页面

每个网页都会有一个基本的结构标签(也俗称为骨架标签),页面内容也是在这些基本标签上书写的。HTML页面也称为HTML文档:

HTML标签
标签名定义说明
<html></html>HTML标签页面中最大的标签,我们称为根标签
<head></head>文档的头部注意在head标签中我们必须要设置的标签是title
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体元素包含文档的所以内容,页面内容基本都是放到body里面的

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        人生苦短,我要学前端。
    </body>
</html>

案例:

 

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

2.HTML基本结构标签总结

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

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

相关文章

前端微信小程序开发基础

文章参考&#xff08;黑马小程序教学视频&#xff09;仅供参考与学习 简介 小程序和普通页面开发的区别 运行环境不同 网页运行在浏览器中&#xff0c;小程序运行在微信环境中 API不同 由于运行环境不同&#xff0c;所以小程序中&#xff0c;无法调用DOM和BOM的API. 但是…

如何使用 CSS 使表格居中(快速指南)

在网页设计中使用表格有一段有趣的历史。在采用 CSS 之前&#xff0c;表格不仅仅用于以传统方式显示表格数据练习列表&#xff0c;而是更常用于控制完整的页面布局。 那时&#xff0c;HTML 表格用于定义网页的结构和视觉外观&#xff0c;其中表格的位置可以直接在 HTML 中指定…

input详解之文件上传

input 全部类型 常用的并且能为大多数浏览器所识别的类型大概有&#xff1a;text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 1、一般类型 <!-- text类型 文本框 默认…

Vue2 Element DatePicker组件设置默认日期、控制日期范围

文章目录前言一、设置默认日期1.不要用placeholder2.设置动态的默认日期二、限制日期选取1.方案2.举例总结前言 以前都是做练习, 上周拿到这个任务直接被卡住… 一、设置默认日期 1.不要用placeholder 依然不使用placeholder属性, 在v-model初始就绑定了时间的情况下, 组件可…

vue导入处理Excel表格详解

目录1. 前言2.vue导入Excel表格2.1 使用ElementUI中的upload组件2.2 使用input文件上传3. 总体代码与效果4. 总结1. 前言 最近遇到前端导入并处理excel表格的情况&#xff0c;趁此机会刚好研究一下vue导入并处理excel数据&#xff1b;当然自己手撸一个工具没有那么多时间&#…

vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传

安装: 我用的是tinymce最新版本v6 npm install tinymce -S npm install tinymce/tinymce-vue -S 2.安装语言包:Language Packages | Trusted Rich Text Editor | TinyMCE 3.在项目public文件夹下--新建tinymce文件夹,安装包解压在该文件夹下 封装组件TEditor.vue <templa…

微信小程序实现上拉加载下拉刷新(即粘即用)

前言 去年有出过一篇关于 vue 实现上拉加载下拉刷新的功能&#xff0c;最近微信小程序中也用到了这个功能&#xff0c;下面一起来看看微信小程序中是怎么实现这个小功能的吧。 实现效果如下&#xff1a; 实现思路&#xff1a; 1. 首先需要在使用到的 json 文件下配置 "ena…

vue项目遇见事件冒泡如何处理

开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图&#xff0c;当我们点击页面某个元素时&#xff0c;会产生点击事件&#xff0c;事件由外到内&#xff0c;逐层递进&#xff08;事件捕获阶段&#xff0c;途中的1->2->3->4&#xff09…

DVWA靶场搭建

1.靶场是什么&#xff0c;靶场的搭建 在学习web安全的过程中&#xff0c;靶场是必不可少的&#xff0c;毕竟在计算机界&#xff0c;任何理论知识都不如实操 靶场就是人为提供的带有安全漏洞的服务&#xff0c;每一个学习者都可以在本地快速搭建来实操&#xff0c;回溯漏洞的发…

超好玩的js页面效果---实现数值的动态变化

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

JS实战——轮播图

目录 一、轮播图介绍 二、原理 三、轮播图基本htm布局 四、轮播图CSS布局 五、轮播图JS布局 六、轮播图效果 一、轮播图介绍 现在我们在很多网站上都能看到轮播图&#xff0c;像某东、某宝、某猫等等大小型网站上都有应用。下面就是某宝上的轮播图样式。 二、原理 将一些图…

【chatgpt谈前端三大主流框架】React、Vue和Angular的优缺点及如何选择

文章目录React优点缺点Vue优点缺点Angular优点缺点总结chatgpt号称无所不能&#xff0c;今天我们就来考考他&#xff0c;让他来对比下React、Vue和Angular。下面是chatgpt全部回答&#xff0c;大家觉得他分析得对吗&#xff1f;React、Vue和Angular都是目前最流行的前端框架&am…

【vue2】使用elementUI进行表单验证实操(附源码)

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue使用elementUI进行表单验证实操&#xff08;附源码&#xff09; 【前言】我们在构建一…

VUE 使用 vue create 命令 创建 vue2.0 项目

为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题&#xff0c;我们使用 管理员身份 打开命令行 第一步&#xff0c;打开命令行后&#xff0c;首先进入我们想要创建项目的目录下 g: 表示切换进入G盘 cd git 表示打开 当前盘下的 git 文件夹 大家可以根据以上…

如何解决 npm 安装依赖报错 ERESOLVE unable to resolve dependency tree

现代前端项目开发中依赖管理已经是不可或缺的一环&#xff0c;然后由于各种问题&#xff0c;如历史原因、项目缺少维护等&#xff0c;前端项目在依赖管理中会遇到非常多的问题。本篇文章讨论其中一种&#xff0c;当 npm install 时遇到报错 ERESOLVE unable to resolve depende…

百度文心一言对标 ChatGPT,你怎么看?

文心一言 VS ChatGPT接受不完美 期待进步里程碑意义文心一言初体验✔ 文学创作✔ 商业文案创作✔ 数理逻辑推算✔ 中文理解✔ 多模态生成写在最后何为文心&#xff1f;“文”就是我们中华语言文字中的文&#xff0c;“心”是希望该语言模型可以用心的去理解语言&#xff0c;用心…

手把手教你基于HTML、CSS搭建我的相册(上)

The sand accumulates to form a pagoda写在前面HTML是什么&#xff1f;CSS是什么&#xff1f;demo搭建写在最后写在前面 其实有过一些粉丝咨询前端该从什么开始学&#xff0c;那当然是我们的前端基础三件套开始学起&#xff0c;HTML、CSS、javaScript&#xff0c;前端的大部分…

pnpm学习

1、pnpm是什么&#xff1f; 现代的包管理工具 pnpm&#xff08; performant npm &#xff09;&#xff0c;意思是高性能的 npm 它由 npm/yarn 衍生而来&#xff0c;但却解决了 npm/yarn 内部潜在的 bug&#xff0c;并且极大了地优化了性能 2、特性概览 &#xff08;1&#x…

前端小技巧

1.html 1.1 网站自动刷新 应用场景&#xff1a; 网页定期自动刷新&#xff08;现在基本淘汰了&#xff0c;采用ajax&#xff09;&#xff1b;自动跳转到指定页面&#xff0c;这个自动跳转的好处就是不需要JS调用&#xff0c;属于纯html网页自动跳转 v7-网站自动刷新 你可以…

【uni-app】小程序实现微信授权登陆(附流程图)

微信授权登陆是比较常见的一种登陆方式&#xff0c;今天来总结下实现流程 进入授权登陆页面 初始化调用wx.login获取登陆凭证code&#xff08;用户无感知&#xff09; //封装微信获取用户code&#xff0c;避免嵌套 login() {return new Promise((resolve, reject) > {uni.l…