重蔚的php学习第二天之HTML篇

.昨日回顾

服务器软件：Apache、IIS

浏览器是一个翻译官，是一个解释器。浏览器可以翻译有HTML、CSS、JavaScript。

服务器端脚本程序：PHP、 .net、JSP、c#等

.php文件要由PHP脚本引擎来进行处理。

网站前台(客户端) 网站后台(服务器端) 数据库

HTML(结构) PHP MySQL

CSS JSP Oracle

JavaScript .net SqlServer

HTML结构：主要来说明，哪个地方是标题，哪个地方是段落，哪个地方是表格，哪个地方是表单。

CSS表现(格式)：主要功能是，给相对应的HTML标记定义各种各样的格式。

JavaScript行为：主要用于与计算机网页进行交互(交流)。

块元素和行内元素

块元素：宽度单独占一个通栏宽，块元素的前台的其它元素，都要另起一行来排。

比如：<p> <pre> <hr> <h1>……<h6> <ul> <ol> <li>

DIV和SPAN就是一个容器，容器中可以存放任何可以存放在<body>中的内容或标记。

行内元素：行内元素没有宽度和高度的概念，也就是说通过CSS无法给行内元素增加宽和高。多个行内元素会放在同一行，不会另起一行来排版。

2.<marquee></marquee>滚动字幕标记：块元素

Direction：滚动的方向，取值：left、right、up、down

Behavior：滚动的方式，取值：scroll(滚动)、 alternate(弹动)、 slide(滚动一次)

Width：滚动的区域宽度，取值：px或%

Height；滚动的区域高度

bgColor：背景颜色，如：bgcolor=“#FF0000” bgcolor=“rgb(255,0,0)”

scrollAmount：滚动步长值，一步走多远，值越大，走的越快

scrollDelay：两次滚动的间隔时间，以毫秒为单位 1秒=1000毫秒

3.计算机进制

进制，就是一种进位方法。

10进制：有10个基本数，0、1、2、3、4、5、6、7、8、9，运算规则是：逢十进一

例如：9 10 19 20 29 30

2进制：有2个基本数，0、 1，运算规则是：逢二进一。比如：(10)2 11 100 101 110

8进制：有8个基本数，0、1、2、3、4、5、6、7，运算规则是：逢八进一。比如：(17)8 20 21 26 27 30

因为二进制太长，不方便记忆，因此小型机引入了八进制，八进制可以很好的反应二进制。

因此，一个八进制数，用3位二进制数来表示。

基R=2^3

16进制：有16个基本数，0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F，运算规则是：逢16进一

比如：EF F0 F1 F2 FE FF (100)16

16进制的一位对应4位二进制。基R=2^4

10进制	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19
2进制	1	10	11	100	101	110	111	1000	1001	1010	1011	1100
8进制	1	2	3	4	5	6	7	10	11	12	13	14	15	16	17	20
16进制	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10	11	12	13

十进制转成二进制

分为整数部分和小数部分，分别转换。比如：将(10.125)10转成二进制？ 1010.001

（1）整数部分转成二进制：除2取余法。每次将整数除以2，取余数，一直除下去，直到整数部分(商)为0。最后读数时，从下往上读取。

第N次	整数10	商	余数
第1次	10/2	5	0
第2次	5/2	2	1
第3次	2/2	1	0
第4次	1/2	0	1	最后结果为：1010

（2）小数部分转成二进制：乘2除整法。每次将小数部分乘以2，取整数，一直乘下去，直到小数部分为0。最后读数时，从上往下读取。

第N次	小数0.125	积	整数
第1次	0.125*2	0.25	0
第2次	0.25*2	0.5	0
第3次	0.5*2	1.0	1
				最后结果为：001

二进制转成十进制

不分整数部分和小数部分，按权相加法。换句话说：二进制上的每一位，乘以所在位权(也就是2的几次方)，最后将各个位的乘相加，就能得到十进制。

1010.001 = 1*2^3 + 0*2^2 + 1*2^1 + 0*2^0 + 0*2^-1 + 0*2^-2 + 1*2^-3 = 8+2+ 1/8 = 10+0.125 = 10.125

4.计算机编码介绍(字符集)

计算机只能二进制，比如：a-z、A-Z、0-9、标点符号，计算机都不能直接识别。每个人都可以来约定一套字符编码（比如：a用二进制100表示，b用二进制101表示,c用二进制的110表示等）

计算机是由美国人发明的，美国标准化局同样制定了一套统一的编码，叫ASCII码。

ASCII码

ASCII编码用7位或8位(1个字节)二进制来表示，共可以表示128或256个字符。包括：大小写字母、数字、标点符号、图形符号等。

5.ANSI编码

每个国家都想让计算机能显示或处理本国的语言，都对ASCII码进行了扩展。

在中国(简体字)，ANSI编码是指GB2312或GBK。

在台湾(繁体字)，ANSI编码是指BIG5

在日本，ANSI编码是指JIS。

……

注意：ANSI编码是跟随操作一齐安装的，也就是，安装了中文操作系统后，它的默认编码就是GB2312。

6.GB2312编码

GB2312是中国标准化局，在1980年制定的一套显示简体中文的编码。

GB2312是用2个字节来显示。共可以表示2^16=256*256=65536个字符。

GB2312共保存了6763个常用汉字，一级汉字3700个。

GBK编码

对GB2312进行了扩充，可以显示人名、古汉语中的一些罕见字等。

GBK也是用2个字节来表示。共存储了2.3万个左右的中文字符。

GBK的范围，要比GB2312大的多。

BIG5编码

BIG5用于台湾、香港、澳门地区的繁体中文编码。

Unicode编码

用4个字节表示字符，共可以表示42个亿个字符。

Unicode编码可以显示世界上所有国家的语言。

缺点：文件庞大，效率不高，不利于推广。

UTF-8统一格式转换

它会自动根据不同的字符，来选择不同编码长度。

7.<meta>标记

<head>标记中的内容在浏览器中，是不可见的。

主要用两个常用的属性：

http-equiv：主要设置一些控制信息，属性值是固定的。比如：content-type

name：一般用于设置网页描述信息，像关键字、网页描述、网页版权、作者等，属性值是固定的。比如：keywords

content：是具体的参数或内容，与http-equiv和name属性进行对应。

（1）设置网页的字符集或编码

（2）设置网页刷新或跳转

注意：刷新功能相当于浏览器中的刷新按钮

（3）设置网页关键字(SEO优化)，给搜索引擎(搜索机器人)使用

（4）设置网页描述信息(SEO优化)

8.XHTML

XHTML是可扩展超文本标注语言，XHTML是更纯净的HTML，语法更严格。

XHTML的目的是为了取代HTML4.01。

XHTML是W3C的一个标准或规范。

编写XHTML的规范，与HTML编写有何不同？

1）所有的标记都必须被关闭。比如：<br>转换<br /> <hr>转换后 <hr />

2）XHTML要求所有的标记名称必须小写。比如：<meta><table><img><font>

3）XHTML要求所有的属性名必须小写，属性值必须加引号。

4）XHTML要求所有的属性必须有值。

<hr noshade=“noshade” />

<input type=“radio” checked=“checked” />

5）所有的标记要顺序嵌套，不能交叉嵌套；

6）XHTML文件，必须要有DTD文档类型定义；

DTD(Document Type Define)文档类型定义

（1）严格型Strict

要求HTML代中，不能存在任何的表现，用CSS去代替。比如：<font>、bgcolor、background等

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

（2）过渡型transitional

可以使用任何表现的标记或属性。

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

（3）框架型Frameset

制作框架网页时使用的一种类型，框架主要用于网站的后台管理。

框架技术：是将一个浏览器窗口划分成不同区域，每个区域(窗口)都可以显示一个独立的网页。（HTML第四天单独讲框架，现在作个了解）

9.W3C简介

W3C是万维网联盟，是一个国际性的非盈利性组织，是WEB领域最具权威性的组织。已经制定多达200多项的标准。

比如：XHTML、CSS、ECMAScript(JavaScript)、DOM、 XML等。

10.超级链接

超级链接的功能：就是点击某个链接，可以跳转到目标页面或文件。

超级链接的分类：

（1）按内容分类：文本链接、图片链接、多媒体等

（2）按URL分类：相对URL、绝对URL、锚点

URL，指网址或路径

URL(Uniform Resource Locator，统一资源定位器)，也就是指互联网地址。

http://www.sina.com.cn/about/index.html

第一个部分：协议，指访问什么类型的服务器，如：http://、FTP://、news://

第二个部分：主机名或主机的IP地址。如：www.sina.com.cn

第三个部分：文件夹名，如：about

第四个部分：文件名，如：index.html

11.<a></a>超级链接的标记

格式：<a 属性=“属性值”>新浪网</a>

常用的属性：

Href：指链接的目标文件或网址。比如：href=“http://www.toutiao.com”

Target：指目标文件的打开方式。

_blank：在新窗口中，来打开目标文件；

_self：在当前窗口中，来打开目标文件；

_top：在最顶层窗口中，来打开目标文件(在框架中讲)；

_parent：在父窗口中，来打开目标文件(在框架中讲)

Name：设置锚点的名称。锚点是指：链接到同一个页面的不同部分

举例：<a href=http://www.toutiao.com target=“_blank”>头条号</a>

12.相对路径和绝对路径

绝对URL：它总是以file:///协议开头，去访问目标文件。

如果将当前文件移动到其它地方，这个绝对URL路径不需要修改。

绝对URL，只需要确定目标文件的路径即可，与当前文件位置无关。

例如：<a href=“file:///E:/itcast/20140510/lesson/day2/4.html”>本地绝对路径</a>

相对URL：要确定当前文件与目标文件的关系。

关系分为三种：

平级关系：直接写目标文件的文件名即可。

下级关系：也就是目标文件所在的文件夹与当前文件是平级关系，当前文件与目标文件是上下级关系。

上级关系：目标文件位于上一层级。

../代表上一层文件夹

../../代表上二层文件夹

../../images/01.jpg

提示：在制作网站时，一般使用的都是相对路径。

（3）下载链接：如果链接到的文件，网页不能直接执行的话，都会出现下载提示。

浏览器可以直接执行的文件：.gif、.jpg、.png、html、.htm、.mp3、.swf等

（4）邮箱链接：mailto:beijing2000@126.com

13.锚点链接：指链接到一个网页的不同地方

第一步：定义一个锚点或标记 <a name=“top”></a>

第二步：链接到锚点或标记 <a href=“#top”>返回顶部</a>

<a href=“intro.html#bottom”>链接到intro.html的底部</a>

14.<img>图片标记，单边标记

格式：<img 属性＝“属性值” />

常用的属性：

Src：指图片的URL，可以是相对路径，也可以是绝对路径。

Width：指图片的宽度，单位px或%

Height：指图片的高度

Align：图片的水平对齐方式，取值：left center right ，left或right可以实现图文混排

Alt：如果图片不存在时，显示的提示信息

Hspace：图片左右的距离

Vspace：图片上下的距离

举例：<img src=“images/01.gif” width=“400” height=“300” alt=“宝宝图片” />

如果保证图片在调整过程中不变形（等比例缩放）：只需要设置width和height其中一个即可，另一个会自动缩放。

，第4个电商项目。

这是第3个项目电商的延续，因为是同一拨团队继续干的项目。这份经历暂时不方便透露太多，只能说这是以我原来的第3个电商项目的技术团队核心成员为班底的，又一个从零开始的项目，同样是海淘。

经过半年多一点，现在已经走到了B轮。对于做海淘的电商而言，因为我们属于后进者，节奏要比其他项目要快一些，要不是没有任何机会的了，也就意味着别人可能是半年或3个月就融资一次，那么我们就得基本上2个月就进行一次融资，至少在C轮以前必须是这样的速度，要么只有等死。

可想而知，要能完成这样的融资节奏，那么开发、推广和运营是怎样的节奏呢？作为参与者当然是非常非常辛苦的。这几个月不能说天天有发版，但基本上每周二周四会有一个小版本，1周或2周就得完成有一个中级版本，可能是多个版本交替迭代的，而一个月就一个大版本更新。那么，单就前端开发而言，如果没有很好的模块化、自动化、流程化的控制体系，速度就别说了？还好，半年来30来号技术开发，技术团队的离职率基本为0，技术负责人的项目管理能力非常厉害的。

八，前端开发者快速升级通关的一些个人经验总结。

这纯属个人经验，不一定适合你。还是那句话，如果感兴趣就往下看，不强求。在评论里面，我说了，从转行做全职前端，从切图开始升级发展到做电商前端架构，只是花了2年时间。不管你信不信，这绝对是事实。当然，我是有好几年php+前端混合开发基础的，不算是从白丁开始的，但转行那时候的前端技能最多就是初中级别，只会用jq插件完成逻辑。我现在的好几下属，做前端的时间都比我长，有个已经5年了，但依然找不到方向。我平时在招聘前端时，面试的前端好多都干了3-5年了，还是那样。我不评论他们，，我只是觉得可能是大家没有看清楚前端这个工种的未来，还没有开窍。当然，也可能你还不够努力。反正，种种原因吧，各有不同，我只能说我自己的。

这两年，我手机里面全部是前端开发书籍，没有100本页有50本，背包里面总有一本关于技术开发的书籍。每天除了上班干活，吃喝拉撒睡外，全部时间几乎全部放在看书写代码写demo上面。以至于忽略了很多事情，包括对家人的照料。这些努力是你看不到的。当然，除了自身努力外，我确实也踏对了前端开发迅猛发展的节奏，比较早地接触了Nodejs，比较早地看到了前端构建前端工程化的价值。不过，有时候一个人的价值往往不仅仅是看他的代码能力有多少，经验有多少，还要看你能号召多少人跟你一起干。技术人做到一定程度之后，再往上发展，需要有一定的号召力，因为绝大多数企业不会给你开那么高的薪酬，甚至给你股份期权。当有几个人愿意跟随你的时候，那么在找项目谈价格时，就会掌控议价的主动权。因为，你已经不是一个人在战斗，你的价值绝对不是以一个人的开发技能来衡量的，而是由跟随你的团队的整体实力来决定。当然，有人愿意跟着我，是因为这两年我除了一直站在代码开发的第一线外，还坚持了以下几样东西：

1，从不藏私。把你知道的东西，毫无保留地分享给你周围的同学，记得是毫不保留。知道多少，分享多少，这样才会不断促使自己去知道的更多。技术层面不存在教会徒弟饿死师傅这种事情，如果你抱有这样的想法，那就太狭隘了。

2，对代码要有洁癖。洁癖到什么程度？包括一个空格，一个标点符号，不要觉得无所谓，一定要觉得有所谓。要追求能力极限上的完美，包括逻辑判断的严谨、文档的完善、代码格式的完美。

3，言出必行。一个需求来到我这里，只要我有答应别人的时间节点，不管如何也要想尽办法把它实现了。如果确实无法按时，一定提前沟通，但二次调整的时间一定一定要准时，下死命也要完成。事不过三，不给自己留任何后路或找理由。总之，言出必行既是项目管理能力问题，也是个人诚信问题，这样团队里的其他人才会愿意相信你，依赖你，跟随你。‘’

其实，很多时候技术和经验积累到一定程度之后，业务处理上的能力或技巧，大多数人的差距其实很小的，但拉开差距的往往不是技术本身，而是对待人，对待技术，或对待需求的态度不一样。我不敢说，技术层面有多厉害，即便是现在的项目给我的技术评级是P7，之前也有拿到的几个offer给我技术评级也是P6/P7，但我自认为没有到达这个水准。既然如此，可能是对待人，对待技术，或对待需求的态度上做得不错。

举个新鲜的例子：前几个月我们有一个微信jsSdk分享有礼的需求，这个需求非常重要，我决定自己书写前端逻辑，避免耽误与外部的合作。但这个需求关键的点是需要获得两次微信用户授权，一个是交易授权签名，一个是分享授权签名。但由于后端开发同事没有经验，只做了交易授权签名，但他也已经非常努力了，基本通宵达旦了，但当我发现另一个授权签名没有服务端接口时，前端的逻辑是走不通的，等别人调休完成再做吗？但项目其实是务必在第二天提测，要不无法按时上线，而广告已经投放出去了。如果是你会如何处理？当时已经是凌晨5点了，后端的同事都疲惫不堪回去休息了，我决定自己来书写服务端另一个授权签名的api，但这里有一个坑，授权签名的算法里面要求前端post一个url，而这个URL必须是不经过转义，但微信jsSDK里面没有特别说明这个（可能是我没看仔细忽略了），从安全的角度我习惯对前端ajax的url字段进行了转义处理，导致一直调试不通，找了各种原因，还是没找到原因。。。已经是早上9点多，别人已经又来上班，而我还没有下班，但已经很困很困了，但知道这个需求很重要，咬牙再坚持，碰巧在这个页面微信 JS 接口签名校验工具看到了问题所在，如图

在php端对这一字段反转义，调试就通了，在那天中午前能够按时提测，最后没有太大问题终于是上了线。虽然还有不少细节没处理好，但至少别人接手可以轻易解决。那天我回家修休息已经是下午3点了。也即是，我从前一天10点开始，一直干到了第二天的下午3点，就为了完成当初承诺的时间节点。事实上，这个需求不是很难，但技术开发有非常明确的截止时间，而需求又是我自己亲自做的。如果是其他同事，看到api似乎是服务端的事务，其实作为前端开发的你，人家都走了，你也跟着走人，最后担主要责任的一定不是前端开发，对吧？但是，这不是我的做法，因为这个项目既然是由你来接手，并评估可以按时完成的，那么不管哪里出了问题，这都是你的问题。因此，我会去书写服务端的api逻辑，尽管这似乎不是我的责任。好了，说了这么多。其实快速通关可能是需要时运，但更多是个人的努力与坚持。这个没有什么诀窍的，而且很多时候和技术本身没有关系，而是对待困难的态度要有点点不一样。

最后，对于初学者来说，到底前端的路可以怎么走？

前面提过两点，如果当你要从中级跨入高级前端，这除了项目环境外，还需要你要有一定的坚持，并且选对前端未来的发展路线，至少我认为有以下几种路线可供选择：

1，业务层面的高手，做到非常了解某个领域的业务逻辑。比如垂直类电商的业务逻辑，这样你其实可以尝试带队，做项目管理，最终发展做项目经理。

2，前端工程化解决能手。就是我在第六章罗里吧嗦列举出来的一堆问题，你都能有腹案去解决，每个项目的工程化方案都是不一样的，这种人才的需求也很旺盛，尤其是哪些基础设施建设不太完善的项目。

3，nodejs服务端方面开发。这个可能在岗位上更像是后端开发了，只是前端可以通过这个方向进入服务端开发的领域，做的牛逼，其实做一下CTO的梦还是可以做一做的。

4，如果上面觉得都不适合你，但你对前端开发又比较了解，那么转行做产品页也是不错的选择。具备开发思维的产品，在很多时候是一个优势。

5，创业。按现在的行情，前面4个方向任何一个方向做好了，作为打工者，你的收入都不会太低，一般不会低于25W年薪吧？如果第一点和第二点你都能做得很好，前端架构师这种岗位就可以去试试，35W以下年薪可以不用考虑；如果你连第三点也做得不错，那么系统架构师职位是可以去尝试的，50W年薪的岗位就应该在你的考虑范围；如果你连这4点页都做的比较到位，我觉得你最合适干第5点。此外，移动互联的前端开发也是一个很不错的发展方向，你也可以尝试做webapp和hybrid app的开发；多端的开发能力，也是前端开发人员不错的发展方向。

很多朋友说，很喜欢有个人分享经历，其实这也是我的出发点，当初我在前端的起步的时候，在知乎上看过有一位前辈的分享，这也是我学习的方向，今天下午我发的微头条，希望可以帮到大家

JavaScript、CSS 相比，HTML 经过三十多年的发展，似乎逐渐走进无人问津的角落，如何才能让 HTML 再次回到人们视野的中心。

作者 | Yaser Adel Mehraban

译者 | 谭开朗，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下为译文：

有多少次，身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?

为什么

HTML一直处于无人问津的角落，因为JavaScript和CSS总是吸引人们的注意力。

请在脑海里先保留这种印象，因为我要用一些简单的技巧来发挥作用，让HTML再次回到人们视野的中心。

以下是创建一目了然、可维护和可扩展的代码的一些方法，其很好的应用了HTML5的语义标记元素，并将在支持的浏览器中正确呈现。

其缘由就不赘述了，让我们来看看具体是什么吧。

文档类型

在index.html的顶部位置，请确保声明了DOCTYPE。这将在所有浏览器中激活标准模式，并告知浏览器该如何编译文档。请记住DOCTYPE不是HTML元素。

HTML5是这样的：

<!DOCTYPE html>

注意:如果应用了框架，这已预先写好。如果没有，我强烈建议使用像Emmet这样的代码片段，它在VS代码中可用。

想了解更多关于其他文档类型的信息吗?点击这里查看参考文件：https://html.com/tags/doctype/。

可选标签

有些标签在HTML5中是可选的，主要是因为元素是隐式呈现的。信不信由你，你可以省略<html>标签，而页面呈现得也很好。

<!DOCTYPE HTML>

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是一个有效的HTML，但在某些情况下就不能这样做了。例如标签后面跟着注释：

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是无效的，因为注释位于<thml>标签之外，解析树发生了更改。

结束标签

应始终记得结束标签，否则某些浏览器在呈现页面时会出现问题。出于可读性和其他原因，建议保留这些内容，稍后我会详细介绍。

<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>

以上都是有效的标签，但也有一些特例，如下。

自闭合标签是有效的，但不是必需的。这些元素包括:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

注意:普通元素永远不能有自闭合标签。

<title />

上面显然是无效的。

字符集

预先定义字符集。最好是将它放在顶部元素中。

<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>

上面是无效的，标题无法正确呈现。正确写法是将字符集移到顶部位置。

<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>

语言

不忽略可选标签的另一个原因是在使用属性时。在这种情况下，我们应该定义web页面的语言，这对于可访问性和搜索非常重要。

<html lang="fr-CA">
...
</html>

标题

永远不要忽略标题标签，否则可访问性太差了。我个人就永远不会使用这样的网站,因为我刚打开它即刻在20多个页面后就找不到了(浏览器选项卡不会有任何显示)。

base标签

这是一个非常有用的标签，应该谨慎使用。它将设置应用程序的基本URL。一旦设置好，所有链接都将相对于这个基本URL，这可能会导致一些不必要的行为:

<base href="http://www.example.com/" />

通过以上设置，href="#internal"将被编译为href=http://www.example.com/#internal。或者href="example.org"将被编译为href="http://www.example.com/example.org"。

描述

这个meta标签非常有用，尽管严格来说它不是最佳写法。但在搜索引擎时，这是超级有用的。

<meta name="description" content="HTML best practices">

这有一个帖子“搜索引擎优化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。

语义标签

虽然可以使用div创建UX工程师的线框，但这并不意味着必须这样做。语义HTML为页面提供了意义，而不单纯是内容显示。像p、section、h{1-6}、main、nav等标签都是语义标签。如果使用p标签，用户将知道这表示一段文本，浏览器也知道如何展示它们。

语义HTML超出了本文的范围。但是我们应该进行检查，就好比写作所用的笔，而我们有鼠标。

hr不应该用于格式化

<hr>不是格式化元素，所以不要用它来格式化内容。在HTML5中，这个标签代表了内容的主题分离。正确的用法是这样的:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>

使用title属性时要小心

title属性是一个功能强大的工具，它可以帮助阐明页面上元素的操作或目的，比如工具提示。但是，它不能与图像上的alt等其他属性互换。

HTML 5 规范道:

目前不鼓励依赖title属性，因为很多用户代理不按照规范的访问方式来暴露该属性（例如，使用鼠标等设备来唤出提示框，而不包括只用键盘或触控键盘的用户，或者现代手机或平板电脑）。

请阅读有关如何正确使用此属性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。

单引号或双引号

我见过的许多代码库，他们的标记中混合了这两种形式。这并不好，特别是当你使用一个依赖于单引号的框架时，比如php，当你在一个句子中使用单引号时，就像我现在做的一样。另一个原因是保持一致，这总是好的。不要这样写:

<img alt="super funny meme" src='/img/meme.jpg'>

而写为：

<img alt="super funny meme" src="/img/meme.jpg">

省略布尔值

当涉及到属性的布尔值时，建议省略，因为它们不添加任何值，还会增加标记的权重。

public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead  -->

<audio autoplay src="podcast.mp3">

省略类型属性

不需要向scriptand样式标签添加type属性。某些服务(如W3C的标记验证工具)还会出现验证错误。

验证标记

可以使用W3C的标记验证等服务以确保有效的标记。

拒绝内联样式

HTML中写的是内容，其如何展示取决于样式。将展示形式留给CSS吧，不要使用内联样式，这将有利于开发人员和浏览器理解你的标记。

总结

这些只是编写标签时要记住的冰山一角。还有很多很好的资源可以让你深入了解，强烈建议你重复阅读。

《GitHub HTML最佳实践》：https://github.com/hail2u/html-best-practices
《W3C School HTML样式指南》：https://www.w3schools.com/html/html5_syntax.asp

希望你喜欢本文，并能写出优雅的标签。

原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5

本文为 CSDN 翻译，转载请注明来源出处。

【END】

在线咨询

上一篇：html中滚动字体的设置
下一篇：zabbix 源码安装部署指导书

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商