HTML5 主流制作网页的标记语言(1)

LWS大蛇

于 2024-09-05 21:18:49 发布

阅读量252

点赞数 6

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/daoliuweisong12/article/details/141941037

版权

HTML（HyperText Markup Language）教程，结合CSS（Cascading Style Sheets）的学习，是网页开发的基础。以下是一个综合性的HTML与CSS教程概要，并附带实战演示，帮助初学者快速上手。

一、HTML基础

1. HTML简介

HTML是一种用于创建网页的标准标记语言。它不是编程语言，而是由一系列元素组成的标记语言，这些元素告诉浏览器如何显示页面上的内容。

2. HTML文档结构

每个HTML文档都遵循特定的结构，包括<!DOCTYPE html>声明、<html>根元素、<head>头部和<body>主体部分。

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
<html>：根元素，包含整个HTML文档。
<head>：包含文档的元数据，如字符集定义、标题、链接到CSS文件等。
<body>：包含可见的页面内容，如文本、图片、链接等。

3. 基本标签

标题标签：<h1>到<h6>，<h1>是最高级别的标题。
段落标签：<p>用于定义文本段落。
换行标签：<br>用于在文本中插入换行。
链接标签：<a href="URL">链接文本</a>用于创建超链接。
图片标签：<img src="图片地址" alt="替代文本">用于在网页中嵌入图片。

二、CSS基础

1. CSS简介

CSS用于设置HTML元素的样式，包括布局、颜色、字体等。它允许开发者将内容与表现分离，使得网页的维护更加容易。

2. CSS选择器

元素选择器：直接选择HTML元素，如p { color: red; }。
类选择器：选择具有特定类的元素，如.classname { background-color: yellow; }。
ID选择器：选择具有特定ID的元素，如#idname { font-size: 20px; }。

3. CSS样式规则

CSS样式规则由选择器和一组声明组成，声明用大括号{}包围，声明之间用分号;分隔。

三、实战演示

创建一个简单的网页

创建HTML文件：使用文本编辑器（如VS Code）创建一个名为index.html的文件。
编写HTML代码：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>我的第一个网页</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            text-align: center;  
        }  
        h1 {  
            color: blue;  
        }  
        p {  
            color: green;  
        }  
    </style>  
</head>  
<body>  
    <h1>欢迎来到我的网页</h1>  
    <p>这是一个段落。</p>  
    <img src="image.jpg" alt="示例图片">  
    <a href="https://www.baidu.com">访问百度</a>  
</body>  
</html>

LWS大蛇

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5 主流制作网页的标记语言(1)

HTML是一种用于创建网页的标准标记语言。它不是编程语言，而是由一系列元素组成的标记语言，这些元素告诉浏览器如何显示页面上的内容。CSS用于设置HTML元素的样式，包括布局、颜色、字体等。它允许开发者将内容与表现分离，使得网页的维护更加容易。
复制链接

扫一扫