大前端学习笔记2-HTML网页开发
时间：2023-07-05 12:27:02 | 来源：网站运营
时间：2023-07-05 12:27:02 来源：网站运营
大前端学习笔记2-HTML网页开发：
一、HTML概述（一）网页的本质
- HTML就是用制作网页文件的
- 浏览器查看网页都是.html或.htm文件
- HTML叫做超文本标记语言（Hypertext Markup Language），用于搭建网页的结构
（二）网页的组成
- 前端三层：HTML(结构层)、CSS(样式层)、JavaScript(行为层)
- 其他多媒体内容：图片、视频、音频、超级链接等
- 所有的网页文件都是真实的、物理存在的文件
二、互联网原理（一）互联网运行过程
- 程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请示到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果。
互联网运行过程服务器
- 服务器（server），就是一种特殊的计算机，也包括处理器、硬盘、内存、系统产品线等，但是由于需要提供更可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高。
- 云服务器
- 目前绝大多数网站都采用的是云服务器（Elastic Compute Service，ECS），云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器。
客户端
- 客户端（Client）也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如最常用就是浏览器、app等，而Web开发最主要的客户端形式还是浏览器。
- 浏览器（Browser），是一种用户上网搜索、查看信息资源的应用程序。
- 功能：用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML网页。
- 主流的Web页面浏览器：微软的IE和Microsoft Edge、Mozilla的Firefox、苹果公司的Safari、Google的Chrome以及Opera软件公司的Opera。平时称为五大浏览器：
- 主流浏览器内核：因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，对网页的渲染效果会有差异。
推荐：使用Chrome浏览器（渲染效果好、市场占有率高、自带开发者调试工具）HTTP协议
- Hypertext Transfer Protocol：超文本传输协议。是客户端浏览器或其他程序WEB服务器之间的应用层通信协议。
- HTTP协议包含以下两部分
三、HTML概念（一）纯文本格式
- 纯文本格式，就是没有任何文本修饰的，没有任何粗体、下划线、斜体、图形、符号或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式设置。
- 格式对比
（二）HTML
- Hypertext Markup Language：超文本标记语言，是用来制作网页的一种标记语言。
- HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处。
HTML的功能：利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。
HTML的语义化：HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰。
- 方便代码的阅读和后期维护。
- 便于浏览器或是网络爬虫更好地解析网站内容。
- 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名。
四、HTML基本语法（一）HTML规范版本
- W3C：World Wide Web Consortium，万维网联盟。专门发布和维护互联网的规范和标准。
（二）HTML标签
- HTML标记通常被称为HTML标签（HTML tag）。标签在书写和使用过程中，必须遵循特定的语法。
- HTML标签语法：
（三）HTML元素
- HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。
- 根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。
1.元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。
2.空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。
（四）HTML属性
1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔。
2.属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做
键值对写法，HTML标签属性的键值对写法是：k="v"。XHTML要求属性值必须在双引号内部。
如：<p
k="v"></p>
3.一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是：k="v"。
如：<p
k="v" k="v" k="v"></p>
4.部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。
如：<p
k="v1 v2 v3 v4"></p>
五、HTML编辑器- 纯文本编辑器：所有的纯文本编辑器都能编辑HTML文件，例如记事本、Editplus、notepad等。
- 专门制作网页的软件
- VS code编辑器（推荐使用）
- VS code软件，是微软公司研发的一款非常方便使用的编辑器（重点是免费）。
- VS code拥有超级丰富的插件扩展，可以根据自己的需求使用不同的插件，对于开发者来说更加友好。
- VS code插件安装
1.打开VS code后，使用ctrl+shift+X打开扩展
2.输入要安装的插件名称，点击Install安装
六、HTML基本结构（一）基本骨架
- HTML文件最基本的四个标签，组成了网页的基本骨架，包括：<html>、<head>、<title、<body>四组标签。
（二）DTD
- 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition，简称DTD。也称作文档声明类型，DocType Declaration。
- 作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面。
- HTML5版本的DTD：<!DOCTYPE html>
- <!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
- <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
（三）命名空间
- <html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。
- <html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现标签名冲突，这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml中的规范。
- lang语言种类
- HTML5版本的命名空间：<html lang="en"></html>
（四）字符集
- <head>标签内部的<meta>标签通过http-equiv属性定义了当前的网页所使用的字符编码。
- char：character，字符。
- set：集合。
- HTML5版本的字符集：<meta charset="UTF-8">
- 常用字符集编码：
字符集使用情况建议：
- 如果没有网页加载速度要求，或者制作的是外文网站，使用UTF-8。
- 如果含有大量中文汉字的网站，而且要求网页加载速度快，使用GBK。
- 注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码。
七、HTML常用标签（一）注释标签
- 在很多代码技术中都可以添加注释内容，我们也可以向HTML源代码添加注释。
（二）标题标签
- 标题（Heading）,是通过<h1>~<h6>六个标签分别来对六个级别的标题进行定义的。
- <h1>定义最大的标题，<h6>定义最小的标题。
（三）段落和换行标签
- 段落（paragragh）是通过<p>标签进行定义的。
- <br />（breaking）标签是HTML中一个简单的换行符。
（四）文本格式化标签
- HTML中有部分标签是用来对文字进行格式化显示设置的，比如：粗体、斜体、下划线等。
- 文本格式化标签：文本级（双标签），内部只能书写文字。
- 在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，CSS负责格式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01和HTML1.0 transitional版本中依旧可以使用。
（五）图像标签和路径
- 图像（image）由<img>标签进行定义。
- <img>标签是单标签，本身相当于一个特殊的文本。
- <img>标签的作用是在指定的位置插入一张图片。
- 在HTML文件，常用的插入图片的类型有：jpg、png、jif。
- 由于<img>为单标签，所以它只能通过属性进行相关的图像设置。
- <img>标签常用属性：
- 路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
- 路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
- 建议多使用相对路径，可适当使用网址形式的绝对路径。
- 使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。
（六）音频和视频标签（H5新增）
（七）超级链接标签
- HTML使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
- 在HTML中使用<a>标签可以创建链接。
- a全称anchor，锚的意思。
- <a>为双标签。
- 作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
- <a>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。
（八）列表标签（无序列表、有序列表、定义列表）
- 列表用于制作HTML中的一系列项目。
- 通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。
- 根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表。
（九）布局标签（div标签、span标签）
- div和span是最常见的2个布局标签，<div>和<span>标签常用作布局工具，俗称盒子。
- <div>和<span>都是没有具体明确的语义的。
（十）表格标签
- 创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、<td>标签。
- 如果要绘制表头，使用标签<th>
- 一个完整的表格分为四个大的区域：表格标题、表格头部、表格主体、表格页脚
- 合并单元格：表格的单元格可以进行合并，通过th和td的两个属性可以进行合并设置。
- 先列出所有行<tr>，以最小单元格为标准。
- 再添加每一行的<td>或<th>单元格。
- 划分单元格所在行时，顶边对齐的属于同一行。
- 将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。
（十一）表单标签
- HMTL表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件。
- 在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成。
1、<input>标签
（1）<input>标签是最重要的一个表单元素。
（2）<input>标签为单标签，本身相当于一个特殊的文本。
（3）<input>标签需要通过标签属性实现各种功能。
2、文本域<textarea>
（1）文本域使用<textarea>标签定义，制作可以输入多行文本的区域。
（2）<textarea>标签为双标签，本身相当于一个特殊的文字。
（3）文本域可以设置默认输入的文字，在双标签之间书写默认文字。
3、下拉菜单：HTML中的下拉菜单提前设置一些选项，然后可以通过点击选择其中一项。
4、label标签
八、HTML字符实体- 在普通文字书写时，有一些特殊符号不能直接书写（例如：连续的空格），或者符号具有特殊功能也不能直接书写（例如：<>符号）。
- 可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。
- 通过查询W3school手册，查看所有的字符实体。
- 使用方法：可以查询特殊字符的替换写法，包含实体名称以及实体编号。
上一篇笔记：
下一篇笔记：
在线咨询
