Web学习笔记（1）

最新推荐文章于 2024-05-09 12:41:58 发布

小爱超可爱

最新推荐文章于 2024-05-09 12:41:58 发布

阅读量2.6k

点赞数 5

分类专栏： web前端开发文章标签：前端 html html5 web

本文链接：https://blog.csdn.net/qq_52227393/article/details/122275467

版权

web前端开发专栏收录该内容

10 篇文章 13 订阅

订阅专栏

Web前端开发概述

Web前端开发相关的概念

1.Web系统的组成

Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。

2.Web开发

Web开发就是设计实现Web系统的过程。主要包括浏览器端页面的制作和服务器端程序的编写。

浏览器端称作Web前端；

服务器器端称作Web后端。

3.浏览器

浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。

常见的浏览器有：Firefox、Internet Explorer、Safari、Opera、Google Chrome、QQ浏览器、百度浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等

不是所有的浏览器都支持HTML5，同一浏览器不同的版本对HTML5的支持情况也不同。

4.URL

URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”,是互联网上标准资源的地址。互联网上的每一个文件都有唯一的URL。

基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。完整的、带有授权部分的普通统一资源标志符语法格式如下：

协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志

5.WWW

WWW（英文World Wide Web的缩写）中文译为“万维网”，是Intertnet提供的一种网页浏览服务，常简称Web。

6.http

HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。

7.网站

是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。用户可以通过浏览器来访问网站，获取需要的资讯或者享受网络服务。

8.Web标准

Web标准是由W3C和其他标准化组织制定的一系列标准的集合。该标准用来创建和解释基于 Web 的内容，其网页部分的标准通过三部分来描述：结构、表现和行为。

Web前端开发相关的技术

1.基本应用技术

2.HTML

HTML是Internet上用于设计网页的基础语言。它是一种标记语言，用于对网页中的文本、图片、声音等内容进行描述，告诉浏览器以什么方式或结构显示网页内容。

3.CSS

CSS称作层叠样式表，“层叠”是指当在HTML中引用了多个样式文件，且当样式发生冲突时，浏览器能依据层叠顺序处理。CSS弥补了HTML对网页格式化方面的不足，不仅为网页元素提供了更为丰富显示效果，还可以实现网页布局和排版定位的作用。

4.JavaScript

JavaScript是一种脚本语言，它和HTML结合，使得用户与网页元素之间不只是浏览与显示的关系，而是实现了一种实时、动态、交互的页面功能。

5.Web前端开发工具

HTML是一种标签语言，标签语言代码是以文本形式存在的。因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm。将编写好的文件另存为.html或.htm文件，就可以在浏览器中预览效果了。

6.NotePad

Notepad指代码编辑器或Windows中的“记事本”程序。是一种开源、小巧、免费的纯文本编辑器，建议初学者使用，以增加代码编写体验，增强对代码的理解和记忆。

7.TextPad

Textpad是一个强大的替代Notepad的文本编辑器，编辑文件的大小只受虚拟内存大小的限制。支持Unicode编码，可以编译、运行简单的Java程序。

8.Dreamweaver

Dreamweaver是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

9.HTML文档结构

完整的HTML文件包括头部和主体两大部分。代码示例如下：

HTML文档结构

其中：

文档类型说明：<!DOCTYPE html>

文档的开始和结束标签：

<html>

......

</html>

文档头部的开始和结束标签：

<head>

......

</head>

文档主体的开始和结束标签：

<body>

......

</body>

网页标题的开始和结束标签：

<title>

......

</title>

一级子标题的开始和结束标签：

<h1>

......

</h1>

对齐属性：align属性用于设定标题的对齐方式，其取值可以为left、center、right、justify。

HTML5基础

HTML5-文档头部

1.页面标题及字符集的设置

1）title标签

title标签用于定义HTML页面的标题。它是双标签，开始和结束标签之间的内容就是要设置的页面标题。

它的作用是：

在浏览器的标题栏中显示标题

标题可以用作默认快捷方式或收藏夹的名称

标题还可以作为搜索引擎结果中的页面标题

应用时注意：

一个网页只能有一个标题

标题名称的长度不超过64个字符数

标题标记对之间不允许有其它的标签存在

用法示例：

2）charset属性

在html5中，可直接通过meta标签的charset属性设置页面的字符编码格式。在理论上，可以使用任何字符编码，但并不是所有浏览器都能够解释它们。常用的编码有：

ISO-8859-1：国际标准化组织针对不同的字母表/语言定义的标准字符集（拉丁字母表的字符编码），是浏览器默认的字符集

utf-8：Unicode 联盟开发的标准，utf-8 是网页和电子邮件的首选编码。

gb2312：信息交换用汉字编码字符集，中国国家标准总局1980年发布。适用于汉字处理、汉字通信等系统之间的信息交换。

用法示例：

2.元信息的设置

1）meta标签的作用

meta标签用于定义页面的元信息，可重复出现再头部标签中。它是单标签，通过“名称/值”的形式成对使用其属性。

meta标签主要分为两大类，一类对页面进行设置，另一类对搜索引擎进行设置。

对页面进行设置的格式：<meta http-equiv="名称" content="值"/>

对搜索引擎进行设置的格式：<meta name="名称" content="值"/>

2）http-equiv/content

http-equiv/content属性对用于设置刷新、失效期、 cookie等页面信息。

用法示例：

1.页面停留20秒后跳转到www.educoder.net

2.网页于2020年7月26号8点过期

3.设置cookie并进行页面缓存

3）name/content

http-equiv/content属性对用于设置关键字、简介、作者、机器人向导、版权、编辑器等。

用法示例：

1.用于标注网页的作者和Email

2.为搜索引擎提供网站简介

3.为搜索引擎提供关键字

4.为搜索引擎提供编辑器类型

5.为搜索引擎提供提供最新版本信息

3.link标签

link标签可引用外部文件。它是单标签，一个页面允许使用多个link标签引用多个外部文件。

它的作用是：

指定引用外部文档的地址

指定当前文档与引用的外部文档的关系

说明引用外部文档的类型

格式说明：

href设置外部文档的地址

rel设置当前文档与引用的外部文档的关系

type设置外部文档的类型。

用法示例：链接一个外部样式表

HTML5-文本控制类标签

1.HTML5-网页背景及标题段落标签

1）设置网页背景图

如需用图像作网页背景图，可在<body>中添加background属性，其属性取值即为图像的路径。

用法示例：

2）设置网页背景色

如需为网页添加背景色，可在<body>中添加bgcolor属性，其属性取值颜色单词或颜色代码。

用法示例：

3）文本标题标签

文本标题标签<hi>是双标签，块级元素，用于规定文本内容标题的层次。在HTML中提供了6级标题标签，从一级<h1>开始到六级<h6>，字号大小依次减小。

默认情况下，在大多数浏览器中显示<h1><h2><h3>的内容大于文本在网页中的默认尺寸，<h4>的内容与默认文本的大小基本相同，而<h5>和<h6>的内容较默认文本小一些。可设置文本标题的对齐属性。

4）段落标签

段落标签<p>是双标签，块级元素，用于将文本内容定义为一个段落，段落内容从新的一行开始，并于上一段之间有一个空行。可设置段落文本的对齐属性。

表格标签—表格高级样式的设置

1.表格高级样式设置相关概念

1)外边框线样式属性frame

表格的外边框线的样式可用属性frame的取值来确定，frame取值与相应的样式如下：

above：显示上边框

below：显示下边框

hsides：显示上下边框

vsides：显示左右边框

lhs：显示左边框

rhs：显示右边框

border：显示上下左右边框

void：不显示边框

2)内部边框样式属性rules

表格的内部边框的样式可用属性rules的取值来确定，rules取值与相应的样式如下：

all：显示所有内部边框

none：不显示内部边框

rows：仅显示行边框

cols：仅显示列边框

groups：显示介于行组和列组间边框

3)单元格合并

在制作稍复杂的表格时，需要对表格中的行或列进行合并。

水平方向单元格的合并

需要将水平方向的单元格合并时，可在<th>或<td>标记中添加colspan属性，属性的取值即为合并的单元格数目。

垂直方向单元格的合并

需要将垂直方向的单元格合并时，可在<th>或<td>标记中添加rowspan属性，属性的取值即为合并的单元格数目。

设置表格的外边框样式

1)table标签的一般属性

table标签的属性通常有border、width、height、align、bgcolor、background等，前面已经介绍过，这里不在赘述。

2)外边框样式的设置

frame属性可用来设置表格的外边框样式，属性取值可以是：above、below、hsides、vsides、lhs、rhs、border、void。

例如，如果表格的外边框只需显示上边框，属性设置如下：

设置表格的内边框样式

1）表格内部边框属性的设置

表格内部边框可以使用rules属性来设置，其取值可以为all、none

rows、cols、groups。

例如，如果表格的外边框只需显示上边框，内部边框显示列边框线，属性设置如下：

4.表格中单元格的合并

1）水平方向单元格的合并

将两个或多个水平方向的单元格合并，可以在th或td标签中使用colspan属性来设置，属性的取值为合并的单元格的数目。

用法示例：

示例如下：

<tr>

</tr>

2）垂直方向单元格的合并

将两个或多个垂直方向的单元格合并，可以在th或td标签中使用rowspan属性来设置，属性的取值为合并的单元格的数目。

用法示例：

<tr>

<td>大会主题报告</td>

<td>分会专题报告</td>

</tr>

<tr>

</tr>

小爱超可爱

关注

5
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
Web学习笔记（1）

目录Web前端开发概述Web前端开发相关的概念Web前端开发相关的技术HTML5基础HTML5-文档头部HTML5-文本控制类标签HTML5-图像的运用表格标签-表格基本结构HTML5-超链接的应用表格标签—表格高级样式的设置Web前端开发概述 Web前端开发相关的概念 1.Web系统的组成Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。2.Web开发 Web开发就是设计实现Web系.
复制链接

扫一扫

专栏目录