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开发的大门,让你能够创造出令人惊叹的网页应用。

相关推荐
csgo打的菜又爱玩1 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
gerrgwg3 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
开心不就得了5 小时前
自定义脚手架
前端·javascript
没事多睡觉6667 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
excel8 小时前
Vue3 EffectScope 源码解析与理解
前端·javascript·面试
细节控菜鸡8 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果
开发语言·javascript·arcgis
祈祷苍天赐我java之术9 小时前
Redis 有序集合解析
java·前端·windows·redis·缓存·bootstrap·html
心.c11 小时前
一套完整的前端“白屏”问题分析与解决方案(性能优化)
前端·javascript·性能优化·html
俺会hello我的11 小时前
舒尔特方格开源
前端·javascript·开源
lbh11 小时前
Chrome DevTools 详解(二):Console 面板
前端·javascript·浏览器