当前位置: 首页 > article >正文

HTML、CSS与JavaScript基础

HTML:网页的骨架

互联网起源与HTML概述

互联网起源于1960年代的美国,HTML(HyperText Markup Language)作为构建网页的标准语言,自1990年代起便成为互联网信息展示的基石。

HTML文档结构

一个标准的HTML文档包含<!DOCTYPE html>文档类型声明、<html>根控制标记、<head>头控制标记和<body>网页显示区域。其中,<title>标签定义了网页的标题。

 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

编写HTML文件的注意事项

编写HTML时,需要注意代码的语义化、结构的清晰性以及对搜索引擎的友好性。

段落与文字标签

  • p标签用于定义段落。
  • <h1><h6>标签用于定义标题,&nbsp用于插入空格。
 

html

<p>这是一个段落。</p>
<h1>最大的标题</h1>
<h6>最小的标题</h6>

图片与超链接标签

  • <img src="" alt="">用于插入图片,其中src属性指定图片URL,alt属性提供替代文本。
  • <a href="">内容</a>定义超链接,href属性指定链接地址。
 

html

<img src="image.jpg" alt="示例图片">
<a href="https://www.example.com">访问示例网站</a>

列表与表格标签

  • 无序列表使用<ul>标签,有序列表使用<ol>标签。
  • 表格由<tr>行、<th>表头单元格、<td>正文单元格等组成,<thead><tbody><tfoot>分别定义表格的页眉、主体和页脚。
 

html

<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

<ol>
    <li>项目1</li>
    <li>项目2</li>
</ol>

<table>
    <thead>
        <tr><th>表头1</th><th>表头2</th></tr>
    </thead>
    <tbody>
        <tr><td>单元格1</td><td>单元格2</td></tr>
    </tbody>
</table>

表单标签

表单用于收集用户输入,<form>标签定义表单,action属性指定数据提交地址,method属性定义数据提交方式。

 

html

<form action="/submit-form" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

HTML5新增标签和属性

HTML5引入了新的表单控件、<canvas>标签用于绘图、媒体标签如<audio><video>用于嵌入多媒体内容。

 

html

<canvas id="myCanvas" width="200" height="100"></canvas>
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

CSS:网页的装扮

CSS语法与选择器

CSS通过选择器匹配HTML元素,并应用样式规则。样式可以内嵌于HTML标签、内部样式或外部样式表中。

 

html

<!-- 内嵌样式 -->
<p style="color: red;">This is a red paragraph.</p>

<!-- 内部样式 -->
<head>
    <style>
        .red-text {
            color: red;
        }
    </style>
</head>
<body>
    <p class="red-text">This is a red paragraph.</p>
</body>

<!-- 外部样式 -->
<link rel="stylesheet" href="styles.css">

CSS样式

CSS控制网页的视觉表现,包括背景、文本、链接、列表、表格等。

 

css

body {
    background-color: #f8f8f8;
    font-family: Arial, sans-serif;
}

.red-text {
    color: red;
}

盒子模型

CSS的盒子模型包括内容、内边距、边框和外边距,控制元素的大小和布局。

 

css

.box {
    border: 2px solid black;
    padding: 20px;
    margin: 20px;
}

CSS定位

CSS提供相对定位、绝对定位、固定定位和浮动,用于精确控制元素的位置。

 

css

.relative {
    position: relative;
    top: 10px;
}

.absolute {
    position: absolute;
    right: 0;
    bottom: 0;
}

.fixed {
    position: fixed;
    left: 0;
    top: 0;
}

.float-left {
    float: left;
}

CSS新增属性

随着CSS3的推出,新增了动画、渐变、阴影等多种视觉效果的属性。

 

css

.element {
    transition: all 0.5s ease;
}

.element:hover {
    background-color: #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

JavaScript:网页的动态灵魂

JavaScript特点

JavaScript是一种解释型、嵌入在HTML中、跨平台的脚本语言,基于对象和事件驱动。

基本语法与变量

JavaScript使用变量存储数据,支持多种数据类型,包括数值型、布尔型、字符型、对象和数组。

 

javascript

var message = "Hello, World!";
console.log(message);

函数与运算符

JavaScript通过函数封装可复用的代码块,运算符用于执行数学和逻辑运算。

 

javascript

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice"));

流程控制

JavaScript提供条件语句和循环结构,控制程序的执行流程。

 

javascript

if (condition) {
    // Code to execute if the condition is true
} else {
    // Code to execute if the condition is false
}

for (var i = 0; i < 5; i++) {
    console.log(i);
}

JS对象

JavaScript内置了多种对象,如StringArrayDate等,以及WindowDocument对象用于操作浏览器窗口和文档。

 

javascript

var stringObj = new String("Hello");
var arrayObj = [1, 2, 3, 4];
var dateObj = new Date();

document.getElementById("demo").innerHTML = "Hello, World!";

结语

Web前端开发是一个不断进化的领域,HTML、CSS和JavaScript三者相辅相成,共同构建了丰富多彩的网络世界。掌握这些基础知识,将为你打开Web开发的大门,让你能够创造出令人惊叹的网页应用。


http://www.kler.cn/a/400143.html

相关文章:

  • Nginx 使用入门介绍
  • IDEA旗舰版编辑器器快速⼊门(笔记)
  • 3. langgraph中的react agent使用 (在react agent添加系统提示)
  • RK3568平台开发系列讲解(platform虚拟总线驱动篇)实验:点亮一个LED
  • Python 神经网络项目常用语法
  • 基于Canny边缘检测和轮廓检测
  • 云原生周刊:Kubernetes v1.32 要来了
  • golang开源框架:go开源验证框架validator
  • leetcode 面试150之 Z 字形变换
  • Solana应用开发常见技术栈
  • 高效服务器管理新选择:CasaOS轻NAS系统部署1Panel面板并实现远程访问
  • 如何用Excel批量提取文件夹内所有文件名?两种简单方法推荐
  • sql专场练习(二)(11-15)
  • Springboot之登录模块探索(含Token,验证码,网络安全等知识)
  • 微信小程序组件之swiper介绍
  • GeeRPC第一天 服务端与消息编码(1)
  • JAVA学习-练习试用Java实现“判断星期的英文缩写”
  • 汽车资讯新篇章:Spring Boot技术启航
  • 241118学习日志——[CSDIY] [ByteDance] 后端训练营 [06]
  • 除了电商平台,还有哪些网站适合进行数据爬取?
  • spring web项目中常用的注解
  • 语义通信论文略读(十四)线性编码和传输的优化+边缘服务器执行CV任务
  • C 语言 【单链表】
  • 探索DDCA:深入理解内存架构、子系统与内存控制器
  • Python设计模式详解之2 —— 工厂模式
  • 多模块集成swagger(knife4j-spring-boot-starter)