HTML
一. 网页
1.基础概念
1.1 什么是网页
(1) 网站：是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定相关内容的网页集合
(2) 网页：网站中的一"页"，通常是HTML格式的文件，它需要通过浏览器来阅读
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.htm后缀结尾的文件，因此俗称HTML文件。
1.2 什么是HTML
(1) HTML指的是超文本标记语言，它是用来描述网页的一种语言；
- 超文本：可以加入图片、声音、动画、多媒体等内容(超越了文字内容) ；可以从一个文件跳转到另一个文件，与世界各地主机的文件链接(超级链接文本)
(2) HTML不是一种编程语言，而是一门标记语言(是一套标记标签)；
2. 网页的形成
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
- 前端人员开发代码 —> 浏览器显示代码(解析、渲染) —> 生成最后的Web页面
二. 常用浏览器
1.常用的浏览器
常用的浏览器有IE(Trident）、火狐(Gecko)、谷歌(Webkit)、Safar(Blink)、Opera(Blink)等，平时成为五大浏览器
2.浏览器内核(渲染引擎)
负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
目前国内浏览器一般都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等
三. Web标准
1.为什么需要Web标准
浏览器不同，它们显示页面或者排版就有些许差异，但是通过Web标准，展示统一内容。
2.Web标准的构成
主要包括结构、表现和行为三个方面。
2.1 结构
结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
2.2 表现
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
2.3 行为
行为指的是网页模型的定义以及交互的编写，现阶段学的主要是JavaScript
四.HTML标签(上)
1.HTML语法规范
1.1 基本语法概述
(1) HTML标签是由尖括号包围的关键词，例如 ；
(2) HTML标签通常是成对出现的，例如 和 ，称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签；
(3) 有些特殊的标签必须是单个标签(极少情况)，例如
，称为单标签；
1.2 标签关系
(1) 包含关系
(2) 并列关系
2.HTML基本结构标签
每个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。
2.1 第一个HTML网页
HTML页面也称为HTML文档
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | 页面中最大的标签，我们称为根标签 | |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title | |
| 文档的标题 | 让页面拥有一个属于自己网页标题 | |
| 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面 |
3.开发工具
3.1 VSCode的使用
(1) 双击打开软件;
(2) 新建文件(Ctrl + N);
(3) 保存(Ctrl + S)，注意移动要保存为.html文件;
(4) Ctrl + 加号键，Ctrl + 减号键 ，可以放大缩小视图;
(5) 生成页面骨架结构：输入！按下Tab键;
(6) 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击"Open In Default Browser"
3.2 VSCode工具生成骨架标签新增代码
3.2.1 文档类型声明标签 <!DOCTYPE>
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页 当前页面采取的是HTML5版本来显示网页3.2.2 lang语言种类
用来定义当前文档显示的语言
- en定义语言为英语；
- zh-CN定义语言为中文
3.2.3 字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字；
在head标签里，可以通过 标签的charset属性来规定HTML文档应该使用哪种字符编码
- charset常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
4.HTML常用标签
4.1 标签语义
理解标签的语义，知道这个标签用来干嘛。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰
4.2 标题标签
-
(1) 为了使网页更具有语义化，我们经常会在页面中使用到标题标签。HTML提供了6个等级的网页标题，即
-
。
(2) 单词head的缩写，意为头部、标题
(3) 标签语义：作为标题使用，并且根据重要性递减
<h1> 我是一级标题 </h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
</body>
</html>
4.3 段落和换行标签
4.3.1 段落标签
在网页中，要把整个文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，
标签用于定义段落，它可以将整个网页分成若干个段落。
(1) 标签语义：可以把HTML文档分割为若干个段落
(2) 特点：①文本在一个段落中会根据浏览器窗口的大小自动换行；②段落和段落之间有空隙
<p> 我是一个段落标签 </p>
<body>
<p>《计算机组成原理》是由蒋本珊编著，2004年清华大学出版社出版的21世纪大学本科计算机专业系列教材。该书可作为高等院校计算机及相关专业“计算机组成原理”课程的教材，也可供从事计算机工作的工程技术人员参考。</p>
<p>该书介绍了计算机的基本组成原理和内部工作机制。全书共分8章，主要内容分成两个部分：第1、2章介绍了计算机的基础知识；第3-8章介绍了计算机的各子系统（包括运算器、存储器、控制器、外部设备和输入输出子系统等）的基本组成原理、设计方法、相互关系以及各子系统互相连接构成整机系统的技术。</p>
</body>
4.3.2 换行标签
在HTML中，一个段落的文字会从左到右依次排列，知道浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行，就需要使用换行标签
(1) 是个单标签；
(2) 只是简单地开始新的一行，根段落不一样，段落之间会插入一些垂直的间距；
<p>《计算机组成原理》是由蒋本珊编著。<br /> 2004年清华大学出版社出版的21世纪大学本科计算机专业系列教材。该书可作为高等院校计算机及相关专业“计算机组成原理”课程的教材，也可供从事计算机工作的工程技术人员参考。</p>
4.4 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
(1) 标签语义：突出重要性，比普通文字更重要
(2) 几组重要标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | 或者 | 更推荐使用标签加粗，语义更强烈 |
| 倾斜 | 或者 | 更推荐使用标签倾斜，语义更强烈 |
| 删除线 | 更推荐使用 | |
| 下划线 | 或者 | 更推荐使用标签下划线，语义更强烈 |
<body>
<p>我是<strong>加粗</strong>的文字</p>
<p>我是<b>加粗</b>的文字</p>
<p>我是<em>倾斜</em>的文字</p>
<p>我是<i>倾斜</i>的文字</p>
<p>我是<del>删除线</del>的文字</p>
<p>我是<s>删除线</s>的文字</p>
<p>我是<ins>下划线</ins>的文字</p>
<p>我是<u>下划线</u>的文字</p>
</body>
4.5 装饰性标签
和
(1)
(2) 标签用来布局，一行上可以多个。小盒子
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的
<div> 这是头部 </div>
<span> 今日价格 </span>
<body>
<div> 我是一个div标签，我独占一整行</div> 123
<div> 我是一个div标签，我独占一整行</div> 456<br />
<span>百度</span>
<span>火狐</span>
<span>谷歌</span>
</body>
4.6 图像标签和路径(重点)
4.6.1 图像标签 ![]()
(1) 在HTML标签中， 标签用于定义HTML页面中的图像;
(2) 单标签;
(3) 图像标签的一些属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细(默认为黑色边框) |
(4) src 是 标签的必须属性，它用于指定图像文件的路径和文件名
- 所谓属性：简单理解就是属于这个图像标签的特性
<img src="图像URL"/>
<h3>图像标签的使用: </h3>
<img src="red background.jpg">
(5) alt 替换文本 图像显示不出来的时候用文字替换
<h3>alt 替换文本 图像显示不出来的时候用文字替换 </h3>
<img src="red1 background.jpg" alt ="找不到该图片！！！">
(6) title 提示文本 鼠标放到图像上，提示的文字
<h3>title 提示文本 鼠标放到图像上，提示的文字 </h3>
<img src="red background.jpg" alt ="找不到该图片！！！" title ="磕死我了，我的cp！！！">
(7) 设置图像像素
<h3>width 给图像设定宽度: </h3>
<img src="red background.jpg" width="250">
<h3>height 给图像设定高度: </h3>
<img src="red background.jpg" height="250">
<h3>border 给图像设定边框粗细: </h3>
<img src="red background.jpg" height="250" border="15">
(8) 图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面；
② 属性之间不分先后，标签名与属性、属性与属性之间均以空格分开；
③ 属性采取键值对的格式，即key="value"的格式，属性=“属性值”。
4.6.2 路径(前期铺垫知识)
(1) 目录文件夹和根目录
实际工作中，我们的文件不能随便乱放，需要一个文件夹来管理它们
① 目录文件夹：即普通文件夹，只不过里面存放了我们做页面所需要的相关素材，比如html文件、图片等；
② 根目录：打开目录文件夹的第一层就是根目录
(2) 路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件(imags)，这时再查找图像，就需要采用"路径"的方式来指定图像文件的位置
① 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 如 |
② 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始路径或者通过网址域名获取
例如，“C:\Users\李苏婷law\Pictures\Mycp2.jpg” 或者" https://i1.hdslb.com/bfs/archive/1a97a14b9476bd7d43d2d33ef865017b075968cb.jpg "
4.7.1 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
(1) 两个属性：
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的urf地址，(必须属性)当为标签应用herf属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中 _ self为默认值(当前窗口)， _blank 为在新窗口打开方式 |
4.7.2 链接分类
(1) 外部链接，例如：
<a href="http://www.baidu.com">百度</a>
(2) 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如：
<a href="gongsijianjie.html">公司简介</a>
(3) 空链接
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
(4) 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
<h4>4.下载链接，地址链接的是 文件 .exe 或者是 zip等压缩包形式 </h4>
<a href="red background.zip"> 下载文件</a>
(5) 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
<h4>5.网页元素的链接</h4>
<a href="http://baidu.com"><img src="img/Mycp1.jpg" width="250"></a>
//点击图片就可以跳转到百度页面
(6) 锚点链接：当我们点击链接，可以快速定位到某个页面中的某个位置
-
在链接文本的href属性中，设置属性值为 #名字 的形式，如
<a href ="#two">第二集</a> -
找到目标位置标签，里面添加一个 id属性 = 刚才的名字，如
<h3 id = "two">第二集介绍</a>
5.HTML中的注释和特殊字符
5.1 注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要用注释标签
(1) 格式：
以"<!-->"开头，以"-->"结束
<!--我想喝手磨咖啡-->
(2) 快捷键：ctrl+/
(3) 注释标签里面的内容是不执行不显示到页面中的
5.2 特殊字符
在HTML页面中，一些特殊字符很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
讲 p 究<br />
<!-- 讲 三个空格 究 -->
< p >
<!-- 是一个段落标签 -->
五.HTML标签(下)
1. 表格标签
1.1 表格的主要作用
(1) 表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性特别好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能把繁杂的数据表现得很有条理；
(2) 表格不是用来布局页面的，而是用来展示数据的
1.2 表格的基本语法
(1) 一个大的方框
<table> </table> 是用于定义表格的标签
(2) 表格中的行
<tr> </tr> 标签用于定义表格中的行，必须嵌套在<table> </table> 标签中
(3) 单元格里面可以放任何元素，文字图片链接等都可以
<td> </td> 用于定义表格中的单元格，必须嵌套在<tr> </tr> 标签中
(4) 字母td指的是表格数据(table data)，即数据单元格的内容
1.3 表头单元格标签
(1) 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
(2) < th > 标签表示HTML表格的表头部分；
1.4 表格属性
(1) 表格的边框等属性，实际开发不常用，后面通过CSS来设置；
(2) 具体属性设置如下：
<body>
<!-- 这些属性要写到表格标签table里面去 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>张学友</td> <td>男</td> <td>57</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>54</td></tr>
<tr><td>黎明</td> <td>男</td> <td>55</td></tr>
</table>
</body>
1.5 表格结构标签
(1) 使用场景：因为表格可能很长，为了更好地表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
(2) 在表格标签中，分别用：< thead> 标签（范围更广） 来表示 表格的头部区域 、< tbody > 标签 来表示 表格的主体区域
(3)
<thead> </thead>:用于定义表格的头部。<thead> 内部必须拥有<tr>标签。一般是位于第一位
<tbodt> </tbodt>：用于定义表格的主体，主要存放数据本体。
1.6 合并单元格
特殊情况下，可以把多个单元格合并为一个单元格。
1.6.1 合并单元格的方式
(1) 跨行合并：rowspan=“合并单元格的个数”
(2) 跨列合并：colspan =“合并单元格的个数”
1.6.2 目标单元格(写合并代码)
(1) 跨行：最上侧单元格为目标单元格，写合并代码
(2) 跨列：最左侧单元格为目标单元格，写合并代码
1.6.3 合并单元格的步骤
(1) 先确定是跨行合并还是跨列合并；
(2) 找到目标单元格，写上 合并方式 = 合并的单元格数量。比如：< td colspan> =" 2 "< /td >；
(3) 删除多余的单元格。
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<!-- 合并第一行第2、3列单元格 -->
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
1.7 总结
1.7.1 表格的相关标签
(1) table 标签
(2) tr 行标签
(3) td 单元格标签
(4) th 表头单元格标签
(5) thead 表格头部区域标签
(6) tbody 表格主体区域标签
1.7.2 表格的相关属性
1.7.3 单元格的合并
2. 列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
2.1 无序列表(重点)
(1) < ul > 标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表页，而列表页使用< li >标签定义
(2) 无序列表的基本语法格式如下：
(3) 注意点：
① 无序列表的各个列表项之间没有顺序级别之分，是并列的；
② < ul > < /ul > 中只能嵌套< li > < /li >，直接在< ul > < /ul >标签中输入其他标签或者文字的做法是不被允许的；
③ < li > < /li > 之间相当于一个容器，可以容纳所有元素；
④ 无序列表会带有自己的样式属性，但在实际使用时，我们会用CSS来设置。
2.2 有序列表
(1) 有序列表即为有排序顺序的列表，其各个列表项会按照一定的顺序排列定义
(2) 在HTML标签中，< ol >标签用于定义有序列表，列表排序以数字来显示，并且使用< li >标签来定义列表项
(3) 有序列表的基本语法格式如下：
(4) 注意点：
① < ol > < /ol > 中只能嵌套< li > < /li >，直接在< ol > < /ol >标签中输入其他标签或者文字的做法是不被允许的；
③ < li > < /li > 之间相当于一个容器，可以容纳所有元素；
④ 无序列表会带有自己的样式属性，但在实际使用时，我们会用CSS来设置。
2.3 自定义列表(重点)
2.3.1 使用场景
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
2.3.2 如何使用
(1) 在HTML标签中，< dl >标签用于定义描述列表(定义列表)，该标签会与< dt >(定义项目/名字)和< dd >(描述每一个项目/名字)一起使用
(2) 基本语法格式如下：
(3) 注意：
① < dl > < /dl > 里面只能包含< dt > 和 < dd >
② < dt > < /dt > 和 < dd > < /dd >个数没有限制，经常是一个< dt >对应多个< dd >
2.4 列表总结
3. 表单标签
3.1 目的
(1) 使用表单的目的是为了收集用户信息；
(2) 在网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单；
(3) 常见于注册页面；
3.2 表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分组成
3.3 表单域
表单域是一个包含单元素的区域。
(1) 在HTML标签中，< form >标签用于定义表单域，以实现用户信息的收集和传递；
(2) < form >会把它范围内的表单元素提交给服务器；
(3) 基本语法格式：
(4) 常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
(5) 两点基础：
① 在我们写表单元素之前，应该有个表单域把它们进行包含；
② 表单域是form标签；
3.4 表单控件/表单元素
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
3.4.1 input (单标签)输入表单元素
(1) 作用：< input >标签用于收集用户信息；
(2) 在< input >标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本文段、复选框、掩码后的文本控件、单选按钮、按钮等) ；
(3) 基本语法格式：< input type=“属性值” >
(4) type属性值：
(5) 其他常用属性：
① 区别众多表单属性；
② name和value是每个表单元素都有的属性值，主要给后台人员使用；
③ name表单元素的名字，要求单选按钮和复选框要有相同的name值；
④ checked属性主要是针对单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素；
⑤ maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
(5) < label >标签为input元素定义标注(标签)
① < label >标签用于绑定一个表单元素，当点击 < label >标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验；
② 基本语法规范：
< label >标签的for属性应当与相关元素的id属性相同
3.4.2 select下拉表单元素
(1) 使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间，我们就可以使用< select >标签控件定义下拉列表
(2) 基本语法规范：
① < select >中至少包含一对< option >;
② 在< option >中定义selected="selected"时，当前项即为默认选中项
3.4.3 textarea文本域元素
(1) 使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用< textarea >标签
(2) 在表单元素中，< textarea >标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板、评论；
(3) 基本语法规范：
① 通过< textarea>标签可以轻松地创建多行文本输入框；
② cols=“每行中的字符数”，rows=“显示的行数”,我们在实际开发中不会使用，都是用CSS来改变大小的
3.5 综合案例
4. 查阅文档
(1) 百度：https://www.baidu.com
(2) W3C：http://www.w3school.com.cn/
(3) MDN：https://developer.mozilla.org/zh-CN/
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
