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前端知识点复习总结 的相关文章

  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 长轮询会冻结浏览器并阻止其他 ajax 请求

    我正在尝试在我的中实现长轮询Spring MVC Web 应用程序 http static springsource org spring docs 2 0 x reference mvc html但在 4 5 个连续 AJAX 请求后它会
  • Javascript/Jquery:确定用户是否使用鼠标滚轮、滚动条或键盘滚动

    我正在尝试让用户界面正常工作 如果他们使用鼠标滚轮 我需要让它以一种方式滚动 如果他们使用滚动条 我需要让它以另一种方式滚动 如果他们使用键盘 我需要让它以另一种方式滚动 我相信滚轮和滚动条都充当鼠标事件 但是当单击滚动条时我无法让 jav
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win
  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐