WEB前端基础知识_tailicss-CSDN博客

本文链接：https://blog.csdn.net/BingTaiLi/article/details/104502520

WEB前端基础知识

HTML

理解HTML

HTML的本质是超文本标记语言，能表示文字、视频、音频、程序等复杂元素。
HTML文件是一种纯文本文件，以“html”或“htm”为后缀。
HTMl的基本组成单位是元素，语法结构如下：

<标签>
			内容
</标签>

理解标签

标签是HTML语言中的最基本单位，由尖括号加关键字组成，通常成对出现。
标签对的组成：标签名、属性（名值对）、内容。

例如：<a href="www.taobao.com">淘宝</a>

重要标签说明

表格标签 table
caption 标题
thead tr th
tbody tr td
tfoot 脚注
表单标签 frame
重要属性：
action：表单提交操作的请求地址
method：指定请求的类型get/post
1.form表单提交是不一定要通过submit操作的，可以通过AJAX请求序列化表单（serialize()）的方式完成表单数据的提交。（AJAX序列化就是将form中的数据构建为名值对的字符串，统一的提交到后台）
2.通过form表单提交和AJAX请求方式提交是两个原理完全不一样的设计方式。通过form表单提交数据，页面整体刷新，为同步方式。通过AJAX请求方式提交数据，页面局部刷新，为异步方式。
表单标签元素
通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。

<input>:type(text,password,radio,checkbox,hidden)
<select>
<textarea>

关于select如何在js中获取选中的值和选中的文本内容，在提交数据的时候，默认只会将select中选中option的value值传递过去。
form是个什么样的概念？在Web编程中，可以把form理解一个数据集合（组），我们把这一组数据包裹在form中，统一提交后台后，进行业务逻辑的处理，在一个页面中可以有多个form存在。
但在AJAX请求中，可以不要求有form存在。

标签的语义

HN 表现大纲级别
div/span/p 表现布局

使用带语义的标签可以让搜索引擎快速的进行收录
虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制

关于浏览器

浏览器就是能解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。
我们一般说的浏览器是指包括：IE/FireFox/Chrome/Opera等等，其中FireFox/Chrome我们称之为标准浏览器，最符合W3C组织定义的相关技术规范

如果没有没有一个规范定义，为了迎合不同厂商的浏览器，程序员将为此付出沉重的代价。但是即便如此，不同的浏览器之间还是有些细微的差异的，这个一般是前端开发要注意的问题，要考虑浏览器的兼容性。
我们一般使用360、搜狗都是基于某个浏览器的内核深度改造的。

CSS

层叠样式表，元素样式可以通过多种方式进行叠加。

本身HRML元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对于不同的标签是有个默认样式的。

如何书写定义元素样式

在开发过程中一般都是通过外链的样式表去定义页面的样式，降低代码之间的耦合，让美工专业去做页面。
简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作。

需要掌握的内容

DIV+CSS布局基础，充分理解盒子模型。
box-sizing需要注意
样式选择器：ID(#)CLASS(.)标签(A,DIV,SPAN)

JavaScript

对于编程语言的认识：
一门成熟的编程语言应该具备：变量、数据类型、运算符、控制语句（顺序结构、分支结构、循环结构）、自成体系的API。
JavaScript的作用：
1.业务逻辑的处理
2.对DOM进行操作（DOM：Document Object Model）：通过事件驱动页面模型发生变化（DOM树中元素的增删查改，特别是改：改内容、改样式），JavaScript能操作DOM的原因在于JavaScript实现了DOM相关操作的接口，能满足对DOM的操作。