重构html布局,HTML重构:战术篇

上文书我们说到《HTML重构:战略篇》,书接前言下面是战术篇,我们通过路线图来先有一个大体印象:

837805fc40b63c8f31bdc5fb7a3641ce.png

1、HTML规范化(Well-Formedness):语法正确

2、HTML Validity :语义正确

3、不仅仅是语义正确:HTML元素的用法回归正途

4、正确还不够:关注你的内容

5、哪有个完啊:关注网站可用性(Accessibility)

HTML规范化(Well-Formedness):语法正确

规范化(Well-Formedness)是XML中的概念,它指文档严格遵守约束。规范化的HTML文档结构是一个独一无二的树。HTML规范化是发挥XML工具强大功能的先决条件,可靠地DOM操作也为跨浏览器脚本的提供了一个很好的基础。不规范的页面在浏览器中可能表现千差万别,因为浏览器对错误的理解和处理是不一样的,而规范化的HTML让浏览器行为可预测。好处当然还有很多,比如SEO,快速加载… ...

下面会有一些规范化的实践指南,作者给出了做这些重构的动机和利弊,大家可以根据自己的情况来选择。下面简单列一下:

文档转为小写Change Name to Lowercase

属性赋值添加引号Quote Attribute Value

省略值不全Fill In Omitted Attribute Value

例如:

空标签添加空属性Replace Empty Tag with Empty-Element Tag

例如:


变成

添加结束标签Add End-tag

删除重叠Remove Overlap

例如:very important!

文档编码转成UTF-8Convert Text to UTF-8

属性值内字符转义:" to "  ' to '

添加DOCTYPE声明Introduce an XHTML DOCTYPE Declaration

TD/xhtml1-transitional.dtd">

实体添加结束符Terminate Each Entity Reference&amp之类的实体要不全; 即:&

使用标准实体名Replace Imaginary Entity References添加根元素Introduce a Root Element添加XHTML的名称空间Introduce the XHTML Namespace

HTML Validity :语义正确

背景介绍:HTML验证是通过与标准HTML规则进行比较的方式,分析HTML文档、标记出错误和非标准代码的处理过程。Web页面使用HTML进行渲染,而HTML本身采用了HTML规范作为其规则和标准。通过验证HTML代码穿越多重浏览器标准!

通过验证的文档,能够帮助浏览器反映创作者的意图。通过验证的站点会获得下列优势:页面行为可预测,浏览器兼容问题,未来的浏览器上也可以运行,更容易维护,等等…

W3C在线验证地址:http://jigsaw.w3.org/css-validator/

通过验证并不是强制要求的,一个规范化但是没有通过验证的文档照样可以使用XML工具。如果你有特殊的应用比如MathXML,也可以忽略掉通过HTML验证。下面简单列出一些要通过验证要做的工作:

清除非法标签Remove All Nonexistent Tags

添加图像说明Add an alt Attribute

嵌入标签换成对象标签Replace embed with object

添加严格的文档类型声明Introduce a Strict DOCTYPE Declaration

Replace center with CSS

Replace font with CSS

Replace i with em or CSS

Replace b with strong or CSS

Replace the color Attribute with CSS

Convert img Attributes to CSS

Replace applet with object

Replace Presentational Elements with CSS

Nest Inline Elements inside Block Elements

不仅仅是语义正确:HTML元素的用法回归正途

一个Web开发者可能会有这样的忏悔:我错了,我一直都在用表格做布局,我的页面和样式杂糅在一起… …我们可能把原因归结为历史,以前的开发就没有这种理念,历史是这样的么?传统的HTML是基于SGML标准,这个标准诞生于Web之前,我们回顾一下:

SGML是1986年出版发布的一个信息管理方面的国际标准(ISO 8879)。该标准定义独立于平台和应用的文本文档的格式、索引和链接信息,为用户提供一种类似于语法的机制,用来定义文档的结构和指示文档结构的标签。其中Markup的含义是指插入到文档中的标记。标记分为两种:一种称为procedard markup,用来描述文档显示的样式;另一种称为descriptive markup,用来描述文档中的文字的用途。制定SGML的基本思想是把文档的内容与样式分开。

回顾历史我们应该像佟掌柜一样感慨了:“我错了,我真的错了”

如何将文档的内容和样式分开?作者同样给出了一些建议:

Replace Table Layouts

Replace Frames with CSS Positions

Move Content to the Front

Mark Up Lists as Lists

Replace blockquote/ul Indentation with CSS

Replace Spacer GIFs

Add an ID Attribute

Add Width and Height to an Image

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

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

相关文章

enas 参数共享_CVPR2020 | CARS: 华为提出基于进化算法和权值共享的神经网络结构搜索,CIFAR10上仅需单卡半天...

点击上方“CVer”,选择加"星标"或“置顶”重磅干货,第一时间送达本文转载自:晓飞的算法工程笔记为了优化进化算法在神经网络结构搜索时候选网络训练过长的问题,参考ENAS和NSGA-III,论文提出连续进化结构搜索…

gis发布及应用服务器,超图云GIS应用服务器平台

商品说明版本:V9D交付方式:License适用于:Windows/Linux/Unix/Android/iOS/其他上架日期:2020-10-27交付SLA:180 自然日规格1:iServer高级版基于跨平台GIS内核的云GIS应用服务器,含空间数据库引擎SDX;提供地图服务、空间数据访问与管理服务、…

gradle引入子module配置_原创 | 看完此文,你对Gradle的理解又升级了

前言这一篇来介绍一些Gradle进阶的内容,当然进阶内容非常多,这篇文章就总结一些相对重要的、常用的一些知识点,比如Gradle的签名配置和依赖管理。1.Android签名文件配置在一般公司中,当团队比较小的时候,App的签名信息…

ajax发送私信,$.ajax()方法详解

jquery中的ajax方法参数总是记不住,这里记录一下。1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址。2.type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以…

怎樣制作线段动画_OPPO又开发布会!这两个PPT动画太炫了,荣获网友清一色好评...

前两天,OPPO在线上发布了find X2系列,观看发布会直播的时候,真的有被发布会的开场惊艳到,视觉体验太震撼了。这是我随便录的一个动画,满满的视觉冲击力:在看完发布会之后,我对整场发布会印象最深…

文件服务器的文件设置只读,服务器设置文件为只读

服务器设置文件为只读 内容精选换一换有,该NTP服务器仅限于在华为云控制台上购买的弹性云服务器安装使用。如需在购买的弹性云服务器上安装NTP服务器,您可以选择使用华为云控制台自己提供的NTP服务器,也可以选择其他NTP服务器。安装NTP服务器…

matlab三位画图_matlab 3D绘图详解(示例代码)

1、三维曲线: plot3() →plot3(X1,Y1,Z1,...) →plot3(X1,Y1,Z1,LineSpec,...) →plot3(...,‘PropertyName‘,PropertyValue,...) →h = plot3(...) plot3( )的用法与plot( )类似,只是多了一个 Z 数组。举例: >> t=[0:0.2:10*pi]; >> x=2*t; >> y=sin(t)…

手机修改ntp服务器地址,修改手机ntp服务器ip地址

修改手机ntp服务器ip地址 内容精选换一换本文介绍使用云手机服务时需要了解的基本概念。云手机是一台包含原生安卓操作系统,具有虚拟手机功能的云服务器,简单来说,云手机云服务器Android OS。您可以远程实时控制云手机,实现安卓AP…

图像控制点 形变_基于控制点的图象变形方法及其应用

基于控制点的图象变形方法及其应用杨金钟;刘政凯;俞能海;吴皓【期刊名称】《中国图象图形学报》【年(卷),期】2001(006)011【摘要】根据人脸,特别是根据人脸在人眼变形中对形状和细节的要求,提出了用光滑不等距插值和空间可变线性插值方法来实现基于控制点网格的数字图象变形的…

window10维护不了华为服务器,win10怎么打开云服务器异常

win10怎么打开云服务器异常 内容精选换一换本节介绍如何查看云服务器的mac地址。云服务器的mac地址不支持修改。登录Linux云服务器。执行以下命令,查看云服务器的mac地址。ifconfig查看MAC地址ifconfig登录Linux云服务器。执行以下命令,查看云服务器的ma…

命令行cd到_前端(只)需要掌握这些命令行(就还行了)

练习windows 用户在任意目录使用 shift 右键 打开 cmd 或者 powershell;或通过其他方式打开命令行cd ~/Desktop 回车恭喜你在命令行里进入了桌面输入命令 mkdir demo1cd demo1 进入目录cd .. 回退到桌面rm -rf demo1 删除目录,其中 -r 表示递归地删除路…

怎么在win7链接无线网络连接服务器,Win7系统网络连接一直显示正在获取网络地址但是连不上网解决方法...

电脑上不了网的原因很多,比如是网络设置问题、路由器问题、运营商问题。最近一个Win7用户,网络连接一直显示,正在获取网络地址但是连不上网,但是其它电脑可以上网,那么说明是电脑设置问题,那么该如何解决呢…

工况密度和标况密度怎么换算_什么是载流量?导线的载流量与电流密度怎么计算?图文详解!...

(1)导线规格在国标《GB/T3956-2008 电缆的导体》中,我们能看到国家对电缆导线的截面积进行标准化。按照国标规定,标称的电缆导线规格如下(单位mm2):0.5、0.75、1、1.5、2.5、4、6、10、16、25、35、50、70、95、120、150、185、240、300、400…

assume用法及意思_词汇精选:assume的用法和辨析

一、详细释义:v.假定;臆断 [T]例句:You assume his innocence before hearing the evidence against him.在未听到对他不利的证言之前,你假定他是无罪的。例句:I assume that it is so.我假定它是这样。例句&#xff1…

把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标

前言iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢?将图标加入购物车搜索关键词可以是中文也可以是英文下载素材点击网站右上角的购物车…

卸载cuda_NVIDIA驱动和CUDA安装

切换到集成显卡(X.Org X server)2. 卸载旧驱动sudo apt-get --purge remove nvidia* sudo apt autoremove # To remove CUDA Toolkit: $ sudo apt-get --purge remove "*cublas*" "cuda*" # To remove NVIDIA Drivers: $ sudo apt-g…

html加粗字体打印失效_论文格式要求及字体大小

点击上方“蓝字”带你去看小星星论文既是探讨问题进行学术研究的一种手段,又是描述学术研究成果进行学术交流的一种工具。下面小编为大家整理了论文格式要求及字体大小,欢迎阅读。1 02封面题目:小二号黑体加粗居中。各项内容:四号…

deepfakes怎么用_[mcj]deepfakesApp使用说明(1)

在众多AI换脸软件中Fakeapp是传播最广,操作最简单的一款,当然他同样也是源于Deepfakes。 这款软件在设计上的确是花了一些心事,只需稍加点拨,哪怕是再小白的人也能学会。下面我就做一个入门教程吧。跟着这个教程来,你肯…

alert 标题_[SwiftUI 知识碎片] Button、Image 和 Alert

译自 Buttons and images更多内容,欢迎关注公众号:Swift花园喜欢文章?不如来个 ➕三连?关注专栏,关注我 Button 和 Image在 SwiftUI 中,按钮可以由两种方式创建,取决于它们的外观。最简单的方式…

两个mysql表对比_mysql实用技巧之比较两个表是否有不同数据的方法分析

本文实例讲述了mysql比较两个表是否有不同数据的方法。分享给大家供大家参考,具体如下:在数据迁移中,我们经常需要比较两个表,以便在一个表中标识另一个表中没有相应记录的记录。例如,我们有一个新的数据库&#xff0c…