前端与 HTML

1.前端工作的定义

——1）前端技术栈（服务器端-网络协议-前端（HTML、css、js））

2）前端关注功能、美观、无障碍、安全、性能、兼容性、体验方面

3）前端的边界：node.js开发服务器端、electron、react开发客户端、webGL开发3D游戏

4）开发环境：浏览器-chrome、firefox、编辑器-vscode、webstorm

2.前端技术栈拆解与分析

——1）HTML是什么？

HTML是超文本标记语言（英语：HyperText Markup Language）的缩写，是一种用来描述网页的标记语言。HTML不是一种编程语言，而是一种标记语言，它使用标记标签来描述网页的结构和内容。每个HTML文档都由一系列的标签组成，这些标签定义了文档的结构和样式。通过使用HTML标签，可以创建标题、段落、链接、列表等元素，从而构建出一个完整的网页。当我们在浏览器中访问一个链接时，实际上是下载、解析和显示HTML文档的过程。因此，HTML是构建网页的基础，它定义了网页的结构和内容。

1.超文本也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。超链接是互联网的纽带，它能将众多网页连接起来，让它们交织在一起，形成一张“网”。没有超链接，就没有互联网。标记语言 2.HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：

<img> 标签表示一张图片；
<a> 标签表示一个链接；
<table> 标签表示一个表格；
<input> 标签表示一个输入框；
<p> 标签表示一段文本；
<strong> 标签表示文本加粗效果；
<div> 标签表示块级布局。

2）DOM树

3) HTML语法

HTML语法是一种用来描述网页的标记语言，它由一系列的标签组成。HTML标签是由尖括号所包围的关键词，比如。HTML标签通常是成对出现的，比如

内容

，其中第一个是开始标签，第二个是结束标签。HTML文档的基本结构包括、、和等标签。HTML不是一种编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式。浏览器读取HTML文档，并以网页的形式显示出来，不会显示HTML标签，而是通过标签来解释网页的内容。

4）标题分级、列表表单、链接、输入-input按钮和textarea标签

5）内容划分：header、nav、main（article）aside、footer

3.HTML 作用解析

——HTML的作用是用于创建和组织网页的标记语言。它可以定义网页的结构、内容和样式。通过使用HTML标记，可以将文本、图像、链接和其他媒体元素嵌入到网页中。HTML还可以创建表单、列表、表格和其他交互元素，使用户能够与网页进行交互。此外，HTML还可以与CSS和JavaScript等技术结合使用，实现更丰富的网页功能和交互效果。HTML文件可以通过文本编辑器（如Dreamweaver）编写，并以.htm或.html为后缀名。

HTML解析器是用来解析HTML文件的工具，它可以将HTML代码解析为可读的文本和结构化的数据。解析器可以根据HTML标记的规则，将文本内容和标记分离，并将其转换为浏览器可以理解和显示的网页。HTML解析器有多种实现方式，其中一种是使用C#编写的解析器，如Less.Html。这个解析器的用法类似于jQuery，可以方便地操作和处理HTML文档。

HTML解析器的应用非常广泛，例如在网页爬虫中，可以使用解析器来提取和分析网页的内容。解析器还可以用于开发自定义的视图引擎，如QPage，它可以通过选择器和操作HTML文档的方法，实现更灵活和高效的网页开发。

4.HTML 语义化

——1）语义化是什么

HTML语义化是指在编写HTML代码时，使用具有明确含义的标签来描述网页的结构和内容，以便于浏览器、搜索引擎和其他设备能够更好地理解和解析网页。语义化的HTML代码能够提高网页的可读性、可维护性和可访问性，并有助于搜索引擎优化(SEO)的效果。

语义化的HTML代码能够使网页在没有CSS样式的情况下仍能呈现出清晰的内容结构和代码结构。此外，语义化的HTML代码还能方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页，提升用户体验。

同时，语义化的HTML代码也有利于团队开发和维护，使代码更具可读性，减少差异化。

总之，语义化的HTML代码是一种良好的编码实践，能够提高网页的质量和可用性。

2）谁在使用我们写的HTML：开发者-修改、维护页面；浏览器-展示页面；搜索引擎-提取关键词、排序；屏幕阅读器-给盲人读页面内容

3)语义化好处

1.代码结构清晰：使页面没有css的情况下，也能够呈现出很好的内容结构。

2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖标签来确定上下文和关键字的权重）。

3.提升用户体验：例如 title、alt 可以用于解释名称或者解释图片信息，以及label标签的灵活运用。

4.增加可读，方便团队维护和开发。

5. 方便其他设备解析：例如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

4）传达内容，而不是样式

5）如何做到语义化：

首先掌握 HTML 中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。如没有div的一个布局

html5语义化标签（都是双标签）详解：（HTML5 语义元素 | 菜鸟教程）

定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；一个页面中的个数没有限制，可以为每个内容块添加一个header；

定义文章导航栏，链接等; nav一般和u、li配合做导航栏；

定义文章的主要内容 main标签在一份文档中是唯一的，其后代元素常常包括；

定义文档中可以脱离其他部分，定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；

侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；

页脚，通常包含作者、版权信息或者相关链接等；

~

，作为标题使用，并且依据重要性递减，

是最高的等级。

段落标记，知道了
作为段落，你就不会再使用
来换行了，而且不需要
来区分段落与段落。
中的文字会自动换行，而且换行的效果优于
。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

day2 ｜ 青训营

~

，作为标题使用，并且依据重要性递减，

day2 ｜青训营