Web前端基础梳理

最新推荐文章于 2024-09-06 19:40:02 发布

cherish_LYE

最新推荐文章于 2024-09-06 19:40:02 发布

阅读量275

点赞数 1

本文链接：https://blog.csdn.net/cherish_hyl/article/details/104487164

版权

一、HTML基础

1、HTML（超文本标记语言，Hyper Text Markup Language）
2、HTML文档结构是由< html>、< head>和< body>这三大元素组成

<html>
　　<head>
　　   <title>标题</title>
　　</head>
　　<body>
　　　   主体部分
　　</body>　
</html>

3、< head>中可以包含以下子元素：< title>、< meta>、< base>、< link>、< script>、< style>等，其中< meta>标签主要分为两大类：

对页面的设置，通过http-equiv属性进行指定；
对搜索引擎的设置，通过name属性进行指定

4、< font>标签可以用来控制更多的文本字体外观样式，通过face、size和color属性来设定文本的字体、大小和颜色。
5、常用标签：< p>段落标记、< br>换行标签、< hr>水平线标签、< i> 定义斜体字(不推荐)、< strong> 定义加重语气、< sub> 定义下标字、< sup> 定义上标字、< del> 定义删除字。
6、列表元素：

有序列表：使用一些数值或字母作为编号；

<ol>
	<li>列表项 1</li>
	<li>列表项 2</li>
	......
</ol>

无序列表：使用项目符号作为编号；

<ul type="类型">
	<li>列表项 1</li>
	<li>列表项 2</li>
	......
</ul >

定义列表：列表中的每个项目与描述配对显示。

<dl>
	<!-- 第1项开始 -->
	<dt>标题 1</dt >
	<dd>描述 1</dd>
	<!-- 第1项结束 -->
	<!-- 第2项开始 -->
            ......
	<!-- 第2项结束 -->	
</dl >

7、图像标签：< img src=“url” alt=" " …/>
8、超链接：< a href=“url” name=" " target=" ">链接内容< /a>
常见的超链接有以下几种类型：文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接
target属性：在这里插入图片描述
9、表格：
1）、表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。在HTML中，通过< table>标签创建表格元素
2）、基本结构：

<table> 
  <!-- 一行可以包含多个单元格 -->
  <tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
    <!--更多单元格-->
    ......
  </tr>
   <!--更多行-->
   ......
</table>

3）、表格的基本属性：表格的常用属性有对齐方式、背景颜色、边框、高度、宽度等
在这里插入图片描述
属性cellpadding表示单元格边界与单元格内容之间的距离
cellspacing表示单元格与单元格之间的距离
4）、单元格标签：单元格常用的属性有水平对齐、垂直对齐、水平跨度、垂直跨度、宽度、高度、背景颜色等
在这里插入图片描述
5）、表格的行分组：
使用< thead>、< tfoot>、< tbody>、< caption>标签可以对表格进行横向分组：
< thead>标签定义表头，用于创建表格的头部信息
< tfoot>标签定义表尾，用于创建表格的脚注部分
< tbody>标签定义表格主体，用于表示表格的主体部分
< caption>标签定义表格标题，显示在整个表格的上方

<table width="400" border="1" rules="groups">
  <caption>
    企业员工薪水绩效表
  </caption>
  <thead>
      <tr>
        <th>员工编号</th><th>员工岗位</th>
        <th>基本工资</th><th>本月绩效</th>
      </tr>
  </thead>
  <tbody>
  ......
  </tbody>
  <tbody>
  ......
  </tbody>
  <tfoot>
  ......
 </tfoot>
</table>

注：表格嵌套的层次不能过深，一般不要超过3~4层。

10、框架：
1）、框架（frame）能够将浏览器窗口划分为多个独立的窗格，每个窗格包含一个独立的HTML页面

<frameset rows="行高度所占窗口的像素或比例,.." 
          cols="列宽度所占窗口的像素或比例,.." >
    <frame src="..."/>
	......
</frameset>

2）、框架集的属性在这里插入图片描述
3）、框架的属性：

11、表单：
1)、表单主要分为表单标签及表单控件两大类
2）、表单控件又可细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等
3）、常见的服务器端语言有JSP、PHP、ASP.NET、NodeJS等
4）、基本结构：

<form action="处理数据程序的URL地址" method="get|post" 
       name="表单名称" … >
</form>

5）、表单标签：
在这里插入图片描述
6）、表单域：

文本框：<input type="text" name="…" size="…" maxlength="…" value="…" disabled="disabled" readonly="readonly"/>
密码域：<input type="password" name="…" size="…" maxlength="…" value="…" />
单选按钮：<input type="radio" name="…" value="…" checked="checked" />
其中：
type="radio"用于指明表单域的类型是单选按钮；具有相同name属性的单选按钮分为一组，一组只能选择一项；value属性用于指定该项的值，同一组内的值不应相同；checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式

-复选框：<input type="checkbox" name="…" value="…" checked="checked"/>
其中：type="checkbox"用于指明表单域的类型是复选框；具有相同name属性的复选框分为一组，组内允许多选；checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式

文件选择框：<input type="file" name="…" accept="…"/>
隐藏域：<input type="hidden" name="…" value="…" />
多行文本框：<textarea name="…" rows="…" cols="…" wrap="…" > 文本内容 </textarea>
列表选择框：< select name="…" size="…" multiple="multiple"> < option value="…" selected="selected">选项描述内容</option> … </select>

7）、按钮控件：<input type="submit|reset|button|image" name="…" src="…" value="…" />
其中：

button表示创建一个普通按钮，当用户点击按钮时，可以触发JavaScript脚本的按钮
image表示创建一个图片按钮，点击时也可以提交表单
src属性是可选的，当type属性为image时，用来指定图片的URL地址

二、CSS部分

1、每个样式包含两部分内容：选择器、声明（由属性和属性值组成）。
2、 css样式三种格式：内嵌样式（行内样式）、内部样式、外部样式。
3、先加载样式后加载页面元素，根据元素顺序加载。
4、用户浏览网页时，css样式文件会被暂时缓存，继续浏览其他页面时，会优先使用缓存中的css文件；
5、链接外部样式表：type属性设置目标文件的MIME类型，css样式表的MIME类型是text/css；rel属性用于设置目标文件与当前文档的关系，stylesheet表示外部文件的类型是css文件；href设置目标文件。
6、多重样式：外部样式、内部样式、内嵌样式混合使用在同一个页面；样式优先级采用就近原则；一般情况：内嵌>内部>外部>浏览器缺省默认
7、优先级的前提：样式的权重一样的情况下，谁离被设置元素越近谁的优先级越高。
8、通用选择器<元素（类型）选择器<类选择器<属性选择器<伪类<ID选择器<内联样式
9、样式表的优先级：
1）. 内联样式表的权值最高 1000；
2）. ID 选择器的权值为 100
3）. Class 类选择器的权值为 10
4）. HTML 标签选择器的权值为 1
10、CSS选择器：
在这里插入图片描述
11、CSS选择样式：

12、字体属性：

13、背景属性：

14、分类属性：

cursor属性：用于指定用户鼠标的指针类型。在设计表单过程中，使用图片作为提交按钮，当鼠标移到图片上时，通常将鼠标指针由箭头改成手的形状，从而进一步对用户进行提示。
display属性：通过display属性可以将页面元素隐藏或显示出来；
通过display属性可以将元素强制改成块级元素或内联元素。
float与clear属性：float属性可以将元素从正常的页面流中浮动出来，离开其正常位置，浮动到指定的边界。
当元素浮动到边界时，其他元素将会在该元素的另外一侧进行环绕。
15、CSS页面布局：
1）、伪类选择器：伪类以冒号（：）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白。
在CSS1时引入了:link、:visited和:active三个伪类，只是用于HTML中的标签，表示网页中的链接状态：未访问、已访问和被选中，三者之间是互斥的。
在CSS2中对伪类的范围进一步扩充，确保适用于页面中的所有元素，并引入新的伪类:hover、:focus等。

2）、css样式属性

3）、字体属性：

4）、当position属性为static时，会忽略left、top、right、bottom和z-index等相关属性的设置
5）、在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范，称为盒子模型。
6）、页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，通过盒子之间的嵌套、叠加或并列，终形成了页面。
7）、盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分组成。
8）、边框宽度border-width的取值范围为指定的关键字或数值，其中关键字包括thin（细边框）、 medium（默认值，中等边框）、thick（粗边框）。
9）、’当边框宽度有3个参数时，将按“上->左+右->下”的顺序作用到边框上;当边框宽度有2个参数时，将按“上+下->左+右”的顺序作用到边框上;当边框宽度有1个参数时，四个方向的边框宽度取值相同;
10）、盒子模型属性：
在这里插入图片描述

三、JavaScript部分

1、在Canvas绘图、本地存储、离线应用和客户端通信等方面都需要结合JavaScript脚本来实现。
2、 js的特点：解释性、嵌套在HTML中、弱数据类型、跨平台、基于对象、基于事件驱动。
3、内部JavaScript脚本：

<head>
    <script type="text/javascript">
	alert("head中的JavaScript");
    </script>
</head>
 <body>
    <script type="text/javascript">
	alert("body中的JavaScript");
    </script> 
</body>

4、 js数据类型：
在这里插入图片描述
5、js运算符：赋值运算符、算术运算符、比较运算符、逻辑运算符、三元运算符。

6、for in循环是JavaScript提供的一种特殊循环，可以对字符串、数组、对象集合、对象属性等进行遍历。
7、在JavaScript中，函数可分为预定义函数和用户自定义函数。
8、 js预定义函数：
9、JavaScript目前支持的自定义方式有命名函数、匿名函数、对象函数和自调用函数。
10、在同一个标签中，函数的调用可以在函数定义之前，也可以在函数定义之后。在不同的标签中时，函数的定义必须在函数的调用之前，否则调用无效。
11、数组函数的常用方法：（1）concat()用于连接两个或者多个数组，返回合并后的新数组。（2）join()用于把数组所有元素放入一个字符串中，并通过指定的字符串分隔符隔开。（3）push()用于向数组末尾添加一个或者多个元素，返回数组新长度。（4）slice(start,[end])用于从数组中返回选定的元素。
12、字符串的创建方式：
（1）字面量方式（直接赋一个字符串）
（2）new方式，返回是一个对象。
13、创建一个RegExp对象有两种方式：直接量方式和构造函数方式。
JavaScript总结：

JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言
JavaScript脚本包括行内JavaScript脚本、内部JavaScript脚本和外部JavaScript脚本三种形式
常见的数据类型包括String、Boolean、Undefined、Array、Number、Function和Object
注释主要分为两种：单行注释和多行注释
JavaScript包括赋值运算符、算术运算符、比较运算符、逻辑运算符、三元运算符等运算符
JavaScript中拥有分支结构（if、switch等）和循环结构（while、do while、for等），并支持break、continue、return等转移语句
函数是一组延迟动作集的定义，可以由事件或其他脚本进行调用，分为预定义函数和用户自定义函数