前端知识总结（HTML、CSS、JavaScript）

最新推荐文章于 2024-08-27 15:45:31 发布

邓@@

最新推荐文章于 2024-08-27 15:45:31 发布

阅读量455

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_42459695/article/details/104484905

版权

HTML

什么是HTML？

HTML是一种描述性标记语言，用来描述页面内容的显示方式；
HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。
HTML的基本组成单位是元素，语法结构如下：

<标签>
	内容
</标签>

HTML文档结构是由、和这三大元素组成：
html元素：文档以标签开始，以标签结束，所有内容都需要放在这两个标签之间。
head元素：页面头部信息，用于向浏览器提供整个页面的基本信息，但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（标签的内容）除外，会显示在浏览器窗口的左上角。
body元素：网页的正文，是用户在浏览器主窗口中看到的信息，包括图片、表格、段落、图片、视频等内容，且需位于标签之内；但并不是所有的内部标签都是可见的。
编写HTML文件的注意事项
- HTML不区分大小写，而XHTML区分大小写；
- HTML标签的属性与属性值；
- HTML中的空格；
- HTML中的注释；
- 标签可以嵌套使用。
HTML文档的元素包含很多标签，用于向浏览器提供整个页面的基本信息。
- head中可以包含以下子元素：title、meta、base、link、script以及style等。
页面的标题位于title标签内，可以包含任何字符或实体。
meta元素用于向客户的浏览器传递信息和命令，而不是用来显示内容的。
- 一个head标签中可以包含一个或多个meta标签。
- 标签主要分为两大类： + 对页面的设置，通过http-equiv属性进行指定 + 对搜索引擎的设置，通过name属性进行指定
HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符。
在HTML页面中，使用列表将相关信息放在一起，会使内容显得更具有条理性。HTML中的列表有以下三种类型：
- 有序列表：使用一些数值或字母作为编号；
- 无序列表：使用项目符号作为编号；
- 定义列表：列表中的每个项目与描述配对显示。
div与span标签
- 块级元素
  标签用于将网页中的某一特定区域用边框围起来，并赋予指定的样式。

<div style="块元素的样式" class="类选择器名称" align="对齐方式">
	内容部分
	......
<div style="块元素的样式" class="类选择器名称" align="对齐方式">
	内容部分
	......
</div>

 <span>标签属于行内块，用于指定行内元素

<span style="块元素的样式" class="类选择器名称" align="对齐方式">
    内容部分
</span>

什么是标签？

首先知道标签的组成，标签是由标签名、属性（名值对）、内容等组成。
标签名：给标签命名，类似于给常量命名。例如：table、a、from等
属性：类似于给标签的内容加了装备，让这些标签具有一些特殊的能力。

<a href=”www.baidu.com” >百度</a>

内容：表示标签所用的字母等。

重要的标签及其说明

表格标签 table
- tr标签进行行界定
- td和th标签进行列界定
- thead标签定义表头，用于创建表格的头部信息
- tfoot标签定义表尾，用于创建表格的脚注部分
- tbody标签定义表格主体，用于表示表格的主体部分
- caption标签定义表格标题，显示在整个表格的上方
- 一般定义表格的时候，把 tbody,thead 都描述出来。

<table>
<thead>
		<tr>
			<td>表头</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>内容</td>
		</tr>
	</tbody>
</table>

表单标签 from
- action：submit 操作执行的请求地址
- method：指定请求的类型 get/post
- form 表单提交是不一定要通过 submit 操作的，可以通过 A JAX 请求序列化表单（serialize()）的方式完成表单数据的提交。（AJAX 序列化就是将 form 中的数据构建为明值对的字符串统一的提交到后台）
- 通过 form 表单提交和 AJAX 请求方式提交数据是两个原理完全不一样的设计方式。
表单元素标签
- 通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。

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

关于 select 如何在 JS 中获取选中的值和选中的文本内容，在提交数据的时候，默认只会将select 中选中option的value值传递过去。

<form>
      <select>
           <option value="html">内容1</option>
           <option value="html">内容2</option>
           <option value="html">内容3</option>
       </select>
</from>

form 是个什么样的概念？在Web 编程中，可以把 form 理解为一个数据集（组），我们把这一组数据包裹在 form中，统一提交后台，进行业务逻辑的处理，在一个页面中可以有多个 form存在。但是在 A JAX 请求中，可以不要求有 form 存在。
标签的语义
- H1/H2/H3 表现大纲级别
- div/span/p 表现布局
- 使用带语义的标签可以让搜索引擎快速的进行收录，虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制

<style>
   .hstyle {
    display: block;
    font-size: 2em; 
    font-weight: bold;
    }
</style>
<h1>标题1</h1>
<span class="hstyle">标题1</span>

关于浏览器
- 浏览器就是能解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。我们一般说的浏览器是指包括：IE/Firefox/Chrome/Opera等等，其中Firefox/Chrome我们称之为标准浏览器，最符合W3C组织定义的相关技术规范。
- 如果没有一个规范定义，为了迎合不同厂商的浏览器，程序员将为此付出沉重的代价。但是即便如此，不同的浏览器之间还是有些细微的差异的，这个一般是前段开发要注意的问题，要考虑浏览器的兼容性。
我们一般使用360、搜狗都是基于某个浏览器内核深度改造的。

CSS

CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
- 内嵌样式：又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。
- 内部样式：将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。
- 外部样式表：在HTML中标签用于将文档与外部资源进行关联，经常用于链接网页的外部样式表.
层叠样式表：
- 本身HTML元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。
如何书写定义元素样式：
- 在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做页面。
- 简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作。
需要掌握的内容：
- DIV + CSS 布局基础，充分理解盒子模型
- box-sizing需要注意
- 样式选择器：ID(#) Class(.) 标签（A DIV SPAN）
样式表的优先级
- 内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，离被设置元素越近优先级别越高。
- 优先级：通用选择器（*）<元素(类型)选择器<类选择器<属性选择器<伪类<ID 选择器<内联样式<!important 规则例外。
选择器包括：
- 基本选择器
  - 通用选择器（Universal Selector）是一个星号（*），功能类似于通配符，用于匹配文档中所有的元素类型。
  - 标签选择器是指任意的HTML标签名作为一个CSS的选择器，用于将HTML中的某种标签来统一设置样式。
  - 类选择器是指同一样式的元素定义为一类，在类名前有一个点号（.）
  - ID选择器的定义与类选择器相似，区别在于使用井号（#）进行定义；在HTML文档中，元素的ID要求是唯一的，通过ID来识别页面中的元素。
- 组合选择器
  - 多元素选择器
  - 后代选择器（Descendant Selector），用于选取某个元素的所有后代元素；
  - 子选择器（Child Selectors）用于选取某个元素的直接子元素（间接子元素不适用）；
    子选择器元素之间使用大于号（>）隔开。
  - 相邻兄弟选择器（Adjacent Sibling Selector）用于选择紧接在某元素之后的兄弟元素。
    相邻兄弟选择器元素之间使用加号（+）隔开。
  - 普通兄弟选择器（General Sibling Selector）是指拥有相同父元素的元素；
    元素与元素之间不必直接紧随；
    选择器之间使用波浪号（~）隔开。
- 属性选择器
  - 存在选择器
  - 相等选择器
  - 包含选择器
  - 连字符选择器

JavaScript

JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言，其特点如下：解释性、嵌套在HTML中、弱数据类型、跨平台、基于对象、基于事件驱动。
JavaScript拥有有自身的数据类型、运算符、表达式及语法结构，JavaScript脚本包括行内JavaScript脚本、内部JavaScript脚本和外部JavaScript脚本三种形式，常见的数据类型包括String、Boolean、Undefined、Array、Number、Function和Object，注释主要分为两种：单行注释和多行注释，JavaScript包括赋值运算符、算术运算符、比较运算符、逻辑运算符、三元运算符等运算符。
JavaScript 是弱类型语言，而且书写是比较随意的。
- 弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义

  // 动态类型,随值的变化而变化
var flag = 'abc'; flag = 12;
flag = true;
flag = {name : 'Tom'}; flag = function() {
alert("Hello,JavaScript");
}

关于 JavaScript 的判断条件
- 在条件表达式中，数字0和非0也可以表现为false和true
- 分支结构的三种表示方式
- 三目运算符是需要熟练掌握的，其本质就是个表达式

var age = 82;
var str = age >= 60 ?’及格’:’不及格’; console.log(str);

在JavaScript中，常用的运算符：
- 赋值运算符：用于对变量进行赋值，在JavaScript中使用等号（=）进行赋值。
- 算术运算符：
- 比较运算符：用于判断两个变量（或常量）的大小，比较的结果是布尔类型
- 逻辑运算符：用于对布尔类型的变量（或常量）进行操作；
- 三元运算符“ ? : ”

 expression ? value1 : value2;

JavaScript中拥有分支结构（if、switch等）和循环结构（while、do while、for等），并支持break、continue、return等转移语句
- for in循环是JavaScript提供的一种特殊循环，可以对字符串、数组、对象集合、对象属性等进行遍历
- 使用转移语句来控制程序的执行方向，包括break语句、continue语句和return语句。
函数是一组延迟动作集的定义，可以由事件或其他脚本进行调用，分为预定义函数和用户自定义函数
- 预定义函数是指在JavaScript引擎中预先定义的内建函数，用户无需定义便可直接使用。
- JavaScript目前支持的自定义方式有命名函数、匿名函数、对象函数和自调用函数。
  - 命名函数：由函数定义和函数调用两部分组成。在使用函数时，应先定义函数，然后再进行调用。
  - 匿名函数：是网页前端设计者经常使用的一种函数形式，通过表达式的形式来定义一个函数。
  - 对象函数：JavaScript还提供了Function类，用于定义函数，参数都是字符串，前面传参，最后为函数体
  - 自调用函数：函数本身不会自动执行，只有调用时才会被执行。

JavaScript对象

JavaScript是一种基于对象的语言
对象是一种特殊的数据类型，由变量和函数共同构成
JavaScript中常见的内置对象有：Array数组对象、String字符串对象、Date日期对象、Math数学对象和 RegExp正则表达式对象
- 数组（Array）是一个有序的数据集合，使用单独的变量名来存储一系列的数据。在JavaScript中，定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存放到一个数组中。Array对象的属性包括constructor、length和prototype
- 字符串对象（String）用于对文本字符串进行处理
数组对象的concat()方法用于连接两个或多个数组，返回合并后的新数组，原数组保持不变
字符串的创建有两种方式：字面量方式、new方式
- 字面量方式
  - 字符串类型是一个基本的数据类型，而字符串对象是将字符串封装成了一个对象
  - 封装后的对象可以调用该对象的属性和方法
  - 在JavaScript中，可以隐式地将一个字符串转换成字符串对象
- new方式
  - new方式创建字符串对象是通过调用String()构造函数来完成，并返回一个String对象
在JavaScript中，string和String的区别如下：
- String是string的包装类；
- string是一种基本的数据类型，没有提供substring()等方法；
- String是构造函数用于创建字符串对象，使用new创建的对象具有substring()等方法；
- string没有提供prototype原型对象，而String对象具有prototype原型对象，通过浏览器的端点调试方式进行查看该区别；
- 使用typeof()函数查看类型时，string变量返回“string”，String对象返回“Object”，而String返回“function”；
- 使用= =比较时，string类型判断其值是否相等，而String对象则判断是否对同一对象进行引用；
- 二者的生命周期不同，使用new创建的对象一直存在，而string类型自动生成的会在代码执行后立即销毁。
Date日期对象用于操作日期和时间。通过日期对象的构造函数创建一个系统当前时间或指定时间的日期对象。
通过日期对象的构造方法，可以获取一个系统当前时间或指定时间的日期对象
Math数学对象提供了一些数学运算中的常数及数学计算方法，在数学运算时非常有用。与String、Date不同，Math对象没有提供构造方法，可以直接使用Math对象。在Math对象中，提供了一些常用的数学常数，如圆周率、自然对数的底数等。
正则表达式是使用单个字符串来描述、匹配一系列符合某个句法规则。Perl、Java、.Net、JavaScript、Python、Ruby等语言都支持正则表达式。正则表达式是一种字符串匹配的模式，通过单个字符串来描述和匹配一系列符合某个句法的规则。JavaScript提供了一个RegExp对象来完成有关正则表达式的匹配功能。
创建RegExp对象有两种方式：直接量方式和构造函数方式

var reg=/pattern/attributes;		                     //直接量方式
var regExp=new RegExp(pattern,attributes);		//构造函数方式

邓@@

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端知识总结（HTML、CSS、JavaScript）

HTML什么是HTML？HTML是一种描述性标记语言，用来描述页面内容的显示方式；HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。HTML的基本组成单位是元素，语法结构如下：<标签> 内容</标签>HTML文档结构是由、和这三大元素组成：html元素：文档以标签开始，以标签结束，所有内容都需要放在这两个标签之间。head元素：...
复制链接

扫一扫