把页面想成一间房子，骨架就是那张建筑图。图不对，后头刷多少漆都白搭。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>济南网站建设</title>
</head>
<body>
这里才是我看得见的东西
</body>
</html>
就这几行。新手最爱干的事，要么把这五行写成五十行，要么干脆省掉第一行。
第一行压根不是标签
<!DOCTYPE html> 带个叹号，是在提醒你：这不是元素，是给浏览器的一句口令——按HTML5的标准解析我。不写，浏览器就翻旧账，切进怪异模式，盒模型那套老规矩全回来了，你写的 width:100px 就可能不止100px。调半天找不出毛病，源头常常在这一行。HTML4那串长得能当咒语的 doctype，早该送进博物馆。
html标签：一页只戴一顶帽子
<html lang="zh-CN"> 把整页包起来，根就这么一个。lang 别偷懒省掉：浏览器的"要不要翻译此页"、读屏软件的中文发音、搜索引擎判断语种，全指着它。省一个词，后面一堆麻烦找上门。
head：干活的都在幕后
head 里头的东西，用户基本看不见。charset 管别把中文读成天书，viewport 管手机上的缩放。我见过太多漏掉这两行的下场：页面在电脑上好好的，手机一打开，字小得像蚂蚁，或者整页缩成一条细带子，得两根手指扒拉着看。
还有个冷门讲究——charset 放太靠后等于没放。浏览器只在文档开头那一小段里找它，挪到底下，编码早就猜完了，猜错就是满屏菱形问号。
title：head里唯一露脸的
标签页上那一小条、收藏夹里的默认名字、微信转发时的卡片标题、搜索结果里那行蓝色大字，全是它。head 管"这页是什么"，title 就是这句"是什么"唯一的出口。
写它有门道。搜索结果那行字，大约二三十个汉字就到头，再长只剩省略号，白写。商品页写作"商品详情"四个字，等于把门口招牌摘了——人家搜"加绒卫衣 男"，你连照面都打不上。得写成"加绒卫衣男款冬季加厚 - XX店"这种，人看了知道点进去是什么，爬虫读了也知道这页卖什么。一个页面只能有一个 title，写第二个，浏览器装作没看见。
body：这才是台面
剩下真让人看见的，文字、图片、按钮、视频，统统进 body。SEO 一半的功夫花在 head，剩下一半的体面全在 body 里——内容空，标题写得再漂亮也撑不住。
评论