web高级前端第一课知识整理

HTML

什么是HTML？

超文本标记语言（Hyper Text Markup Language），缩写为HTML。

什么是标签？

标签的组成：标签名、属性名（名称值对的形式）、内容
属性：是用来修饰元素的 <标记 属性=“值” 属性=“值”>

重要的标签说明

1.表格标签 table

• thead tr th

• tbody tr td

2.表单标签 form
action ：submit操作执行请求地址
method ：执行请求的类型get/post

• 表单不一定是通过submit提交，可以通过Ajax请求序列化表单的方式完成表单数据的提交

• 通过表单form提交和Ajax提交方式原理是完全不一样的设计方式

3.表单元素标签
通过submit提交，浏览器会把表单元素的数据以名称值对的形式提交给服务器

标签的语义

• h1/h2/h3表示大纲级别

• div/span/p表示布局

• 使用带语义的标签可以让搜索引擎快速的进行收录

关于浏览器

浏览器就是解析HTML、CSS、JavaScript、图片、视频等的运行环境

CSS

层叠样式表(英文全称：Cascading Style Sheets)：元素样式可以通过多种方式进行叠加，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

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

DIV+CSS布局基础

<div class="divBox">
		<div class="left"></div>
		<div class="right"></div>
</div>

*{
			margin: 0px;
			padding: 0px;
		}
		.divBox{
			height: 500px;
			background: yellow;
		}
		.left{
			float: left;
			width: 200px;
			height: 100%;
			background: red;
		}
		.right{
			margin-left: 200px;
			background: green;
			height: 100%;
}

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法：

box-sizing: content-box|border-box|inherit;

1. content-box ：在宽度和高度之外绘制元素的内边距和边框
2. border-box ：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
3. inherit ：继承父元素 box-sizing 属性的值

JavaScript

JavaScript（缩写为JS）是一种高级的、多范式、解释型的编程语言，是一门基于原型、函数先行的语言，它支持面向对象编程、命令式编程以及函数式编程。是弱类型语言，书写比较随意。

JavaScript作用

1. 业务逻辑处理
2. 对DOM树进行操作：通过事件驱动（DOM树中元素的增删查改，特别是改内容、改样式）