前端3剑客(第1篇)-初识HTML

100编程书屋_孔夫子旧书网

当今主流的技术中,可以分为前端和后端两个门类。

前端:简单的理解就是和用户打交道

后端:主要用于组织数据

而前端就Web开发方向来说, 分为三门语言, HTML、CSS、JavaScript

语言作用
HTML描述页面的结构,类似于动物的骨架
CSS渲染技术,使得页面更好看,也可以一定程度的让页面动起来
JavaScript实现和后端的交互, 数据验证、收发等功能

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网页

组成HTML的元素称为标签,标签的结构分为两种

  • 有开始标签和结束标签的 如
  • 有单标签的 ,例如 ,单标签中的 / 即表示标签的闭合, / 符号不写也是可以的

下面这段HTML代码包含的标签解释如下

  • 声明类型, 意思为超文本语言类型。 是一种HTML5的规范写法,在HTML发展过程中还有以下的几种声明方式
    <!DOCTYPE html> html5规范, html的第一行必须为此值<!--html4 严格版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><!--html4 过渡版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
    <!--html4 框架版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">关于html4的声明类型,可以参考:
    https://www.w3.org/TR/html4/sgml/dtd.html
    
  • html 最外层的一个跟节点,里面的所有元素都是它的子元素

    <!--lang属性表示使用英文,如果是中文,可以改成zh, 非严格属性也可以不写-->
    <html lang="en"></html>
    
  • head  头标记,整个网页的全局属性都会写在这个里面

  • body 网页的主体部分,用户可以直观感受到的显示内容的部分

  • meta 标签, 标记原数据,可以规定网页的字符、缩放比例等信息

    
    <!--规定字符集使用UTF-8, UTF-8 涵盖全球所有的国际和民族的文字和大量图像, UTF-8 规定一个字符占3个字节-->
    <meta charset="UTF-8">
    
  • title 标题标签,标题的内容会在浏览器的tab页中显示

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

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

相关文章

【Mysql语句优化---Explain使用以及相关属性含义】

Explain使用以及相关属性含义 一.explain中的列 接下来我们将展示 explain 中每个列的信息。 1. id列 id列的编号是 select 的序列号&#xff0c;有几个 select 就有几个id&#xff0c;并且id的顺序是按 select 出现的顺序增长的。 id列越大执行优先级越高&#xff0c;id相…

罗德里格斯旋转公式证明-简洁

罗德里格斯旋转公式证明。 设旋转向量为 ( n , θ ) (n, \theta) (n,θ)&#xff0c;设其对应的旋转矩阵为 R R R&#xff0c; 如何证明&#xff1f; R c o s θ I n ∧ s i n θ ( 1 − c o s θ ) n n T Rcos\theta I n^{\wedge}sin\theta(1-cos\theta)nn^{T} RcosθI…

RDD与Java实战:学生列表,先按性别降序,再按年龄降序排列

文章目录 Scala RDD 实现Java 实现实战总结 在本实战任务中&#xff0c;我们的目标是对学生列表进行排序&#xff0c;排序规则是先按性别降序排列&#xff0c;再按年龄降序排列。我们提供了两种实现方式&#xff1a;使用Scala的RDD&#xff08;弹性分布式数据集&#xff09;和…

Python 二叉数的实例化及遍历

首先创建一个这样的二叉树&#xff0c;作为我们今天的实例。实例代码在下方。 #创建1个树类型 class TreeNode:def __init__(self,val,leftNone,rightNone):self.valvalself.leftleftself.rightright #实例化类 node1TreeNode(5) node2TreeNode(6) node3TreeNode(7) node4Tre…

Mybatis项目创建 + 规范

文章目录 一、相关概念Mybatis1.1 什么是Mybatis1.1 如何实现简化JDBC 二、如何创建 Mybatis 项目2.1 创建SpringBoot项目 加载依赖2.2 准备数据库 以及 对象的映射2.3 配置数据库连接池2.4 使用Mybatis操作数据库2.5 单元测试 三、其他3.1 数据库与Java对象的映射规则 ---- 结…

为什么GD32F303代码运行在flash比sram更快?

我们知道一般MCU的flash有等待周期&#xff0c;随主频提升需要插入flash读取的等待周期&#xff0c;以stm32f103为例&#xff0c;主频在72M时需要插入2个等待周期&#xff0c;故而代码效率无法达到最大时钟频率。 所以STM32F103将代码加载到sram运行速度更快。 但使用GD32F30…

复习kafka

Kafka 介绍 Kafka 是一种分布式的&#xff0c;基于发布/订阅的消息系统。它最初由 LinkedIn 开发&#xff0c;并于 2011 年开源。Kafka 的设计目标是提供一种高效、可靠的消息传输机制&#xff0c;能够处理大量的实时数据。 Kafka 基本概念 Producer&#xff1a;生产者&#xf…

Spring Boot 官方不再支持 Spring Boot 的 2.x 版本!新idea如何创建java8项目

idea现在只能创建最少jdk17 使用 IDEA 内置的 Spring Initializr 创建 Spring Boot 新项目时&#xff0c;没有 Java 8 的选项了&#xff0c;只剩下了 > 17 的版本 是因为 Spring Boot 官方不再支持 Spring Boot 的 2.x 版本了&#xff0c;之后全力维护 3.x&#xff1b;而 …

ArcGIS属性域和子类型

01 属性域 道路的车道数值是小于10的。在编辑道路的此属性时&#xff0c;为了限制其值在10以内&#xff0c;可以使用属性域。当输入数据超过10时&#xff0c;就会限制输入。 限制输入这个功能是Pro特有的&#xff0c;在ArcMap中输入超出限制的值也是合法的&#xff0c;需要手动…

【NOIP提高组】进制转换

【NOIP提高组】进制转换 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 我们可以用这样的方式来表示一个十进制数&#xff1a;将每个阿拉伯数字乘以一个以该数字所处位置的&#xff08;值减1&#xff09;为指数&#xff0c;以 10 为底数的幂…

Mac硬件设备系统环境的升级/更新 macOS

Mac硬件设备上进行系统环境的升级/更新macOS 1.大版本(升级)判断(比如&#xff1a;我买的这台电脑设备最高支持Monterey) 点击进入对应的大版本描述说明页查看相关的兼容性描述&#xff0c;根据描述确定当前的电脑设备最高可采用哪个大版本系统(Sonoma/Ventura/Monterey/Big Su…

构建高效便捷的家政平台系统——打造优质家政服务的关键

随着人们生活节奏的加快和工作压力的增大&#xff0c;家政服务的需求日益增长。为了满足这一需求&#xff0c;家政平台系统应运而生。本文将探讨家政平台系统的整体架构&#xff0c;以实现高效便捷的家政服务&#xff0c;打造优质家政体验。 ### 1. 家政平台系统背景 随着现代…

PKG系统安装包及IPSW固件下载(MacOS 11-14)11.7.10/12.7.1/13.6.

MacOS 14 Sonoma&#xff0c;为提高生产力和创造力带来了全新的功能&#xff0c;有了更多使用小部件和令人惊叹的新屏幕保护程序进行个性化设置的方法&#xff0c;对Safari浏览器和视频会议进行了重大更新&#xff0c;以及优化的游戏体验——Mac体验比以往任何时候都更好。 下载…

C++中的类

一&#xff0c;类的定义 class classname {//类体由成员函数和成员变量组成}; class为定义类的关键字&#xff0c;ClassName为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分 号不能省略。 类的两种定义方式&#xff1a; 声明和定义全部放在类体中…

从集合论到位运算

前言 本文将扫清位运算的迷雾&#xff0c;在集合论与位运算之间建立一座桥梁。 在高中&#xff0c;我们学了集合论&#xff08;set theory&#xff09;的相关知识。例如&#xff0c;包含若干整数的集合 S{0,2,3}。在编程中&#xff0c;通常用哈希表&#xff08;hash table&…

自然资源-农村土地流转知识全解

自然资源-农村土地流转知识全解 随着农村经济的发展和城市化进程的加快&#xff0c;农村土地面临着多方面的压力&#xff0c;如人口增长、城市扩张、环境恶化等。这些压力导致了农村土地利用率低、经济效益差、农民收入水平低、农村社会经济不发达等问题。因此&#xff0c;改变…

计算机网络学习2

文章目录 信道复用技术 第三章数据链路层概述数据链路层的三个重要问题封装成帧和透明传输差错检测可靠传输的相关基本概念可靠传输的实现机制停止等待协议回退N帧协议选择重传协议 点对点协议PPP共享式以太网网络适配器和MAC地址CSMA_CD协议的基本原理共享式以太网的争用期共享…

备战十一届大唐杯国赛预选赛

这次省赛带了太多个省一了&#xff0c;具体可看下面的图片&#xff0c;只放了一部分。目前根据可靠消息&#xff0c;应该还有个预选赛和去年一样&#xff0c;就是还会考一次仿真。如果说通过了就是国二起步然后去北方工业争夺国一国二&#xff0c;没过的话就是国三。 每…

<MySQL> 表的增删改查 - 基本查询

目录 前言&#xff1a; 一、表的插入 &#xff08;一&#xff09;指定列插入和多行插入 &#xff08;二&#xff09;全列插入 &#xff08;三&#xff09;插入选择更新 &#xff08;四&#xff09;替换数据 二、表中的数据查询 &#xff08;一&#xff09;select查询语…

【SQL学习进阶】从入门到高级应用【三范式】

文章目录 什么是数据库设计三范式三范式一对多怎么设计多对多怎么设计一对一怎么设计最终的设计 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f495;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01; &#x1f495;希望您在这里可以感受到一份…