1.1 认识网页和网站
1.1.1 网页、网站
Web站点也称网站，WWW信息是由无数的Web站点组成的
常用术语
WWW、URL、IP、HTTP、FIT、Internet、超链接
1.1.2 静态网页和动态网页
静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文
本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务
器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。
动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意
义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交
互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。
静态网页与动态网页的区别（）
1.2 网页的基本构成元素
1.2.1 文本
在网页设计中，文本是最基本且不可或缺的元素之一。以下是网页中常用的文本基本元素及其用途：
### 1. 标题（Headings）
- **`<h1>` - `<h6>`**：定义六级标题，`<h1>` 表示最重要的标题，`<h6>` 表示最次要的标题。搜索引擎和屏幕阅读器使用这些标题来理解文档的结构。
### 2. 段落（Paragraphs）
- **`<p>`**：定义一个文本段落。浏览器会在段落前后自动添加一些空格。
### 3. 文本格式化（Formatting）
- **`<strong>` 或 `<b>`**：定义重要的文本，通常显示为粗体。
- **`<em>` 或 `<i>`**：定义强调的文本，通常显示为斜体。
- **`<u>`**：定义带下划线的文本。
- **`<s>` 或 `<strike>`**：定义带删除线的文本。
- **`<sup>`**：定义上标文本。
- **`<sub>`**：定义下标文本。
### 4. 引用（Quotations）
- **`<blockquote>`**：定义一个长引用，通常浏览器会在该元素周围添加边距。
- **`<q>`**：定义一个短的引用。
- **`<cite>`**：定义作品的标题。
### 5. 地址（Addresses）
- **`<address>`**：定义联系信息或地址。
### 6. 缩写和首字母缩略词（Abbreviations and Acronyms）
- **`<abbr>`**：定义缩写或首字母缩略词，可以提供完整的描述（通过`title`属性）。
- **`<acronym>`**：与 `<abbr>` 类似，但专用于首字母缩略词。
### 7. 计算机代码（Computer Code）
- **`<code>`**：定义计算机代码文本。
- **`<pre>`**：定义预格式化的文本，保留空格和换行符。
- **`<kbd>`**：定义键盘文本。
<samp>：定义计算机程序输出示例。
<var>：定义变量。
8. 其他文本元素
<dfn>：定义项目或概念的名词。
<mark>：定义需要突出显示的文本。
<del>：定义被删除的文本。
<ins>：定义被插入的文本。
<small>：定义小号文本，通常用于法律声明或附加信息。
使用这些基本文本元素，可以创建结构清晰、易于理解的网页内容，并且有助于搜索引擎优化（SEO）。正确使用这些元素还可以提高网页的可访问性，使得屏幕阅读器等辅助技术能够更好地解析和朗读网页内容。
1.2.2.图片和动画
图片是网页中用于展示视觉内容的重要元素，通过`<img>`标签引入，支持多种格式如JPEG、PNG、GIF。图片可以传达信息、增强视觉效果、展示产品。动画则通过CSS动画、JavaScript或GIF实现，为网页增添动态效果和交互性，提升用户体验。动画可用于导航、视觉焦点、状态指示等，但需注意不要过度使用以免影响页面加载时间和性能。
1.2.3.超链接
超链接是网页的核心元素，通过`<a>`标签创建，允许用户点击跳转到其他网页、文件或网站位置。它们可包含文本、图片或其他元素，并使用`href`属性指定目标URL。超链接是网站导航的基础，有助于搜索引擎优化，提高用户体验。正确使用超链接能增强网页的可用性和可访问性。
1.2.4.音频视频
音频与视频元素为网页带来丰富的多媒体体验。音频通过`<audio>`标签嵌入，支持MP3、WAV等格式，允许用户播放和控制声音。视频通过`<video>`标签实现，支持MP4、WebM等格式，提供播放、暂停、全屏等控制功能。这些元素增强了网页的互动性和吸引力，但需注意版权和兼容性问题。
1.2.5.交互表单
交互表单是网页中用于收集用户输入的元素，包含输入框、选择框、按钮等。通过`<form>`标签组织，使用`<input>`、`<select>`、`<textarea>`等子元素，允许用户填写信息或进行选择。表单数据通过提交操作发送至服务器，是实现用户互动和数据收集的关键工具，对网站功能性和用户参与至关重要。
1.2.6.其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、
时，构成的颜色组合一
JavaScript与ActiveX等各种特效，它们不仅能点级网页，使网页更活泼有趣。
1.3 页面布局结构
1.3.1 网页页面布局
1.3.2 网页色彩搭配
网页安全色：红色、绿色、蓝色。
常见的色彩搭配有采用近似或相近配色。（设计师的事，我就不写这么详细了）
1.4 Web前端技术简介
1.4.1 初识WEB前端
就平时上网浏览的网页，不用在意具体是什么，学习嘛，钻牛角尖包走不远的。
1.4.2 WEB前端开发的三大核心技术
HTML、CSS、JavaScript
1.4.3 前端开发工具
1.4.3.1浏览器
用主流的就行（IE、Chrome、| HBuilder），其他没什么毛病，就是有也可以忽略。
1.4.3.2网页编辑器
用主流的就行（IE、Chrome、| HBuilder），其他没什么毛病，就是有也可以忽略。
1.5 HTML语法基础
1.5.1 HTML概述
1.5.1.1语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在
运行HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统
一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平
台。自1990年以来HTML就一直被用作WWW的信息表示语言，使用HTML描述的文件
需要通过Web浏览器HTTP显示出效果。
1.5.1.2 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都
是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程
序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。
1.5.1.3 标记
HTML（超文本标记语言）是一种用于创建网页内容的标记语言。它使用标签（如`<html>`、`<body>`）来结构化内容，如标题（`<h1>`-`<h6>`）、段落（`<p>`）、链接（`<a>`）等。HTML文档由元素组成，元素通过属性进行配置。浏览器解析HTML标签，渲染出可视化网页。它是网页设计和网络开发的基础，易于学习，广泛用于构建和展示在线内容。
1.5.2 HTML基本结构
HTML文档的基本结构包括以下几个主要部分：
1. `<!DOCTYPE html>`
- 声明文档类型和HTML版本（这里是HTML5）。
### 2. `<html>`
- 根元素，包裹所有其他HTML元素。
- `lang`属性指定文档的语言。
### 3. `<head>`
- 包含文档的元数据，如字符编码、视图窗口设置、文档标题、样式表链接、脚本链接等。
#### `<meta charset="UTF-8">`
- 指定文档的字符编码为UTF-8，支持多种语言。
#### `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
- 控制页面在移动设备上的布局和缩放。
#### `<title>`
- 定义浏览器工具栏的标题和搜索结果中的页面标题。
### 4. `<body>`
- 包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。
这个结构是所有HTML文档的基础，无论其内容多么复杂。遵循这个结构有助于确保网页在不同浏览器上的兼容性和正确显示。
1.6 创建HTML文档
以下是完整代码见例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
这是我的第一个网页项目
<pre>预处理</pre>
<a href="https://mp.csdn.net/mp_blog/creation/editor/142170663" target="_blank">博客</a>
</body>
</html>1.7 网页头部标签
HTML网页头部标签`<head>`包含文档的元数据，如`<title>`定义页面标题，`<meta>`指定字符集和视口设置，`<link>`引入CSS样式表，`<script>`嵌入或链接JavaScript文件，以及`<style>`内嵌样式。这些标签影响页面显示和功能，但通常不在浏览器中直接显示。
1.7.1 <title>标签
`<title>`标签是HTML文档`<head>`部分中的一个元素，用于定义网页的标题，这个标题会显示在浏览器的标题栏或标签页上。它对于搜索引擎优化（SEO）也很重要，因为搜索引擎会将其内容作为页面内容的一个关键指标。以下是`<title>`标签的一些特点：
- 应该简洁且具有描述性，通常包含页面主要内容的关键词。
- 每个HTML文档应该只有一个`<title>`标签。
- 它位于`<head>`元素内，紧跟在`<head>`标签之后通常是最佳实践。
示例：
html
<head>
<title>页面标题 - 网站名称</title>
</head>
1.7.2 <meta>标签
`<meta>`标签是HTML文档头部（`<head>`）部分的一个关键元素，用于提供关于网页的元数据，这些数据不会直接显示在页面上，但对浏览器和搜索引擎等具有指导作用。它可以设置文档的字符编码、定义页面描述、关键字、视口设置、作者信息等，还用于控制页面缓存和内容类型。`<meta>`标签通过`name`和`content`属性对提供的信息进行命名和赋值，或使用`http-equiv`属性模拟HTTP响应头。它是搜索引擎优化（SEO）的重要工具，有助于提升网页的可访问性和用户体验。例如，通过指定`viewport`属性，可以优化移动设备的显示效果；通过设置`description`，可以影响搜索结果中的页面摘要。正确使用`<meta>`标签对于网页的索引、呈现和交互具有重要意义。
1.7.2.1 keyworrds
keywords 关键字在网页中的用途主要是为了告诉搜索引擎网页的主题和内容，从而帮助搜索引擎更准确地索引和分类网页。
需要注意的是，过度使用或滥用 keywords （例如堆砌关键词、使用与内容无关的热门关键词）可能会导致搜索引擎对网站进行惩罚，降低网页的排名。因此， keywords 应该真实反映网页内容，且数量不宜过多，通常建议5-10个左右的相关关键词。
1.7.2.2 description
与上面关键字差不多的用途，
但要注意：大多数搜索引擎会在搜索结果中显示大约150-160个字符的描述，因此建议描述长度在这个范围内。
1.7.3 <link>标签
<link> 标签是HTML文档中 <head> 部分的一个元素，用于在当前文档与外部资源之间建立链接关系。它主要用于链接样式表（CSS文件），但也可以用于定义网站图标（favicon）、预加载资源等。以下是 <link> 标签的一些常见用途和属性：
常见属性：
href ：指定链接CSS文件资源的路径。
rel ：定义当前文档与被链接资源的关系类型（作用），通常stylesheet。
type ：指定被链接资源的文件类型。
media ：指定样式表适用于哪种媒体类型（如屏幕、打印等）。
sizes ：用于定义图标的大小，常与 rel="icon" 一起使用。
1.7.4 <script>标签
<script>标签是脚本标签，用于为HML文档定义客户端脚本信息。此标签可以在文档
中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于chead>标签内，以便于
维护。主要作用引入Javascript文件。
常见属性两个11q`
src:文件路径 type：文件类型
1.8 HTML5文本注释和特殊符号
1.8.1 注释
HTML注释用于在代码中插入说明或注释，它们不会在浏览器中显示，但对开发者理解代码非常有用。注释的语法如下：
html
<!-- 这是一行注释 -->
例如：
html
<!-- 在此处添加一个标题 -->
<h1>欢迎来到我的网站</h1>
注释可以跨越多行，但不要在注释内部使用`--`，因为这可能会引起解析错误。
1.8.2 特殊符号
HTML中有些字符是保留的，如`<`, `>`, `&` 等，它们用于HTML标签和属性。若要在文本中显示这些特殊字符，需要使用字符实体（Character Entities）。
以下是一些常见的特殊符号及其对应的字符实体：
- **小于号** (`<`): `<`
- **大于号** (`>`): `>`
- **和号** (`&`): `&`
- **双引号** (`"`): `"`
- **单引号** (`'`): `'`（注意：`'` 不是所有浏览器都支持，通常使用 `'` 代替）
- **版权符号** (`©`): `©`
- **注册商标符号** (`®`): `®`
- **商标符号** (`™`): `™`
- **欧元符号** (`€`): `€`
- **英镑符号** (`£`): `£`
- **日元符号** (`¥`): `¥`
使用字符实体的例子：
html
<p>如果你需要显示一个小于号，你应该使用 < 的字符实体。</p >
这将显示为：
如果你需要显示一个小于号，你应该使用 < 的字符实体。
使用注释和特殊符号的正确方式可以帮助保持代码的清晰性和确保网页内容的正确显示。
1.9 综合案例————临江仙*送钱穆父
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="宋词" charset="UTF-8"/>
<meta name="description " content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css">
p{
text-align:center;
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333" >
<h2 align="center">临江仙.送钱穆父</h2>
<p>宋 苏轼</p>
<p>一别都门三改火，天涯踏尽红尘。<br/>
依然一笑作春温。<br />
无波真古井，有节是秋筠。<br />
惆怅孤帆连夜发，送行淡月微云。<br />
尊前不用翠眉颦。<br />
<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
</body>
</html>
扫一扫
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
