4月8日 web学习笔记

一、HTML
HTML 基础结构

：声明文档类型。 ：根元素。 ：包含元数据（如

欢迎学习 Web 开发！

常用标签 标题：

到

。 段落：

。 列表：

（无序列表）、
（有序列表）、
1. （列表项）。 链接：链接文本。 图片：。 表单
   ：创建表单。 表单元素：（文本框、按钮等）、（下拉菜单）、（多行文本框）。 示例： HTML <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <input type="submit" value="提交"> </form> 二、CSS（层叠样式表） CSS 基础 选择器：element（元素选择器）、.class（类选择器）、#id（ID 选择器）。 样式规则：属性: 值;。 示例： css <p>body {<br> font-family: Arial, sans-serif;<br> background-color: #f0f0f0;<br> }<br> .container {<br> width: 80%;<br> margin: 0 auto;<br> }<br> 布局<br> 盒模型：margin、padding、border、width、height。<br> Flexbox：灵活的布局方式。<br> css</p> <p>.container {<br> display: flex;<br> justify-content: space-between;<br> }<br> Grid 布局：用于复杂网格布局。<br> 响应式设计<br> 媒体查询：@media。<br> 示例：<br> css</p> <p>@media (max-width: 600px) {<br> .container {<br> flex-direction: column;<br> }<br> }<br> 三、JavaScript（脚本语言）<br> JavaScript 基础<br> 变量：let、const、var。<br> 数据类型：string、number、boolean、object、array。<br> 函数：function functionName() { ... } 或箭头函数 () => {}。<br> 示例：<br> JavaScript</p> <p>let name = "张三";<br> const age = 25;<br> function greet() {<br> console.log("你好，" + name);<br> }<br> greet(); // 输出：你好，张三<br> DOM 操作<br> 获取元素：document.getElementById()、document.querySelector()。<br> 修改元素内容：textContent、innerHTML。<br> 示例：<br> JavaScript<br> const heading = document.querySelector('h1');<br> heading.textContent = "新的标题";<br> 事件处理<br> 常见事件：click、mouseover、keydown。<br> 示例：<br> JavaScript</p> <p>const button = document.querySelector('button');<br> button.addEventListener('click', function() {<br> alert('按钮被点击了！');<br> });<br> 四、实战练习<br> 创建一个简单网页<br> 使用 HTML 创建一个包含标题、段落和图片的页面。<br> 使用 CSS 设置页面样式（如背景色、字体、边距）。<br> 使用 JavaScript 添加一个按钮，点击后弹出提示框。<br> 响应式网页<br> 使用媒体查询实现一个简单的响应式布局。<br> 在不同设备上测试网页效果。<br> 五、总结<br> 今天学习了 HTML 的基础结构和常用标签。<br> 掌握了 CSS 的选择器和布局方法。<br> 学习了 JavaScript 的基本语法和 DOM 操作。<br> 通过实战练习巩固了所学知识。</p>