【前端设计】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版)(清华社“视频大讲堂"大系 网络开发视频大讲堂)》


相关文章
|
3天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
16 0
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
57 1
前端JS发起的请求能暂停吗?
|
3天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
7 1
|
3天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
4天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
14 0
|
13天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
20 2
|
30天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
1月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
48 1
|
1月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
13 0

热门文章

最新文章