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

news2024/11/24 20:05:24

一、前言：什么是网页？

网站是指在因特网上根据一定的规则，使用 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.coloradmin.cn/o/1037936.html

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

相关文章

MySQL 中的索引

MySQL 中的索引

文章目录 一、索引的创建二、聚簇索引与非聚簇索引三、B 树索引 一、索引的创建 创建索引的方式包括两种&#xff1a; 隐式创建&#xff1a;数据库一般会在创建 PRIMARY KEY 和 UNIQUE 约束列时自动创建索引。显示创建&#xff1a;使用 CREAT INDEX 语句创建&#xff0c;建立…
阅读更多...
Java流式编程的使用

Java流式编程的使用

流式编程的使用步骤 使用流式编程的步骤就是: 设置数据源, 设置数据处理的方式,设置收集结果的方式。 使用filter方法实现过滤条件 例子为下&#xff08;查询年龄大于18的用户&#xff09;: Testpublic void streamTest1() {List<Student> students Arrays.asList(ne…
阅读更多...
【Java 基础篇】Java Function 接口详解

【Java 基础篇】Java Function 接口详解

在 Java 编程中&#xff0c;Function 接口是一个非常重要的函数式接口&#xff0c;它允许你定义一个接受一个参数并产生结果的函数。Function 接口通常在各种数据处理和转换操作中使用&#xff0c;例如集合处理、流处理以及函数式编程。 本文将详细介绍 Function 接口的使用方…
阅读更多...
基于蚁群算法的航线规划

基于蚁群算法的航线规划

一、背景 二、代码 main.m clear;clc; r21; %21*21 c21; intau20; xstart1; ystart3; %起点 xend20; yend18; %终点 gd1; xt[5,11,8,16,12,15,17,19]; %障碍物 yt[9,15,7,3,12,8,15,12];threat8; NCmax200; %迭代次数%初始化数据 Gamma_A0.9; Rho_A0.2; Alpha_A1; Beta_A3;…
阅读更多...
SpringBoot集成easypoi实现execl导出

SpringBoot集成easypoi实现execl导出

<!--easypoi依赖&#xff0c;excel导入导出--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.4.0</version></dependency>通过Exce注解设置标头名字和单…
阅读更多...
RocketMQ源码解析（下 ）

RocketMQ源码解析（下 ）

一、Producer发送消息过程 1、普通发送消息过程 一般发送消息都是new一个DefaultMQProducer&#xff0c;所以先找到DefaultMQProducer类 先进行DefaultMQProducerImpl的初始化&#xff0c;所有Producer的启动过程&#xff0c;最终都会调用到DefaultMQProducerImpl#start方法…
阅读更多...
Llama2-Chinese项目：2.3-预训练使用QA还是Text数据集？

Llama2-Chinese项目：2.3-预训练使用QA还是Text数据集？

Llama2-Chinese项目给出pretrain的data为QA数据格式&#xff0c;可能会有疑问pretrain不应该是Text数据格式吗&#xff1f;而在Chinese-LLaMA-Alpaca-2和open-llama2预训练使用的LoRA技术&#xff0c;给出pretrain的data为Text数据格式。所以推测应该pretrain时QA和Text数据格式…
阅读更多...
C++11 - 右值引用

C++11 - 右值引用

临时空间 临时空间具有常性&#xff0c;什么时候会产生临时空间呢&#xff1f; 1、函数传值返回 把aa拷贝给临时空间&#xff0c;如果是很大的对象并且进行深拷贝&#xff0c;消耗会很大 证明&#xff1a; 这是list模拟实现迭代器的和&#xff01;重载时&#xff0c;while( it…
阅读更多...
Secrets

Secrets

文章目录 主要内容一.命令行创建1.命令行创建代码如下&#xff08;示例&#xff09;: 2.解释 二.环境变量secret1.使用刚才创建的密码&#xff0c;创建Pod并进行尝试。代码如下&#xff08;示例&#xff09;: 2.解释 总结 主要内容 命令行创建环境变量secret 预备知识 Secrets…
阅读更多...
车载软件架构 —— AUTOSAR Vector SIP包（二）

车载软件架构 —— AUTOSAR Vector SIP包（二）

车载软件架构 —— AUTOSAR Vector SIP包（二） 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 没有人关注你。也无需有人关注你。你必须承认自己的价值，你不能站在他人的角度来反对自己。人生在…
阅读更多...
【小程序】通过微信提供方法实现条码或二维码的扫描

【小程序】通过微信提供方法实现条码或二维码的扫描

概述 实现扫码获取信息&#xff0c;对接相应接口 可实现详情查询&#xff0c;已经是完整代码了copy都难么 详细 一、前期准备工作 软件环境&#xff1a;微信开发者工具 官方下载地址&#xff1a;微信开发者工具下载地址与更新日志 | 微信开放文档​编辑 二、程序实现具体步…
阅读更多...
机器学习之对神经网络的基本原理的了解

机器学习之对神经网络的基本原理的了解

文章目录 神经网络与机器学习神经网络的结点 神经网络与机器学习 神经网络代替模型和用学习规则代替机器学习 神经网络代替模型&#xff1a; 神经网络是一种受到生物神经系统启发的计算模型&#xff0c;它由多个神经元层组成&#xff0c;这些神经元层之间有连接权重&#xff…
阅读更多...
测试员有必要转测试开发吗？

测试员有必要转测试开发吗？

为什么很多公司都在招测试开发&#xff1f; 质量保证和软件稳定性&#xff1a;测试开发人员在软件开发生命周期中扮演着关键的角色&#xff0c;他们负责编写和执行测试代码&#xff0c;以确保软件的质量和稳定性。他们可以帮助发现和修复潜在的问题和缺陷&#xff0c;提高软件…
阅读更多...
现在公司都在用的CI/CD框架到底是什么？

现在公司都在用的CI/CD框架到底是什么？

目录 一&#xff0c;CI/CD到底是什么&#xff1f; 二&#xff0c;为什么要用CI/CD&#xff1f; 三&#xff0c;CI/CD的优缺点&#xff1f; 四&#xff0c;CI/CD都基于什么服务搭建&#xff1f; 五&#xff0c;CI/CD是否适用于所有类型的软件开发&#xff1f; 一&#xff0…
阅读更多...
Quartus的2FSK调制解调verilog

Quartus的2FSK调制解调verilog

名称&#xff1a;Quartus的2FSK调制解调verilog 软件&#xff1a;Quartus 语言&#xff1a;Verilog 要求&#xff1a;使用verilog实现2FSK的调制和解调&#xff0c;并进行仿真 代码下载&#xff1a;Quartus的2FSK调制解调verilog_Verilog/VHDL资源下载 代码网&#xff1a;…
阅读更多...
SpringBoot之响应处理

SpringBoot之响应处理

文章目录 前言一、返回值处理器ReturnValueHandler流程关于HttpMessageConverters的初始化ReturnValueHandler与MappingJackson2HttpMessageConverter关联 二、内容协商内容协商原理底层源码 三、自定义MessageConverter总结 前言 包括返回值处理器ReturnValueHandler、内容协…
阅读更多...
OpenGLES：绘制一个颜色渐变的圆

OpenGLES：绘制一个颜色渐变的圆

一.概述 今天使用OpenGLES实现一个圆心是玫红色&#xff0c;向圆周渐变成蓝色的圆。 本篇博文的内容也是后续绘制3D图形的基础。 实现过程中&#xff0c;需要重点关注的点是&#xff1a;如何使用数学公式求得图形的顶点&#xff0c;以及加载颜色值。 废话不多说&#xff0c…
阅读更多...
FPGA的BPSK调制verilog

FPGA的BPSK调制verilog

名称&#xff1a;BPSK调制verilog 软件&#xff1a;Quartus 语言&#xff1a;Verilog 要求&#xff1a; 一、设计说明 BPSK调制广泛应用于卫星通信、移动通信等领域。本题目要求设计一个基于直接数字频率合成技术的BPSK调制器&#xff0c;实现对输入周期数字比特流的BPSK调…
阅读更多...
LVGL_基础知识

LVGL_基础知识

LVGL_基础知识 1、设置对象大小 lv_obj_t * obj lv_obj_create(lv_scr_act()); //lv_obj_set_width(obj, 300); //lv_obj_set_height(obj, 500); lv_obj_set_size(obj,200, 240);//和上面两句的效果一样2、获取对象大小 lv_obj_t * obj lv_obj_create(lv_scr_act()); //lv…
阅读更多...
GPS硬件坐标转百度地图坐标

GPS硬件坐标转百度地图坐标

在地图定位开发中&#xff0c;许多定位模块输出坐标系是国际标准 WGS-84 坐标系&#xff0c;所以开发者在国内常见地图定位时&#xff0c;会发现与实际情况有几十米的误差。这并非模块问题&#xff0c; 而是国内地图采用了非标坐标系所致。 国内常见地图如高德地图使用 GCJ-02 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023