前端知识（HTML,CSS,JavaScript)知识总结

前端知识（HTML,CSS,JavaScript)知识总结

什么是HTML：HTML本质：超文本标记语言，表现如文字，视频，音频程序等元素，用来描述页面的显示方式。
1：HTML语言基础
1.1：HTML概述：
HTML文档结构：HTML文档结构是由、、三大元素组成。
1.2：HEAD元素：
1.2.1：title元素：页面的标签位于title标签内，可以包含任何字符或字体。
1.2.2：meta元素：meta元素用于向客户的浏览器传递信息和命令，而不是用来显示内容的。meta标签标签主要分为两大类：一类对页面进行设置，一类针对搜索引擎进行设置。
meta标签常用的属性：

1.3：文本元素：
1.3.1：标题标签：HTML提供了6级标题，从一级开始（级别最高），逐渐降低至六级，分别为h1,h2,h3,h4,h5,h6。
1.3.2：文本修饰标签：

font标签----用于设置文本的字体样式

b标签----文本加粗

i标签----文本斜体

s标签----添加删除线

u标签-----添加下划线

sup标签----添加上标

sub标签----添加下标

strong标签----文本加粗

big标签----元素中的内容在显示时比周围的文本大一个字号

small标签-----元素中的内容在显示时比周围的文本小一个字号

1.4：文档结构元素：
1.4.1：段落标签：p标签是HTML中特定的段落标签，可以对网页内容进行块级格式。
1.4.2：换行标签：br /标签进行换行，该标签后的内容将从下一行开始显示。
1.4.3：水平线标签：hr /标签可以在页面中产生一条水平线

1.5：列表元素
1.5.1：有序列表：ol标签实现有序列表。使用一些数值或字母作为编号。
1.5.2：无序列表：ul标签实现无序列表
1.5.3：定义列表：dl实现定义列表。

1.6：div和span标签
1.6.1:div:块级元素标签，用于将网页中的某一特定区域用边框围起来，并赋予指定的样式。
style属性用于设置div元素的行内样式；
class属性用于引用CSS的类选择器；
align属性用于设置div元素中的内容的对齐方式，取值范围是left、right、center或justify
1.6.2：span：span标签属于行内块，用于指定行内元素
通过该标签来选择特定的文本，以便赋予特殊的样式；
style属性用于设置span元素的行内样式；
class属性用于引用CSS的类选择器；
align属性用于设置span元素中的内容的对齐方式，取值范围是left、right、center或justify
1.7：URL简介：
1.7.1：URL（Uniform Resource Locator，统一资源定位符）用于指定Web资源所在的位置，如同在网络上的门牌。URL是Internet上标准的资源地址，又称为网页地址或网址。
URL包含3个关键部分：协议、主机地址和文件路径

协议、主机地址和文件路径共同组成了一个完整的URL：
网页通常采用HTTP超文本传输协议传递信息，对应的网址基本使用http://前缀
电子商务等网站对安全性更高时，多采用https协议（https://前缀）
文件上传下载时，多采用ftp://前缀
主机地址（Host Address）一般是网站的域名，如www.itshixun.com
主机地址也可以使用IP地址（数字形式），例如：192.168.1.100、115.239.210.27等
文件路径通常与网站的目录结构相对应，以斜杠（/）开始，以文件夹名或文件名结束，中间可以包含一级或多级目录，例如：/web/test/index.html或/web/test/
*1.7.2:绝对路径:*是指一个完整的路径
http://www.itshixun.com/movie/index.html
d:/web/movie/index.html
绝对地址相对比较长，而网站的每个页面可能包含很多链接，页面代码显得比较臃肿。
1.7.3:相对路径比绝对路径更加简洁，方便后期网站的维护
当浏览器访问Web资源时，浏览器需要完整的URL才能获取到资源内容；当页面中提供的地址是相对路径时，浏览器会将相对URL转成完整的绝对URL后再获取资源。
相对路径的访问方式有以下几种形式：
同一目录
子目录
父目录
根目录

**1.8:图像标签：**在页面中，使用img 标签向HTML文档中添加一幅图像

2：表格
*2.1：表格：*表格可以将数据有效的组织在一起，并以网格的形式进行显示
表格除了用于组织数据外，还可以实现页面或局部页面的排版布局
表格使用行与列的方式组织信息
表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。
在HTML中，通过table标签创建表格元素

表格的各组成部分均包含在table标签之内
单元格是表格的基本元素，使用td标签表示
行是表格的水平元素，使用tr标签表示
一行可以由一个或多个单元格构成，而一个表格可以由一行或多行构成

表格的常用属性有对齐方式、背景颜色、边框、高度、宽度等。
单元格是表的基本元素，包括td和th标签
td标签多用来包含表格中的数据部分，而th标签用来包含表格的标题部分
单元格常用的属性有水平对齐、垂直对齐、水平跨度、垂直跨度、宽度、高度、背景颜色等
3：表单标签
3.1:Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息
表单主要分为表单标签及表单控件两大类
表单控件又可细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等
在表单域录入数据后，可通过表单的特殊控件（如提交按钮等）将数据传递给服务器端，由服务器接收表单数据并进行处理
3.2:表单标签是一个包含表单元素的区域
可以包含一些表单控件
可以包含其他的HTML标签
一个页面可以拥有一个或多个表单标签，标签之间相互独立，不能嵌套
用户向服务器发送数据时一次只能提交一个表单中的数据
如需同时提交多个表单，需使用JavaScript的异步交互方式来实现
3.3:常用属性：
action属性
action属性值是Web服务器上数据处理程序的URL地址，或者是Email地址。
method属性
method属性用于设置向服务器发送数据的方式，主要包括以下两种方式：get方式和post方式。
（1）get方式：
将数据作为URL的一部分发送给服务器。URL由地址部分和数据部分构成，两种之间用问号“？”隔开，数据以“名称=值”的方式成对出现，且数据与数据之间通过“&”符号进行分割
（2）post方式：
将数据隐藏在HTTP的数据流中进行传输；请求数据不会出现在地址栏中，安全性比get方式要高，并且对数据长度没有限制。

***表单域:***表单域多用于收集网站访问者的信息，一般位于form标签之间
表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素
除多行文本框和列表选择框外，大部分表单域使用标签来创建

***4:css:***在页面排版时，内容与样式的混合设计方式将导致页面代码过于臃肿、难于维护，也不利于搜索引擎的检索
CSS（层叠样式表）的出现，将页面内容与样式彻底分离，极大改善了HTML在页面显示方面的缺陷
使用CSS样式表可以控制HTML标签的显示样式，如页面的布局、字体、颜色、背景和图文混排等效果
在网站的风格方面，一个CSS样式文件可以在多个页面中使用，当用户修改CSS样式文件时，所有引用该样式文件的页面外观都随之发生改变

样式是CSS的基本单元，每个样式包含两部分内容：
选择器（Selector）：用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时，根据选择器指定的样式来渲染元素的显示效果；声明（Declaration）：每个声明由属性和属性值两部分构成，并以英文分号（;）结束

CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
（1）内嵌样式（Inline Style Sheet）又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。
（2）内部样式表（Internal Style Sheet）将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。
内部样式表是一种写在style标签中的样式声明，仅对当前页面有效。
在style标签中定义CSS样式，然后在页面中使用CSS样式。
一般情况下，style标签位于head标签之内；
在页面加载过程中，先加载样式后加载页面元素，浏览器根据元素的顺序加载、渲染并在页面中显示出来。
(3) 外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该样式文件。
网站统一引用同一外部样式文件，使页面的风格保持一致，有利于页面样式的维护与更新，从而降低网站的维护成本。
用户浏览网页时，CSS样式文件会被暂时缓存；继续浏览其他页面时，会优先使用缓存中的CSS文件，避免重复从服务器中下载，从而提高网页的加载速度。

5:javascript:

5.1:JavaScript是一种脚本语言，可以直接嵌入HTML页面之中
当用户在浏览器中预览该页面时，浏览器会解释并执行其中的JavaScript脚本
随着HTML 5的出现，JavaScript的重要性更加凸显，在Canvas绘图、本地存储、离线应用和客户端通信等方面都需要结合JavaScript脚本来实现

5.2:JavaScript脚本不仅能嵌入到HTML页面中，还能以独立文件的形式进行存放。
在页面中使用JavaScript脚本的形式有以下三种：
行内JavaScript脚本
内部JavaScript脚本
外部JavaScript脚本
5.3:标识符（identifier）用来命名变量、函数或循环中的标签，命名规范如下：
标识第一个字母必须是字母、下划线、或美元符号
标识符区分字母的大小写，推荐使用小写形式或骆驼命名法
标识符由数字、字母、下划线（_）、美元符号（$）构成
标识符不能与JavaScript中的关键字相同
5.4:在JavaScript中，变量的类型可以改变，但某一时刻的类型是确定的。
常见的数据类型有String、Boolean、Array、Number和Undefinded等类型。
5.5:变量是程序存储数据的基本单位，用来保存程序中的数据。
变量名是标识符中的一种，应遵循标识符的命名规范。

1. 变量的定义
   在使用变量之前，可以通过关键字var对变量进行声明。

2. 变量的类型
   JavaScript中的变量是弱数据类型
   在声明变量时不需要指明变量的数据类型，通过关键字var进行声明；
   在变量的使用过程中，变量的类型可以动态改变，类型由所赋值的类型来确定。
   通过typeof运算符或typeof()函数来获得变量的当前数据类型。

3. 变量的类型作用域
   变量的作用域是指变量的有效范围，根据作用域变量可分为全局变量和局部变量。
   （1）全局变量
   全局变量是指定义在函数之外的变量或者未定义直接使用的变量
   （ 2）局部变量
   局部变量是指在函数内部声明变量，仅对当前函数体有效

• 点赞
• 收藏
• 分享
• 文章举报