学习目标
一、网页的相关概念
1.1什么是网页？
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
1.2什么是HTML？
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
2.HTML 不是 一种编程语言，而是一种标记语言 (markup language)。
1.3常用的浏览器
-
IE
-
火狐
-
谷歌
-
苹果
-
欧朋
1.4浏览器内核（渲染引擎）
浏览器内核负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
内核分别有：Trident、Gecko、Webkit、Blink
1.5web标准
1.5.1web标准概念
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化 组织。
1.5.2为什么需要Web标准？
浏览器不同，它们显示页面或者排版就有些许差异，遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还可以使网站更易于维护,提高页面浏览 速度。
1.5.3 web标准的构成
web标准主要有三部分组成：结构(html)+表现(css)+行为(js)
1.6开发工具
二、HTML基础
2.1VSCode的使用
-
双击打开软件
-
新建文件（ctrl+N）
-
保存（ctrl+S），注意移动要保存为 .html 文件
-
ctrl+加号健，ctrl+减号健 可放大缩小视图
-
生成页面骨架结构，输入html：5或英文状态下的！按下Tab健
-
利用插件在浏览器中浏览页面，单击鼠标右键，在弹出窗口中点击“Open In Default Browser”
2.2DOCTYPE
-
文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
-
lang 语言种类 用来定义当前文档显示的语言。 en定义语言为英语 zh-CN定义语言为中文 简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页 其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文 这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
-
字符集 字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。 在标签内，可以通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。 charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所 有国家需要用到的字符.
-
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成 标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。
2.3基本标签结构
骨架标签 在VScode中，利用html：5加Tab健自动生成
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，称为根标签 |
| <head></head> | 文档的头部标签 | 注意在head标签中我们必须要设置的标签是title |
| <titile></titile> | 文档的标题标签 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主元素 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
2.4常用的标签
2.4.1标题标签
标题标签是h1——h6为了使网页更具有语义化，我们经常会在网页中用到标题标签。HTML提供了6个等级的网页标题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
2.4.2段落标签
<p>标签用于定义段落，它可以将整个网页分为若干个段落。 具体实现：<p>我是一个段落标签</p>
2.4.3特殊标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 推荐使用<strong>标签加粗 语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 推荐使用<em>标签加粗 语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 推荐使用<del>标签加粗 语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 推荐使用<ins>标签加粗 语义更强烈 |
2.4.4容器标签
div和span标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。 具体实现： <div> 这是头部 </div> <span> 今日价格 </span> 特点： 1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子 2. <span> 标签用来布局，一行上可以多个 <span>。小盒子
2.4.5图片标签
在 HTML 标签中， 标签用于定义 HTML 页面中的图像。
<img src="图像URL" />
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签注意点：
-
图像标签可以拥有多个属性，必须写在标签名的后面。
-
属性之间不分先后顺序，标签名与属 性、属性与属性之间均以空格分开。
-
属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
2.4.6路径分类
路径分为相对路径和绝对路径：
(1) 路径中相对路径 相对路径：以引用文件所在位置为参考基础，而建立出的目录 路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级 如 |
(2) 路径之绝对路径 绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 例 如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif
2.4.7特殊字符
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少，如果需要回头查阅即可。
三、表格
3.1表格结构
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</tbody>
</table>1.<table> </table> 是用于定义表格的标签。 2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。（横行） 3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。（竖列） 4.字母 td 指表格数据（table data），即数据单元格的内容。
3.2表格样式
表格属性：表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.
3.3合并单元格
特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.
-
合并单元格方式
-
目标单元格
-
合并单元格的步骤
合并单元格方式：
跨行合并：rowspan="合并单元格的个数"（最上侧单元格为目标单元格, 写合并代码）
跨列合并：colspan="合并单元格的个数（最左侧单元格为目标单元格, 写合并代码）
合并单元格步骤：
-
先确定是跨行还是跨列合并。
-
找到目标单元格. 写上合并方式 = 合并的单元格数量。
最低0.47元/天 解锁文章
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
