对于Web标准以及W3C的理解、对viewport的理解、xhtml和html有什么区别?

1、对于Web标准以及W3C的理解

Web标准

Web标准简单来说可以分为结构、表现、行为。

其中结构是由HTML各种标签组成,简单来说就是body里面写入标签是为了页面的结构。

表现指的是CSS层叠样式表,通过CSS可以让我们的页面结构标签更具美感。

行为指的是页面和用户具有一定的交互,这部分主要由JS组成。标签闭合 、标签小写 、不乱嵌套 、使用外链 css 和 js 、结构行为表现的分离。

W3C

W3C,全称:world wide web consortium是一个制定各种标准的非盈利性组织,也叫万维网联盟,标准包括HTML、CSS、ECMAScript等等,web标准的制定有很多好处,比如说:

  • 可以统一开发流程,统一使用标准化开发工具(VSCode、WebStorm、Sublime),方便多人协作
  • 学习成本降低,只需要学习标准就行,否则就要学习各个浏览器厂商标准
  • 跨平台,方便迁移都不同设备
  • 降低代码维护成本

2、对viewport的理解

viewport的概念

通俗的讲,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。

在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
在这里插入图片描述

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu // width 设置viewport宽度,为一个正整数,或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport高度,一 般设置了宽度,会自动解析出高度,可以不用设置               
// initial-scale  默认缩放比例 (初始缩放比例), 为一个数字,可以带小数
// minimum-scale  允许用户最小缩放比例,为一个数字,可以带小数
// maximum-scale  允许用户最大缩放比例,为一个数字,可以带小数
// user-scalable  是否允许手动缩放

怎样处理 移动端1px 被 渲染成 2px 问题

局部处理

mate 标签中的 viewport 属性 , initial-scale 设置为 1
rem 按照设计稿标准走,外加利用 transfrome 的 scale(0.5) 缩小一倍即可;

全局处理

mate 标签中的 viewport 属性 , initial-scale 设置为 0.5
rem 按照设计稿标准走即可

3、xhtml和html有什么区别?

XHTML(可扩展超文本标记语言)是HTML(超文本标记语言)的一种变体,它比HTML更严格,更注重文档结构的准确性和规范性。

以下是XHTML和HTML之间的一些主要区别:

  1. 语法: XHTML比HTML更严格,必须正确地编写标记和使用小写标签,属性和属性值必须加引号。

  2. 文档结构: XHTML要求文档要求结构清晰,文档必须包含根元素,必须具有正确的文档类型定义。

  3. 元素和属性: XHTML比HTML更严格,某些元素和属性在HTML中是允许省略的,但在XHTML中是禁止的。例如,XHTML中必须包含alt属性在img元素中,元素必须被正确地嵌套,闭合, 区分大小写。

  4. 功能:XHTML 可兼容各大浏览器 、手机以及 PDA , 并且浏览器也能快速正确地编译网 ⻚

总之,XHTML是HTML的一种严格版本,它强制要求更准确的标记结构和语法,同时为网络内容提供可访问性、可维护性和可扩展性。

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

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

相关文章

一文看懂自动驾驶传感器区别(摄像头/超声波/毫米波/激光雷达)

传感器摄像头超声波雷达毫米波雷达激光雷达介质可见光和红外光超声波毫米波光波安装位置四周尾部前后保险杠、侧面骨架车顶探测距离&#xff08;取决于镜头和传感器&#xff09;近&#xff08;0.1~3米&#xff09;较远 &#xff08;0~200米&#xff09;远 &#xff08;0~500米&…

关于 ls -s 输出文件大小的单位问题的讨论

自己看书正好看到这里&#xff0c;正纳闷呢&#xff0c;上网查了下&#xff0c;发现不是我自己在为这个问题感到困惑。 有个大哥提出一个问题&#xff1a; 问题标题&#xff1a; ls -s的单位到底是什么&#xff1f; man ls -s, --size print the alloca…

[读论文][跑代码]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

github: GitHub - Nota-NetsPresso/BK-SDM: A Compressed Stable Diffusion for Efficient Text-to-Image Generation [ICCV23 Demo] [ICML23 Workshop] ICML 2023 Workshop on ES-FoMo 简化方式 蒸馏方式&#xff08;训练Task蒸馏outKD-FeatKD&#xff09; 训练数据集 评测指标…

美丽的时钟

案例绘制一个时钟 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>美丽的时钟</title><script language"javascript">window.onloadfunction(){var clockdocument.getElementById("clock"…

【基于Python的快递管理系统的设计与实现】

基于Python的快递管理系统的设计与实现.docx 基于Python的快递管理系统的设计与实现 "Design and Implementation of a Python-based Express Delivery Management System" 目录 目录 2 摘要 3 关键词 4 第一章 绪论 4 1.1 研究背景 4 1.2 研究目的 5 1.3 研究意义 7…

Unity 使用Horizontal Layout Group和Toggle制作多个水平开关按钮实现自动排列和单个点击放大后的自动排列。

Unity的布局组件Horizontal Layout Group是很好用的&#xff0c;当然也包括其它布局组件也一样好用。 比如要实现多按钮开关自动水平排列&#xff0c;那么就可以使用它了。 首先我们为按钮创建个父物体&#xff08;我这里使用了Scroll View中的Content作为父物体&#xff09;…

weblogic任意文件上传漏洞(CVE-2018-2894)

任务一&#xff1a; 复现环境中的漏洞 任务二&#xff1a; 上传webshell或者反弹shell&#xff0c;并执行whoami。 任务一&#xff1a; 1.环境搭建&#xff0c;发现需要密码&#xff0c;所以我们去日志里面查看管理员密码。 2.了解一下这个平台&#xff0c;然后进行一些基本配…

基于Java SSM简单的学籍管理系统

1. 实验选题 《学籍管理系统》。 2. 实验要求和目的 要求:通过分析《学籍管理系统》中的数据模式&#xff0c;建立相应的数据库&#xff0c;并在此数据库中进行建数据表&#xff0c;插入、更新、查询和删除记录操作&#xff0c;最后用可视化编程工具和关系数据库开发一个简单…

基于Python Flask 的全流程全栈项目自己的实战心得

我基于Python Flask框架开发全流程全栈项目的实战经验和心得。我将介绍整个项目的架构设计、前后端交互、数据库管理以及部署等方面&#xff0c;并提供具体的代码示例。通过这个实例项目&#xff0c;你将学习到如何使用Flask构建一个完整的Web应用&#xff0c;并了解一些常见的…

[Ubuntu 18.04] RK3399搭建SSH服务实现远程访问

SSH(Secure Shell)是一种网络协议和软件,用于安全地远程登录到计算机并进行网络服务的加密通信。它提供了加密的认证和安全的数据传输,使得在不安全的网络中进行远程管理和访问变得更加安全。 以下是 SSH 服务的一些关键特点和用途: 安全认证:SSH 使用公钥/私钥加密技术…

实现优雅的自增枚举类:Python中的枚举与自增技巧

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 枚举类型在编程中扮演着重要的角色&#xff0c;它们为变量赋予了更加清晰的含义。然而&#xff0c;在Python中&#xff0c;实现自增的枚举类并非直接而简单的任务。本文将深入讨论如何通过不同的方式优雅地实现自…

Zigbee—基于Z-STACK组网

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;チノカテ—ヨルシカ 0:46━━━━━━️&#x1f49f;──────── 4:08 &#x1f504; ◀️ ⏸ ▶️ ☰ &a…

阿里云配置 HTTPS

一、购买证书 依次点击&#xff1a;数字证书管理服务 -> SSL 证书 -> 免费证书 -> 立即购买 阿里云有免费的 20 个域名的证书&#xff0c;因此就选择这个。 二、创建证书 购买完证书&#xff0c;就可以创建证书&#xff0c;然后填入域名&#xff0c;等待签发。 三…

从兔子说起:深入理解RabbitMQ基础概念【RabbitMQ 一】

&#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 从兔子说起&#xff1a;深入理解RabbitMQ基础概念 前言第一&#xff1a;消息代理的角色和重要性第二&#xff1a;队列的概念和用途第三&#xff1a;交换机的类型及其作用第四…

4.4 基于switch语句的译码器(C语言实现)

【题目描述】给定一个前缀码表如下&#xff1a;a—1&#xff0c;b—01&#xff0c;c—001。又有一个0/1字符串为“001011101001011001”&#xff0c;编写一个C程序&#xff0c;按照给定的前缀码表为该字符串译码。 【题目分析】前缀码是一种无二义性的编码&#xff0c;因此可以…

每天五分钟计算机视觉:经典的卷积神经网络之VGG-16模型

VGG-16 Vgg16是牛津大学VGG组提出来的,相比于AlexNet来说,AlexNet的一个改进是采用连续的几个4*3的卷积核来代替AlexNet中的较大的卷积核(11*11,5*5)。前面我们也说过了使用小卷积核是优于大的卷积核的,因为多层非线性层可以增加网络深度来保证学习到更加复杂的模式,而且代…

TTM Squeeze挤牌指标选股公式,通过波动率和动量判断能量释放

TTM Squeeze&#xff08;挤牌&#xff09;是由约翰卡特(John Carter)发明的波动率和动量指标&#xff0c;在其著作《驾驭交易》中进行了介绍。当价格在窄幅区间震荡盘整为下一次大幅上涨或下跌积蓄能量时&#xff0c;就可以用挤牌指标来识别。Squeeze的意思是“挤压”&#xff…

速通MySql

一、简介 1、什么是数据库 数据仓库&#xff0c;用来存储数据。访问必须用SQL语句来访问 2、数据库的类型 1、关系型数据库&#xff1a;Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL等 可以用SQL语句方便的在一个表以及多个表之间做非常复杂的数据查询&#…

模糊C均值(Fuzzy C-means,FCM)聚类的python程序代码的逐行解释,看完你也会写!!

文章目录 前言一、本文的原始代码二、代码的逐行详细解释总结 前言 接上一篇博客&#xff0c;详细解释FCM聚类的程序代码&#xff01;&#xff01; 一、本文的原始代码 import numpy as np import matplotlib.pyplot as plt from sklearn import datasets import skfuzzy as…

Open3D 最小二乘拟合二维直线(直接求解法)

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。爬虫网站自重。 一、算法原理 平面直线的表达式为: y = k x + b