HTML
标签未正确闭合
例如，忘记闭合<div>标签。在 HTML 中，大多数标签都需要有一个开始标签和一个结束标签，如<div>内容</div>。如果忘记添加结束标签，可能会导致页面布局混乱或内容显示异常。
对于自闭合标签，如<img>（<img src="image.jpg" alt="图片">），如果错误地添加了一个额外的结束标签（如<img src="image.jpg" alt="图片"></img>），在某些浏览器中可能会导致解析错误。
标签嵌套错误
HTML 标签有严格的嵌套规则。例如，不能将块级标签（如<p>）直接嵌套在<a>标签内部。正确的做法是将文本或其他内联元素放在<a>标签内，如<a href="#"><p>这是错误的嵌套</p></a>（错误），应该是<a href="#">这是正确的嵌套，<span>可以包含其他内联元素</span></a>。
滥用<br>和<hr>标签
初学者有时会过度使用<br>（换行）标签来控制文本的排版，而不是使用 CSS 的margin和padding等属性来进行布局。同样，<hr>（水平分隔线）标签也应该谨慎使用，它主要用于在语义上分隔不同的内容部分，而不是用于装饰目的。
忽略 HTML 文档结构
没有正确使用<html>、<head>和<body>标签来构建文档的基本框架。例如，将所有的内容都放在<head>部分或者忘记包含<body>标签，这会导致浏览器无法正确地渲染页面。
属性值未加引号
在 HTML 标签的属性中，属性值应该用引号括起来。例如，<a href = http://example.com>链接</a>（错误），正确的是<a href="http://example.com">链接</a>。虽然有些浏览器可能会容错，但这是不符合规范的，可能会在某些情况下导致问题。
css
选择器拼写错误
当编写 CSS 选择器时，很容易出现拼写错误，如将类名或 ID 名写错。例如，定义了一个类名为.header的样式，但在 HTML 中使用了<div class="heade">（错误），这样样式就无法正确应用。
对于复杂的选择器组合，如后代选择器（div p）或伪类选择器（:hover），可能会忘记中间的空格或者冒号等符号，导致选择器无法正常工作。
单位遗漏或错误
在设置 CSS 属性的值时，忘记添加单位或者使用了错误的单位。例如，设置width: 100（错误）而没有指定是像素（px）还是其他单位，或者将font - size设置为不适当的单位组合，如em和px混用不当。
样式覆盖问题
没有正确理解 CSS 的优先级规则。例如，在一个外部 CSS 文件中定义了一个元素的颜色为蓝色，然后在内部样式表中又定义了该元素的颜色为红色，但由于优先级的原因（外部样式表可能具有较低优先级），颜色可能没有按照预期变为红色，这会让初学者感到困惑。
另外，过度使用!important来强制应用样式虽然可以解决一时的样式冲突，但会导致样式难以维护和修改，并且可能会引发其他意想不到的问题。
盒模型理解错误
对 CSS 盒模型（包括内容、内边距、边框和外边距）的理解不透彻。例如，在设置元素的宽度和高度时，没有考虑到内边距和边框的影响，导致元素的实际大小超出预期。或者在使用box - sizing属性时，不理解content - box和border - box的区别，从而出现布局问题。
浮动和清除浮动问题
当使用浮动（float）属性来布局元素时，没有正确地清除浮动。例如，多个浮动的元素可能会导致父元素的高度塌陷，使后续的布局出现混乱。初学者可能不知道如何使用clear属性或者其他清除浮动的技巧（如使用伪元素）来解决这个问题。