北京
分享至
每个网页背后都有一套看不见的骨架。HTML（超文本标记语言）就是这个骨架——在CSS让它变美、JavaScript让它动起来之前，HTML先定义了结构。
当你在浏览器输入网址，发生了什么？浏览器向网页服务器发送请求，服务器返回一个HTML文件。浏览器读取这个文件，把代码翻译成你看到的页面。返回HTML的服务器，就叫网页服务器。
每个HTML文件都有固定开场。在VS Code里输入!再按Tab，自动生成这个模板：
Document
告诉浏览器这是HTML5文档。lang="en"告诉搜索引擎和屏幕阅读器页面语言。放页面信息（标题、元数据、CSS链接），放所有可见内容。
标题分六级。
最常用，很少出现。每页只用一次——这对搜索引擎优化（SEO）很重要，搜索引擎靠标题理解内容结构。
容器用来组织内容。
是块级容器，占满整宽、另起一行。是行内容器，嵌在文字里不折行。
专门放段落文字。
保留原始格式和空格，放代码片段，用于大段引用。
文字样式有讲究。和是语义标签，告诉浏览器和搜索引擎这里重要。和只是视觉加粗斜体。优先用替代，用替代。
其他实用标签：下划线、高亮、小字、删除线、插入线。和用于化学式（H₂O）和数学公式（x²）。标注具体日期，对SEO友好。
列表分两种。有序列表用
- 包裹
- ，可通过
type和start属性控制样式。无序列表用，定义列表用配（术语）和（解释）。
链接用，图片用。alt文字在图片加载失败时显示，也对屏幕阅读器至关重要。表格由
、（行）、（表头）、（单元格）组成，现代网页中多用于展示数据而非布局。
表单是用户交互核心。
包裹输入元素，类型丰富：text、password、email、number、date、checkbox、radio、file等。关联说明文字，做下拉菜单，</code>多行文本。required属性强制填写，placeholder显示提示文字。
语义化HTML5标签让结构更清晰：页头、导航、主体、独立文章、章节、侧边栏、页脚。这些标签本身不带样式，但让代码可读性大增，也对SEO和辅助技术更友好。
多媒体嵌入：和直接播放媒体，controls属性显示播放控件，autoplay自动播放（慎用），loop循环播放。</code>嵌入其他网页，常见于地图和视频嵌入。<code><canvas></code>提供绘图API，JavaScript可在上面画图形、做动画、甚至做游戏。</p><p><img src="http://dingyue.ws.126.net/2026/0525/c450eb06j00tfk029000md000m800b4p.jpg"></p><p>全局属性所有标签通用。<code>id</code>唯一标识元素，<code>class</code>归类复用样式，<code>style</code>内联CSS（不推荐），<code>title</code>鼠标悬停提示，<code>data-*</code>自定义数据供JS读取。<code>hidden</code>隐藏元素，<code>contenteditable</code>让用户直接编辑内容。</p><p>HTML注释写法：<code><!-- 这是注释 --></code>。浏览器忽略注释，但开发者用它解释代码、临时禁用代码块、或协作沟通。良好的注释习惯是专业开发的标志。</p><p>字符实体解决特殊符号显示。空格用<code> </code>，小于号<code><</code>，大于号<code>></code>，和号<code>&</code>，引号<code>"</code>，版权符号<code>©</code>。直接用<code><</code>会被误认为标签开头，必须用实体转义。</p><p>文件路径分绝对和相对。绝对路径含完整域名，如<code>https://example.com/image.jpg</code>。相对路径从当前文件出发：<code>image.jpg</code>（同目录）、<code>images/photo.jpg</code>（子目录）、<code>../style.css</code>（上级目录）。开发本地项目时，相对路径更灵活。</p><p>元数据在<code><head></code>里默默工作。<code><meta charset="UTF-8"></code>指定字符编码，避免中文乱码。<code><meta name="description" content="页面描述"></code>显示在搜索结果摘要。<code><meta name="keywords" content="关键词"></code>曾被SEO重视，现已被搜索引擎淡化。<code><link rel="stylesheet" href="style.css"></code>引入外部CSS，<code><script src="app.js"></script></code>引入JavaScript。</p><p>响应式设计从HTML开始。<code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>让页面适配手机屏幕。<code>width=device-width</code>让视口宽度等于设备宽度，<code>initial-scale=1.0</code>初始缩放比例100%。没有这行，手机浏览会强制缩放，体验糟糕。</p><p>可访问性（A11y）是专业开发的底线。<code>alt</code>属性描述图片内容，<code>aria-label</code>和<code>aria-describedby</code>为屏幕阅读器补充信息。表单元素必须关联<code><label></code>，键盘导航要逻辑清晰。语义化标签本身就在提升可访问性——<code><button></code>比<code><div onclick></code>更易被辅助技术识别。</p><p>HTML不是编程语言，是标记语言。它没有逻辑判断、循环变量，只是安静地描述内容结构。但这份"安静"是网页的根基。结构写得好，CSS事半功倍，JavaScript有处可依。结构混乱，再炫的效果也是空中楼阁。</p><p>验证HTML规范用W3C验证器（validator.w3.org）。红色错误必须修，黄色警告尽量改。干净的HTML像整洁的办公桌——你自己舒服，来帮忙的人也舒服。</p><p>从1993年第一版到如今的HTML5，这门语言一直在进化。但核心没变：用标签包裹内容，让机器理解，让人类阅读。掌握这几十个常用标签，你就拿到了网页开发的入场券。剩下的CSS和JavaScript，都是在这副骨架上长出的血肉。</p>
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
