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

javaWeb-前端初识-html、css-网页标题制作

news 2025/10/14 10:30:00

Web标准

也称网页标准

三个组成部分：

HTML：负责网页结构（界面和元素内容）
CSS：负责网页表现（页面元素外观、位置等样式）
JavaScript：负责网页行为（交互效果）

HTML

HyperText Markup Language：超文本标记语言

超文本：超越文本限制，除了文字信息，还能定义图片、音频、视频
标记语言：由标签“<标签名>”构成的语言

<!-- 声明文档类型为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="img/Amiya.jpg"><!-- 定义一个一级标题，内容为：Hello Amiya --><h1>Hello Amiya</h1>
</body>
</html>

CSS

Cascading Style Sheet：层叠样式表，控制页面的表现

网页标题制作

排版

<!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: 超链接地址-url地址target: 超链接打开方式_self: 当前页面打开（默认）_blank: 新页面打开--><a href="https://www.mihoyo.com/" target="_blank">米哈游</a>上海|程序&技术类|日常实习生
</body>
</html>

样式

CSS引入方式：

行内样式：写在标签的style属性中（配合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><!-- 方式二：内部样式 --><style>span{/* 关键字 *//* color: grey; *//* RGB表示法 *//* color: rgb(0, 0, 0); *//* RGBA表示法 */color: rgba(0, 0, 0, 0.5);/* 16进制表示法 *//* color: #000000; */}</style><!-- 方式三：外部样式 --><!-- <link rel="stylesheet" href="css/mihoyo.css"> -->
</head>
<body><!-- 定义一个标题，内容：【日常实习生】后端开发实习生 - 研发效能 --><h1>【日常实习生】后端开发实习生 - 研发效能</h1><!-- 定义一个超链接，内容：米哈游 --><a href="https://www.mihoyo.com/" target="_blank">米哈游</a><!-- 换行 --><br></br><!-- 方式一：行内样式 --><span style="color: grey;">上海</span><!-- 方式二：内部样式 --><span>程序&技术类</span><!-- 方式三：外部样式 --><span>日常实习生</span></body>
</html>

css选择器
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【日常实习生】后端开发实习生 - 研发效能</title><style>/* 元素选择器 *//* span{color: grey;} *//* 类选择器 */.cls{color: grey;}/* ID选择器 */#type{color: gray;}a{/* 去除超链接下方的下划线 */text-decoration: none;}</style>
</head>
<body><!-- 定义一个标题，内容：【日常实习生】后端开发实习生 - 研发效能 --><h1>【日常实习生】后端开发实习生 - 研发效能</h1><!-- 定义一个超链接，内容：米哈游 --><a href="https://www.mihoyo.com/" target="_blank">米哈游</a><!-- 换行 --><br></br><span style="color: grey;">上海</span><span class="cls" id="type">程序&技术类</span><span class="cls">日常实习生</span></body>
</html>