使用CSS时的DOCTYPE选择

1、掌握CSS选择器:从基础到高级 本文深入探讨了CSS选择器的工作原理,包括DOM结构与选择器的关系、DOCTYPE的重要性以及如何选择合适的选择器。同时,详细介绍了类选择器、ID选择器、伪类、伪元素和组合选择器的使用方法,并通过实际案例演示了如何应用这些选择器来美化网页。最后,文章还讲解了解决样式冲突的方法,如特异性计算和!important声明。 阅读详情


语法:

HTML  顶级元素  可用性 "注册//组织//类型 标签//定义  语言""URL"

可能值:

- 顶级元素:指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

- 可用性:指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源,如本地文件或 URL

- 注册:指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。 

- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

组织:指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称,即 OwnderID。 IETF IETF。 W3C W3C。

- 类型:指定公开文本类,即所引用的对象类型。 DTD 默认。DTD。 

- 标签:指定公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML 默认。HTML。 

- 定义:指定文档类型定义。
  Frameset 框架集文档。
  Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素,因为样式表已经很完善了。
  Transitional 包含除 frameSet 元素的全部内容。

XHTML 1.0中有3种DTD 声明可以选择:过渡的(Transitional)、严格的(Strict)和框架的(Frameset)

- 语言:指定公开文本语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639  语言代码(大写两个字母)。 EN 默认。英语。 

- URL:指定所引用对象的位置

为了获得正确的DOCTYPE声明,关键就是让dtd与文档所遵循的标准对应。例如,假定文档遵循的是xhtml 1.0 strict标准,文档的doctype声明就应该引用相应的dtd。另一方面,如果doctype声明指定的是xhtml dtd,但文档包含的是旧式风格的html标记,就是不恰当的;类似地,如果doctype声明指定的是html dtd,但文档包含的是xhtml 1.0 strict标记,同样是不恰当的。


1.过渡的

一种要求不很严格的DTD,允许在页面中使用HTML4.01的标识(符合xhtml语法标准)。过渡的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



2.严格的

一种要求严格的DTD,不允许使用任何表现层的标识和属性,例如<br/>等。严格的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


3.框架的

一种专门针对框架页面所使用的DTD,当页面中含有框架元素时,就要采用这种DTD。框架的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。




用AI生成React/Vue页面?实测Locofy等5款工具,教你选最适合的 本文深度评测了2024年五大AI生成前端页面工具,包括Locofy、Builder.io等,从代码质量、可视化编辑器成本到企业级落地方案进行全面分析。通过实测数据和实战案例,揭示如何利用AI生成技术高效创建React/Vue页面,提升开发效率并优化性能。 阅读详情

相关推荐

基于PYNQ-Z2复现yolov2

基于PYNQ-Z2复现Yolo_v2 参考资料:源项目工程 开发板配置 0 使用说明 0.1 简介 本文档主要分为三个部分: [1] 搭建HLS工程生成Yolo_v2的IP。 [2] 在Vivado中使用生成好的IP进行block design,导出bit文件和tcl文件。 [3] 将相关文件导入至PYNQ-Z2板中,在Jupyter Notebook上进行编程实现。 0.2 所需硬件  PYNQ-Z2开发板、USB数据线、网线  SD卡、读卡器 0.3 所需软件  Vivado 2018.3  V

谦豫 1万+

HTML 和 CSS 基础知识

html 和 css 基础知识

m0_69850580的博客 771

系统安装、qt配置、安装pcie驱动

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 安装Linux系统指定:ununtu20.04并配置相关软件环境 前言 提示:这里可以添加本文要记录的大概内容: ununtu20.04、Qt 5.9.0、pcie驱动 提示:以下是本篇文章正文内容,下面案例可供参考 一、安装系统 制作系统盘(win10),在开机时按相应键进入BIOS,(华硕需要先改配置启动->CSM->开启->第一个选项选第一个或第二个),等待即可 进入后按照https://www.sysgeek.

weixin_44832804的博客 2204

doctype html css,为什么使用<!DOCTYPE html>就可以,正确使用DOCTYPE

在XHTML Strict DTD声明的html中出现th标签属性width时,则会出现警告信息(如下图),改成transitional dta就不会出现警告Doctype起啥作用?上面也提到,Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档,上文说到的DOCTYPE组成中的第5部分所引入的dtd文件则包含了标记、attributes 、properties、约束规则...

weixin_32136817的博客 272

强化学习入门8—深入理解DDPG

本文是强化学习入门系列的第八篇,前面我们讲Actor-Critic时提到了DDPG。DDPG是google DeepMind团队提出的一种用于输出确定性动作的算法,它解决了Actor-Critic 神经网络每次参数更新前后都存在相关性,导致神经网络只能片面的看待问题这一缺点。同时也解决了DQN不能用于连续性动作的缺点。

小菜羊的博客 4314

基于百度地图API在AI Studio上的卫星地图块图像处理与分类

本项目基于百度地图API获取了不同的瓦片地图并进行合并等处理,可用于遥感和抽象地图的地图块的图像分类、分割、检测等数据的制作。瓦片地图金字塔模型是一种多分辨率层次模型,从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N,把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层,即第0层,并对其进行分块,从地图图片的左上角开始,从左至右、从上到下进行切割,分割成相同大小(比如256x256像素)的正方形地图瓦片,形成第0层瓦片矩阵;

斌擎科技 745

第1天:选择什么样的DOCTYPE

前言大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧第一天开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码,可以看到第一行就是: 打开一些符合标准的站点,例如著名web设计软件

_FINEFLY_ 1019

[知识图谱构建] 一.Neo4j图数据库安装初识及药材供应图谱实例

2012年5月,谷歌公司的知识图谱(Knowledge Graph)产品被正式提出,其旨在将人、地点、物等信息作为实体,将实体间的联系作为关系,并将实体和关系以图的形式进行存储。作为语义网的最新产物,知识图谱这种新型的搜索引擎改变了传统的文本搜索结果,而随后国内公司也开发出了相应产品,例如百度公司的“知心”和搜狗公司的“知立方”等。知识图谱本质上属于一种语义网。知识图谱中的每一条数据或事实一般会采用 &amp;lt;实体,属性,属性值&amp;gt; &amp;lt;实体, 关系,

杨秀璋的专栏 1万+

css html doctype

为了与可能数量众多的网页维持兼容,现代的网页浏览器一般具有多种渲染模式:    在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染,    而在“quirks 模式”中则尝试模拟更旧的浏览器的行为。    一些浏览器(例如,那些基于 Mozilla 的 Gecko 渲染引擎的,或者 Internet Explorer 8 在 strict mode 下)...

facetoqiang的专栏 160

跳蛛优化算法(JSOA)详解:从生物启发到算法实现

摘要: 跳蛛优化算法(JSOA)是一种受跳蛛狩猎行为启发的元启发式优化算法,通过模拟跳蛛的搜索猎物、迫害行为、跳跃捕食和信息素通信四种策略实现高效寻优。算法将跳蛛个体位置映射为候选解,利用物理学模型(匀加速运动、抛射轨迹)和随机策略(柯西分布、信息素机制)平衡全局探索与局部开发。JSOA具有参数少、收敛快的特点,适用于函数优化、路径规划等领域,其生物行为与数学抽象的对应关系(如表1所示)是其核心创新点。

qq_42212808的博客 124

2026年华为od机试真题题库

OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)OD统一考试(E卷)

面试高手的博客 19万+

doctype html css,DOCTYPE 影响 CSS 处理

display:inline;}注意:在没有指定 float 的时候使用 display:inline; 在FF中是无效的。IE和FIREFOX在解析CSS方面的区别1. 对高度的解析IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度Firefox:没有定义高度时,如果内容中包括了图片内容,Firefox的高度解析是根据印刷标准,这样就会造成和实...

weixin_36234452的博客 239

微信小程序 - 引入并使用 Fly.js 请求库(超级详细的教程及运行示例)提供 Fly.js 源码源文件下载,贴心的配置示例及注释,优雅快速的发起 http 网络请求

fly.js请求库官方教程文档,微信小程序封装fly.js请求,在小程序/mpvue中使用flyio发起网络请求的方法,微信小程序中如何使用flyio封装网络请求,微信小程序中如何使用flyio封装网络请求,最好的教程,fly最好的文档教程,微信小程序使用fly接口请求框架,引入fly.js报错,微信小程序中如何使用flyio封装网络请求,微信小程序引入Fly.js请求库,如何在fly中配置请求/响应拦截器,如何在微信小程序中优雅地发送异步请求,请求/响应拦截器,微信小程序-引入并使用F

🏆 前端领域优质创作者 5608

CSS设计网页时的一些常用规范

CSS命名规范 一.文件命名规范   全局样式:global.css;   框架布局:layout.css;   字体样式:font.css;   链接样式:link.css;   打印样式:print.css; 二.常用类/ID命名规范   页 眉:header   内 容:content   容 器:container   页 脚:footer   版 权:copyright    导

tenchiwuyo的学习专栏 362

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

html 不应用css,使用html5选择器时不应用CSS样式。在渲染CSS方面浏览器有什么改变?...

最近IE8遇到了令人沮丧的情况。这是最奇怪的事情。我以前的工作代码停止工作。当我使用HTML5标记(例如header,footer,article和nav)时,似乎就发生了这种情况,仅列举了一些与我的外部CSS样式表中的对应CSS选择器一起使用的HTML5标记。问题是:突然间CSS样式不再适用于我的标记。这就像我没有任何样式表。使用html5选择器时不应用CSS样式。在渲染CSS方面浏览器有什么改...

weixin_36242131的博客 295

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

jspx中輸出文檔類型(DOCTYPE)

在網上找了半天沒找到,甚是郁悶。還是墨墨厲害,貼在此處。以備后用。瀏覽器有不同的模式,標準模式、怪異模式(寬松模式)。不同的模式下對css的支持也不一樣,如在標準模式下,瀏覽器根據規范表現頁面;在怪異模式下則以比較寬松的向后兼容的方式展現頁面。即怪異模式經常模擬老式瀏覽器(MS IE4,NetScape Navigator4)的行為以防止老站點無法工作。多數情況下要在每個頁面包含完整的DOCTYP...

weixin_33982670的博客 57

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

【CSS】:基础使用与选择器

CSS 是前端开发中的关键技术,它通过定义样式和布局,让网页从单调的内容堆叠变为精美的用户界面。无论是颜色、字体,还是布局和动画,CSS 提供了无穷的可能性,让开发者可以充分发挥创造力。

Yui_的博客 1523

doctype html css,选择合适的Doctype 解决CSS失效

在HTML中假设不运用或增多DOCTYPE标签,整个HTMLCSS将会失效。假定你的CSS都是正确的,链接也没有蜕化的话,为什么正好CSS样式不生效呢?你大约正在为这个事而焦头烂额,呵呵,不要消极,我曩昔也被这个事弄得头大过。这时候你需要检查你的网页最头部能否有以下一句话了?有的朋侪或许会说,以前我新建网页后都把它去掉了,没用。此刻我要演讲你,这类做法是过错的!那末,这句话终于是什么含义,又有哪...

weixin_30577815的博客 355

doctype html的作用是什么,DOCTYPE的作用

DOCTYPE html当查看网页源代码时,经常都能见到在顶部有一条很长的代码,这条代码就是用于对网页的声明,DOCTYPE的声明是网页形成的一个关键部分,现在就来详细的了解一下它的用途及声明的类型。相对于现在的HTML5,DOCTYPE声明中的写法已变得简明,DOCTYPEhtml>是现在HTML5的标准声明,无论是用记事本、或是用网页制作工具创建一个HTML页面时,只需要在代码的开头写上...

weixin_35035699的博客 5932

myeclipse新建JSP中DOCTYPE问题

和上次一样,将写好的html复制到jsp文件中,在ie6下出现margin居中无效的情况,纯html中没有这个问题。Jsp是使用myeclipse新建的(Advanced Templates),其生成的DOCTYPE如下: 而使用editplus创建的html文件中的DOCTYPE如下: 正是由于这个DOCTYPE的不同导致在ie6下css的margin居中失效。 当然,有时候我们需

心静欣 3276

DOCTYPE小结,及DOCTYPE位置影响CSS菜单显示的问题

先复制几份比较好的文章:     文摘一: XHTML代码头部Doctype文档类型声明必不可少! CND8学院 HTML教程 发布日期:2008年11月04日     HTML遵循一定的规则。这些规则包含在一个文档类型定义(Document Type Definition)文件中,或者如大家所知的DTD。DTD是一个XML文档,解释了

fenghome的专栏 2431

DOCTYPE声明对CSS显示效果也有影响!

看下面两段代码html>head>style type="text/css">span, div {    width: 100px;    border: 3px outset buttonface;}style>head>body>span>div>Hellodiv>span>span>div>Worlddiv>span>body>html> DOCTYPE html 

CaiKanXP的专栏 3009

合适的Doctype可以解决CSS失效的问题

如果你的CSS都是正确的,链接也没有出错的话,为什么偏偏CSS样式不生效呢?你也许正在为这个事而焦头烂额,呵呵,不要气馁,我以前也被这个事弄得头大过。这时你需要检查你的网页最头部是否有如下一句话了? 有的朋友也许会说,以前我新建网页后都把它去掉了,没用。现在我要告诉你,这种做法是错误的!那么,这句话究竟是什么意思,又有哪些作用呢?

愚睿^_^的专栏 835

如何使用CSS选择所有子元素?

如何使用CSS递归选择所有子元素?下面本篇文章就来给大家介绍一下使用CSS递归选择所有子元素的方法,希望对大家有所帮助。 原文地址:如何使用CSS选择所有子元素? 当元素是某个元素的子元素时,可以使用子选择器匹配,该选择器选择特定父级的所有子元素。子选择器由两个或多个由“>”分隔的选择器组成;它也称为element > element选择器。 注:子选择器只能选择自己的子类,第二级元...

weixin_45587319的博客 7174

关于选用DOCTYPE及DOCTYPE对页面css及js的影响

 关于选用DOCTYPE及DOCTYPE对页面css及js的影响王伟东什么是DOCTYPE    DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页

xymyeah 693

【前端CSS】CSS的3种基本选择器和5种高级选择器使用方式

CSS选择器由HTML元素的id、class属性或元素名本身以及一些特殊符号构成;用于指定要为哪个HTML元素定义样式;

借他一双眼,愿这盛世如先生所愿 1641
上一篇: JSP指令表
下一篇: URL,URN,URI
saygoodbyetoyou
博客等级 码龄17年 78粉丝 27原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值