【前端设计】HTML+CSS+JavaScript基本特性

简介: 【前端设计】HTML+CSS+JavaScript基本特性


?博__主?:米码收割机

?技__能?:C++/Python语言

?公众号?:测试开发自动化【获取源码+商业合作】

?荣__誉?:阿里云博客专家博主、51CTO技术博主

?专__注?:专注主流机器人、人工智能等相关领域的开发、测试技术。



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, margincontent。这被称为 CSS 盒模型。


JavaScript

数据类型

JavaScript 中有几种基本的数据类型:

  • Number: 如 123, 12.3
  • String: 如 “Hello”, ‘World’
  • Boolean: truefalse
  • 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版)(清华社“视频大讲堂"大系 网络开发视频大讲堂)》


相关文章
|
2天前
|
机器学习/深度学习 搜索推荐 Android开发
【专栏】构建高效安卓用户界面的指南,分为设计原则和技巧两部分
【4月更文挑战第27天】本文介绍了构建高效安卓用户界面的指南,分为设计原则和技巧两部分。设计原则包括一致性、简洁性和可访问性,强调遵循安卓系统规范,保持界面简洁,考虑不同用户需求。技巧方面,建议合理布局、优化图标和图片、运用动画效果、提供个性化设置及优化性能。随着技术发展,未来安卓应用开发将融合更多智能化和个性化元素,开发者需持续学习新技术,提升用户体验。
|
2天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
2天前
|
算法 程序员 C语言
C++设计哲学:构建高效和灵活代码的艺术
C++设计哲学:构建高效和灵活代码的艺术
63 1
|
7月前
|
JSON 数据可视化 JavaScript
OneCode 基于“真实代码”代码的建模设计,无缝整合二次开发
在很多优秀的低代码平台中都支持了本地代码导出的设计,方便开发者二次集成,但能够导出的前提是已经通过低代码平台进行了初步的数据建模,界面绘制等基础性的操作。这些导出的代码虽然很大程度上减轻了开发者的代码量,但在项目的迭代过程中,遇到数据或需求变更。这些代码就又会成为开发者巨大的负担,重新由低代码平台建模会产生代码上的冲突无法解决,而重新用code编写这一步代码则又面临手工代码与“机器代码”的整合问题。而更为致命的问题是项目上线后,当直接用户希望通过低代码工具进行维护系统时更是“闪崩”。 本文将结合OneCode的底层编译原理来讲解 OneCode基于真实代码的建模解决方案。
|
算法
第七章 多用模板专注设计(上)
第七章 多用模板专注设计
70 0
第七章 多用模板专注设计(上)
|
搜索推荐 开发者
一对一直播系统开发,选择哪种开发方式更有利
一对一直播系统开发,选择哪种开发方式更有利
|
JSON 移动开发 前端开发
前端架构设计
最近在拜读一本《前端架构设计》的书,该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程,都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。
|
移动开发 运维 前端开发
2013 开发与设计交汇之年
下图展示了2013年GitHub每个月新建的CSS仓库的数目。
118 0
2013 开发与设计交汇之年
|
UED
五个案例简述Web设计原则:通用一致
《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南,目的是提升设计与开发的效率及质量,为广大用户提供优质的用户体验。 Web内容数以千亿涵盖生活各个方面,除了稳定流畅的浏览,优质的内容及服务,也需要高质量的交互及视觉体验。
889 0
http://www.vxiaotou.com