万字总结HTML超文本标记语言

一、前言:什么是网页?

网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。

网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。

二、什么是HTML?

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。HTML 不是一种编程语言,而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。

所谓超文本,有 2 层含义:
1. 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制 )。
2. 它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本 )。

三、浏览器内核

浏览器内核(渲染引擎): 负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

四、Web 标准的构成

主要包括结构(Structure) 、表现(Presentation)和行为(Behavior)三个方面。

一、HTML 结构

1.1认识 HTML 标签

HTML 代码是由 "标签" 构成的。形如:

HTML
<body>hello</body>

  • 标签名 (body) 放到 < > 中
  • 大部分标签成对出现. <body> 为开始标签, </body> 为结束标签.
  • 少数标签只有开始标签, 称为 "单标签".
  • 开始标签和结束标签之间, 写的是标签的内容. (hello)
  • 开始标签中可能会带有 "属性",id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

HTML
<body id="myId">hello</body>

1.2HTML 文件基本结构

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
今日用例</title>
</head>
<body>
    Hello World!
</body>
</html>

  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性.
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

1.3标签层次结构

  • 父子关系
  • 兄弟关系

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
今日用例</title>
</head>
<body>
    Hello World!
</body>
</html>

其中:

  • head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
  • title 是 head 的子标签. head 是 title 的父标签.
  • head 和 body 之间是兄弟关系.

可以使用 chrome 的开发者工具查看页面的结构.

F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节.

标签之间的结构关系, 构成了一个 DOM 树

DOM Document Object Mode (文档对象模型) 的缩写.

1.4快速生成代码框架

在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
今日用例</title>
</head>
<body>

</body>
</html>

细节解释:

  • <!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
  • <html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
  • <meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
  • content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

二、HTML 常见标签

2.1注释标签

注释不会显示在界面上. 目的是提高代码的可读性。

HTML
<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释.

注释的原则

  • 要和代码逻辑一致.
  • 尽量使用中文.
  • 不要传递负能量.

2.2标题标签: h1-h6

有六个, 从 h1 - h6. 数字越大, 则字体越小。

HTML
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

2.3段落标签: p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落。

HTML
    css中的1px并不等于设备的1px
    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css
中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的
移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,
苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着
同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五
花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。
    还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中
1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于
这点,在文章后面的部分还会讲到。
    在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的
定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该
设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,
也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。

2.3.1 p 标签表示一个段落

通过 p 标签改进上述代码, 每个段落放到 p 标签中:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
今日用例</title>
</head>
<body>
    css中的1px并不等于设备的1px<p></p>
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css
中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在

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

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

相关文章

c#:System.Text.Json 的使用三(从Newtonsoft迁移)

环境&#xff1a; .net 6.0vs2022 系列篇&#xff1a; 《c#&#xff1a;System.Text.Json 的使用一》 《c#&#xff1a;System.Text.Json 的使用二》 《c#&#xff1a;System.Text.Json 的使用三&#xff08;从Newtonsoft迁移&#xff09;》 参考&#xff1a; 《MSDN: 从 Newt…

2023/09/21 day5 qt

将注册的账号密码存储到数据库中 登录的账号密码与数据库中的账号密码进行匹配 头文件 #ifndef DENGLU_H #define DENGLU_H #include <QMainWindow> #include <QDebug> #include <QIcon> #include <QLabel> #include <QLineEdit> #include &l…

数据库——理论基础

目录 1.1 什么是数据库 1.2 数据库管理系统&#xff08;DBMS&#xff09; 1.3 数据库和文件系统的区别 1.4 数据库的发展史 1.5常见的数据库 1.5.1关系型数据库 1.5.2 非关系型数据库 1.6 DBMS支持的数据模型 1.1 什么是数据库 数据&#xff1a;描述事物的符号记录 数…

李宏毅机器学习2023作业(目录)

2023.09.20更新 作业01的一键式执行Strong Baseline完整代码已整理好&#xff0c;提取码统一设置2023 【深度解析→博文总结】李宏毅机器学习2023作业01Regression(COVID-19 Cases Prediction) 【2023作业01一键式执行Strong Baseline完整代码】 【深度解析→博文总结】李宏毅机…

【精通嵌入式Linux编程】引导加载程序详解bootloader

必须做两件事情&#xff1a; 引导加载程序必须传递一个指针&#xff0c;指向保护硬件配置信息的结构&#xff0c; 必须传递一个指向内核命令行的指针 SRAM&#xff1a;不需要内存控制器的静态随机存储器 阶段一&#xff1a;ROM代码 复位或上电后立即运行的代码必须存再soc的片…

基于springboot+vue的客户关系管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

MySQL备份与恢复

MySQL备份与恢复一、备份1、数据备份的重要性2、数据备份分类2.1 物理备份2.2 逻辑备份 3、数据库备份策略4、常用的备份方法和工具5、数据库上云迁移 二、数据库完全备份1、简介2、物理冷备份与恢复2.1 物理冷备份2.2 备份恢复2.3 补充知识date 3、mysqldump备份与恢复3.1 完全…

文件系统之程序是怎么打开文件进行操作的

本篇文章自顶向下&#xff0c;从文件系统的上层出发讲到磁盘&#xff0c;帮助理解程序是如何打开文件并进行后序的读写操作的&#xff0c;读到后面&#xff0c;前面的一些疑惑就得到解决 介绍相关概念 注意&#xff0c;目录也是文件 文件描述符 每个进程都有一个指针*files…

【深度学习】BLIP: 用于统一的视觉-语言理解和生成的引导式语言图像预训练

BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation BLIP&#xff1a;用于统一的视觉-语言理解和生成的引导式语言图像预训练 论文&#xff1a;https://arxiv.org/abs/2201.12086 代码&#xff1a;https://github.…

NotePad++ 在行前/行后添加特殊字符内容方法

我们在处理数据时&#xff0c;会遇到需要在每行数据前面、后面、开头、结尾添加各种不一样的字符 如果数据不多&#xff0c;我们可以自己手动的去添加&#xff0c;但如果达到了成百上千行&#xff0c;此时再机械的手动添加是不现实的 这里教给大家如何快速的在数据每行的前后…

QT 绘画功能的时钟

.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> //信息调试类 #include <QPainter> #include <QPixmap> //图像引擎类 #include <QTime> #include <QTimer> …

秋招准备--基础知识复习--系统编程

lab1 进程 定义 进程的定义是操作系统中资源分配的基本单位&#xff0c;是程序的执行实体。具体地来分析这个定义的一体两面&#xff1a; 在资源分配方面&#xff0c;每个进程都有虚拟的进程空间&#xff0c;其中包括代码区&#xff0c;全局静态区&#xff0c;BSS区&#xff…

一文读懂 Redis 缓存系统

【摘要】本文介绍了Redis缓存原理、详细解析了缓存模型、缓存一致性和缓存异常场景。 【作者】李杰&#xff0c;专注于Java虚拟机技术、云原生技术领域的探索与研究。 尽管&#xff08;关系型&#xff09;数据库系统 (SQL) 带来了许多出色的属性&#xff0c;例如 ACID&#x…

Spring Boot Actuator使用指南

什么是 Spring Boot Actuator&#xff1f; Spring Boot Actuator 是 Spring Boot 提供的一种生产级别的特性&#xff0c;它可以帮助我们监控和管理 Spring Boot 应用&#xff0c;比如健康检查、审计、统计和 HTTP 追踪等。所有这些特性可以通过 JMX 或者 HTTP endpoints 来访问…

Linux系统编程——总结初识Linux(常用命令、特点、常见操作系统)

文章目录 UNIX操作系统&#xff08;了解&#xff09;Linux操作系统主要特征Linux和unix的区别和联系什么是操作系统常见的操作系统Ubuntu操作系统Ubuntu安装linux下的目录的类型(掌握)shell指令shell指令的格式文件操作相关指令系统相关命令网络相关命令其他命令软件安装相关的…

duilib 进阶 之 list 容器使用 及扩展

目录 一、list控件 1、选中事件的例子 2、子项目为简单容器时赋值 1)、直接样式文件里赋值

leetcode Top100(16)缺失的第一个正数

给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 * * 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 * * * 示例 1&#xff1a; * * 输入&#xff1a;nums [1,2,0] * 输出&#xff1a;3 * 示例 2&#xff1a; * * 输入…

【算法】排序——插入排序及希尔排序

目录 前言 一、排序的概念及其应用 1.1排序的概念 1.2排序的应用 1.3常见的排序算法 二、插入排序的实现 基于插入排序的优化——希尔排序&#xff08;缩小增量排序 个人主页 代码仓库 C语言专栏 初阶数据结构专栏 Linux专栏 LeetCode刷题 算法专栏 前言 这…

js for循环设置循环变量和循环体内部是两个单独作用域

参考文章 for 循环设置循环变量的那部分是一个父作用域&#xff0c;而循环体内部是一个单独的子作用域。 for (let i 0; i < 3; i) {let i abc;console.log(i); } // abc // abc // abc上面代码正确运行&#xff0c;输出了 3 次abc。这表明函数内部的变量i与循环变量i不…

多进程编程- POSIX命名信号量(named semaphore)

POSIX命名信号量是POSIX标准下的一个进程间同步原语&#xff0c;允许多个进程共享同一个信号量&#xff0c;从而实现进程间的同步和通信。这与无名信号量不同&#xff0c;无名信号量主要用于线程之间的同步&#xff0c;而不是进程之间。 命名信号量是“命名”的&#xff0c;因…