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

news2024/11/17 23:46:45

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.coloradmin.cn/o/1721332.html

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

相关文章

文件夹损坏0字节:原因、恢复方案与预防措施

在使用电脑或移动设备时&#xff0c;我们有时会遇到文件夹突然损坏并显示为0字节的情况。这种故障不仅令人困惑&#xff0c;更可能导致重要数据的丢失。本文将深入探讨文件夹损坏0字节的现象&#xff0c;分析其产生的原因&#xff0c;并给出两种有效的数据恢复方案&#xff0c;…

特别实用的8个机器学习算法总结!建议收藏,反复观看!

个人主页&#xff1a;.Boss.-CSDN博客 目录 1.线性回归&#xff08;Linear Regression&#xff09; 2.多项式回归&#xff08;Polynomial Regression&#xff09; 3.岭回归&#xff08;Ridge Regression&#xff09; 4.Lasso回归&#xff08;Lasso Regression&#xff09; …

Linux sudo用户权限管理小实验001

Linux sudo用户权限管理和审计-初步 1、设置历史指令的保存数量 默认history指令可以查看当前用户执行的1000条历史命令的条目 2、使用export指令设置HISTSIZE环境变量的数量为999999条。 3、基于date指令&#xff0c;输出日期和时间 4、设置linux系统history相关变量&…

【Springboot】——项目的创建与请求参数应用

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

【Qt秘籍】[001]-从入门到成神-前言

一、Qt是什么&#xff1f;[概念] Qt是一个跨平台的应用程序开发框架&#xff0c;简单来说&#xff0c;它是一套工具和库&#xff0c;帮助软件开发者编写可以在多种操作系统上运行的图形用户界面&#xff08;GUI&#xff09;应用程序。比如&#xff0c;你用Qt写了一个软件&#…

Spring-Cloud-CircuitBreaker-Resilience4j (3.1.1)

介绍 Resilience4j 是一个专为函数式编程而设计的轻量级容错库。Resilience4j 提供高阶函数&#xff08;装饰器&#xff09;&#xff0c;以增强任何功能接口、lambda 表达式或方法引用&#xff0c;包括断路器、速率限制器、重试或隔板。您可以在任何函数接口、lambda 表达式或…

LeeCode热题100(两数之和)

本文纯干货&#xff0c;看不懂来打我&#xff01; 自己先去看一下第一题的题目两数之和&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 简单来说就是让你在一个数组里面找两个数&#xff0c;这两个数的和必须满足等于目标值target才行。 我认为你要是没有思路的话&a…

CANDela studio基础使用

ECU Information 可以修改ECU的名称 里面有个Supported Interfaces&#xff0c;可以在CDDT里面选择支持的通讯接口 可以在tools下面新建internface&#xff0c;也可以从其他CDDT文件里面复制过来&#xff0c;复制的时候注意要另外将里面的参数再复制一次。 也可以在这里点击新…

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;而 …

SpringBoot 七牛云 OSS 私有模式 获取访问链接

目录 一、问题引出 二、在SpringBoot中获取私有访问路径的操作 一、问题引出 由于七牛云OSS的公有模式存在被盗刷的风险&#xff0c;可能导致服务器额外的费用&#xff0c;于是我选择私有模式进行操作。私有模式的访问路径是一个问题&#xff0c;因为需要对应着token和e这两…

Gradio 案例——将文本文件转为词云图

文章目录 Gradio 案例——将文本文件转为词云图界面截图依赖安装项目目录结构代码 Gradio 案例——将文本文件转为词云图 利用 word_cloud 库&#xff0c;将文本文件转为词云图更完整、丰富的示例项目见 GitHub - AlionSSS/wordcloud-webui: The web UI for word_cloud(text t…

一个浏览器插件,绕过限制,登录微信网页版!

摘要 早在2017年开始&#xff0c;微信网页版就已经住逐渐开始停止登录&#xff0c;以为了保障你的账号安全为由引导你使用电脑版微信。具体如下&#xff1a; 当然这个影响并不是所有账号&#xff0c;还是有一些账号不明觉厉地没有被影响到&#xff0c;我自己有2个号都还是可以…

MinIO 使用

MinIO自建对象存储 1、dock-compose 使用dock-compose拉取 minio:image: "minio/minio"container_name: minioports:- "9000:9000"- "9001:9001"volumes:- "./minio/data1:/data1"- "./minio/data2:/data2"restart: on-fai…

32. 【Java教程】集合

在前面的小节中&#xff0c;我们学习了数组&#xff0c;本小节学习的集合同样用于存放一组数据&#xff0c;我们将学习什么是集合、集合的应用场景 &#xff0c;在应用场景部分我们将对比 Java 数组与集合的区别&#xff0c;还将系统介绍 Java 集合的架构&#xff0c;也将结合实…

调查问卷和考试系统SurveyKing

什么是 SurveyKing &#xff1f; SurveyKing 是功能更强大的调查问卷、考试系统&#xff0c;很多功能体验超过问卷网、问卷星。支持在线考试/调查问卷/公开查询/题库刷题/投票。 软件特性 &#x1f947; 支持 20 多种题型&#xff0c;如填空、选择、下拉、级联、矩阵、分页、签…

TCP的重传机制

TCP 是一个可靠的传输协议&#xff0c;解决了IP层的丢包、乱序、重复等问题。这其中&#xff0c;TCP的重传机制起到重要的作用。 序列号和确认号 之前我们在讲解TCP三次握手时&#xff0c;提到过TCP包头结构&#xff0c;其中有序列号和确认号&#xff0c; 而TCP 实现可靠传输…

FPGA高端项目:FPGA解码MIPI视频+图像缩放+视频拼接,基于MIPI CSI-2 RX Subsystem架构实现,提供4套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我这里已有的 MIPI 编解码方案本方案在Xilinx Artix7-35T上解码MIPI视频的应用本方案在Xilinx Artix7-100T上解码MIPI视频的应用本方案在Xilinx Kintex7上解码MIPI视频的应用本方案在Xilinx Zynq7000上解码MIPI视频的应用本方案在…

小邪大佬最新版微信hook

目前小邪大佬已经更新到最新版本微信hook了。 /发送文件 BOOL SendCdnFilePbMsg(string sendId, string cdnkey, string aes_key,string file_name,string md5, int size, string syncKey) {FileMessage sfm;sfm.set_file_id(cdnkey);sfm.set_size(size);sfm.set_aes_key(aes_…

内燃机智能制造工厂工业物联数字孪生平台,推进制造业数字化转型

内燃机智能制造工厂工业物联数字孪生平台&#xff0c;推进制造业数字化转型。随着科技的飞速发展&#xff0c;制造业正迎来一场深刻的数字化转型。内燃机智能制造工厂工业物联数字孪生平台&#xff0c;作为这一转型的重要推手&#xff0c;正逐渐改变着传统制造业的面貌。 内燃…

《异常检测——从经典算法到深度学习》29 EasyTSAD: 用于时间序列异常检测模型的工业级基准

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …