很多人第一次搜html、css入门的时候脑子里想的其实是同一件事我能不能照着教程敲一遍就会做网页了我见过大量新人包括当年的我自己都是这么入门的。结果往往是标签抄了一遍关掉视频面对一个空白页面依然不知道从哪下手。这篇不会像教科书那样从什么是HTML开始念定义我想顺着入门时大家真正会卡壳的地方走一遍——页面模板那串代码为什么必须那么写、标签为什么不能乱堆、CSS样式怎么就是不生效、布局为什么一到写页面就翻车以及那些看起来很花的涟漪、流光、渐变效果底层到底干了什么。零基础的朋友可以把它当第二篇教程来读已经写了几个页面但总感觉飘着的人也能在这里面捞到不少排查思路。1. 为什么一定要从那段看不懂的模板开始如果你在搜索引擎里敲过html入门大概率见过下面这串代码甚至很多人复制完都不知道它每行是干嘛的!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title /head body !-- 页面可见内容写在这里 -- /body /html这差不多是HTML5时代所有页面的通用骨架。我建议新人不要跳过这一节直接去学标签因为后面你遇到的至少三成诡异问题都出在这几行你没看懂的东西上。1.1 第一行DOCTYPE到底在干嘛!doctype html是一个文档类型声明告诉浏览器按照现代HTML5标准来渲染我这个页面。很多人会忽略它但少了这一行浏览器会进入一种叫怪异模式Quirks Mode的容错状态某些CSS属性的大小、盒模型的算法会跟标准模式不一样。表现就是同一个页面在别人的浏览器里正常在你这边错位——排查半天最后发现是DOCTYPE丢了这种坑我见过不止一次。在HTML5之前文档类型声明要写很长一串现在统一就这短短一行记住了就行任何HTML文档的第一行必须是它。1.2 lang、charset、viewport都是干什么的html langzh-cn声明页面语言是中文。它影响三件事浏览器的翻译建议、屏幕阅读器的发音方式、搜索引擎对页面内容语言的判断。你要是做英文站就改成langen别小看这一行。meta charsetutf-8是字符编码声明职责是解决乱码。UTF-8几乎覆盖了全世界所有语言的字符所以现在新项目清一色用它。早年国内很多站点用GB2312编码一旦跟UTF-8页面混在一起中文就会变成一堆鈥斺€之类的乱码。我在工作中遇到过几次老项目转编码的惨案经验就是新项目直接用UTF-8遇到乱码先查这一行。meta nameviewport contentwidthdevice-width, initial-scale1.0管的是移动端适配。没有它手机浏览器会把一个宽度980px左右的虚拟画布缩小到屏幕里你的页面看起来就会密密麻麻挤成一团有了它页面宽度才等于设备宽度。现在做任何页面几乎默认都要带上。1.3 head和body到底怎么分工一句话head里的内容用户看不见body里的内容用户才看得见。head装的是页面的元信息——字符编码、视口设置、title浏览器标签页上显示的标题同时也是SEO里最重要的元素之一、CSS外链、被搜索引擎索引的关键词描述等。body才是你真正写给人看的那些内容文字、图片、按钮、表单、视频。很多新人会在head里写一个div然后在body里找不到它或者反过来把CSS全部塞进body里。这些写法浏览器一般也能容忍地渲染出来不报错但它会让你的HTML结构失去条理——越到后面写复杂页面你就越能感觉到结构规整有多重要。这里插一句我自己带新人的习惯我会让你先把这段模板背下来默写三遍。不是死记硬背是因为后面的每一个页面、每一次调试你都要跟它打交道。模板里这一行行的代码差不多就是你未来所有网页项目的地基。2. HTML语义化别让整个页面变成一百个div的大杂烩很多自学教程会直接教div是块级容器span是行内容器于是新手很快形成一种写法不管什么都先放一个div页面里密密麻麻全是它class名也从div1、div2一直编到div99。这种页面浏览器能正常显示但维护起来非常痛苦。等你要加样式、改布局的时候看到一层套一层的无名词div只能一层一层去数那感受真的让人崩溃。2.1 什么是语义化标签为什么要学它HTML5提供了一批有明确含义的标签它们跟div承担同样的容器职责但是自带说明书header表示页头、nav表示导航、main表示主体内容、article表示一篇文章、aside表示侧边栏/附属信息、footer表示页脚。比如一个典型的文章页骨架header h1博客标题/h1 nav首页 | 归档 | 关于/nav /header main article h2一篇文章的标题/h2 p文章的正文内容。/p /article aside作者介绍、相关推荐/aside /main footer版权信息、备案信息/footer你看即使不看任何CSS光看标签名你就能大概想象出页面的结构——这就是语义化最直接的价值。搜索引擎的爬虫也是靠这些标签理解页面主题的屏幕阅读器则会利用这些标签帮视障用户跳跃式浏览页面。所以语义化不只是规范要求也是实用主义它让代码更好懂让SEO更好做让无障碍访问成为可能。当然这不意味着div就该被淘汰。它仍然是最通用的没有特别含义的块级容器在CSS排布中非常常用。我的原则是能明确表达语义的地方用语义化标签剩下的通用容器用div但每个div都要有一个说得清楚作用的class名。2.2 表单热搜里出现频率最高的一组标签热门搜索里有html表单“表单类标签”这两个词我一点都不意外。表单是网页里最无聊但最核心的部分——用户登录、注册、搜索、下单全靠它。一个最基础的表单长这样form action/submit methodpost label forusername用户名/label input typetext idusername nameusername required label forpassword密码/label input typepassword idpassword namepassword button typesubmit登录/button /form这里有几个新手必踩的坑name属性千万别丢。表单提交时浏览器发送给服务器的数据是namevalue的形式。没有name的输入框提交后服务器那边根本收不到它的值。label的for要跟输入框的id对应。这样点击用户名三个字时光标会自动落到对应的输入框里体验完全不同对无障碍支持也是必须的。button不写type的话默认是typesubmit。也就是说你随手写的一个button点击/button放在表单里会直接触发提交。很多新人想加一个普通按钮结果一点就刷新了页面十有八九是这个原因。input的type属性也值得单独说——它是HTML5里进化最丰富的属性之一。text是普通文本password是密码自动掩码email会做简单的邮箱格式校验number限制只能输入数字并带上下箭头date直接弹出日期选择器checkbox和radio是勾选与单选file是文件上传。实际项目里你不太会手写在浏览器上做复杂校验——通常会用现成的UI组件库但读懂这些基础类型才能理解组件库的封装到底做了什么。2.3 标题层级和文本标签的基本修养页面里的标题不是看起来大的字而是有层级结构的h1 → h2 → h3 → h4 → h5 → h6。一个页面一般只有一个h1通常是站点名称或最重要的主标题然后往下逐层分级。搜索引擎会把h1当作品最重要的主题信号你在一个页面里塞五个h1等于直接告诉爬虫这个页面主题混乱。文本标签里p是段落a是链接href属性指向目标地址target_blank可以新标签页打开strong和b都会加粗但语义不同em和i都会斜体但语义不同。我建议初学者记住一句话能用语义标签表达的状态就不要再额外加class去模拟。这样样式可以统一挂在标签上代码会干净很多。3. CSS引入的三种姿势与样式不生效的四种死法HTML把内容搭出来之后CSS负责让内容好看。搜索热词里有个问题特别能代表新手困惑css文件需要写
HTML/CSS入门不玄学：从页面模板到布局与特效的实战梳理
很多人第一次搜html、css入门的时候脑子里想的其实是同一件事我能不能照着教程敲一遍就会做网页了我见过大量新人包括当年的我自己都是这么入门的。结果往往是标签抄了一遍关掉视频面对一个空白页面依然不知道从哪下手。这篇不会像教科书那样从什么是HTML开始念定义我想顺着入门时大家真正会卡壳的地方走一遍——页面模板那串代码为什么必须那么写、标签为什么不能乱堆、CSS样式怎么就是不生效、布局为什么一到写页面就翻车以及那些看起来很花的涟漪、流光、渐变效果底层到底干了什么。零基础的朋友可以把它当第二篇教程来读已经写了几个页面但总感觉飘着的人也能在这里面捞到不少排查思路。1. 为什么一定要从那段看不懂的模板开始如果你在搜索引擎里敲过html入门大概率见过下面这串代码甚至很多人复制完都不知道它每行是干嘛的!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title /head body !-- 页面可见内容写在这里 -- /body /html这差不多是HTML5时代所有页面的通用骨架。我建议新人不要跳过这一节直接去学标签因为后面你遇到的至少三成诡异问题都出在这几行你没看懂的东西上。1.1 第一行DOCTYPE到底在干嘛!doctype html是一个文档类型声明告诉浏览器按照现代HTML5标准来渲染我这个页面。很多人会忽略它但少了这一行浏览器会进入一种叫怪异模式Quirks Mode的容错状态某些CSS属性的大小、盒模型的算法会跟标准模式不一样。表现就是同一个页面在别人的浏览器里正常在你这边错位——排查半天最后发现是DOCTYPE丢了这种坑我见过不止一次。在HTML5之前文档类型声明要写很长一串现在统一就这短短一行记住了就行任何HTML文档的第一行必须是它。1.2 lang、charset、viewport都是干什么的html langzh-cn声明页面语言是中文。它影响三件事浏览器的翻译建议、屏幕阅读器的发音方式、搜索引擎对页面内容语言的判断。你要是做英文站就改成langen别小看这一行。meta charsetutf-8是字符编码声明职责是解决乱码。UTF-8几乎覆盖了全世界所有语言的字符所以现在新项目清一色用它。早年国内很多站点用GB2312编码一旦跟UTF-8页面混在一起中文就会变成一堆鈥斺€之类的乱码。我在工作中遇到过几次老项目转编码的惨案经验就是新项目直接用UTF-8遇到乱码先查这一行。meta nameviewport contentwidthdevice-width, initial-scale1.0管的是移动端适配。没有它手机浏览器会把一个宽度980px左右的虚拟画布缩小到屏幕里你的页面看起来就会密密麻麻挤成一团有了它页面宽度才等于设备宽度。现在做任何页面几乎默认都要带上。1.3 head和body到底怎么分工一句话head里的内容用户看不见body里的内容用户才看得见。head装的是页面的元信息——字符编码、视口设置、title浏览器标签页上显示的标题同时也是SEO里最重要的元素之一、CSS外链、被搜索引擎索引的关键词描述等。body才是你真正写给人看的那些内容文字、图片、按钮、表单、视频。很多新人会在head里写一个div然后在body里找不到它或者反过来把CSS全部塞进body里。这些写法浏览器一般也能容忍地渲染出来不报错但它会让你的HTML结构失去条理——越到后面写复杂页面你就越能感觉到结构规整有多重要。这里插一句我自己带新人的习惯我会让你先把这段模板背下来默写三遍。不是死记硬背是因为后面的每一个页面、每一次调试你都要跟它打交道。模板里这一行行的代码差不多就是你未来所有网页项目的地基。2. HTML语义化别让整个页面变成一百个div的大杂烩很多自学教程会直接教div是块级容器span是行内容器于是新手很快形成一种写法不管什么都先放一个div页面里密密麻麻全是它class名也从div1、div2一直编到div99。这种页面浏览器能正常显示但维护起来非常痛苦。等你要加样式、改布局的时候看到一层套一层的无名词div只能一层一层去数那感受真的让人崩溃。2.1 什么是语义化标签为什么要学它HTML5提供了一批有明确含义的标签它们跟div承担同样的容器职责但是自带说明书header表示页头、nav表示导航、main表示主体内容、article表示一篇文章、aside表示侧边栏/附属信息、footer表示页脚。比如一个典型的文章页骨架header h1博客标题/h1 nav首页 | 归档 | 关于/nav /header main article h2一篇文章的标题/h2 p文章的正文内容。/p /article aside作者介绍、相关推荐/aside /main footer版权信息、备案信息/footer你看即使不看任何CSS光看标签名你就能大概想象出页面的结构——这就是语义化最直接的价值。搜索引擎的爬虫也是靠这些标签理解页面主题的屏幕阅读器则会利用这些标签帮视障用户跳跃式浏览页面。所以语义化不只是规范要求也是实用主义它让代码更好懂让SEO更好做让无障碍访问成为可能。当然这不意味着div就该被淘汰。它仍然是最通用的没有特别含义的块级容器在CSS排布中非常常用。我的原则是能明确表达语义的地方用语义化标签剩下的通用容器用div但每个div都要有一个说得清楚作用的class名。2.2 表单热搜里出现频率最高的一组标签热门搜索里有html表单“表单类标签”这两个词我一点都不意外。表单是网页里最无聊但最核心的部分——用户登录、注册、搜索、下单全靠它。一个最基础的表单长这样form action/submit methodpost label forusername用户名/label input typetext idusername nameusername required label forpassword密码/label input typepassword idpassword namepassword button typesubmit登录/button /form这里有几个新手必踩的坑name属性千万别丢。表单提交时浏览器发送给服务器的数据是namevalue的形式。没有name的输入框提交后服务器那边根本收不到它的值。label的for要跟输入框的id对应。这样点击用户名三个字时光标会自动落到对应的输入框里体验完全不同对无障碍支持也是必须的。button不写type的话默认是typesubmit。也就是说你随手写的一个button点击/button放在表单里会直接触发提交。很多新人想加一个普通按钮结果一点就刷新了页面十有八九是这个原因。input的type属性也值得单独说——它是HTML5里进化最丰富的属性之一。text是普通文本password是密码自动掩码email会做简单的邮箱格式校验number限制只能输入数字并带上下箭头date直接弹出日期选择器checkbox和radio是勾选与单选file是文件上传。实际项目里你不太会手写在浏览器上做复杂校验——通常会用现成的UI组件库但读懂这些基础类型才能理解组件库的封装到底做了什么。2.3 标题层级和文本标签的基本修养页面里的标题不是看起来大的字而是有层级结构的h1 → h2 → h3 → h4 → h5 → h6。一个页面一般只有一个h1通常是站点名称或最重要的主标题然后往下逐层分级。搜索引擎会把h1当作品最重要的主题信号你在一个页面里塞五个h1等于直接告诉爬虫这个页面主题混乱。文本标签里p是段落a是链接href属性指向目标地址target_blank可以新标签页打开strong和b都会加粗但语义不同em和i都会斜体但语义不同。我建议初学者记住一句话能用语义标签表达的状态就不要再额外加class去模拟。这样样式可以统一挂在标签上代码会干净很多。3. CSS引入的三种姿势与样式不生效的四种死法HTML把内容搭出来之后CSS负责让内容好看。搜索热词里有个问题特别能代表新手困惑css文件需要写