Web前端开发技术第三周周二课堂笔记

Posted on 2026-03-17 13:22  福寿桃呐  阅读(23)  评论(0)    收藏  举报

*设置背景颜色为红色（引入外部样式的方法）

1.右击css，新建—>css文件，弹出对话框命名style.css

2.右击项目，新建—>HTML文件，弹出对话框命名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

在title与/title中间输入“标记的属性”，回车输入l，回车两次输入

<link rel="stylesheet" type="text/css"
href="css/style.css"/>

4.打开刚建的css文件在其中输入

/*设置背景颜色为红色*/
body{
	background-color: red;
}

5.将两个文件保存回到HTML文件中Ctrl+R运行

一.权重大小依次为：行内>外部>内部

外部样式

<link rel="stylesheet" type="text/css" href="css/style.css"/>

内部样式

行内样式

<h1 style="color: green;">我是标题一</h1>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标记的属性</title>
		<!--外部样式-->
	    <link rel="stylesheet" type="text/css" href="css/style.css"/>
	    <!--内部样式-->
	    <style type="text/css">
	    	body{
	    		background-color: orange;
	    	}
	    	h1{
	    		color:#fff;
	    	}
	    </style>
	</head>
	<body>
		<!--设置背景颜色为红色-->
		<h1 style="color: green;">我是标题一</h1>
		<!--用属性控制文本居中-->
		<h1 align="center">我是用属性控制的标题一</h1>
	    <!--用行内样式设置水平居中-->
	    <h1 style="text-align:center">我是用行内样式设置水平居中的标题一</h1>
	    
	</body>
</html>

二.头部标记

1.标记的名称、单还是双

2.标记的功能

3.标记的使用方法和注意事项

title

<title> 标记用于定义HTML页面的标题，即给网页取一个名字，必须位于 <head> 标记之内。

meta

<meta> 标记用于定义页面的元信息，可重复出现在 <head> 头部标记中。

link

在 <head> 中使用 <link> 标记可引用外部文件，一个页面允许使用多个 <link> 标记引用多个外部文件。

style

<style> 标记用于为HTML文档定义样式信息，位于 <head> 头部标记中。

20个网页title整理及规律总结

一、20个网页title示例

  1. 百度一下，你就知道 - 百度
  2. 京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
  3. 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili
  4. 淘宝 - 淘！我喜欢
  5. 知乎 - 有问题，就会有答案
  6. 网易云音乐 - 发现好音乐
  7. 腾讯视频 - 不负好时光
  8. 微博 - 随时随地发现新鲜事
  9. 小红书 - 标记我的生活
  10. 抖音 - 记录美好生活
  11. 菜鸟裹裹 - 查快递,寄快递,管快递
  12. 支付宝 - 生活好，支付宝
  13. 微信公众平台
  14. 百度地图 - 智能出行助手
  15. 美团 - 吃喝玩乐，尽在美团
  16. 饿了么 - 点外卖，找饿了么
  17. 豆瓣 - 书影音，新生活
  18. 今日头条 - 你关心的，才是头条
  19. 爱奇艺 - 悦享品质
  20. 携程旅行 - 放心的服务，放心的选

二、title规律总结

  1. 核心信息前置：优先展示网站名称、核心功能或品牌标语，让用户一眼识别用途。
  2. 简洁易记：长度控制在合理范围，避免冗长，突出关键词，方便记忆和搜索。
  3. 品牌+功能结合：多数包含品牌名+核心服务/口号，既强化品牌，又说明网站用途。
  4. 贴合用户需求：用通俗语言传递价值，如“查快递”“点外卖”“发现好音乐”，直击用户痛点。
  5. 风格统一：同一网站的不同页面，title会保持品牌名一致，仅更换细分内容，形成统一认知。

*UTF-8 和 GB2312 的区别（简单好记版）

  1. 字符范围不同
  • GB2312：只包含简体中文 + 少量符号，不支持繁体、日文、韩文、特殊符号。
  • UTF-8：全球通用，支持中文、英文、日文、韩文、 emoji、特殊符号等所有语言。
  1. 编码大小不同
  • GB2312：中文占 2 字节，英文占 1 字节。
  • UTF-8：中文占 3 字节，英文占 1 字节。
  1. 兼容性不同
  • GB2312：只适合纯中文网站，跨语言会乱码。
  • UTF-8：所有浏览器、系统、网站通用，不乱码。
  1. 现在用哪个？
  • 现在全部用 UTF-8（HTML 标准、国际化、不乱码）。
  • GB2312 基本淘汰，只在老网站偶尔见到。

一句话总结：
GB2312 = 只支持简体中文；UTF-8 = 全世界通用，不乱码。

*meta标签与概念

  1. meta
    最基础的元信息标签，用来告诉浏览器网页的字符编码、适配、描述、关键词等。

  2. meta_description
    网页描述，给搜索引擎看的，比如：
     

  3. meta_GB2312
    设置字符编码为 GB2312（简体中文），老网站用。

  4. meta_keywords
    网页关键词，给搜索引擎用，比如：
     

  5. meta_nocache
    不让浏览器缓存页面，每次都重新加载。

  6. meta_UTF8
    设置字符编码为 UTF-8（全球通用，不乱码），现在必须用。

  7. meta_viewport
    手机端适配，让网页在手机上不乱跑、不缩放。
     

一句话总结：
这些都是 meta 标签的常用快捷写法，用来告诉浏览器“网页怎么显示、用什么编码、怎么适配手机”。

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3