👉博__主👈:米码收割机
👉技__能👈:C++/Python语言
👉公众号👈:测试开发自动化【获取源码+商业合作】
👉荣__誉👈:阿里云博客专家博主、51CTO技术博主
👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。
系列文章目录
目录
- 系列文章目录
- HTML (HyperText Markup Language)
- 标签与属性
- 表单
- CSS (Cascading Style Sheets)
- 选择器
- 盒模型
- JavaScript
- 数据类型
- 函数
- 事件
- DOM (Document Object Model)
- <center>本期好书推荐
HTML (HyperText Markup Language)
标签与属性
HTML 使用标签来定义内容。每个标签通常都有一个开始标签和结束标签。例如,<p>
是段落标签的开始标签,</p>
是其结束标签。
<p>这是一个段落。</p>
许多标签还可以有属性,属性为标签提供额外的信息。例如,<a>
标签可以有 href
属性指定链接地址。
<a href="https://www.example.com">访问 example.com</a>
表单
HTML 中的表单允许用户输入数据:
<form action="/submit" method="post"><input type="text" name="username" placeholder="输入用户名"><input type="password" name="password" placeholder="输入密码"><input type="submit" value="登录">
</form>
CSS (Cascading Style Sheets)
选择器
CSS 使用选择器来确定哪些元素应该应用哪些样式:
- 元素选择器:如
h1
,p
,a
等。 - 类选择器:以
.
开头,如.highlight
。 - ID 选择器:以
#
开头,如#header
。
盒模型
每个 HTML 元素都可以视为一个盒子,并且有 padding
, border
, margin
和 content
。这被称为 CSS 盒模型。
JavaScript
数据类型
JavaScript 中有几种基本的数据类型:
- Number: 如 123, 12.3
- String: 如 “Hello”, ‘World’
- Boolean:
true
或false
- Object: 如
{ name: 'John', age: 30 }
- Array: 如
[1, 2, 3]
函数
函数是一组代码,可以接受参数并返回一个值:
function add(x, y) {return x + y;
}
事件
JavaScript 可以响应各种事件,例如点击、键盘按键、鼠标移动等。这使得网页具有交互性。
document.getElementById('myButton').addEventListener('click', function() {alert('按钮被点击了!');
});
DOM (Document Object Model)
DOM 是一个编程接口,它表示页面的结构。通过 DOM,JavaScript 可以访问和修改页面内容。
// 获取一个元素
var elem = document.getElementById('myDiv');// 修改元素内容
elem.innerHTML = '新的内容';
本期好书推荐 《HTML5+CSS3+JavaScript从入门到精通(微课精编版)(第2版)(清华社“视频大讲堂"大系 网络开发视频大讲堂)》
京东:https://item.jd.com/13524363.html
当当:http://product.dangdang.com/29482128.html