HTML 修炼指南

头像
雪后初晴
    阅读 7 分钟

    前端开发的地图

    1, 入门：需要掌握 HTML / CSS / JS(ES) 三剑客。解释如下：

    • HTML是 HyperText Markup Language，
    • CSS 的全称是 Cascading Style Sheet，
    • JS 的全称是 JavaScript
    • ES 的全称是 ECMA Script，而ECMA的全称是European Computer Manufacturers Association

    2, 构建工具：分类为代码校验工具、模块打包工具、任务运行器

    • 代码校验工具：ESLint, StyleLint, MarkdownLint
    • 模块打包工具：Webpack，Parcel，Rollup
    • 任务运行器：npm scripts，Gulp，Grunt

    3, 框架学习：目前比较流行的是:Vue, React, Angular

    • 无论哪个框架都要学习基本语法，事件绑定，
    • Vue: 学习 指令、过滤器、VueX，ElementUI等
    • React 学习 Redux, Redux, AntDesign, Mobx, CSS in JS
    • Angular 学习 RxJS, ngrx

    4, Node JS ，属于服务端编程

    • 时间、日期的获取
    • 文件操作
    • 多任务处理——多线程
    • 网络编程

    5, 学习其他更高阶的内容

    服务端渲染，静态站点生成器，渐进式Web应用，桌面应用，移动应用… …

    理解网页

    网页的呈现

    对一般用户的来说，网页呈现的是文字、图片、视频、音频等，对专业人员（程序员来说），网页呈现的是一个由HTML 或 CSS或 JS 或TS 文件组成的文件集合

    网页的组成

    1. 前端三层： HTML（结构层） 、 css（样式层） 、 JavaScript（行为层） 。

    形象比喻如下：

    你呱呱坠地那刻，上天赐予你一个裸露的身体，属于HTML（结构）。妈妈给你买的衣服、裤子，为你梳的头发，都属于CSS（样式）；老师教你读书，父母教你见人打招呼，你朋友教你骑单车，属于JS（行为）

    1. 其他多媒体内容： 图片、 视频、 音频、 超级链接等。所有的网页文件都是真实的、 物理存在的文件。

    网页的运行过程

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

    ​ 这里有三个概念：服务器、云服务器、客户端

    服务器

    ​ 服务器（server） ， 就是一种特殊的计算机， 也包括处理器、 硬盘、 内存、 系统总线等， 但是由于需要
    提供更可靠的服务， 因此在处理能力、 稳定性、 可靠性、 安全性等方面要求较高。
    作用： 对于WEB来讲， 用于存储开发人员上传的网页数据， 且需要响应服务请求， 并进行处理。
    要求： 对于网站服务器来说， 为了让用户随时进行访问， 必须24小时不间断工作。

    云服务器

    ​ 目前绝大多数网站都采用的是云服务器（Elastic Compute Service, ECS)， 云服务器是一种简单高效、
    安全可靠、 处理能力可弹性伸缩的计算服务。 其管理方式比物理服务器更简单高效。 用户无需提前购
    买硬件， 即可迅速创建或释放任意多台云服务器。

    客户端

    客户端（Client） 也叫用户端， 指的是普通用户使用的终端， 客户端有多种形式， 比如最常用的就是浏览器、 app等， 而web开发最主要的客户端形式还是浏览器。
    浏览器(Browser)， 是一种用户上网搜索、 查看信息资源的应用程序。它的功能： 用于发送HTTP请求到服务器， 接收服务器发回的HTTP响应， 渲染HTML网页。

    理解浏览器

    主流产品

    主流的Web页面浏览器有： 微软的IE和Microsoft Edge、 Mozilla的Firefox、 苹果公司的Safari、
    Google的Chrome及Opera软件公司的Opera。

    主流产品的内核

    因为不同浏览器使用内核及所支持的HTML等网页语言标准不同， 对网页的渲染效果会有差异。推荐： 使用Chrome浏览器。 （渲染效果好、 市场占有率高、 自带开发者调试工具）

    浏览器的功能

    作用1： 发送HTTP请求， 发送的方式是在浏览器地址栏输入对应网址， 或者点击超级链接。

    作用2： 接收服务器发回的HTTP响应， 服务器会发回一个HTML给浏览器。

    作用3： 将接收到的HTML进行解析并显示。

    HTTP 协议

    Hypertext Transfer Protocol:超文本传输协议。 是客户端浏览器或其他程序与WEB服务器之间的应用层
    通信协议。

    HTTP请求

    • request， 浏览器根 据网址向对应的服务器发送请求。
    • 发起请求的方法： 在浏览器地址栏中输入网址， 或者点击网址链接。
    • HTML页面解析过程中， 会发出多个http请求， 包含网页的图片、 视频、 音频等文件请求。

    HTTP响应

    • 响应： response， 服务器根据请求响应一个HTML文件， 将HTML传输给客户端，在浏览器中进行HTML网页的渲染。

    文本格式

    1, 纯文本格式与富文本格式

    指的是没有任何文本修饰的， 没有任何粗体， 下划线，斜体， 图形， 符号或特殊字符及特殊打印格式的文本， 只保存文本， 不保存其格式设置。反之，拥有各种特效修饰的就是富文本格式

    2, 格式对比

    纯文本格式，最常见的是.txt文件。 在存储和传输过程中， 只能保存文字， 不能保存格式。
    富文本格式，与纯文本对应， 最常见的是.rtf文件，类似.doc文件， 内部可以保存文本的样式、 图等。

    3, 纯文本的优点

    1. 文件只能保存文本， 不保存其他的格式或非文本内容， 因此占用空间体积小，有利于网络传输。
    2. 所有的纯文本格式文件， 可以通过直接更改扩展名的方式更改保存格式。
    3. 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。

    4, 富文本的优点

    1. 给用户的体验好，有各种颜色的区分，字体粗细的不同，
    2. 适用面广，富文本在许多场合，例如写博客，作品演示，会议讲稿展示 ... 等等，而用纯文本写的内容，样式太单调，基本上没人愿意看。

    HTML的概念

    ​ Hypertext Markup Language： 超文本标记语言。 是用来制作网页的一种标记语言。

    ​ HTML是一种纯文本格式的文件， 内部只能书写文字内容， 不能添加图片、 音频、 视频等， 但是在网页中给用户呈现的效果却包含了文字以外的内容， 这种效果就是HTML语言区别于其他文件的不同之处。

    ​ 超文本是超级文本的缩写， 简单来说超文本就是用于链接另一个文本或多媒体内容的文本， 比如链接到图片、链接、 音频、 视频、 程序等。

    ​ 标记，又叫做标签（HTML tag） ， 有特殊的书写规范， 是写给浏览器的一种语法格式， 结合普通的文字信息， 实现特殊的语义或显示内容。 在编辑器中可以编辑和查看， 在浏览器中不显示。

    ​ 利用标记给普通的文本添加语义、 描述超文本内容， 搭建网页的基本结构。

    __提问__：h1标签的作用是什么？

    错误回答：h1标签可以让内部文字加粗加大，独占一行。

    正确答案：h1标签负责给内部文字添加一级标题的语义， 不负责样式， 样式由css负责。

    HTML的语义化

    ​ HTML文件中， 如果没有使用特殊语义的标记， 也可以实现网页显示效果， 但是利用标记给普通的文字添加了不同的语义， 能够让网站的结构划分更加清晰。

    ​ 语义化网页的优势如下：

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

    HTML 基本语法

    HTML 规范

    • W3C： world wide web consortium， 万维网联盟。 专门发布和维护互联网的
    规范和标准。

    HTML 标签

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

    1.标签名必须书写在一对尖括号<>内部。

    <html></html>

    2.标签分为单标签和双标签， 双标签必须成对出现。

    <p></p> 双标签
<br /> 单标签

    3.双标签包含开始标签和结束标签， 结束标签必须书写关闭符号/， 单标签
    也需要进行自封闭书写。 在HTML5中， 单标签可以不写关闭符号。

    错误写法：
<div><div>
<br>
正确写法：
<div></div>
<br />

    HTML 元素

    1, HTML 元素的范围

    • HTML元素指的是从开始标签到结束标签的所有内容， 包含开始标签、 元素内
    容、 结束标签。
    • 例如： 双标签内部包含的纯文本内容， 就是元素内容。

    <p>这是一段文字内容</p>

    2, 元素内容具体可以是哪些呢？

    1.元素内容可以是纯文本， 也可以是其他的HTML元素。 这种元素内容包含其他HTML元素
    的情况， 我们可以称为嵌套， 也就是div标签元素内部嵌套了p标签元素。

    <div><p>div元素内部嵌套p元素</p></div>

    2.一个HTML元素div的内容可能是多个其他元素组成， 例如p和h1， 此时我们习惯称
    div是p和h1的父级元素， p和h1是div的子级元素， 而p和h1属于同级元素， 这种嵌
    套关系可以有多层。

    <div>
<p>div元素内部嵌套p元素</p>
<h1>div元素内部嵌套的h1元素</h1>
</div>

    3.单标签是不能添加元素内容的， 可以称为空元素。

    3, HTML元素的分类

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

    • 容器级： 标签内部可以存放任意内容， 包含容器级标签。 比如h1， div等。
    • 文本级： 标签内部只能存放文字或类似文字的内容， 比如存放图片、 表单元素等。 比如
      p等。

    4, HTML 元素的特性

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

    <p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p>
等价于：
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>

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

    <p>HTML中所有文字内容之间的空 格、 换
行、 缩 进都会被折叠成一个空格显示。 </p>

    HTML属性

    HTML标签可以添加属性， 属性可以提供关于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 的基本骨架

    • HTML文件最基本的四个标签， 组成了网页的基本骨架， 包括：< html >、< head >、 < title >、 < body >四组标签。

    < html > 标签

    ​ 作用:定义HTML文件的根元素， 表示整个的HTML文档， 所有的标签要书写在< html >标签内部。

    < head >标签

    ​ 作用： 用于存放< title >,< meta >,< base >,< style >,< script >,< link >。 内部用于对网页的设置， 除了< title >内部的文字， 其他标签都不显示在浏览器上。注意在< head >标签中我们必须要设置的标签是title。

    < title >标签

    • 作用1： 让页面拥有一个属于自己的标题。
• 作用2： title中的关键字可以作为搜索引擎抓取时的关键字， 提高SEO搜索引擎
优化。
• 作用3： 内部的内容会显示在搜索结果的标题部分。
• 作用4： 作为浏览器收藏夹默认的网页标题。
• 建议网页必须添加title标签内部内容， 内容尽量精简， 提取网页的关键字。

    < body >标签

    作用： 定义网页的主体部分， 用于存放所有的HTML显示内容的标签。< p >,< h1 >,< a >,< div >等。< body >内部的元素内容会显示在浏览器的窗口中。

    HTML 的DTD

    • 完整的HTML文件的第一行内容叫做文档定义类型， 英文DocType Definition，
    简称DTD。 也称作文档声明类型， DocType Declaration。
    • 作用： 告知浏览器该网页使用的是哪个版本的HTML规范， 让浏览器按照对应
    版本的HTML语法进行解析页面。

    不同版本的DTD
    • XHTML1.0版本

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    • HTML5版本

    <!DOCTYPE html>

    HTML的命名空间

    • < html >元素表示整个网页文档， 在开始标签上设置了命名空间xmlns属性。
    • XHTML1.0版本

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>

    • HTML5版本

    <html lang="en"></html>

    命名空间xmlns
    • xml： 可扩展标记语言， 使用在传输过程中的规范。 被设计用来传输和存储数据， 是html
    的补充。
    • xmlns： 全称叫做XML NameSpace， NameSpace叫做命名空间， 浏览器会将此命名空间
    用于该属性所在元素内的所有内容。
    • < html >元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准， 避免出现
    标签名冲突， 这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml...
    范。

    语言
    • xml:lang="en"和lang="en" 表示所有的标签元素内容的语言都是英语， 对搜
    索引擎和浏览器是有帮助的。
    • lang="zh-cn" 表示中文（中国）

    字符集

    • < head >标签内部的< meta >标签通过http-equiv属性定义了当前的网页所使用的字符编码。
    • char： character， 字符。 set： 集合。
    • XHTML1.0版本

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    • HTML5版本

    <meta charset="UTF-8">

    常用字符集编码
    国际通用字库
    • UTF-8： 以字节为单位对Unicode万国码进行编码， 涵盖了所有人类的语言文字， 一个汉字
    为3个字节大小。
    中文国标字库
    • gb2312： 共收入汉字6763个和包括拉丁字母、 希腊字母、 日文平假名及片假名字母、 俄语
    西里尔字母在内的682个。
    • gbk： 是gb2312的扩展， 增加了繁体字， 共收入 21886 个汉字和图形符号， 其中汉字（包
    括部首和构件） 21003 个， 图形符号 883 个， 一个汉字为2个字节大小。

    字符集常见问题
    使用情况建议：
    1、 如果没有网页加载速度要求， 或者制作的是外文网站， 使用utf-8。
    2、 如果含有大量中文汉字的网站， 而且要求网页加载速度快， 使用gbk。
    注意： meta标签声明的字库， 必须和编辑器软件默认编译字库相同， 否则会出
    现两个字库不匹配， 浏览器加载时出现乱码。前端开发的地图

    html
    雪后初晴
    1 声望0 粉丝

    引用和评论

    推荐阅读
    头像
    问题记录

    吴季分赞 2阅读 3.7k

    头像
    Html&Css测试试题（简单版）

    云绮棠兮赞 2阅读 12k

    头像
    刷新iframe的几个方法，管你跨不跨域

    lllllxt_in_sf阅读 9.4k

    头像
    在线考试答题系统（Web+H5+小程序）开发方案与实现附源代码

    行走的打火机阅读 6.3k

    头像
    语义化 HTML (Semantic HTML)

    Mitchell_C阅读 2.7k

    头像
    使用canvas如何实现一个音乐频谱？

    smallStone赞 1阅读 1.6k

    头像
    vue3组件跨层级数据传递provide/inject

    兔子先森赞 1阅读 678

    0 条评论
    得票最新