前端基础之HTML基础（一）

HTML基础（一）

标题web工作原理：

• 因特网和万维网：
  
  
  
  
• 网站是什么？

1. 网站是一个资源的集合，包含各种网页文件和资源文件。

• 网页类型？

• 网站的工作原理：
  
• URL：
  

1. URL(Uniform Resource Locator):统一资源定位符
2. URL的基本组成
（1）. 协议名
（2）. 服务器名
（3）. 文件名
（4）.参数

• 服务器和客户端交互：
  1. web服务器：
  
  2. web浏览器:
  
  
• 网页访问的具体实现：

**1.**在编辑器中编写HTML代码

2. 在浏览器显示HTML文档/页面

• 常用编辑器介绍：
  

• VSCode工具开发环境搭建：

1. 创建网站项目

2. 创建网页

3. 编辑网页
   （1）创建页面快捷方式！+Tab

4. 浏览页面方式
   （1）安装插件 open in browser

   （2）安装插件 live server

• 浏览器的使用：
  **1.**源代码的查看
  
  2. 开发者工具窗口的应用

HTML概述：

• HTML发展历史：
  1. HTML：Hyper Text Markup Language

• HTML基本结构
  
  
• HTML文档类型声明：
  
• HEAD标签的子标签_title
  1.
  
• HEAD标签的子标签_meta
  1.
  
• HTML语法要求
  1. 标签和换行、空格、Tab的关系
  （1）标签的显示不受换行、Tab影响
  （2）标签中的空格会出现折叠现象
  2. 标签必须正确闭合和嵌套
  3. 注释
  (1) <!—这是注释的内容–>

HTML常用标签

• HTML标签基本类型：

1. 文本类标签
2. 图片标签
3. 超链接标签
4. 框架标签
5. 容器标签
6. 钩子标签

• 文本类标签_标题
  1. 标题标签
  <h1>…</h1>
  <h2>…</h2>
  <h3>…</h3>
  <h4>…</h4>
  <h5>…</h5>
  <h6>…</h6>
  

• 文本类标签_段落
  1. 段落标签
  <p>…<p>
  
  

• 文本类标签_换行
  1. 换行标签
  <br/>

• 文本类标签_水平线
  1. 水平线标签
  <hr/>
  

• 文本类标签_字体样式
  1. 字体样式标签
  加粗：<strong>…</strong>
  斜体：<em>…</em>

• 文本类标签_特殊符号
  1. 特殊符号
  

• 图片标签_类型
  1. 常见的图像格式
  JPG
  GIF
  PNG
  base64
  webp
  ……

• 图片标签_img

• 图片标签_图片的路径
  1. HTML绝对路径指带域名的文件的完整路径
  **2.**相对路径指文件的相对位置

• 超链接标签：
  
  

• 超链接标签_链接类型
  1. 页面间链接
  （1）从一个页面链接到另外一个页面
  2. 锚链接
  （2）页面内部或页面间跳转到指定位置

• 超链接标签_锚链接语法
  1. 锚链接
  （1）从A页面的甲位置跳转到本页中的乙位置
  （2）从A页面的甲位置跳转到B页面中的乙位置
  2. 创建步骤
  （1）创建跳转标记，利用name或者id属性
  
  （2）创建跳转链接
  

• 超链接标签_超链接功能性作用
  1. 功能性链接
  （1）电子邮件
  （2）MSN
  

• 框架是什么_概述
  1. 为什么使用框架？
  2. 常用框架技术

• 框架的应用_语法

• 容器标签_div
  1. 网页布局的容器
  

• 容器标签_span
  1. 局部文字的容器标签
  
  -钩子标签
  1. 没有语义的标签，已经被废弃，但仍可以被用于当作CSS钩子

		1. b标签
		2. i标签
		3. u标签
		4. s标签