在讲解今天的知识点之前,我想先展示两个片段的代码,让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的,需要去改进的。
片段一
1<html>
2<head>
3<title>A&B&C</title>
4<styletype="text/css">
5body{background:pink;}
6</style>
7</head>
8<body>
9<ahref="http://www.baidu.com"><h1>GotoBaiduwebsite.</h1></a>
10<divid="topNav">
11<ulid="bigBarNavigation">
12<li><ahref="/">HOME</a></li>
13<li><ahref="/">HELPER</a></li>
14<li><ahref="/">ABOUTUS</a></li>
15</ul>
16</div>
17</body>
18</html>
片段二
1<!DOCTYPEhtml>
2<html>
3<head>
4<metacharset="utf-8">
5<title>A&B&C</title>
6<linkrel="stylesheet"type="text/css"href="test.css"/>
7</head>
8<body>
9<h1><ahref="http://www.baidu.com">GotoBaiduwebsite.</a></h1>
10<ulid="bigBarNavigation">
11<li><ahref="/">home</a></li>
12<li><ahref="/">helper</a></li>
13<li><ahref="/">aboutus</a></li>
14</ul>
15</body>
16</html>
片段二是对片段一的改进,下面就改进点进行详细的讲解。
1. DOCTYPE的声明
片段二的第 1 行,添加了代码 <!DOCTYPEhtml>
编写HTML代码时,首先要使用"DOCTYPE"进行声明,这就像给你的代码以身份,HTML4.0.1或者XHTML1.0或者HTML5都有严格版本或者过度版本,这些都能很好的支持我们写的代码。我建议大家直接使用<!DOCTYPE html>,原因一方面是现在的布局基本舍弃了table布局,那么我们也就可以不考虑使用过渡型而使用严格型的"DOCTYPE",另一方面考虑到向后兼容,我们可以直接使用HTML5的声明模式,即 <!DOCTYPE html>
2. 给页面设置字符集和编码字符
片段二中的第 4 行,添加了代码 <metacharset="utf-8">
片段二中的第 5 行,将片段一中的第 3 行中的 "&" 改为 "&"
在每个页面的开始中,我们都应该在 <head> 中设置了字符集,代码中我们一些特殊字符我们应该用字符编码来实现,大家可以在下面的网页进行查询 http://www.ascii-code.com/ 。
3. 正确的代码缩进
片段二中相对于片段一使用了代码缩进, 这可以极大的增强代码的可读性。标准程序的缩进应该是一个制表符或几个空格,这里我推荐使用几个空格。
4. 使用外链的方式带入CSS样式和JavaScript
片段二中相对于片段一,将css样式封装到test.css文件中,然后使用<link> 导入。
对于JavaScript,我们同样需要使用外链的方式。
6. 使用标签嵌套要正确
片段二中的第 9 行,<h1><ahref="http://www.baidu.com">GotoBaiduwebsite.</a></h1>,
相对于片段一,我讲<h1>标签从<a>标签内部移至<a>标签外部。
<h1>是块元素,<a>是行内(inline)元素。我们不能将块元素放在行内(inline)元素
7. 删除不必要的标签
片段二中的第 10 ~ 14 行,相对于片段一中,将 <divid="topNav"><div> 删除。
div 和 ul 列表都是块元素,使用 div 来包裹 ul 根本没有起任何作用。虽然 div 的出现给我们制作 web 页面带来了极大的好处,但是我们没有必要到处乱用。
8. 尽量使用CSS控制样式
片段二中的第 11 ~ 13 行,相比较片段一中都并非直接使用大写字母,而是在test.css中定义样式
1ullia{
2text-transform:uppercase;
3}
当然还有很多原则,希望大家多多交流。
分享到:
相关推荐
Web前端:11个让你代码整洁的原则(1)
前端代码规范
前端代码
java前端开发代码书写规范,详细介绍了前端开发过程中,代码书写的原则以及如何做到代码的规范书写,让代码更加整洁。
前端代码规范
django环境测试前端代码django环境测试前端代码django环境测试前端代码django环境测试前端代码django环境测试前端代码django环境测试前端代码django环境测试前端代码django环境测试前端代码django环境测试前端代码...
纯前端发送邮箱代码实现 HTML+CSS纯前端发送邮箱代码实现 HTML+CSS纯前端发送邮箱代码实现 HTML+CSS纯前端发送邮箱代码实现 HTML+CSS纯前端发送邮箱代码实现 HTML+CSS纯前端发送邮箱代码实现 HTML+CSS纯前端发送邮箱...
企业官网前端代码,包括详情也,列表页,首页页面,有需要的伙伴点击下载哦
公告详情页面代码前端代码
这是借鉴、引用的是京东前端代码规范。
小米官网前端页面代码
Web前端必备35中前端高档代码,熟透这35种前端编码技术,你离web高级前端就不远了,有时你与高级前端的差距这是这35条秘籍代码;代码段中已包含浏览器兼容性处理,内核分辨,js图片处理,页面处理,页面字体控制,...
小程序源码 喵喵小说前端 (代码源)小程序源码 喵喵小说前端 (代码源)小程序源码 喵喵小说前端 (代码源)小程序源码 喵喵小说前端 (代码源)小程序源码 喵喵小说前端 (代码源)小程序源码 喵喵小说前端 (代码源)小程序...
前端项目管理中不可少的一个环节就是代码走查。可以很好的约束开发方式,对齐组内开发风格
使用springboot 前后端联调的一个前端代码
华为网站前端代码,内部学习资料,欢迎下载学习爱
OPPO官网页面前端代码
小程序源码 城市地图前端 (代码源)小程序源码 城市地图前端 (代码源)小程序源码 城市地图前端 (代码源)小程序源码 城市地图前端 (代码源)小程序源码 城市地图前端 (代码源)小程序源码 城市地图前端 (代码源)小程序...
仿小米官网首页2021最新版本前端代码【只有前端代码】
前端登陆与注册界面 主要包括账号登陆、扫码登陆、短信验证等功能