Web前端知识点复习总结

2023-11-06

目录

1、HTML简介

2、CSS

2.1 盒子模型

2.2 float(浮动)

3、JavaScript

4、jQuery

5、Bootstrap


1、HTML简介

HTML:超文本标记语言,用于编写网页。

超文本:超文本是用超链接的方法,将各种不同的文字信息组织在一起的网状文本。

标记语言:由标签构成的语言,使用标签的方法将需要的内容包括起来。

Web三要素:浏览器、服务器、HTTP协议。 

HTML相关标签的语法和特点

HTML文件不需要编译,直接使用浏览器进行阅读。

HTML文件的扩展名是 *.html *.htm

围堵标签:由开始标签和结束标签组成。例如:<a></a>

自闭和标签:例如 <br />

标签可以嵌套:<html><body>文本</body></html>

标签的属性:<html 属性名="属性值"></html>

标签名不区分大小写。

标签属性由键值对构成,值需要用引号(单双都可)引起来。

HTML学习网站:

W3School:
    https://www.w3school.com.cn

2、CSS

CSS:cascading style sheets,意为层叠样式表。用以美化 html 页面。

2.1 盒子模型

所有HTML元素可以看作盒子。

在CSS中,"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子,封装周围的HTML元素。

它包括:外边距(margin),边框(border),内边距(padding),和实际内容(content)。

2.2 float(浮动)

float CSS 属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。

div {
    /*定义一个左边开始的浮动*/
    float: left;
    /*清除浮动*/
    clear: both;
}

具体内容见以下说明文档:

float - CSS(层叠样式表) | MDN

3、JavaScript

JavaScript 的组成:

核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。

JavaScript 的作用:

添加页面动画效果,提升用户操作体验。

JavaScript 的引入(两种方式):

<script type="text/javascript"></script> //内嵌式
<script src="1.js" type="text/javascript" charset="UTF-8"></script> //外联式

变量的声明(弱类型):

var 变量名; // JavaScript变量可以不声明,直接使⽤。默认值:undefined

变量的赋值:

var 变量名 = ; // JavaScript 变量是弱类型,及同⼀个变量可以存放不同类型的数据

JavaScript 事件相关知识点:

事件介绍 - 学习 Web 开发 | MDN

学习疑惑:

js中attr和prop区别:

JS中attr和prop区别_csdnluolei的博客-CSDN博客_prop和attr区别

js中给元素添加类的方法:

js中给元素添加类的方法_小肉包de的博客-CSDN博客_js给元素添加类名

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值:

HTML <input> 标签的 name 属性

js中的window对象属于dom还是bom?

JS中的window对象属于DOM还是BOM? - 知乎

4、jQuery

jQuery 是一个着重简化 DOM 操作,AJAX 调用和事件 (en-US)处理的 JavaScript 库。

jQuery 使用 $(selector).action() 的格式给一个(或多个)元素绑定事件。具体来说,$(selector) 让 jQuery 选择匹配 CSS 选择器 selector 的元素,并将它/它们传递给叫做 .action() 的事件 API

$(document).ready(function(){
  alert("Hello World!");
  $("#blackBox").hide();
});

$(document).ready(function(){}); 可以简写为 $(function(){});

上述代码和以下代码功能相同:

window.onload = function() {
  alert( "Hello World!" );
  document.getElementById("blackBox").style.display = "none";
};

jQuery详解:

jQuery笔记 (完整详细版)_qq_37957971的博客-CSDN博客_jquery

5、Bootstrap

Bootstrap简介

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。

Bootstrap 特点

响应式布局:不但可以支持PC端的各种分辨率的显示,还支持移动端PAD、手机等屏幕的响应式切换显示。

栅格系统
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,页面内容可以放入这些创建好的布局中。

相关知识点可见文章:

bootstrap知识总结_@山海*的博客-CSDN博客_bootstrap 总结

官方文档:

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Web前端知识点复习总结 的相关文章

  • 如何防止缓慢脚本警告并强制浏览器继续运行脚本直到完成?

    更新 2013 年 7 月 5 日 自从我最初问这个问题以来 我学到了很多东西 在下面的一条评论中 有人建议我重新处理该任务 并找到一种方法来解决它 而不会有阻塞 UI 的风险 我说不可能 函数必须按原样运行 我实际上不记得我试图用这个函数
  • 所有属性的 JavaScript getter

    长话短说 我现在的情况是想要一个 PHP 风格的 getter 但是是 JavaScript 的 我的 JavaScript 仅在 Firefox 中运行 因此 Mozilla 特定的 JS 对我来说没问题 我能找到的制作 JS gette
  • 不明白为什么 Chrome/Safari 无法在此处获取 ScrollHeight

    我只是问了一个问题 为什么某些 js 代码不能 100 在 Chrome 和 Safari 中工作 但经过更多故障排除后 我想我发现这是我应该发布的问题 我有一个页面 其中有一个表单 该表单的目标是同一页面上的 iframe iframe
  • 如何切换整个页面的深色主题?

    我已经成功地在 html 和 Flask 中按下复选框时切换深色主题和浅色主题 但是我怎样才能让深色主题覆盖整个页面 而不仅仅是一些 div 元素呢 边距仍然是浅色主题 CSS代码如下 container display flow widt
  • 解密Javascript源代码[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我已经编写了一段 JavaScrip
  • 删除 CSS Transitionend 事件侦听器不起作用

    我在尝试删除 css Transitionend 事件侦听器时遇到问题 我可以添加监听器 e addEventListener transitionend function event transitionComplete event pr
  • Twitter bootstrap 3 RC2 - IE8 中的导航不起作用

    我正在使用 Twitter Bootstrap 3 RC2 在页面顶部创建一个导航栏 除了在 IE8 中之外 该导航栏工作正常 在 IE8 中 就像浏览器变小一样 因此菜单会折叠以供移动视图使用 但这种情况并非如此 现在我知道 TB3 仍在
  • 需要了解Javascript函数提升示例

    我阅读了 Javascript 提升的概念 它非常令人困惑 但我看到了一些示例并了解了提升的实际作用 所以基本上 提升是 JavaScript 的默认行为 即将所有声明移动到当前作用域的顶部 当前脚本或当前函数的顶部 但我无法理解以下实现
  • 在没有全局变量的情况下对多个事件使用 Promise 回调

    我有一个包含在函数中的承诺 我将使用不同的输入参数多次调用该函数 每次承诺解决时 我都会将解决的值推送到存储数组中 当我所有的调用承诺都得到解决后 我将在其他函数中使用这个存储数组 是否有任何干净的方法可以在不使用 全局 变量的情况下进行设
  • PHP:分离业务逻辑和表示逻辑,值得吗? [复制]

    这个问题在这里已经有答案了 可能的重复 为什么要在 PHP 中使用模板系统 https stackoverflow com questions 436014 why should i use templating system in php
  • Google Apps 脚本:如何水平对齐 inlineImage

    我有以下代码 它是一个更大程序的一部分 我正在尝试将图像从我的 Google 驱动器插入到 Google 文档中 并调整其大小并居中 到目前为止 我能够让程序插入图像并调整其大小 但我不知道如何使 inlineImage 居中 我是使用谷歌
  • 动画持续时间不准确

    我在 SVG 中创建了加载微调器 但动画持续时间不准确 例如 30 秒动画持续时间 实际 26 秒 动画持续时间 45 秒 实际持续时间 38 秒 60 秒动画持续时间 实际 51 秒 我很绝望 不知道哪里可能出错 你能帮助我吗 1 旋转器
  • 如何在 Android 设备(平板电脑和手机)方向更改时获得正确的窗口宽度

    我正在尝试使用 jquery 函数计算 Android 设备方向变化时的窗口宽度 window outerWidth true 此计算给出了两个方向变化的正确宽度iphone and ipad但在安卓中不行 如果我最初以横向模式或纵向模式加
  • jQuery:将 json 响应的编码设置为 utf8

    我收到了 json 格式的 jQuery 响应 逻辑工作正常 但我无法让他正确编码数据 如 我搜索并发现this https stackoverflow com questions 26620 how to set encoding in
  • ajax - 检查用户名是否存在+如果存在则返回消息

    我试图检查用户想要的用户名是否已被使用 而无需发送表单 基本上是用户名字段的模糊 我遇到了一些麻烦 有几个问题 我有我的输入字段加上js
  • 打印html时在页面上打印页码

    我读过很多关于打印页码的网站 但当我尝试打印它时 我仍然无法让它显示在我的 html 页面上 所以 CSS 代码如下 page margin 10 top center font family sans serif font weight
  • 如何获取td表的实际宽度

    我在 html 中创建一个表 这个table宽度为 988 像素 tr宽度为 100 table width 表标签中存在 5 个td标记这个td标签宽度 20 当我使用 jQuery 处理这些标签时 td标签 在控制台中向我显示 198
  • 使用 jQuery 将值发送到 $_GET

    我正在使用一个 PHP 脚本 该脚本正在通过 GET 等待两个值 我正在尝试使用 jQuery 传递这两个值 而这正是我不太擅长的地方 这是我得到的代码 有人能指出我正确的方向吗 谢谢 function xrate id rating aj
  • 如何在 Mongo 聚合管道的 $unwind 阶段保留零长度值?

    我正在使用聚合管道编写 Mongo 查询 在聚合过程中 我需要 unwind领域之一 但是 我不想要 unwind排除该字段具有零长度数组的条目 因为我仍然需要它们进一步深入管道 我的领域叫做items它是一个对象数组 每个对象包含两个值
  • 如何通过 jQuery onblur 提交表单

    所以我尝试通过 jQuery onblur 提交表单 即一旦焦点离开密码字段 表单就会通过 jQuery 提交 有类似的问题 但这不是我要找的 我尝试使用 document getElementById 但它不起作用 任何帮助表示赞赏 提前

随机推荐