HTML一
1.网页
1.1什么是网页
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合
网页是网站的一页，通常时HTML格式的文件，它要通过浏览器来阅读
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件
1.2什么是HTML
HTML是超文本标记语言，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。
所谓超文本1，可以加入图片，声音，动画，多媒体等内容。2，可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）
1.3网页的形成
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
2.常用浏览器
浏览器是网页显示运行的平台。常用的浏览器由IE，火狐，谷歌，Safari和Opera
浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
3.Web标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
3.1为什么需要web标准
浏览器不同，它们显示页面或者排版有些许差异。
3.2Web标准的构成
主要包括结构，表现和行为
结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现：表现用于网页元素的办版式，颜色，大小等外观样式，主要指的是CSS
行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript
结构写到HTML文件中，表现写道CSS文件中，行为写到JavaScript文件中
4.HTML语法规范
4.1基本语法规范
1.HTML标签是由尖括号包围的关键词，例如<html>。
2.HTML标签通常是成对出现的，例如<html></html>，称之为双标签，第一个开始标签，第二个结束标签
3.单个标签，<br/>
4.2标签关系
双标签关系可以分为两类：包含关系和并列关系
包含关系（父子关系）
<head>
<title></title>
</head>
并列关系(兄弟关系)
<head></head>
<body></body>
5.HTML基本结构标签
5.1
基本结构标签（骨架标签）
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | 页面中最大的标签，我们称为根标签 | |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title | |
| 文档的标签 | 让页面拥有一个属于自己的网页标题 | |
| 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放在body里面 |
6.网页开发工具
6.1vscode的使用
1.双击打开软件
2.新建文件（Ctrl+N）
3.保存（Ctrl+S），文件后缀改为.html
4.Ctrl+加号键Ctrl+减号键，可以放大缩小
5.生成页面骨架结构：输入!按下Tab键（!英文格式）
7.网页开发工具
7.1文档类型声明标签
1212<!DOCTYPE >文档类型声明，作用就是告诉浏览器使用了哪个版本来显示网页
1233<!DOCTYPE html>当前页面采取的是HTML5版本来显示网页
7.2lang语言种类
用来定义当前文档显示的语言
1.en定义语言为英语 2.zn-CN定义语言为中文
7.3字符集
字符集（Character set）是多个字符集合，以便计算机能够识别和存储各种文字
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用那种字符编码
8.HTML常用标签
8.1标签语义
根据标签语义，再合适的地方给一个最为合适的标签，可以让页面结构更清晰
8.2标题标签<h1>-<h2>重要
6个等级标签<h1>-<h2>
举例，<h1>我是一级标签</h1>
标签语义：作为标题使用，并且依据重要性递减。
特点：加了标题的文字会变粗，字号也会一次变大。一个标题独占一行。
8.3段落和换行标签
段落标签：在HTML中<p>标签用于定义段落</p>它可以把整个网页分成若干段落
特点：文本在一个段落中会根据浏览器窗口的大小自动换行。段落和段落之间由空隙
强制换行：在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文字强制换行显示，需要使用换行标签<br/>
特点：<br/>是个单标签。只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
8.4文本格式化标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | 或者 | 推荐 |
| 倾斜 | 或者 | 推荐 |
| 删除线 | 推荐 | |
| 下划线 | 或者 | 推荐 |
8.5
和
标签
在HTML中，<div>和<span>没有语义，相当于盒子，用来装内容。布局标签
特点：<div>标签用来布局，是一行只能放一个的大盒子<span>一行可以放多个的小盒子
8.6图像标签和路径（重点）
1.图像标签
在HTML中，标签用于定义HTML页面中的图像
<img src="图像url">
scr是<img>标签的必须属性，它用于指定图像文件的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放在图像上，显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点：
1.图像标签可以拥有多个属性，必须写在标签名的后面
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
3.属性采取键值对的格式，即key=“value”的格式，属性=“属性值”
2.路径
（1）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gif"/> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif"/> |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 如<img src="../baidu.gif"/> |
（2）绝对路径:是指目录下的绝对路径，直接到达目标位置，通常是从盘符开始的路径。
\绝对路径的符号是\
/相对路径的符号是/
8.7超链接标签（重点）
在HTML中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
1.超链接的语法规范a=anchor:锚
：<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
| 属性 | |
|---|---|
| href | 用于指定链接目的的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中___self为默认值，___blank为在新窗口中打开方式 |
2.链接分类
外部链接：<a href="http://www.qq.com"target="_blank">腾讯</a>
内部链接：<a href="体育案例.html"target="_blank">体育案例</a>
空链接：<a href="#"target="_blank">公司简介</a>
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接，在网页中各种元素都可以做链接，如文本，图像，表格，音频，视频等都可以添加超链接
锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#two”>第二集</a>
找到目标位置标签，里面添加一个id属性 =刚才的名字，如<h3 id="two">第二季</h3>
9.HTML中的注释和特殊字符
9.1注释
以"<!--”开始"-->"结束<!--注释语句--> 快捷键：Ctrl+/
9.2特殊字符
空格– ；小于号----<**
大于号---->；
以&开头以；结尾
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
