评分

了解HTML CSS JS

2个月前发布

50

以下是常见的 HTML、CSS 和 JavaScript 的标签、语句、函数等，整理成表格形式，方便你查阅和使用。

1. HTML 常见标签

标签	说明	示例
`<html>`	定义HTML文档的根元素	`<html lang="en">`
`<head>`	包含文档的元数据（如标题、链接、脚本等）	`<head><title>Page Title</title></head>`
`<title>`	定义网页的标题	`<title>My Web Page</title>`
`<body>`	定义网页的主体内容	`<body><h1>Welcome</h1></body>`
`<h1>` – `<h6>`	定义标题（`<h1>`最大，`<h6>`最小）	`<h1>Main Title</h1>`
`<p>`	定义段落	`<p>This is a paragraph.</p>`
`<a>`	定义超链接	`<a href="https://www.example.com">Link</a>`
`<img>`	定义图像	`<img src="image.jpg" alt="Image description" />`
`<ul>`	定义无序列表	`<ul><li>Item 1</li><li>Item 2</li></ul>`
`<ol>`	定义有序列表	`<ol><li>First</li><li>Second</li></ol>`
`<li>`	定义列表项	`<li>List item</li>`
`<table>`	定义表格	`<table><tr><th>Header</th><td>Data</td></tr></table>`
`<tr>`	定义表格行	`<tr><td>Row 1</td></tr>`
`<td>`	定义表格数据单元格	`<td>Data</td>`
`<th>`	定义表格头单元格	`<th>Header</th>`
`<form>`	定义表单	`<form action="/submit" method="post"></form>`
`<input>`	定义输入控件	`<input type="text" name="name">`
`<button>`	定义按钮	`<button onclick="alert('Hello')">Click me</button>`

2. CSS 常见属性和语法

属性	说明	示例
`color`	设置文本颜色	`color: red;`
`background`	设置背景颜色或图像	`background: #f0f0f0;`
`font-size`	设置字体大小	`font-size: 16px;`
`font-family`	设置字体类型	`font-family: Arial, sans-serif;`
`margin`	设置外边距	`margin: 20px;`
`padding`	设置内边距	`padding: 10px;`
`border`	设置边框	`border: 1px solid #000;`
`width`	设置元素宽度	`width: 100%;`
`height`	设置元素高度	`height: 200px;`
`display`	设置元素的显示方式（block、inline、flex等）	`display: block;`
`position`	设置元素的定位方式（static、relative、absolute等）	`position: absolute; top: 10px; left: 20px;`
`float`	设置元素的浮动方式	`float: left;`
`text-align`	设置文本对齐方式	`text-align: center;`
`line-height`	设置文本行高	`line-height: 1.5;`
`z-index`	设置元素的层级（数值越大越靠前）	`z-index: 10;`

3. JavaScript 常见语句、函数和事件

项目	说明	示例
`alert()`	弹出提示框	`alert("Hello World!");`
`console.log()`	输出信息到控制台	`console.log("Hello, World!");`
`document.getElementById()`	获取页面元素，通过ID选择元素	`let element = document.getElementById("myElement");`
`document.querySelector()`	获取页面元素，通过CSS选择器选择元素	`let element = document.querySelector(".myClass");`
`addEventListener()`	绑定事件处理器	`element.addEventListener("click", function() { alert("Clicked"); });`
`setTimeout()`	延迟执行代码	`setTimeout(() => { alert("Delayed!"); }, 1000);`
`setInterval()`	定时执行代码	`setInterval(() => { console.log("Repeated!"); }, 2000);`
`parseInt()`	将字符串转换为整数	`let num = parseInt("123");`
`parseFloat()`	将字符串转换为浮点数	`let num = parseFloat("123.45");`
`Math.random()`	生成一个0到1之间的随机数	`let randomNum = Math.random();`
`Math.floor()`	向下取整（返回最接近的整数）	`let number = Math.floor(4.7);`
`Math.ceil()`	向上取整（返回最接近的整数）	`let number = Math.ceil(4.2);`
`if...else`	条件语句	`if (x > 5) { alert("Greater than 5"); } else { alert("Less than 5"); }`
`for`	循环语句	`for (let i = 0; i < 5; i++) { console.log(i); }`
`while`	循环语句	`while (i < 5) { console.log(i); i++; }`
`function`	定义函数	`function greet(name) { return "Hello " + name; }`
`return`	返回值	`function add(a, b) { return a + b; }`
`try...catch`	异常处理语句	`try { let result = riskyFunction(); } catch (e) { console.error(e); }`

4. HTML 常见表单元素

标签	说明	示例
`<input>`	定义输入控件	`<input type="text" name="username">`
`<textarea>`	定义多行文本输入框	`<textarea name="message"></textarea>`
`<select>`	定义下拉菜单	`<select name="cars"><option value="volvo">Volvo</option></select>`
`<option>`	定义下拉菜单中的选项	`<option value="volvo">Volvo</option>`
`<button>`	定义按钮	`<button type="submit">Submit</button>`
`<label>`	定义表单控件的标签	`<label for="username">Username:</label><input type="text" id="username">`

5. 常见事件

事件	说明	示例
`click`	用户点击元素时触发	`element.addEventListener("click", function() { alert("Clicked!"); });`
`submit`	表单提交时触发	`form.addEventListener("submit", function(event) { event.preventDefault(); });`
`keydown`	按键按下时触发	`input.addEventListener("keydown", function(event) { console.log(event.key); });`
`mouseenter`	鼠标移入元素时触发	`element.addEventListener("mouseenter", function() { console.log("Mouse entered!"); });`
`mouseout`	鼠标移出元素时触发	`element.addEventListener("mouseout", function() { console.log("Mouse left!"); });`

总结

这份表格涵盖了常见的 HTML 标签、CSS 属性、JavaScript 语句和函数。

评分

欢迎为Ta评分