重构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,论文提出连续进化结构搜索…

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

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

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

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

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

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

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

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

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 表示递归地删除路…

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

(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…

卸载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数据库表分区存储到指定磁盘路径

. 前提:mysql5.6.6以上的版本以上的版本才支持单表指定目录,且目录权限是MySQL:mysql。 在mysql中数据文件存放于在my.cnf中datadir指定的路径,使用的表引擎不同产生的文件格式、表文件个数也会有所差异。 mysql的表引擎有多种,…

roslyn分析字符串代码_.NET 5 源代码生成器——MediatR——CQRS

在这篇文章中,我们将探索如何使用.NET 5中的新source generator特性,使用MediatR库和CQRS模式自动为系统生成API。中介者模式中介模式是在应用程序中解耦模块的一种方式。在基于web的应用程序中,它通常用于将前端与业务逻辑的解耦。在.NET平台…

mysql2008怎么重装_SQL Server2005、2008如何彻底删除卸载并重新安装?

很多小伙伴在删除SQL Server后重新安装总是遇到诸多问题导致安装失败,这是因为你没有将SQL Server彻底删除卸载完毕。本文就如何彻底卸载进行详细介绍,本文以SQL Server2008为例,2005的方法相似。方法/步骤1.按照传统方法将SQL Server 2005、…

mysql主从复制 火墙_MySQL高级知识(十五)——主从复制

前言:本章主要讲解MySQL主从复制的操作步骤。由于环境限制,主机使用Windows环境,从机使用用Linux环境。另外MySQL的版本最好一致,笔者采用的MySQL5.7.22版本,具体安装过程请查询相关资料。1.主从复制的基本原理slave会…

正则只能出现特定字符_python正则表达式的简单使用总结

原文作者:小哲,雷锋网在编程中,经常会涉及到字符串的操作,一个常用的策略就是利用split函数,然后对于特定的字符串进行匹配,但是这种方法格式复杂,可复用性较差。正则表达式是处理字符串匹配一个…

MySQL配置日志服务器_mysql配置数据库日志

mysql配置数据库日志云服务器(Elastic Compute Service,简称ECS)是阿里云提供的性能卓越、稳定可靠、弹性扩展的IaaS(Infrastructure as a Service)级别云计算服务。云服务器ECS免去了您采购IT硬件的前期准备,让您像使用水、电、天然气等公共资源一样便捷…

mysql dos 下切换连接_如何在dos下连接进入mysql对数据库进行操作

一、:windowsR 进入命令命令提示符输入 net start mysql若出现系统错误,要将命令提示符以管理员身份运行若出现不是内部指令,进入下面环境变量设置界面,配置path路径1.进入系统查看界面,点击高级系统设置2&#xff0c…

java获取文件大小_Java中获取文件大小的详解及实例代码

Java 获取文件大小今天写代码时需要实现获取文件大小的功能,目前有两种实现方法,一种是使用File的length()方法;另外一种是使用FileInputStream的available()方法,当InputStream未进行read操作时,available()的大小应该…