前端语言1 | 青训营笔记

x小黎
136 阅读5分钟

一、HTML概述

（一）网页的本质

  • HTML就是用制作网页文件的
  • 浏览器查看网页都是.html或.htm文件
  • HTML叫做超文本标记语言（Hypertext Markup Language），用于搭建网页的结构

（二）网页的组成

  • 前端三层：HTML(结构层)、CSS(样式层)、JavaScript(行为层)
  • 其他多媒体内容：图片、视频、音频、超级链接等
  • 所有的网页文件都是真实的、物理存在的文件

二、互联网原理

（一）互联网运行过程

  • 程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请示到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果。

互联网运行过程

服务器

  • 服务器（server），就是一种特殊的计算机，也包括处理器、硬盘、内存、系统产品线等，但是由于需要提供更可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高。
  1. 云服务器
  • 目前绝大多数网站都采用的是云服务器（Elastic Compute Service，ECS），云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器。

客户端

  • 客户端（Client）也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如最常用就是浏览器、app等，而Web开发最主要的客户端形式还是浏览器。
  1. 浏览器（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文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰。

语义化网页的优势：

  1. 方便代码的阅读和后期维护。
  2. 便于浏览器或是网络爬虫更好地解析网站内容。
  3. 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名。

四、HTML基本语法

（一）HTML规范版本

  • W3C：World Wide Web Consortium，万维网联盟。专门发布和维护互联网的规范和标准。

（二）HTML标签

  • HTML标记通常被称为HTML标签（HTML tag）。标签在书写和使用过程中，必须遵循特定的语法。
  • HTML标签语法：

（三）HTML元素

  • HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。

  • 根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。

  • HTML元素的特性

1.元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。

2.空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。

（四）HTML属性

  • HTML属性规范

1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔。

2.属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是：k="v"。XHTML要求属性值必须在双引号内部。

如：<p k="v" >

3.一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是：k="v"。

如：<p k="v" k="v" k="v" >

4.部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。

如：<p k="v1 v2 v3 v4" >

avatar
文章
阅读
粉丝