Web开发网站-01

最新推荐文章于 2024-06-12 11:13:48 发布

小菜鸟学不会

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量959

点赞数 23

文章标签：前端

本文链接：https://blog.csdn.net/weixin_57100704/article/details/135256996

版权

Web：全球广域网，也称为万维网（www World Wide Web），能够通过浏览器访问的网站。

项目开发模式：前后端分离开发和混合开发

主要学习前后端分离开发

1 Web前端开发

网页组成部分：文字、图片、音频、视频、超链接等

我们日常看到的网页，背后的本质是程序员写的前端代码。

前端代码是通过浏览器转化（解析、渲染）成用户看到的网页，浏览器中对代码进行解析渲染的部分，称为浏览器内核。

注意：不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异。

2 Web标准

Web标准也称为网页标准，有一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分：

HTML:负责网页的结构（页面元素和内容）。

CSS:负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

JavaScript：负责网页的行为（交互效果）。

3 HTML

HTML(HyperText Markup Language）：超文本标记语言。

· 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

· 标记语言：由标签构成的语言

HTML标签都是预定义好的。例如：使用<a>展示超链接， <img>展示图片，<video>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

特点：html不区分大小写，属性可以使用双引号和单引号，规则语法松散。

HTML结构标签：最外层<html>,两个子标签<head>和<body>,在<head>当中，可以通过<title>来制定文件的标题，

4 CSS

· CSS(Cascadin Style Sheet):重叠样式表，用于控制页面的样式（表现）。

5 基础标签&样式

图片标签：<img>

·src：制定图像的url（绝对路径/相对路径）

·width：图像的宽度（像素px/相对于父元素的百分比%）

·height：图像的高度（像素px/相对于父元素的百分比%）

注意：一般width和height只设置一个，另一个会自动等比例缩放

标题标签：<h1> - <h6> 一级标题到六级标题

水平线标签<hr>

无语义标签<span> 是一个在开发网页是大量会用到的没有语义的布局标签

特点：一行可以显示多个（组合行内元素），宽度和高度默认有内容撑开

路径

绝对路径：绝对磁盘路径和绝对网络路径

相对路径：当前目录（./,可以省略）和上一级目录（../，不可以省略）

6 CSS引入方式

行内样式：写在标签的style属性中（不推荐）

<h1 style="xxx: xxx; xxx: xxx; ">中国人民网</h1>

内嵌样式：写在style标签中（可以写在页面任何位置，当通常约定写在head标签中）

<style>

h1{

xxx: xxx;

}

</style>

外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

7 颜色表示形式

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blu...
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255),rgb(255,0,0)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000，#ff0000，#cccccc，简写：#000、#ccc