JavaWeb学习笔记
文章平均质量分 56
主要记录JavaWeb学习的笔记,学习资源来自B站黑马程序员JavaWeb基础课程,加油!
日拱一卒无有尽, 功不唐捐终入海
这个作者很懒,什么都没留下…
展开
-
5.2、外部样式
5.2.1、<link/>标签方式 <link/>又称为链入式,是将所有的样本放在一个或者多个以.css为扩展名的外部样式表文件中,通过<link/>标签将样式链接到HTML文案当中。 格式: <link/> rel="stylesheet",固定值,表示样式表 type=“text/css”,固定值,表示css类型 href,表示css文件位置 <!DOCTYPE html> <html> <h...原创 2021-10-03 21:23:04 · 122 阅读 · 0 评论 -
BootStrap
1、bootstrap概述 1.1、什么是bootstrap?bootstrap的作用是什么? 基于HTML、css、JavaScript的前端框架 该框架已经定义了一套css样式和与样式对应的js代码。(对应的样式有对应的特效) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定的效果的实现。 作用: ①BootStrap使得web开发更加快捷,高效 ②BootStrap支持响应式开发,解决了移动互联网前端的开发问题 课外知识: 该框架有twit原创 2021-10-15 14:35:03 · 433 阅读 · 0 评论 -
关于bootstrap中链接路径,导致所有文档无法换行的经验
问题描述: 搭建完bootstrap环境之后,在操作栅格系统等等一些组件时,不能正确的展示 <link rel="stylesheet" href="../css/bootstrap-theme.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <script src="../js/jque...原创 2021-10-20 22:51:28 · 136 阅读 · 0 评论 -
2.6全局函数(global)
2.6.1、执行 eval() 计算JavaScript字符串,并把它作为脚本代码来执行 作用:用于增强程序的扩展性。 注:只可以传递原始数据类型string,传递String对象无作用原创 2021-10-07 15:50:30 · 185 阅读 · 0 评论 -
bootstrap综合示例练习中的问题
<!doctype html> <html lang="zh-CN"> <!-- HTML页面使用的是中文简体 --> <head> <meta charset="utf-8"> <!-- 设置HTML页面的字符集 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 使用IE最新的渲染模式,展示页面-->..原创 2021-10-26 23:05:28 · 74 阅读 · 0 评论 -
JavaScript
1、JavaScript概述 script:脚本、手迹、剧本、手稿 ECMAScript(核心):规定JS的语法和基本对象 DOM 文档对象模型:处理网页内容的方法和接口(控制HTML标签的) 标记型文档:即HTML。相关的HTML最终被加载内存中,通过控制DOM就可以控制HTML的展示效果 BOM 浏览器对象模型:与浏览器交互得到方法和接口 例如: 浏览器窗口的大小、滚动条、前进后退等等 1.4、JavaScript的引入方式 ...原创 2021-10-03 22:41:34 · 41 阅读 · 0 评论 -
2.5JS数组对象
2.5.1、JS数组的特性 JS数组可以看做java中的ArrayList集合ArrayList详解_非淡泊无以明志,非宁静无以致远-CSDN博客_arraylist①定义ArrayList是一个动态数组,也是我们常用的集合,它允许任何元素的插入,甚至包括null。每一个ArrayList都有一个初始化的容量(10),该容量代表了数组的大小,随着容器中容量的不断增加,容器的大小也会随着增加。在每次向容器中增加元素时,会进行容量检查,当快溢出时,会进行扩容操作。②特性 允许插入的元素重复 插...原创 2021-10-05 12:58:07 · 85 阅读 · 0 评论 -
2.2、变量
2.2.1、基本数据类型 类似于java中的基本数据类型 string 字符串类型,“和”都是字符串。JavaScript中没有单个字符 boolean 布尔类型。固定值为true和false number 数字类型。任意数字 null 空,一个占位符。 undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未定义具体的值 注:因为undefined是从null中派生出来的,所以undefined==null Java...原创 2021-10-04 13:07:13 · 70 阅读 · 0 评论 -
用bootstrap做一个注册页面练习
黑马程序员注册页练习: 页面顶部的三部分在pc屏幕上显示为一行,在移动设备屏幕上显示为一部分一行; 导航条在大屏幕展示全部内容,在移动设备上需要将内容能够折叠/展开; 用户名/密码/确认密码不能为空,密码需要和确认密码一致,如果不符合,阻止注册操作,并将错误信息展示给用户看。 ...原创 2021-10-24 22:37:30 · 5120 阅读 · 0 评论 -
bootstrap综合示例练习中的问题
<!doctype html> <html lang="zh-CN"> <!-- HTML页面使用的是中文简体 --> <head> <meta charset="utf-8"> <!-- 设置HTML页面的字符集 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 使用IE最新的渲染模式,展示页面-->..原创 2021-10-26 23:04:22 · 66 阅读 · 0 评论 -
8、导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。 9、轮播图 一张图片对应一个小圆点 class="sr-only" 盲人专用阅读器,方便 在按下按钮时,就可以读出页面的文字 JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网 轮播图div定时换图属性 data-interval="毫秒值" 注意:多个轮播图必须修改轮播图的id ..原创 2021-10-20 17:31:40 · 381 阅读 · 0 评论 -
6、列表的使用
5、响应式工具 为了针对性地在移动页面上展示和隐藏不同的内容,bootstrap提供响应式工具。可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或显示某些元素。 6、列表 bootstrap同样提供了实用的列表样式供开发人员使用 帮助手册位置:全局css样式---排版---列表 .list-inline 将列表所有元素放置于一行 示例: 7、按钮 bootstrap提供了丰富的按钮样式供开发人员。 帮助手册位置:全局css样式----按钮 任何元素加上以下样式都会变成对应...原创 2021-10-19 22:33:08 · 53 阅读 · 0 评论 -
3、BOM对象
3.1、BOM对象简述 3.2.1、BOM对象 是什么:BOM(browser object model)浏览器对象模型 浏览器:IE、火狐、谷歌等 作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息,窗口大小等) 一般情况下,Window代表了BOM对象 Window对象是JavaScript的内置对象,使用Window对象调用方法时可以省略Window不写 本来应该写window.alert(); 由于window是JS内置对象所以省去前面的部分不写。 3.2消息框 3.2..原创 2021-10-08 17:02:00 · 84 阅读 · 0 评论 -
2.7自定义函数/自定义方法
2.7.1、函数简述及作用 如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。 作用:增强代码的复用性 2.7.2、函数格式 function 方法名(参数列表){ 函数体 } JavaScript函数定义必须用小写function JavaScript函数无需定义返回值类型,直接在function后面书写方法名: 参数的定义无需使用var关键字,否则报错; JavaScript函数体中,return可以不写,也可以ret...原创 2021-10-06 18:25:03 · 68 阅读 · 0 评论 -
CSS概述
1、CSS简述 1.1、CSS是什么?有什么作用? HTML------------->页面结构----------------->人的面部(素颜) CSS------------->美化页面----------------->化妆(美颜) CSS(CascadingStyleSheets):层叠样式表 样式表:存储样式的地方,多个样式 相当于给人面部化妆: 涂口红 画眼影 打粉底 HTML标签 样式1 样式2 样式3原创 2021-09-27 12:03:50 · 52 阅读 · 0 评论 -
2.1字体标签和格式化标签
2.1.1、<font> 字体标签,用于展示效果中的修饰文字样式 <font 属性名=“属性值”>文字</font> size:控制字体大小,最小值1~7。如果超出范围,设置无效。 color:控制字体颜色,使用英文设置 红red、 橙orange 黄yellow 绿green 蓝blue 紫purple 灰grey 白white brown 褐...原创 2021-09-16 23:35:43 · 119 阅读 · 0 评论 -
基本标签-图片标签
2.21、<img/> 用于在页面效果中展示一张图片 src:指明图片的路径。(必须有属性) width:图片宽度 height:图片的高度 宽度和高度的设置: 默认单位是px,像素。例如:width=''400'' 其实设置的是 width=''400px'' 固定设置方式(窗口缩小图片比例不变) 百分比这是。例如width="50%"。是父标签的百分比,动态改变(会随着网页缩放按比例...原创 2021-09-18 22:19:25 · 69 阅读 · 0 评论 -
4、css盒子模型
4.1、什么是盒子模型 所有的HTML元素,我们都可以看成一个四边形,即一个盒子。 用css来设置元素盒子的内边距、边框 和 外边距 的样式的方式, 相当于设置盒子的样式,所以我们将其称之为 盒子模型 边框有四个属性可以设置: border-top:上边框 border-right:右边框 border-bottom:下边框 border-left:左边框 示例: <span style=“border-top” solid red;>内容体<span/>...原创 2021-10-01 23:53:47 · 75 阅读 · 0 评论 -
3、css样式
3.1、边框属性 所有的HTML标签都是有边框的,默认边框不可见。 3.1.1、border 设置边框的样式 格式:宽、样式、颜色 例如:border:1px solid red; 一像素 实线 红色边框 线条样式包括:solid实线,none无边框,double双线 3.1.2、width 用于设置标签的宽度 3.1.3、height 用于设置标签高度 <!DOCTYPE html> <html> <head> <meta...原创 2021-09-29 16:47:32 · 39 阅读 · 0 评论 -
2.2、基本选择器的组合方式
2.2.1、层级关系 标签和标签之间有层级关系,例如:<html>标签的子标签为<body> 我们可以对于基本选择器进行组合,表现出层级关系,从而更加针对性地把样式作用于某些标签上。 格式: 选择器1 选择器2......{ /*css样式代码*/ } 选择器1 (父) 选择器2(子) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit...原创 2021-09-29 15:46:19 · 119 阅读 · 0 评论 -
2、css选择器
2.1、基本选择器 2.1.1、元素选择器 HTML标签又名HTML元素 元素选择器:即以HTML标签名作为选择器名称 例如:span{ } div{ } 作用:选择css样式代码作用于对应标签名的标签上 格式: 标签名{ /*css样式代码*/} 2.1.2、类选择器 每个HTML标签上都有一个class属性,class属性值即为类名 类选择器:即以HTML的类名(class属性值)作为选择器名称 作用:选择css样式代码 作用于 对应类名的HTML标签上 格式: .类名...原创 2021-09-27 16:52:09 · 48 阅读 · 0 评论 -
3.块标签、表单标签
块标签 1.<div></div> ①适用于大量信息展示 ②默认占满一行(把这种呢默认占满一行的标签叫做块标签) 2.<span></span> ①适用于少量信息展示,有多少内容,就占多少空间 ②行级标签,不会自动换行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>...原创 2021-09-21 13:16:39 · 188 阅读 · 0 评论 -
超链接标签、
2.4超链接标签 2.4.1、<a></a> 超链接标签 ,用于在效果中定义一个可以点击跳转的链接 href:超链接跳转的路径(必须有属性) 内网本机路径:相对路径/绝对路径 互联网路径:http//://地址 本页:默认跳转到本页 超链接正常工作的条件:①a标签内容体,不仅仅是文字,也可以是图片等 ②a标签的href属性,不仅仅可以连...原创 2021-09-19 20:57:24 · 176 阅读 · 1 评论 -
HTML简介及概念
1.HTML是什么?有什么作用? HTML:(Hyper Text Markup Language)超文本标记语言 文本:相当于记事本里面写的文字,为了展示一个信息 超文本:超越了文本仅仅展示信息的功能范畴。泛指:图片、文字、有样式的文字、可跳转页面的文字 语言:工具。 标记:标签 HTML是由标签所组成的语言,能展示超文本效果。 用途:用来写网页的,是设计页面的基础。 2.HTML的入门案例 步骤1:创建文件,后缀名为html或者htm 步骤2:用记事本打开文件,并编写文字原创 2021-09-16 11:29:12 · 136 阅读 · 0 评论 -
3.3、转换
3.3.1、display HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块级元素和行内元素 块元素:以区域块方式出现,每个块标签独自占据一整行或多整行,块结束会自动换行 常见的块元素:标题标签<h1>、段落标签<p>、块标签<div>、无序列表<ul>等 行内元素:根据内容多少来占用行内空间,不会自动换行 常见的行内元素:<span>、<a>等 di...原创 2021-10-01 15:23:48 · 42 阅读 · 0 评论