web前端开发技术课堂笔记03
<h5 id="语法格式">语法格式</h5><p><标签名 属性1=“属性值1” 属性2....>内容</标签名></p>
<h5 id="注意">注意</h5>
<p>css文件可以复用，只要修改这个文件，链接这个文件的页面的样式也改变</p>
<p>新建页面先写开头</p>
<p>写的时候注意注释：ctrl+/添加注释的快捷键</p>
<p>子文件的命名：以sbu开头。</p>
<h5 id="调用样式的三种方法引入外部样式的方法内部样式行内样式">调用样式的三种方法:引入外部样式的方法、内部样式、行内样式</h5>
<p>当样式设置发生冲突时，就近原则</p>
<p>权重大小：行内>内部>外部</p>
<p>(1)外部</p>
<pre><code class="language-html"><link rel="stylesheet" href="css/style01.css" />
</code></pre>
<h5 id="设置页面颜色为红色在css文件里">设置页面颜色为红色(在css文：件里)</h5>
<pre><code class="language-html">/*设置背景颜色为红色*/
body{
background-color: red;
}
</code></pre>
<h5 id="链接外部文件的位置">链接外部文件的位置</h5>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标记的属性</title>
<link rel="stylesheet" href="css/1.css" />//这里
</head>
<body>
</body>
</html>
</code></pre>
<p>(2)内部</p>
<pre><code class="language-html"><style type="text/css">
</style>
</code></pre>
<p>(3)行内样式</p>
<pre><code class="language-html"><h1 style="color: green;">我是标题1</h1>
</code></pre>
<h5 id="属性和样式的区别与联系">属性和样式的区别与联系</h5>
<p>Tips:样式能实现的效果,属性不一定能实现;反过来,属性能实现的,样式一定能实现。</p>
<h5 id="头部标记">头部标记</h5>
<p>1.标记的名称、单还是双标记</p>
<p>2.标记的功能</p>
<p>3.标记的使用方法和注意事项</p>
<ol>
<li>
<p>titl</p>
</li>
<li>
<p>meta定义了编码格式；常用UTF-8和GB2312</p>
<h5 id="utf-8-和-gb2312-的区别web前端开发">UTF-8 和 GB2312 的区别（Web前端开发）</h5>
<ol>
<li>
<h5 id="字符集范围最核心区别">字符集范围（最核心区别）</h5>
</li>
</ol>
<ul>
<li>GB2312：简体中文专用，只包含汉字、字母、数字、常用符号，不支持繁体、生僻字、 emoji、外文。</li>
<li>UTF-8：全球通用，包含所有语言文字 + emoji + 特殊符号，几乎无字符缺失问题。</li>
</ul>
<ol start="2">
<li>
<h5 id="编码长度存储传输">编码长度（存储/传输）</h5>
</li>
</ol>
<ul>
<li>GB2312：英文/数字：1 字节；中文：2 字节</li>
<li>UTF-8：英文/数字：1 字节；中文：3 字节；emoji/生僻字：4 字节</li>
</ul>
<ol start="3">
<li>
<h5 id="兼容性web-开发重点">兼容性（Web 开发重点）</h5>
</li>
</ol>
<ul>
<li>GB2312：兼容性差，跨语言/跨平台易乱码，现代网站基本不用。</li>
<li>UTF-8：全平台兼容，HTML、CSS、JS、数据库、浏览器默认都支持，是Web 标准编码。</li>
</ul>
<ol start="4">
<li>
<h5 id="前端使用建议">前端使用建议</h5>
</li>
</ol>
<ul>
<li>
<p>必须用 UTF-8，在 HTML 头部写：</p>
<pre><code class="language-html"><meta charset="UTF-8">
</code></pre>
</li>
<li>
<p>不要用 GB2312，否则：</p>
</li>
<li>
<p>生僻字、繁体、emoji 显示为方框/问号</p>
</li>
<li>
<p>多语言页面必乱码</p>
</li>
</ul>
<p><img alt="image-20260317093902348" loading="lazy"></p>
<ol>
<li>
<h5 id="meta">meta</h5>
<p>1.意思：网页的元信息标签（给浏览器、搜索引擎看的，用户看不见）</p>
<p>2.作用：设置编码、描述、关键词、适配手机等</p>
</li>
<li>
<h5 id="meta_description">meta_description</h5>
<p>1.意思：网页描述</p>
<p>2.作用：写一段网页介绍，搜索引擎会显示在搜索结果下面</p>
</li>
<li>
<h5 id="meta_gb2312">meta_GB2312</h5>
<p>1.意思：设置编码为 GB2312（简体中文编码）</p>
<p>2.作用：让中文不乱码</p>
</li>
<li>
<h5 id="meta_keywords">meta_keywords</h5>
<p>1.意思：网页关键词</p>
<p>2.作用：给搜索引擎看，告诉它网页讲什么</p>
</li>
<li>
<h5 id="meta_nocache">meta_nocache</h5>
<p>1.意思：不缓存</p>
<p>2.作用：不让浏览器保存网页内容，每次都重新加载</p>
</li>
<li>
<h5 id="meta_utf8">meta_UTF8</h5>
<p>1.意思：设置编码为 UTF-8</p>
<p>2.作用：全球通用编码，不乱码，现在网页必须用</p>
</li>
<li>
<h5 id="meta_viewport">meta_viewport</h5>
<p>1.意思：视口设置</p>
<p>2.作用：适配手机，让网页在手机上不乱、不缩放</p>
<h5 id="meta-是网页的说明书utf-8-是编码viewport-是手机适配description-是介绍keywords-是关键词">meta 是网页的“说明书”，UTF-8 是编码，viewport 是手机适配，description 是介绍，keywords 是关键词。</h5>
</li>
</ol>
<h5 id="网页title规律总结清晰好记">网页Title规律总结（清晰好记）</h5>
<ol>
<li>
<p>格式规律：多数是「网站名 - 口号/功能」，少数直接写网站名</p>
</li>
<li>
<p>内容规律：都包含网站名，再加用途、口号、关键词</p>
</li>
<li>
<p>长度规律：一般10–30字，太长会被截断</p>
</li>
<li>
<p>作用规律：告诉用户这是什么网站，方便搜索和识别</p>
</li>
<li>
<p>通用规律：简洁、好懂、突出核心，不写无关内容</p>
</li>
</ol>
</li>
</ol><br><br>
来源：https://www.cnblogs.com/qyfd7/p/19730533
頁:
[1]