关于 HTML、CSS 和 JavaScript 在网页设计方面的介绍:
HTML(超文本标记语言 - HyperText Markup Language)
- 结构基础:HTML 是网页内容的骨架。它通过一系列的标签来定义网页中的各种元素,比如
<html>
标签是整个页面的根标签,<head>
标签用于包含页面的元信息(如标题、样式表引用、脚本引用等),<body>
标签则容纳了所有在浏览器中可见的内容。 - 常用标签示例:
- 文本相关:
<p>
标签用于定义段落,<h1>
-<h6>
标签用于不同级别的标题。例如:<h1>这是一级标题</h1> <p>这是一段文本内容。</p>
- 链接:
<a>
标签用于创建超链接,可以链接到其他网页、文件或页面内的特定位置。如<a href="https://www.example.com">访问示例网站</a>
。 - 图像:
<img>
标签用于在网页中显示图像,通过src
属性指定图像的来源,如<img src="image.jpg" alt="这是一张图片">
,alt
属性用于在图像无法显示时提供替代文本。
- 文本相关:
CSS(层叠样式表 - Cascading Style Sheets)
- 样式定义:CSS 用于控制网页的外观。它可以设置 HTML 元素的颜色、字体、大小、布局等各种样式属性。可以通过多种方式将 CSS 应用到 HTML 中,如内联样式(直接在 HTML 标签内使用
style
属性)、内部样式表(在 HTML 文件的<head>
部分使用<style>
标签)和外部样式表(通过<link>
标签引用独立的.css 文件)。 - 样式规则示例:
- 选择器和属性:
p {color: red; /* 将段落文本颜色设置为红色 */font-size: 16px; /* 设置字体大小为 16 像素 */ } h1 {text-align: center; /* 将一级标题文本居中对齐 */ }
- 盒模型与布局:CSS 中的盒模型概念对于布局至关重要。每个 HTML 元素都可以看作一个盒子,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。例如:
div {
- 选择器和属性: