第1章网页基础知识

折干鹤

已于 2024-10-02 09:00:16 修改

阅读量435

点赞数 15

分类专栏： HTML 前端文章标签：前端 html html5 javascript vscode webstorm

于 2024-09-11 22:47:39 首次发布

本文链接：https://blog.csdn.net/2401_83479354/article/details/142132745

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

1.1 认识网页和网站

网页：网页是构成网站的基本元素，它通过浏览器展示给用户看的信息页面。

网站：网站是一系列相关网页的集合，通常包括一个主页和其他辅助页面，通过链接相互连接。

常用术语：包括URL（统一资源定位符）、域名、服务器等。

静态网页：内容固定不变的网页，每次访问时显示的内容都相同。

动态网页：内容可以根据用户请求或数据库中的数据动态生成的网页。

‌CSS‌：级联样式表（Cascading Style Sheets），用于描述HTML或XML（包括SVG、XHTML等）文档的样式。

‌DOM‌：文档对象模型（Document Object Model），是网页的标准模型，用于表示和修改网页的结构和内容。

‌HTML‌：超文本标记语言（HyperText Markup Language），用于创建网页的标准标记语言。

‌JavaScript‌：一种在浏览器中运行的脚本语言，用于实现网页的动态效果和交互性。

‌URL‌：统一资源定位符（Uniform Resource Locator），用于标识互联网上资源的地址。

‌Backlink‌：反向链接，也称为入站链接，是指从其他网站链接到特定网页的链接。

‌服务器‌：提供计算服务的设备，具有高处理能力、稳定性、安全性、可扩展性等特点。

1.2 网页的基本构成元素

文本：网页中的文字内容。
图片和动画：用于增强网页视觉效果。
超链接：允许用户点击后跳转到其他页面或网站。
音频视频：多媒体元素，丰富用户体验。
交互表单：收集用户输入的数据。
其他常见元素：如表格、按钮、列表等。

1.3 页面布局结构

1.4 Web前端技术简介

初识WEB前端：前端是用户与网站交互的界面，负责将网页内容呈现给用户。

WEB前端开发的三大核心技术：HTML、CSS、JavaScript。

前端开发工具：如Visual Studio Code、Sublime Text、Dreamweaver等。

1.5 HTML 语法基础

HTML 概述：HTML（HyperText Markup Language）是网页的骨架，用于定义网页的结构和内容。

HTML 基本结构：包括<!DOCTYPE html>、<html>、<head>、<body>等标签。

1.6创建HTML文档

使用HBuilder 新建项目。依次点击选择“文件”——“新建”——“Web项目”，如图

1.7 网页头部标签

<title>：定义网页的标题，显示在浏览器标签页上。
<meta>：提供有关HTML文档的元数据，如字符集、作者、页面描述等。
<link>：链接外部资源，如CSS样式表。
<script>：定义客户端脚本，如JavaScript代码。
第一个HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>我的第一个网页</p>
		<p>20203级软件3班</p>
	</body>
</html>

浏览效果如图：

1.8 HTML5文档注释和特殊符号
1.注释

在HTML5中，注释是用来给代码添加说明的，这些说明对浏览器来说是不可见的，但对开发者来说却非常有用，尤其是在团队协作或项目维护时。注释可以帮助开发者理解代码的用途、逻辑结构或是标记未完成的工作。

HTML5中的注释使用来结束。注释可以包含任何文本，但不能嵌套。也就是说，你不能在一个注释内部再创建一个注

示例

2.特殊符号

HTML5中的特殊符号是通过HTML实体编码来实现的，这些特殊符号可以用于在网页中添加特殊效果或图标，如箭头、心形、星星等。以下是一些常用的HTML5特殊符号及其对应的HTML实体编码：

常用特殊符号

HTML5还支持许多其他类型的特殊符号，包括但不限于箭头类（如左箭头←←、右箭头→→）、基本形状类（如心形❤&heart;、星星★&star;）、货币类（如日元符号¥¥）、数学类（如二分之一½½）、音乐符号类（如音符♫♫）、星座类（如水瓶座♒♒）、国际象棋类（如国王♚♚）、扑克牌类（如梅花♣♣）以及希腊字母（如OmegaΩΩ）等。

注意事项

编码声明：使用这些特殊符号时，需要确保HTML文档声明为UTF-8编码，以便正确显示Unicode字符。
浏览器兼容性：虽然大多数特殊符号在主流浏览器中都能正常显示，但仍有少数符号可能在某些浏览器中的显示效果略有不同。因此，在实际应用中，最好在不同浏览器中进行测试，以确保兼容性。
转义字符：在HTML、CSS或JavaScript中使用特殊符号时，有时需要进行转义处理。例如，在HTML中直接使用<和>会被解释为标签的开始和结束，因此需要使用<和>进行转义

1.9 综合案例——临江仙 · 送钱穆父

假设我们要制作一个展示宋代诗人苏轼的《临江仙·送钱穆父》的网页，以下是一个简单的HTML结构示例：

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>临江仙·送钱穆父</title>  
    <link rel="stylesheet" href="styles.css"> <!-- 假设有CSS样式表 -->  
</head>  
<body>  
    <h1>临江仙·送钱穆父</h1>  
    <p>一别都门三改火，天涯踏尽红尘。依然一笑作春温。</p>  
    <p>无波真古井，有节是秋筠。</p>  
    <p>惆怅孤帆连夜发，送行淡月微云。尊前不用翠眉颦。</p>  
    <p>人生如逆旅，我亦是行人。</p>  
</body>  
</html>

如图：