HTML 初

前言

30 HTML5 Tutorials & Resources for Web Developers 2018 - Colorlib


HTML的基本骨架

HTML基本骨架是构建网页的最基本的结果。

<!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>
    
</body>
</html>
  • <!DOCTYPE html>:指定文档类型为HTML5。
  • <html>:表示整个HTML文档的根元素。
  • <head>:包含了与文档相关的设置和定义,如字符编码、标题等。
  • <title>:定义网页的标题,将显示在浏览器的标题栏或标签页上。
  • <body>:包含了网页的主要内容。

VSCode中可以输入!再按Tab/Enter 自动生成此代码。


注释

在HTML中,注释是一种用于添加说明、解释或临时禁用代码的工具。注释不会在浏览器中显示,它们只对代码进行注解的文本。

可以使用 <!-- --> 来添加注释

例如:

<!-- 这是一个注释 -->

VSCode中快捷键为Ctrl+/ 


标签关系

在HTML中,标签之间存在不同的关系,用于组织和描述文档结构。

以下是一些常见的标签关系:

1.父子关系:一个标签可以包含另一个标签。被包含的标签称为子标签,而包含其他标记的标签称为父标签。

例如:

<div>
    <p>这是一个段落。</p>
</div>

其中,<div>为父标签,<p>为子标签。


2.兄弟关系:具有相同的父级标签的标签称为兄弟标签。它们在文档中相邻出现,并具有相同的层级关系。

例如:

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

其中,<li>标签是兄弟标签,它们都是<ul>的子标签。


3.嵌套关系:标签可以嵌套在其他标签内部,形成多层次的嵌套结构。

例如:

<article>
    <h1>文章标题</h1>
    <p>第一段内容</p>
    <section>
        <h2>子标题</h2>
        <p>子标题下的内容</p>
    </section>
</article>

其中,<h1>、<p>、<section>标签都是<article>标签的子标签,<h2>和<p>则是<section>标签的子标签。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

8月4日上课内容 nginx(重要内容,面试必问)

国外主要还是apache nginx高性能、轻量级的web服务软件。 nginx的特点 1、稳定性高。&#xff08;没有apache稳定&#xff09; 常用版本 1.12 1.20 1.22 2、系统资源消耗低。&#xff08;处理http请求的并发能力很高&#xff0c;单台服务器可以处理30000-50000个并发请求。…

【无标题】一篇文章带你彻底理解Java ArrayList数据结构详解

一篇文章带你彻底理解Java ArrayList数据结构详解 基本概念&#xff1a; ​ **之前创建数组的时候&#xff0c;需要声明提前声明数组的大小&#xff0c;**ArrayList是一个可以动态修改的数组&#xff0c;与普通数组的区别就是没有固定大小的限制&#xff0c;它会动态调整长度…

2023华数杯数学建模竞赛C题思路解析

如下为&#xff1a;2023华数杯数学建模竞赛C题 母亲身心健康对婴儿成长的影响 的思路解析 C题 母亲身心健康对婴儿成长的影响 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c;还为婴儿提供情感支持和安全感。母亲心理健康状态的不…

Web-1-网站工作流程介绍

我们学习web开发&#xff0c;首先要知道什么是Web&#xff1f; Web: 全球广域网&#xff0c;也称为万维网(www World Wide Web)&#xff0c;能够通过浏览器访问的网站 比如我展示的这京东&#xff0c;淘宝唯品会都叫做网站&#xff0c;那么现在大家想一下&#xff0c;你还知道什…

2023-08-03 LeetCode每日一题(删除注释)

2023-08-03每日一题 一、题目编号 722. 删除注释二、题目链接 点击跳转到题目位置 三、题目描述 给一个 C 程序&#xff0c;删除程序中的注释。这个程序source是一个数组&#xff0c;其中source[i]表示第 i 行源码。 这表示每行源码由 ‘\n’ 分隔。 在 C 中有两种注释风…

Qt 中操作xml文件和JSON字符串

文章目录 1、概述1.1、xml介绍1.2、json介绍 2、xml文件增删改查2.1、写xml文件内容2.2、读xml文件内容2.3、删除xml文件内容2.4、修改xml文件内容 3、构建JSON字符串3.1、JSON字符串排版4、剪切板操作 1、概述 1.1、xml介绍 XML 指可扩展标记语言&#xff08;EXtensible Mark…

复现原型链污染漏洞

目录 一、复现原型链污染漏洞 hackit 2018 1、创建hackit_2018.js文件 2、运行hackit_2018.js文件 3、寻找原型链漏洞 4、污染原型链 hackit 2018 1、创建hackit_2018.js文件 const express require(express) var hbs require(hbs); var bodyParser require(body-par…

【数据结构】快速排序

快速排序是一种高效的排序算法&#xff0c;其基本思想是分治法。它将一个大问题分解成若干个小问题进行解决&#xff0c;最后将这些解合并得到最终结果。 快速排序的主要思路如下&#xff1a; 选择一个基准元素&#xff1a;从待排序的数组中选择一个元素作为基准&#xff08;…

计算机视觉(五)深度学习基础

文章目录 深度学习基础卷积神经网络与传统神经网络区别深度学习与神经网络的区别 目标函数选择合适的目标函数Softmax层 改进的梯度下降梯度消失的直观解释激活函数学习步长SGD的问题Momentum动量Nesterov MomentumAdagradRMSpropAdam 各种梯度下降算法比较关于算法选择的建议B…

redis入门2-命令

Redis的基本数据类型 redis的基本数据类型&#xff08;value&#xff09;: string,普通字符串 hash&#xff08;哈希&#xff09;,适合存储对象 list(列表),按照插入顺序排序&#xff0c;可以由重复的元素 set(无序集合)&#xff0c;没有重复的元素 sorted set(有序集合)&…

华为数通HCIP-PIM原理与配置

组播网络概念 组播网络由组播源&#xff0c;组播组成员与组播路由器组成。 组播源的主要作用是发送组播数据。 组播组成员的主要作用是接收组播数据&#xff0c;因此需要通过IGMP让组播网络感知组成员位置与加组信息。 组播路由器的主要作用是将数据从组播源发送到组播组成员。…

【Ansible】Ansible自动化运维工具之playbook剧本搭建LNMP架构

LNMP 一、playbooks 分布式部署 LNMP1. 环境配置2. 安装 ansble3. 安装 nginx3.1 准备 nginx 相关文件3.2 编写 lnmp.yaml 的 nginx 部分3.3 测试 nginx4. 安装 mysql4.1 准备 mysql 相关文件4.2 编写 lnmp.yaml 的 mysql 部分4.3 测试 mysql5. 安装 php5.1 编写 lnmp.yaml 的 …

Datax 数据同步-使用总结(一)

1&#xff0c;实时同步&#xff1f; datax 通常做离线数据同步使用。 目前能想到的方案 利用 linux 的定时任务时间戳的方式做增量同步。 2&#xff0c;同步速度快不快&#xff1f; 单表同步速度还是挺快的 但是如果遇到复杂的 sql 查询&#xff0c;其同步效率&#xff0c…

opencv-34 图像平滑处理-双边滤波cv2.bilateralFilter()

双边滤波&#xff08;BilateralFiltering&#xff09;是一种图像处理滤波技术&#xff0c;用于平滑图像并同时保留边缘信息。与其他传统的线性滤波方法不同&#xff0c;双边滤波在考虑像素之间的空间距离之外&#xff0c;还考虑了像素之间的灰度值相似性。这使得双边滤波能够有…

《面试1v1》ElasticSearch 和 Lucene

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

问道管理:沪指窄幅震荡跌0.18%,有色、汽车等板块走低

3日早盘&#xff0c;沪指盘中窄幅震动下探&#xff0c;创业板逆市上扬&#xff1b;两市半日成交不足5000亿元&#xff0c;北向资金净卖出超15亿元。 到午间收盘&#xff0c;沪指跌0.18%报3255.88点&#xff0c;深成指跌0.23%&#xff0c;创业板指涨0.2%&#xff1b;两市算计成交…

6.如何用CSV文件生成异构图数据集

我们将使用GroupLens研究小组收集的MovieLens数据集。 这个数据集描述了MovieLens的五星评级和标记活动。该数据集包含来自600多名用户的9000多部电影的约10万个评分。我们将使用该数据集生成两种节点类型&#xff0c;分别保存电影和用户的数据&#xff0c;以及一种连接…

两个镜头、视野、分辨率不同的相机(rgb、红外)的视野校正

文章目录 背景实际效果查找资料资料1资料2 解决方案最终结果 背景 目前在做的项目用到两个摄像头&#xff0c;一个是热成像摄像头、另一个是普通的rgb摄像头。 一开始的目标是让他们像素级重合&#xff0c;使得点击rgb图像时&#xff0c;即可知道其像素对应的温度。但是在尝试…

spark history网络流量占用高问题记录

生产环境遇到一台机器网络流量占用高告警 由于监控只有机器总的网络流量&#xff0c;没有具体进程的 于是只能登陆服务器&#xff0c;安装nethogs&#xff1a;yum install nethogs 然后执行nethogs命令查看进程流量 观察到主要是spark history server这个进程占用流量高(最高…

【树】 二叉树 堆与堆排序 平衡(AVL)树 红黑(RB)树

目录 1 树1.1 认识树1.2 树的相关概念1.3 树的表示孩子兄弟表示法 2 二叉树2.1 概念2. 2 特殊二叉树2.3 二叉树的性质2.4 二叉树的存储结构 3 堆 — 完全二叉树的顺序结构实现3.1 堆的概念3.2 核心代码3.3 堆应用1 堆排序2 TOP-K问题 4 二叉树的链式存储4.1 二叉链结构与初始化…
最新文章