本文介绍了HTML、CSS、JavaScript的基本概念，包括它们在网页构建中的作用、W3C的角色、开发环境的准备、第一个网页的创建、HTML和CSS的使用、元素和属性、文档结构、语义化的重要性以及文本元素和实体字符的处理。
P1 课程概述
1.HTML + CSS + Javascript = 网页。
2.HTML：超文本标记语言；定义网页中有什么。
3.CSS：层叠样式表；定义网页中的东西长什么样子。
4.Web：互联网。
5.W3C：万维网联盟，非营利性组织，w3.org
6.XML：可扩展的标记语言，用于定义文档结构。例如：请在每周一下午两点，从人人网下载最新美剧《老友记》。
<任务>
<执行日期>每周一</执行日期>
<执行时间>下午两点</执行时间>
<下载地址>人人网</下载地址>
<下载目标>最新版</下载目标>
</任务>4.HTML（超文本标记语言）：W3C组织定义的语言标准，用于描述页面结构的语言。例如：书写一个一级标题。
<h1> 一级标题</h1>学习文档：
https://developer.mozilla.org/zh-CN/
5.CSS：W3C组织定义的语言标准，用于描述页面展示的语言。
6.执行HTML、CSS：浏览器内核--->页面
7.浏览器：
shell：外壳
core：内核（JS执行引擎、渲染引擎）
IE、FirFox、Chrome、Safari、Opera
P2 开发环境准备
1.显示文件扩展名：
大部分文件的文件名：名称.扩展名（后缀名）
扩展名决定了文件被什么应用程序打开。
2.浏览器
3.编辑器：VSCode
P3 第一个网页
1.Emmet插件：自动生成HTML代码片段。
2.超链接：
3.注释：提供帮助，不参与运行。
格式如下：<!--注释内容-->
4.元素：又叫标签、标记。
整理：element（元素）
元素=起始标记（begin tag）＋结束标记(end tag)＋元素内容＋元素属性
5.属性=属性名+属性值
分类：
--局部属性：某些元素特有的属性。
--全局属性：所有元素通用。
6.有些元素没有结束标记，这样的元素叫做空元素。例如：<meta charset="UTF-8">
7.元素的嵌套：元素不能相互嵌套。
8.父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素）
9.文档声明：告诉浏览器，当前文档使用的HTML标准是HTML5，如果不写文档声明，将导致浏览器进入怪异渲染模式。
<!DOCTYPE html>10.根元素：一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。
HTML5版本中没有强制要求书写该属性。
lang属性:全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
<html lang="en">
</html>11.文档头：文档头内部的内容，不会显示到页面上。
<head>
</head>12.文档的元数据：附加信息。
<meta>13.charset:指定网页内容编码。通常选用UTF-8。
14.网页标题
<title>Document</title>15.文档体：页面上所有要参与显示的元素，都应该放置到文档体中。
<body>
</body>P4 语义化
1.每一个HTML元素都有具体的含义。
a元素：超链接
p元素：段落
h1元素：一级标题
2.所有元素与展示效果无关,元素展示到页面中的效果应该由CSS决定。（浏览器自带CSS元素，所以每个元素有一些默认样式）
3.选择什么元素，取决于内容的含义，而不是显示出的效果。
4.为什么需要语义化？
（1）为了搜索引擎优化（SEO）
搜索引擎：百度、搜搜、Bing、Google
每隔一段时间，搜搜引擎会从整个互联网中，抓取页面源代码。
（2）为了让浏览器理解网页
阅读模式、语音模式
P5 文本元素
2.h：标题
h1~h6：表示1级标题~6级标题
写法1：
写法二：
效果：
3.p：段落
p*3>{这是一个段落}
4.span（无语义）仅用于设置样式
以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）。
到了HTML5，已经弃用这种说法。
5.pre：预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示是，会被折叠为一个空格。
例外：在pre元素中的内容不会出现空白折叠。
在pre元素内部出现的内容，会按照源代码格式显示到页面上。
pre元素功能的本质：它有一个默认的CSS属性。
6.code：显示代码时，通常外面套code元素，code表示代码区域。
P6 实体
1.实体字符 HTML Entity
实体字符通常用于在页面中显示一些特殊符号。
（1）&单词；
（2）&#数字；
-小于符号 <
-大于符号 >
-空格
-版权符号 ©；
-&符号 &
扫一扫
970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
