翻开任何一本前端入门书第一课几乎都是HTML标签语法。这个知识点看起来简单但恰恰是后面所有前端内容的地基。很多同学学到后面连div和span都分不清什么时候用甚至写出来的页面在手机上完全不能看回过头来才发现是标签结构一开始就没吃透。这篇笔记是“HTML5CSS3从0到1学前端”系列的第一节专门讲HTML标签语法。我会把标签到底是个什么东西、怎么写才规范、高频标签怎么用、HTML5带来的新变化以及我见过无数新手踩过的坑一次性讲清楚。内容不追求堆砌概念只求让你看完就能上手写一个像样的页面并且知道自己在写什么。如果你是零基础完全没碰过代码跟着走一遍就行如果你已经写过一点页面但感觉基础不牢可以重点看第2章和第6章把容易犯的毛病捋一捋。HTML标签语法的本质是“用标记描述内容”把这个逻辑理顺了后面的CSS和JavaScript学起来会轻松得多。1. HTML到底是什么先搞懂网页的骨架逻辑HTML的全称是HyperText Markup Language中文叫“超文本标记语言”。注意它不是编程语言而是标记语言。这句话很多教材都提过但很少解释清楚标记语言不写逻辑不写判断不做计算它只做一件事——告诉浏览器页面这块内容是什么。1.1 用“盖房子”来理解HTML的工作方式想象你要建一栋房子。HTML是钢筋水泥和墙体结构决定了有几个房间、门在哪里、窗户在哪里CSS是装修——墙面刷什么颜色、地板铺什么材质、家具摆哪里JavaScript则是水电和智能家居让房间的灯可以开关、空调能自动调节温度。三者缺了谁房子都不完整但第一件事永远是先把墙体结构砌起来。你写HTML的时候实际上是在用标签给一段内容下定义。比如“这是一级标题”、“这是一个段落”、“这是一张图片”、“这是一个可点击的链接”。浏览器拿到这些标签后会按照一套默认规则把它们渲染成你在屏幕上看到的样子。也就是说HTML标签是浏览器和你的内容之间的一种约定你把信息按照约定格式呈现出来浏览器就帮你把层级关系、排版顺序理清楚。1.2 浏览器怎么读你的HTML文件一个很简单的事实浏览器从上到下、逐行阅读你写的HTML代码遇到一个标签就按对应规则处理一个。这个过程叫解析。解析过程中浏览器并不关心你的代码风格好不好、缩进是否漂亮它只按语法规则来理解。但你依然要把代码写得整齐因为代码不是写给浏览器看的是写给你自己和将来要接手你代码的人看的。初次接触HTML的人最常有的困惑是“为什么我写了标签页面上不显示标签本身”答案很简单标签是给浏览器的指令指令执行完之后被消费掉了剩下的只有内容。这就像你去餐厅点菜菜单上写的是描述端上桌的才是菜本身。HTML从诞生到现在经历了多个版本目前我们讲的HTML5是新一代标准它在传统HTML基础上增加了大量新标签、新接口和离线存储能力。但核心思想从未改变标签描述内容。这一节里我会带你把最底层的标签语法规则吃透——这是后续所有实战的基础。2. 标签语法三大规则这样才能写出规范的HTML我见过太多新手写HTML页面能出来但代码漏洞百出标签不闭合、属性值不加引号、嵌套乱套。这样写短时间好像没出问题等后面学CSS学JavaScript各种奇奇怪怪的bug就会一股脑冒出来。规范化书写不是洁癖而是职业习惯。2.1 双标签与单标签的区别HTML里绝大多数标签是成对出现的叫“双标签”格式是标签名内容/标签名。开始标签写在前面结束标签在标签名前多一条斜杠。比如段落标签p这是一个段落。/p。中间的结束标签/p告诉浏览器这段内容的“段落身份”到此为止。但也有少量标签没有内容只需要单独一个标签就能发挥作用这叫“单标签”或“空标签”。最常见的如换行标签br、水平线标签hr、图片标签img。在HTML5标准里单标签末尾的斜杠可以写也可以不写比如br和br /都是合法的。我个人建议新手写不斜杠的简洁写法这是HTML5的推荐风格。2.2 标签属性标签配置的关键位置标签本身还不够属性是给标签附加配置信息的方式。属性写在开始标签里格式是“属性名属性值”。比如链接标签的href属性指定跳转地址a hrefhttps://example.com访问示例站点/a。一个标签可以有多个属性用空格隔开。这里有几个新手很容易犯的错属性名和属性值之间必须有等号属性值必须用引号包裹单双引号均可但必须配对。同一个标签里同一个属性只能出现一次重复写会让浏览器取第一个值。有些布尔属性比较特殊比如表单控件的disabled只要写上就表示禁用如input disabled甚至不写属性值也行。我在新人评审代码时经常看到的问题属性值漏写引号或者想写多个名字中间没加空格导致整个属性解析失败。记住属性值和属性值之间靠空格分隔不在引号内的空格会破坏属性结构。2.3 嵌套结构父标签和子标签的关系HTML标签允许层层包裹这种包裹关系叫嵌套。嵌套结构就像衣柜里的大抽屉套小抽屉div里放pp里放a一层套一层。浏览器靠这种嵌套关系理解内容的从属结构。div p这是一段文字里面包含一个 a href#链接/a 指向别处。/p /div这里div是外层的父标签p是内层的子标签浏览器渲染后会在视觉上体现层级。写嵌套时有两个铁律一是闭合必须严格按“先进后出”的顺序先打开的后关闭就像先装进抽屉的袜子后取出来二是不能让两个标签交叉比如divp文本/div/p这种写法浏览器虽然能强行纠错但会导致后续CSS选择器定位出问题。每次写完一段HTML我推荐做一次“闭合检查”从最外层开始一层一层往里核对每个开始标签都能找到对应的结束标签且顺序完全对称。3. 高频基础标签实战写页面最常用的这些你不需要记几百个标签日常开发里反复用到的核心标签不过二十几个。把这些标签的语法和适用场景搞清楚已经能写出一个结构完整的网页。3.1 骨架标签每个页面必备的固定结构任何一个HTML页面都有固定的骨架这套骨架是所有页面的起点!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body 这里是页面内容 /body /html!DOCTYPE html是文档类型声明告诉浏览器“这是一份现代的HTML5文档”写不写这个声明浏览器也能渲染但按旧标准解析会出现很多莫名其妙的兼容问题。html标签是整份文档的根节点langzh-CN声明页面主要语言是中文方便搜索引擎和辅助工具识别。head区域放页面的元信息——编码声明、适配手机屏幕的viewport设置、标题等这些内容不会直接显示在页面上。body区域才是浏览器真正渲染出来的内容。初学者最容易忽略的两行meta charsetUTF-8和meta nameviewport。第一行解决中文乱码问题少了它页面上的中文会变成一堆乱码第二行让页面在手机浏览器上以正确的宽度渲染少了它在手机上字会小到看不清。这两行代码任何一个页面都建议写上没有例外。3.2 标题、段落与文本修饰正文内容的基石是标题标签和段落标签。标题标签从h1到h6共六级重要性依次降低。一个页面最好只有一个h1通常放logo旁或文章主标题然后按层级使用h2到h6来组织正文的章节结构。h1前端学习笔记/h1 h2第一章 HTML基础/h2 h31.1 标签语法/h3 p段落文本从这里开始。strong这段加粗的文字需要强调。/strong/p段落标签p包裹的是普通文字段落。这里必须强调段落之间只需要用一个p再加一个结束标签不要用多个br来制造间距。我看过太多新手写十几个br来拉开两个段落之间的距离结果页面一放大或缩小就乱套。br的正确用法是在同一个段落内强制换行比如写地址或诗歌。文本修饰标签里strong表示重要内容浏览器默认加粗显示em表示强调内容默认斜体显示。注意它们带语义不只是视觉效果。如果只是想单纯加粗、不想改变语义可以用b单纯斜体可以用i但实际开发中b和i用得更谨慎因为语义化才是HTML5的主旋律。3.3 链接、图片、列表让内容之间串起来超链接是互联网的血液没有链接就不叫超文本。链接用a标签承载a hrefhttps://example.com target_blank relnoopener打开新窗口访问/ahref是链接地址target_blank意为在新窗口打开。这里有个隐性坑加了target_blank后最好加上relnoopener。原因涉及到安全不写这个属性时新打开的页面可以通过window.opener拿到原页面的控制权加上它切断了这种反向引用。这不是什么过高要求是业界默认的安全写法。图片标签img是单标签核心属性有src图片地址和alt图片加载失败时显示的替代文字。alt不是可有可无的装饰搜索引擎靠它理解图片内容屏幕阅读器靠它描述图片给视障用户。我见过很多项目连alt都懒得写这是非常不专业的做法。img srcimages/logo.png alt公司LOGO图片路径有相对路径和绝对路径之分。初学者最容易搞混的是相对路径——images/logo.png是相对当前文件的位置去找图片../images/logo.png是往上一级目录再找图片。我建议一开始就定好目录规范HTML文件放根目录图片资源统一放images文件夹JS放js文件夹CSS放css文件夹。这样路径问题会少掉一大半。列表有两大类无序列表ul和有序列表ol列表内的每一项都写在li里ul li学习HTML/li li学习CSS/li li学习JavaScript/li /ul ol li第一步打开编辑器/li li第二步新建HTML文件/li li第三步写入代码并保存/li /ol无序列表适合并列关系的内容有序列表适合有先后顺序的步骤。另外ul和ol的直接子元素只能li而不能是其他标签这是一个很基础但常被违反的嵌套规范。比如有人把div直接塞进ul里当子元素这在HTML5规范里是不合法的会导致后续CSS选择器无法正确匹配。4. HTML5新增标签与语义化少写一堆无意义的divHTML5之前开发者习惯用div搞定一切顶部一块用div导航用div侧边栏用div底部也用div。这样写本身没错但语义全丢了——任何一个人看到一堆没有类名的div都猜不出来这些内容到底承担什么功能。4.1 语义化标签的出现HTML5推出了一批有语义的块级标签让浏览器和人一眼就能识别页面结构header这里是顶部导航区域/header nav这里是导航链接列表/nav main article h2文章标题/h2 p文章内容/p /article aside侧边栏相关推荐/aside /main footer底部版权信息与备案号/footer这张表格列一下最常用的几个标签作用相当于以前的做法header页面或区块的头部div classheadernav导航链接区域div classnavmain页面主体内容一处页面只能有一个div classmainarticle独立的文章或内容块div classarticlesection内容的分区通常带标题div classsectionaside侧边栏或补充信息div classasidefooter底部区域div classfooter用语义化标签不等于所有div都要被替换掉。div依然是通用的块级容器当你找不到更贴切的语义化标签时用div是合理的选择。但能用语义化标签表达结构时就不要偷懒用div这不仅是规范问题对SEO也有实际影响——搜索引擎会更准确地理解页面重点在哪。4.2 音频视频标签不需要插件就能播放HTML5解决了网页播放视频需要依赖Flash或第三方插件的问题提供了原生支持的audio和video标签video controls width640 srcvideo/tutorial.mp4 你的浏览器不支持视频播放请升级浏览器。 /video audio controls srcaudio/background.mp3/audiocontrols属性让浏览器显示原生播放控件。视频标签还常用autoplay自动播放和muted静音属性但注意现代浏览器为了用户体验默认禁止带声音的视频自动播放。如果你想让视频自动播放必须同时声明muted属性这算是一个常见的浏览器策略问题——不是你的代码错了是浏览器不给有声音的自动播放放行。4.3 HTML5文本标签新成员还有几个文本级标签在HTML5里得到正式化虽然看起来不明显但细节里体现专业度span无语义的行内容器纯粹用于包裹文字以便做样式或行为控制。mark高亮标记浏览器默认用黄色背景呈现适合标注搜索引擎命中的关键词。time表示时间可带datetime属性方便机器读取时间信息。这些标签不需要死记硬背遇到具体场景时查一下MDN文档就行。重点是建立“用最贴切的标签描述内容”的意识而不是千篇一律地用div和span解决所有问题。5. 表单标签前端与后端交互的第一道门表单是前端开发里特别重要的模块因为它是用户输入数据的主要通道。前端页面看起来高级不高级表单交互的体验占了很大比重。哪怕你不打算做复杂的交互也必须把表单的基本结构搞明白。5.1 表单控件的基础语法一个完整的表单包含表单容器form和若干表单控件比如输入框、单选、多选、下拉列表、提交按钮form action/api/register methodPOST label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 required label forpassword密码/label input typepassword idpassword namepassword placeholder请输入密码 label forgender-male input typeradio idgender-male namegender valuemale 男 /label label forgender-female input typeradio idgender-female namegender valuefemale 女 /label select namecity idcity option valuebeijing北京/option option valueshanghai上海/option /select textarea nameintro idintro rows4 placeholder一句话介绍自己/textarea button typesubmit提交注册/button /form这里面几个关键点name属性决定了这个控件的数据提交到后端时以什么字段名传递。没写name的表单控件不会参加提交——新手经常漏掉这个属性然后发现后端一直收不到数据。label的for属性与控件id关联实现点击文字聚焦到对应输入框的效果。这不仅仅是交互体验问题还关系到读屏软件的可访问性。required属性让浏览器在提交前做必填校验不同type的输入框还有内置格式校验比如typeemail会自动检查是否符合邮箱格式。5.2 表单在前后端交互里的角色你可能听过“前端传参”这个词。广义上的传参包括通过URL查询参数传递、通过JavaScript发起异步请求传递等但最传统、最稳的路径就是表单提交。用户在输入框里填的内容会被浏览器收集、编码然后跟着action指定的地址和method指定的方式发送给服务器。methodGET时表单数据会拼在URL后面适合搜索、筛选这类不敏感请求methodPOST时数据放在请求体里适合注册、提交内容这类操作。所以表单的method不是随便写的而是依据操作的语义来决定。这些内容看起来和标签语法关系不大但它解释了input上那些属性为什么必须对齐form的整体设计。前端开发不是写孤立的标签标签与标签之间是协作关系——这是从第一节课就该有的认知。5.3 HTML5表单新增的input类型HTML5给input增加了大量新类型让你少写很多JavaScript校验typeemail自动校验邮箱格式。typeurl自动校验URL格式。typenumber只能输入数字配合min和max限制范围。typedate弹出日期选择控件。typerange滑块控件。typecolor颜色选择器。typefile文件上传控件可配合accept属性限制文件类型。这些类型不仅改变了键盘表现在手机上typeemail会唤出带的键盘typenumber会唤出数字键盘还附带了浏览器级别的格式验证。能用原生HTML属性解决的校验就不要去写JavaScript这是我一直坚持的原则——代码越少出bug的概率越低。6. 踩坑实录新手写HTML最常见的6个问题教了这么多年前端我几乎可以把每个新学员犯的错误列出一张固定清单。这些问题只要提前知道就能省下大量排查时间。6.1 常见问题速查表现象可能原因解决方法中文显示成乱码缺少meta charsetUTF-8在head里加上这行声明写了CSS样式不生效标签嵌套交叉或未闭合用浏览器的开发者工具检查元素逐层核对闭合关系图片不显示路径写错或图片名大小写不对检查src路径与磁盘实际路径是否完全一致建议统一用小写文件名点击提交没反应缺少required相关信息或者button没写typebutton在form里默认是typesubmit如不想提交必须写typebutton手机上页面挤成一团缺少viewport声明在head里加上meta nameviewport点击label没聚焦到输入框for属性和输入框id不匹配让二者保持一致6.2 浏览器开发者工具是排查利器你写HTML浏览器是你第一个同事。绝大多数标签问题按F12打开浏览器开发者工具在Elements元素面板里就能看得清清楚楚鼠标悬在任何一行页面都会高亮显示对应区域。如果发现某段内容的结构和你设想的不一样不用靠肉眼猜直接看元素的嵌套视图、看标签闭合线就可以了。一个我常常推荐的排查动作右键页面里出问题的区域选择“检查”看这个元素是不是嵌套在预期的结构里。尤其是CSS样式做出来的视觉效果不符合预期时十有八九是HTML层级出了问题——CSS选择器的定位是基于HTML结构的。6.3 会不会写标签不重要会不会“结构化思考”才重要最后说一个容易被忽略但很重要的认知HTML标签只是形式背后的结构化思考才是核心。一个页面在正式写代码之前先想清楚它的信息层级什么是标题、什么是内容、什么是导航、什么是辅助信息。想清楚结构再落笔写出来的标签自然是对的。这也解释了为什么前端面试越来越爱问语义化和HTML结构设计的问题。你写div写多了会形成“一切皆容器”的思维这个思维对后面的CSS布局和SEO并不友好。从第一节课起养成“为内容选择最恰当的标签”的习惯后面的路会顺畅很多。7. 本节课手写练习建议我给这套“从0到1”系列定了一个原则每节课结束都必须有一个手写练习不能光看。本节课的练习任务很简单仿照下面这个信息架构写一个不依赖任何CSS的纯HTML页面页面顶部是站点名称导航区域有三个超链接主体区域有主标题、两个二级小标题、各配一个段落段落里加一处加粗强调一个可跳转链接页面底部是版权信息写完之后对照检查清单自查有没有!DOCTYPE html有没有meta charset有没有meta viewport所有双标签都闭合了lang有没有写写完后把文件用浏览器打开按F12查看Elements面板观察你写的每个标签在页面结构里如何呈现。在整个“HTML5CSS3从0到1学前端”系列里这一节是唯一一节纯讲“标记”的课。HTML标签本身不产生美感但它决定了你的内容是什么接下来的CSS3转换、缩放方案等内容才会让这些内容真正好看、有动效。地基打得稳上面的装修才贴得牢这是始终不变的经验。
HTML标签语法详解：从零基础到规范实战的必修课
翻开任何一本前端入门书第一课几乎都是HTML标签语法。这个知识点看起来简单但恰恰是后面所有前端内容的地基。很多同学学到后面连div和span都分不清什么时候用甚至写出来的页面在手机上完全不能看回过头来才发现是标签结构一开始就没吃透。这篇笔记是“HTML5CSS3从0到1学前端”系列的第一节专门讲HTML标签语法。我会把标签到底是个什么东西、怎么写才规范、高频标签怎么用、HTML5带来的新变化以及我见过无数新手踩过的坑一次性讲清楚。内容不追求堆砌概念只求让你看完就能上手写一个像样的页面并且知道自己在写什么。如果你是零基础完全没碰过代码跟着走一遍就行如果你已经写过一点页面但感觉基础不牢可以重点看第2章和第6章把容易犯的毛病捋一捋。HTML标签语法的本质是“用标记描述内容”把这个逻辑理顺了后面的CSS和JavaScript学起来会轻松得多。1. HTML到底是什么先搞懂网页的骨架逻辑HTML的全称是HyperText Markup Language中文叫“超文本标记语言”。注意它不是编程语言而是标记语言。这句话很多教材都提过但很少解释清楚标记语言不写逻辑不写判断不做计算它只做一件事——告诉浏览器页面这块内容是什么。1.1 用“盖房子”来理解HTML的工作方式想象你要建一栋房子。HTML是钢筋水泥和墙体结构决定了有几个房间、门在哪里、窗户在哪里CSS是装修——墙面刷什么颜色、地板铺什么材质、家具摆哪里JavaScript则是水电和智能家居让房间的灯可以开关、空调能自动调节温度。三者缺了谁房子都不完整但第一件事永远是先把墙体结构砌起来。你写HTML的时候实际上是在用标签给一段内容下定义。比如“这是一级标题”、“这是一个段落”、“这是一张图片”、“这是一个可点击的链接”。浏览器拿到这些标签后会按照一套默认规则把它们渲染成你在屏幕上看到的样子。也就是说HTML标签是浏览器和你的内容之间的一种约定你把信息按照约定格式呈现出来浏览器就帮你把层级关系、排版顺序理清楚。1.2 浏览器怎么读你的HTML文件一个很简单的事实浏览器从上到下、逐行阅读你写的HTML代码遇到一个标签就按对应规则处理一个。这个过程叫解析。解析过程中浏览器并不关心你的代码风格好不好、缩进是否漂亮它只按语法规则来理解。但你依然要把代码写得整齐因为代码不是写给浏览器看的是写给你自己和将来要接手你代码的人看的。初次接触HTML的人最常有的困惑是“为什么我写了标签页面上不显示标签本身”答案很简单标签是给浏览器的指令指令执行完之后被消费掉了剩下的只有内容。这就像你去餐厅点菜菜单上写的是描述端上桌的才是菜本身。HTML从诞生到现在经历了多个版本目前我们讲的HTML5是新一代标准它在传统HTML基础上增加了大量新标签、新接口和离线存储能力。但核心思想从未改变标签描述内容。这一节里我会带你把最底层的标签语法规则吃透——这是后续所有实战的基础。2. 标签语法三大规则这样才能写出规范的HTML我见过太多新手写HTML页面能出来但代码漏洞百出标签不闭合、属性值不加引号、嵌套乱套。这样写短时间好像没出问题等后面学CSS学JavaScript各种奇奇怪怪的bug就会一股脑冒出来。规范化书写不是洁癖而是职业习惯。2.1 双标签与单标签的区别HTML里绝大多数标签是成对出现的叫“双标签”格式是标签名内容/标签名。开始标签写在前面结束标签在标签名前多一条斜杠。比如段落标签p这是一个段落。/p。中间的结束标签/p告诉浏览器这段内容的“段落身份”到此为止。但也有少量标签没有内容只需要单独一个标签就能发挥作用这叫“单标签”或“空标签”。最常见的如换行标签br、水平线标签hr、图片标签img。在HTML5标准里单标签末尾的斜杠可以写也可以不写比如br和br /都是合法的。我个人建议新手写不斜杠的简洁写法这是HTML5的推荐风格。2.2 标签属性标签配置的关键位置标签本身还不够属性是给标签附加配置信息的方式。属性写在开始标签里格式是“属性名属性值”。比如链接标签的href属性指定跳转地址a hrefhttps://example.com访问示例站点/a。一个标签可以有多个属性用空格隔开。这里有几个新手很容易犯的错属性名和属性值之间必须有等号属性值必须用引号包裹单双引号均可但必须配对。同一个标签里同一个属性只能出现一次重复写会让浏览器取第一个值。有些布尔属性比较特殊比如表单控件的disabled只要写上就表示禁用如input disabled甚至不写属性值也行。我在新人评审代码时经常看到的问题属性值漏写引号或者想写多个名字中间没加空格导致整个属性解析失败。记住属性值和属性值之间靠空格分隔不在引号内的空格会破坏属性结构。2.3 嵌套结构父标签和子标签的关系HTML标签允许层层包裹这种包裹关系叫嵌套。嵌套结构就像衣柜里的大抽屉套小抽屉div里放pp里放a一层套一层。浏览器靠这种嵌套关系理解内容的从属结构。div p这是一段文字里面包含一个 a href#链接/a 指向别处。/p /div这里div是外层的父标签p是内层的子标签浏览器渲染后会在视觉上体现层级。写嵌套时有两个铁律一是闭合必须严格按“先进后出”的顺序先打开的后关闭就像先装进抽屉的袜子后取出来二是不能让两个标签交叉比如divp文本/div/p这种写法浏览器虽然能强行纠错但会导致后续CSS选择器定位出问题。每次写完一段HTML我推荐做一次“闭合检查”从最外层开始一层一层往里核对每个开始标签都能找到对应的结束标签且顺序完全对称。3. 高频基础标签实战写页面最常用的这些你不需要记几百个标签日常开发里反复用到的核心标签不过二十几个。把这些标签的语法和适用场景搞清楚已经能写出一个结构完整的网页。3.1 骨架标签每个页面必备的固定结构任何一个HTML页面都有固定的骨架这套骨架是所有页面的起点!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body 这里是页面内容 /body /html!DOCTYPE html是文档类型声明告诉浏览器“这是一份现代的HTML5文档”写不写这个声明浏览器也能渲染但按旧标准解析会出现很多莫名其妙的兼容问题。html标签是整份文档的根节点langzh-CN声明页面主要语言是中文方便搜索引擎和辅助工具识别。head区域放页面的元信息——编码声明、适配手机屏幕的viewport设置、标题等这些内容不会直接显示在页面上。body区域才是浏览器真正渲染出来的内容。初学者最容易忽略的两行meta charsetUTF-8和meta nameviewport。第一行解决中文乱码问题少了它页面上的中文会变成一堆乱码第二行让页面在手机浏览器上以正确的宽度渲染少了它在手机上字会小到看不清。这两行代码任何一个页面都建议写上没有例外。3.2 标题、段落与文本修饰正文内容的基石是标题标签和段落标签。标题标签从h1到h6共六级重要性依次降低。一个页面最好只有一个h1通常放logo旁或文章主标题然后按层级使用h2到h6来组织正文的章节结构。h1前端学习笔记/h1 h2第一章 HTML基础/h2 h31.1 标签语法/h3 p段落文本从这里开始。strong这段加粗的文字需要强调。/strong/p段落标签p包裹的是普通文字段落。这里必须强调段落之间只需要用一个p再加一个结束标签不要用多个br来制造间距。我看过太多新手写十几个br来拉开两个段落之间的距离结果页面一放大或缩小就乱套。br的正确用法是在同一个段落内强制换行比如写地址或诗歌。文本修饰标签里strong表示重要内容浏览器默认加粗显示em表示强调内容默认斜体显示。注意它们带语义不只是视觉效果。如果只是想单纯加粗、不想改变语义可以用b单纯斜体可以用i但实际开发中b和i用得更谨慎因为语义化才是HTML5的主旋律。3.3 链接、图片、列表让内容之间串起来超链接是互联网的血液没有链接就不叫超文本。链接用a标签承载a hrefhttps://example.com target_blank relnoopener打开新窗口访问/ahref是链接地址target_blank意为在新窗口打开。这里有个隐性坑加了target_blank后最好加上relnoopener。原因涉及到安全不写这个属性时新打开的页面可以通过window.opener拿到原页面的控制权加上它切断了这种反向引用。这不是什么过高要求是业界默认的安全写法。图片标签img是单标签核心属性有src图片地址和alt图片加载失败时显示的替代文字。alt不是可有可无的装饰搜索引擎靠它理解图片内容屏幕阅读器靠它描述图片给视障用户。我见过很多项目连alt都懒得写这是非常不专业的做法。img srcimages/logo.png alt公司LOGO图片路径有相对路径和绝对路径之分。初学者最容易搞混的是相对路径——images/logo.png是相对当前文件的位置去找图片../images/logo.png是往上一级目录再找图片。我建议一开始就定好目录规范HTML文件放根目录图片资源统一放images文件夹JS放js文件夹CSS放css文件夹。这样路径问题会少掉一大半。列表有两大类无序列表ul和有序列表ol列表内的每一项都写在li里ul li学习HTML/li li学习CSS/li li学习JavaScript/li /ul ol li第一步打开编辑器/li li第二步新建HTML文件/li li第三步写入代码并保存/li /ol无序列表适合并列关系的内容有序列表适合有先后顺序的步骤。另外ul和ol的直接子元素只能li而不能是其他标签这是一个很基础但常被违反的嵌套规范。比如有人把div直接塞进ul里当子元素这在HTML5规范里是不合法的会导致后续CSS选择器无法正确匹配。4. HTML5新增标签与语义化少写一堆无意义的divHTML5之前开发者习惯用div搞定一切顶部一块用div导航用div侧边栏用div底部也用div。这样写本身没错但语义全丢了——任何一个人看到一堆没有类名的div都猜不出来这些内容到底承担什么功能。4.1 语义化标签的出现HTML5推出了一批有语义的块级标签让浏览器和人一眼就能识别页面结构header这里是顶部导航区域/header nav这里是导航链接列表/nav main article h2文章标题/h2 p文章内容/p /article aside侧边栏相关推荐/aside /main footer底部版权信息与备案号/footer这张表格列一下最常用的几个标签作用相当于以前的做法header页面或区块的头部div classheadernav导航链接区域div classnavmain页面主体内容一处页面只能有一个div classmainarticle独立的文章或内容块div classarticlesection内容的分区通常带标题div classsectionaside侧边栏或补充信息div classasidefooter底部区域div classfooter用语义化标签不等于所有div都要被替换掉。div依然是通用的块级容器当你找不到更贴切的语义化标签时用div是合理的选择。但能用语义化标签表达结构时就不要偷懒用div这不仅是规范问题对SEO也有实际影响——搜索引擎会更准确地理解页面重点在哪。4.2 音频视频标签不需要插件就能播放HTML5解决了网页播放视频需要依赖Flash或第三方插件的问题提供了原生支持的audio和video标签video controls width640 srcvideo/tutorial.mp4 你的浏览器不支持视频播放请升级浏览器。 /video audio controls srcaudio/background.mp3/audiocontrols属性让浏览器显示原生播放控件。视频标签还常用autoplay自动播放和muted静音属性但注意现代浏览器为了用户体验默认禁止带声音的视频自动播放。如果你想让视频自动播放必须同时声明muted属性这算是一个常见的浏览器策略问题——不是你的代码错了是浏览器不给有声音的自动播放放行。4.3 HTML5文本标签新成员还有几个文本级标签在HTML5里得到正式化虽然看起来不明显但细节里体现专业度span无语义的行内容器纯粹用于包裹文字以便做样式或行为控制。mark高亮标记浏览器默认用黄色背景呈现适合标注搜索引擎命中的关键词。time表示时间可带datetime属性方便机器读取时间信息。这些标签不需要死记硬背遇到具体场景时查一下MDN文档就行。重点是建立“用最贴切的标签描述内容”的意识而不是千篇一律地用div和span解决所有问题。5. 表单标签前端与后端交互的第一道门表单是前端开发里特别重要的模块因为它是用户输入数据的主要通道。前端页面看起来高级不高级表单交互的体验占了很大比重。哪怕你不打算做复杂的交互也必须把表单的基本结构搞明白。5.1 表单控件的基础语法一个完整的表单包含表单容器form和若干表单控件比如输入框、单选、多选、下拉列表、提交按钮form action/api/register methodPOST label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 required label forpassword密码/label input typepassword idpassword namepassword placeholder请输入密码 label forgender-male input typeradio idgender-male namegender valuemale 男 /label label forgender-female input typeradio idgender-female namegender valuefemale 女 /label select namecity idcity option valuebeijing北京/option option valueshanghai上海/option /select textarea nameintro idintro rows4 placeholder一句话介绍自己/textarea button typesubmit提交注册/button /form这里面几个关键点name属性决定了这个控件的数据提交到后端时以什么字段名传递。没写name的表单控件不会参加提交——新手经常漏掉这个属性然后发现后端一直收不到数据。label的for属性与控件id关联实现点击文字聚焦到对应输入框的效果。这不仅仅是交互体验问题还关系到读屏软件的可访问性。required属性让浏览器在提交前做必填校验不同type的输入框还有内置格式校验比如typeemail会自动检查是否符合邮箱格式。5.2 表单在前后端交互里的角色你可能听过“前端传参”这个词。广义上的传参包括通过URL查询参数传递、通过JavaScript发起异步请求传递等但最传统、最稳的路径就是表单提交。用户在输入框里填的内容会被浏览器收集、编码然后跟着action指定的地址和method指定的方式发送给服务器。methodGET时表单数据会拼在URL后面适合搜索、筛选这类不敏感请求methodPOST时数据放在请求体里适合注册、提交内容这类操作。所以表单的method不是随便写的而是依据操作的语义来决定。这些内容看起来和标签语法关系不大但它解释了input上那些属性为什么必须对齐form的整体设计。前端开发不是写孤立的标签标签与标签之间是协作关系——这是从第一节课就该有的认知。5.3 HTML5表单新增的input类型HTML5给input增加了大量新类型让你少写很多JavaScript校验typeemail自动校验邮箱格式。typeurl自动校验URL格式。typenumber只能输入数字配合min和max限制范围。typedate弹出日期选择控件。typerange滑块控件。typecolor颜色选择器。typefile文件上传控件可配合accept属性限制文件类型。这些类型不仅改变了键盘表现在手机上typeemail会唤出带的键盘typenumber会唤出数字键盘还附带了浏览器级别的格式验证。能用原生HTML属性解决的校验就不要去写JavaScript这是我一直坚持的原则——代码越少出bug的概率越低。6. 踩坑实录新手写HTML最常见的6个问题教了这么多年前端我几乎可以把每个新学员犯的错误列出一张固定清单。这些问题只要提前知道就能省下大量排查时间。6.1 常见问题速查表现象可能原因解决方法中文显示成乱码缺少meta charsetUTF-8在head里加上这行声明写了CSS样式不生效标签嵌套交叉或未闭合用浏览器的开发者工具检查元素逐层核对闭合关系图片不显示路径写错或图片名大小写不对检查src路径与磁盘实际路径是否完全一致建议统一用小写文件名点击提交没反应缺少required相关信息或者button没写typebutton在form里默认是typesubmit如不想提交必须写typebutton手机上页面挤成一团缺少viewport声明在head里加上meta nameviewport点击label没聚焦到输入框for属性和输入框id不匹配让二者保持一致6.2 浏览器开发者工具是排查利器你写HTML浏览器是你第一个同事。绝大多数标签问题按F12打开浏览器开发者工具在Elements元素面板里就能看得清清楚楚鼠标悬在任何一行页面都会高亮显示对应区域。如果发现某段内容的结构和你设想的不一样不用靠肉眼猜直接看元素的嵌套视图、看标签闭合线就可以了。一个我常常推荐的排查动作右键页面里出问题的区域选择“检查”看这个元素是不是嵌套在预期的结构里。尤其是CSS样式做出来的视觉效果不符合预期时十有八九是HTML层级出了问题——CSS选择器的定位是基于HTML结构的。6.3 会不会写标签不重要会不会“结构化思考”才重要最后说一个容易被忽略但很重要的认知HTML标签只是形式背后的结构化思考才是核心。一个页面在正式写代码之前先想清楚它的信息层级什么是标题、什么是内容、什么是导航、什么是辅助信息。想清楚结构再落笔写出来的标签自然是对的。这也解释了为什么前端面试越来越爱问语义化和HTML结构设计的问题。你写div写多了会形成“一切皆容器”的思维这个思维对后面的CSS布局和SEO并不友好。从第一节课起养成“为内容选择最恰当的标签”的习惯后面的路会顺畅很多。7. 本节课手写练习建议我给这套“从0到1”系列定了一个原则每节课结束都必须有一个手写练习不能光看。本节课的练习任务很简单仿照下面这个信息架构写一个不依赖任何CSS的纯HTML页面页面顶部是站点名称导航区域有三个超链接主体区域有主标题、两个二级小标题、各配一个段落段落里加一处加粗强调一个可跳转链接页面底部是版权信息写完之后对照检查清单自查有没有!DOCTYPE html有没有meta charset有没有meta viewport所有双标签都闭合了lang有没有写写完后把文件用浏览器打开按F12查看Elements面板观察你写的每个标签在页面结构里如何呈现。在整个“HTML5CSS3从0到1学前端”系列里这一节是唯一一节纯讲“标记”的课。HTML标签本身不产生美感但它决定了你的内容是什么接下来的CSS3转换、缩放方案等内容才会让这些内容真正好看、有动效。地基打得稳上面的装修才贴得牢这是始终不变的经验。
