当前位置：首页 > wzjs >正文

开发企业网站的公司公司做的网站打开慢

wzjs 2025/9/23 2:13:22

开发企业网站的公司,公司做的网站打开慢,天河电子商务网站建设,学院网站建设进度情况说明web前端开发-HTML-CSS web标准也称网页标准，由一系列的标准组成，大部分由W3C（World WideWeb Consortium ,万维网联盟）负责制定三个组成部分: HTML:负责网页的结构(页面元素和内容)。CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。JavaScript:负责网…

web前端开发-HTML-CSS

web标准也称网页标准，由一系列的标准组成，大部分由W3C（World WideWeb Consortium ,万维网联盟）负责制定
三个组成部分:
- HTML:负责网页的结构(页面元素和内容)。
- CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
- ·JavaScript:负责网页的行为(交互效果)。

HTML

超文本标记语言
- 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
- 标记语言:由标签“<标签名>”构成的语言
  - HTML标签都是预定义好的。例如:使用
    展示标题,使用展示图片,使用展示视频。
  - HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

CSS

css（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）

MDN

HTML快速入门

新建文本文件，后缀名改为.html
编写HTML的基本骨架,定义标题
在中填写内容

是子标签的一种，用来存放给浏览器看的信息，如：CSS样式也是子标签的一种，用来存放给用户看的信息。如：文本，图片，视频

标签不区分大小写

语法结构不严谨

HTML基本骨架标签
HTML快速入门
Hello HTML

HTML标签特点
- html标签不区分大小写,建议小写
- html标签的属性值使用单引号/双引号都可以
- html语法结构松散,但是建议规范书写

前端开发工具

vscode

VsCode插件安装

3.1 Chinese (Simplified) Langu …

3.2 HTML CSS Support
3.3 JavaScript (ES6) code snip …

3.4 Mithril Emmet

3.5 Path Intellisense

3.6 Vue 3 Snippets

3.7 Auto Close Tag

3.8 Auto Rename Tag

3.9 open in browser

3.10 Live Server

3.11 Vue - Official

3.12 File Utils

3.13 IntelliJ IDEA Keybindings

3.14 MarsCode AI

3.15 TONGYI Lingma

Vscode设置

<!-- 输入！直接一键生成模板 --><!-- 选中文字ctrl+/一键生成注释 --><!-- 声明文档的类型为html -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集 --><meta charset="UTF-8"><!-- 设置在移动设备上的显示宽度及缩放比例 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 快速入门</title>
</head>
<body><h1>HTML快速入门</h1><img src="1.png"></body>
</html>

常见标签&样式

央视新闻-标题

排版：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>思想新征程</title>
</head>
<body><!-- 定义一个标题 --><h1>思想新征程</h1>
<!-- 用服务器端打开，改变代码，ctrl+s保存直接浏览器自动刷新内容 --><!-- 标题标签只有h1-h6 --><!-- 定义一个超链接，链接到央视网的首页 --><!-- a 超链接标签：href 超链接的地址 --URL地址   target 超链接的打开方式 --_blank 新窗口打开_self 当前窗口打开(默认)--><!-- 超链接标签 <a>herf="URL地址" target="打开方式">超链接内容</a>--><a href="https://www.cctv.com" target="_blank">央视网</a>2025年3月31日<!-- 编辑器换行不影响页面显示 --><!-- 以上完成标题页面排版 --><!-- 然后 -->
</body>
</html>

在这里插入图片描述

样式：控制发布时间的样式（大小颜色）（CSS样式控制）

CSS引入方式：

行内样式：写在标签的stytle属性中（配合javaScript使用）
内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

在这里插入图片描述

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>思想新征程</title>
</head>
<body><!-- 定义一个标题 --><h1>思想新征程</h1><a href="https://www.cctv.com" target="_blank">央视网</a><!-- 编辑器换行不影响页面显示 --><!-- 行内样式 --><!-- <span style="color: gray;">2025年3月31日</span> --><!-- 内部样式--><style>span{color: rgb(178, 178, 178);}</style>  <!-- 当前页面所有的span标签都是这种样式,对于其他文件无效 --><!-- 外部样式 --><!-- 引入外部样式文件 -->   <!-- rel="stylesheet" 样式表 表示引入的是层叠样式表，就是css --><!-- href="样式文件路径" 样式文件路径 --><!-- <link rel="stylesheet" href="new.css"> --><span>2025年3月31日</span></body>
</html>

颜色表示形式：

表示方式	属性值	说明	示例
关键字	颜色英文单词	red,green,blue	red,green,blue
rgb表示法	rgb（r,gb）	红绿蓝三原色，取值：0-255	rgb(0,0,0)
rgba表示法	rgba（r,g,b,a）	红绿蓝三原色，a表示透明度，取值：0-1	rgba(0,0,0,0.3)
十六进制表示法	#rrggbb	#开头，将数字转换成十六进制表示	#000000简写：#000

颜色属性：

color：设置文本内容的颜色

CSS选择器

css选择器是用来选取需要设置样式的元素（标签）的

选择器	写法	示例	示例说明
元素选择器	元素名称{………}	h1{…}	选择页面上所有的标签
类选择器	.class属性值	.cls{…}	选择页面上所有class属性为cls的标签
id选择器	#id属性值	#hid{…}	选择页面上id属性为hid的标签(id是唯一标识)
分组选择器	选择器1,选择器2{ … }	h1,h2 { … }	选择页面上所有的和标签
属性选择器	元素名称[属性]{ … } 元素名称[属性名="值”]{ … }	input[type] { … }input[type=“text”] { … }	选择页面上有type属性的标签
选择页面上type属性为text的标签
后代选择器	元素1 元素2 { … }	form input { … }
选择标签内的所有标签

优先级：id选择器>类选择器>元素选择器

央视新闻-正文

排版

| | 视频标签 | src:指定视频的url(绝对路径/相对路径)

controls:是否显示播放控件

width:宽度(像素/相对于父元素百分比)

height:高度(像素/相对于父元素百分比) |
| — | — | — |
| | 图片标签 | src, width, height |
|

| 段落标签 | |

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>思想新征程</title>
</head>
<mg><!-- 定义一个标题 --><h1>思想新征程</h1><style>span{color: rgb(161, 155, 155);}a{text-decoration: none;}</style><a href="ttps://www.cctv.com" target="_blank">央视网</a><span>2025年3月31日</span><!-- video标签属性src：视频地址control：显示播放控件autoplay:自动播放width:视频宽度(建议：宽度和高度只设置一个即可，另一个会等比例缩放)height：视频高度单位：px：像素%：百分比(相对于父元素的百分比)--><!--  --><br><br><!-- 换一行一个br标签，两行两个 --><video src="video/dancegirl.mp4" controls width="400" > </video><br><!-- <audio src="" 音频--><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p><p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p><!-- 图片标签 --><img src="image/1.png" alt="加载失败" width="300"><!-- 图片标签属性src：图片地址绝对路径：1.绝对磁盘路径，服务器端运行，找不到磁盘2.绝对网络路径：http:www.baidu.com/1.png相对路径:2.1 ./:当前目录     2.2 ../:上级目录2.3 /:根目录alt：图片描述(当图片加载失败时显示的文字)width：图片宽度
</body>
</html>

样式

标签	作用	属性/说明
/	加粗	具有强调语义
/	下划线	具有强调语义
/	倾斜	具有强调语义
/	删除线	~~具有强调语义~~

字符实体	属性/说明
&nbsp	空格
&lt	<
&gt	>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>思想新征程</title>
</head>
<mg><!-- 定义一个标题 --><h1>思想新征程</h1><style>span{color: rgb(161, 155, 155);}a{text-decoration: none;}/* 设置行高 */p{line-height: 2;/* 两倍行高，也可以设置px（像素）  */text-indent: 2em;/* 首行缩进 */}/* 缩进 在编辑器敲空格浏览器会忽略 *//* 可以为所有段落样式设置缩进 */</style><a href="ttps://www.cctv.com" target="_blank">央视网</a><span>2025年3月31日</span><br><br><video src="video/dancegirl.mp4" controls width="400" > </video><br><!-- <audio src="" 音频--><b>加粗展示</b><strong>加粗展示</strong><!-- strong标签也可以 --><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh