web基础知识

你每天打开的础知网页，本质上就是础知一堆文本文件。浏览器拿到这些文件，础知按规则渲染出画面。础知就这么简单，础知也就这么复杂。础知

先看一个最基础的础知HTML文档结构：

<!DOCTYPE html> <html> <head> <title>我的页面</title> </head> <body> <h1>你好</h1> <p>这是一段文字</p> </body> </html>

浏览器从上到下读这段代码。<!DOCTYPE html>告诉它“用现代标准模式渲染”，础知不写这行，础知某些浏览器会进入怪异模式，础知盒模型计算方式都不一样——我第一次碰到这个问题时调了半天margin，础知最后发现是础知少了这行声明。

<head>里的础知东西用户看不见，但很重要。础知<title>决定标签页上显示什么字。础知还有<meta charset="UTF-8">，不写它中文可能变乱码。<body>里才是用户实际看到的内容。

标签是语义，不是样式

很多人初学HTML时有个误区：觉得<h1>就是“大字”，<p>就是“段落文字”。其实标签的本意是描述内容的结构含义。搜索引擎爬虫读到<h1>，知道这是页面主标题；读到<nav>，知道这是导航区域。样式的事，交给CSS。

我见过有人用一堆<div>加class拼出整个页面，功能上没问题，但代码可读性极差。语义化标签——<header>、<main>、<article>、<footer>——让结构一目了然。这不是洁癖，是维护成本问题。三个月后你回头改代码，<div class="box-wrapper-inner">和<article>哪个更容易看懂？

CSS：描述“长什么样”

HTML管结构，CSS管表现。三种引入方式：行内style属性、<style>标签、外部.css文件。实际项目里几乎都用第三种，浏览器能缓存，多个页面复用同一套样式。

选择器是CSS的核心概念。元素选择器p { color: gray; }命中所有段落。类选择器.highlight更精准。ID选择器#header优先级最高，但别滥用——ID在页面里必须唯一，写多了后期改起来头疼。

盒模型值得单独说。每个元素都是一个矩形盒子，由content、padding、border、margin四层组成。默认情况下width只算content部分，加了padding和border盒子会变大。box-sizing: border-box让width包含padding和border，布局时省心很多。现在大多数项目直接全局设置这个属性。

JavaScript：让页面动起来

前两者是静态的。JS负责交互——点击按钮弹窗、表单验证、动态加载数据，都靠它。

document.querySelector('button').addEventListener('click', function() {  alert('你点了我'); });

这段代码找到页面上第一个<button>，监听点击事件，触发时弹出提示。querySelector返回匹配的第一个元素，querySelectorAll返回全部。选择器语法和CSS一样，学一套两处通用。

DOM操作是JS和页面沟通的桥梁。浏览器把HTML解析成一棵DOM树，JS可以增删改这棵树上的任何节点。改完了，浏览器重新渲染，用户就看到变化了。

HTTP：文件怎么从服务器到浏览器

你在地址栏输入网址，浏览器向服务器发HTTP请求。服务器返回HTML文件，浏览器解析，发现里面引用了CSS和JS文件，再发请求去拿。图片、字体同理。一个页面加载几十个请求很正常。

请求方法里GET和POST最常见。GET用来获取资源，参数拼在URL里。POST用来提交数据，参数放在请求体里。状态码200表示成功，404表示找不到资源，500表示服务器出错。这些数字不是随便定的，每个都有明确含义。

整个Web就是这三样东西加上网络协议搭起来的。HTML定结构，CSS定样式，JS定行为，HTTP负责传输。听起来不多，但组合出来的东西——你现在看的这个页面就是其中之一。

(责任编辑：时尚)