Web前端基础

已于 2022-06-15 21:15:59 修改
阅读量214 收藏
点赞数
分类专栏： Web前端 文章标签： 前端 html javascript
于 2022-06-05 20:08:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54781283/article/details/125120669
版权

文章目录

第三阶段课程介绍：

  • web前端

  • 数据库

  • SpringBoot
    在这里插入图片描述

day01

  • HTML作用： 负责搭建页面结构和内容 （盖房子）

  • 学习HTML主要学习的就是有哪些标签

文本相关标签

  • h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗

  • p 段落标签, 特点: 独占一行,自带上下间距

  • hr 水平分割线

  • br 换行

  • b 加粗

  • i 斜体

  • u 下划线

  • s 删除线

列表标签

  • 无序列表: ul和li 组合 unordered list list item 列表项

  • 有序列表: ol和li 组合 ordered list

  • 列表嵌套: 有序列表和无序列表可以任意无限嵌套 .

图片标签img

  • src: 资源路径

    • 相对路径: 访问站内资源

      • 图片和页面在同级目录: 直接写图片名

      • 图片在页面的上级目录: …/图片名

      • 图片在页面的下级目录: 文件夹名/图片名

    • 绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险

  • alt: 图片不能正常显示时显示的文本

  • title: 图片标题

  • width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放

    • 像素

    • 上级元素百分比

超链接a

  • href: 资源路径, 作用类似图片标签的src

  • a标签包裹文本为文本超链接, 包裹图片为图片超链接

  • 页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href=“#xxx”

表格table

  • 相关标签: table tr表示行 td表示列 th表头 caption标题

  • 相关属性: border边框 colspan跨列 rowspan跨行

表单form

  • 作用: 获取用户输入的各种信息 并提交给服务器

  • 学习form表单主要学习的就是有哪些控件

<form action=“http://www.baidu.com”>

<!–maxlength最大字符长度

value设置默认值

readonly只读–>

用户名:<input type=“text” name=“username” maxlength=“5”

value=“abc” readonly ><br>

密码:<input type=“password” name=“password”><br>

<!–value是单选框必须添加的属性 否则提交on

checked默认选中–>

性别:<input type=“radio” name=“gender” value=“m” id=“r1”>

<label for=“r1”>男</label>

<input type=“radio” name=“gender” checked value=“w”>女<br>

兴趣爱好:<input type=“checkbox” name=“hobby” value=“cy”>抽烟

<input type=“checkbox” name=“hobby” checked value=“hj”>喝酒

<input type=“checkbox” name=“hobby” value=“tt”>烫头<br>

生日:<input type=“date” name=“birthday”><br>

靓照:<input type=“file” name=“pic”><br>

所在地:

<!–value设置提交的内容 selected默认选中–>

<select name=“city”>

<option value=“bj”>北京</option>

<option value=“sh”>上海</option>

<option value=“gz” selected>广州</option>

</select><br>

<input type=“submit” value=“注册”>

</form>

分区标签

  • 作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理

  • 块级分区标签div: 特点是独占一行

  • 行内分区标签span: 特点是共占一行

  • 页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域

  • HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签

    • header头

    • footer脚

    • main主体

    • section区域

    • nav 导航

CSS 层叠样式表

  • Cascading Style Sheet
  • 作用: 美化页面(装修)

如何在HTML页面中添加CSS样式代码

  • 三种引入方式:

    • 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用

    • 内部样式: 在head标签里面添加一个style标签, 在标签体内写样式代码, 可以实现复用但是只能本页面复用

    • 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离

选择器

  • 作用: 通过选择器找到页面中的元素之后再添加样式

  1. 标签名选择器: 选取页面中所有同名标签

    • 格式: 标签名{样式代码}

  2. id选择器: 当需要选择页面中某一个元素时使用

    • 格式: #id{样式代码}

  3. 类选择器: 当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择

    • 格式: .class{样式代码}

  4. 分组选择器: 分组选择器可以将多个选择器合并成一个

    • 格式: h4,#id,.class{样式代码}

  5. 属性选择器: 通过元素的属性选择元素

    • 格式: 标签名[属性名=“属性值”]{样式代码}

  6. 任意元素选择器: 选择页面中所有标签

    • 格式: *{样式代码}

选择器练习:

  1. 把张学友改成绿色

  2. 把刘德华和悟空改成蓝色

  3. 修改取经3人和刘备的背景为黄色

  4. 修改密码框的背景为红色

  5. 给所有元素添加红色的边框

工程的git地址:

https://gitee.com/teduliu/cgb2202.git

复制整行快捷键 ctrl+D

注释快捷键 ctrl+shift+/

快速进入下一行 shift+回车

day02

选择器续

  1. 子孙后代选择器: 通过元素之间的层级关系选择元素

    • 格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p标签(包括后代)

  2. 子元素选择器: 通过元素之间的层级关系选择元素

    • 格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)

  3. 伪类选择器: 选择的是元素的状态, 元素有哪些状态? 包括:未访问状态,访问过状态,悬停状态,点击状态

    • 格式: a:link/visited/hover/active:{样式代码}

选择器练习:

  1. 关羽绿色

  2. 张飞和苹果黄色

  3. 文本框和所有水果背景红色

  4. p2字体粉色

  5. p2和p3背景黄色

  6. 优酷未访问绿色,访问过红色

悬停黄色,点击粉色

颜色赋值

三原色: 红绿蓝 ,red green blue rgb ,每个颜色的取值范围0-255

颜色赋值的几种方式:

  • 颜色单词: 常见颜色单词都可以使用
  • 6位16进制赋值: #ff0000
  • 3位16进制赋值: #f00
  • 3位10进制赋值: rgb(255,0,0)
  • 4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度

背景图片

  • background-image:url(“路径”) 设置背景图片
  • background-size:100px 200px 设置背景图片尺寸
  • background-repeat:no-repeat; 禁止重复
  • background-position: 横向 纵向; 设置背景图片的位置,两种方式: 1像素 2百分比

文本和字体相关样式

  • text-align:left/right/center; 文本水平对齐方式
  • line-height:20px; 设置行高, 多行文本时可以控制行间距, 单行文本时可以控制垂直居中(因为文本默认是在当前所在行内居中)
  • text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰
  • text-shadow:颜色 x偏移值 y偏移值 浓度; 阴影
  • font-size:20px; 设置字体大小
  • font-weight:bold加粗/normal去掉加粗
  • font-style:italic; 设置斜体
  • font-family: xxx,xxx,xxx; 设置字体
  • font:20px xxx,xxx,xxx; 这只字体大小+字体

文本和字体相关练习

1. 刘德华 宽度100 高度30

绿色背景 红色字体

横向和纵向居中

2. 苹果和香蕉 字体大小25px 斜体

3. 冰箱去掉加粗 蓝色阴影

方向是左下 浓度3

4. 洗衣机添加下划线

5. 百度去掉下划线字体加粗

字体大小20px

元素的显示方式display

  • block: 块级元素的默认值, 特点: 独占一行 可以修改宽高, 包括: h1-h6 , p, div
  • inline: 行内元素的默认值, 特点: 共占一行 不可以修改宽高, 包括: span, b,i,s,u,超链接a
  • inline-block:行内块元素默认值, 特点: 共占一行 并且可以修改宽高, 包括: img,input
  • none: 隐藏元素
  • 行内元素不能直接修改宽高, 如必须修改则先将元素的显示方式改成block或inline-block

盒子模型

  • 盒子模型用来控制元素的显示效果包括: 元素内容content+外边距margin+边框border+内边距padding
  • 元素内容content:控制元素的显示尺寸
  • 外边距margin:控制元素的显示位置
  • 边框border:控制边框效果
  • 内边距padding:控制元素内容的位置

盒子模型之内容content

  • 包括:width和height

  • 赋值方式有两种:

    • 像素
    • 上级元素的百分比

  • 行内元素不能直接修改宽高

盒子模型之外边距margin

  • 作用: 控制元素的显示位置

  • 赋值方式:

    • margin-left/right/top/bottom:10px; 单独某个方向赋值
    • margin:10px; 四个方向赋值
    • margin:10px 20px; 上下10 左右20
    • margin:10px 20px 30px 40px; 上右下左 顺时针赋值

  • 行内元素上下外边距无效

  • 上下相邻彼此添加外边距 取最大值

  • 左右相邻彼此添加外边距 两者相加

  • 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

盒子模型之边框border

  • 赋值方式:

    • border:1px solid red; 给四个方向添加边框
    • border-left/right/top/bottom:1px solid red; 单独给某个方向添加边框

  • border-radius:10px; 值越大越圆 当值超过宽高的一半时为正圆(前提是正方形)

盒子模型之内边距padding

  • 作用: 控制元素内容的位置

  • 赋值方式: 和外边距类似

    • padding-left/right/top/bottom:10px; 单独某个方向赋值
    • padding:10px; 四个方向赋值
    • padding:10px 20px; 上下和 左右赋值
    • padding:10px 20px 30px 40px; 上右下左顺时针赋值

  • 给元素添加内边距会影响元素的显示宽高

CSS的三大特性

  • 继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带的效果不受继承影响, 比如超链接字体颜色
  • 层叠:多个选择器可能选择到同一个元素,如果添加的样式不同则全部层叠有效,如果作用的样式相同 则由优先级决定哪个生效
  • 优先级: 指CSS中的选择器具有优先级, 作用范围越小优先级越高, !important>id>class>标签名>继承(属于间接选中)

day03

元素的定位方式

  • 五种定位方式:

    • 静态定位: position:static;
    • 相对定位: position:relative;
    • 绝对定位: position:absolute;
    • 固定定位: position: fixed;
    • 浮动定位: float:left/right

静态定位(文档流定位)

  • 格式: position:static; (默认的定位方式)

  • 特点: 元素以左上为基准, 块级元素从上往下排列,行内元素从左向右依次排列, 默认情况下 无法实现元素的层叠效果

  • 如何控制元素的位置?

通过外边距控制元素的位置

相对定位

  • 格式: position:relative;
  • 特点: 元素不脱离文档流(仍然占着原来的位置) ,可以实现元素的层叠效果
  • 如何控制元素的位置?

通过left/right/top/bottom 控制元素的显示位置,参照物是初始位置

  • 应用场景: 当希望移动某一个元素其它元素不受影响时使用相对定位, 相对定位可以实现元素的层叠

绝对定位

  • 格式: position:absolute;
  • 特点: 元素脱离文档流(不占原来的位置),可以实现元素层叠
  • 如何控制元素的位置?

通过left/right/top/bottom控制位置,参照物为窗口(默认)或某一个上级元素(需要在上级元素中添加position:relative作为参照物)

  • 应用场景: 当需要往页面中添加一个元素并且不影响其它元素的显示位置,并且可以实现层叠效果

固定定位

  • 格式: position:fixed;
  • 特点: 脱离文档流
  • 如何控制元素的位置?

通过left/right/top/bottom相对于窗口做偏移

  • 应用场景: 当需要将元素固定在窗口的某个位置时使用

浮动定位

  • 格式: float:left/right;
  • 特点: 脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止.
  • 浮动元素一行装不下时会自动折行, 折行时有可能被卡住
  • 当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给元素添加overflow:hidden可以解决此问题
  • 应用场景: 当需要将纵向排列的元素改成横向排列时使用.

溢出设置overflow

  • visible超出部分显示(默认)
  • hidden超出部分隐藏
  • scroll 超出部分滚动显示

行内元素垂直对齐方式vertical-align

  • top 上对齐
  • middle中间对齐
  • bottom下对齐
  • baseline基线对齐(默认)

元素的显示层级z-index

当两个元素非静态定位时可能存在层叠的问题 通过z-index样式控制显示层级, 值越大显示越靠前

day04

JavaScript

  • 作用: 负责给页面添加动态效果

  • 语言特点:

    • 属于脚本语言(不需要编译直接由浏览器解析执行)
    • 基于面向对象
    • 属于弱类型语言

java: String name=“tom”; int age = 18; int x; x=“abc”;报错

JS: let name=“tom”; let age = 18; let x; x=“abc”; age=“xyz”

  • 安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.
  • 交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言 可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所有交互性JS语言会更强一些

如何在HTML页面中添加JS语言

  • 三种引入方式:

    • 内联: 在标签的事件属性中添加js代码,当事件触发时执行.
      • 事件: 是系统提供的一系列时间点.
      • 点击事件: 当点击元素时触发的时间点
    • 内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码
    • 外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面

变量, 数据类型,运算符,各种语句,方法,面向对象

变量

  • JS属于弱类型语言

java: String name=“tom”; int age = 18; int x; x=“abc”;报错

JS: let name=“tom”; let age = 18; let x; x=“abc”; age=“xyz”

  • let和var关键字的区别, 作用域有区别

  • 使用let声明的变量,作用域和Java语言的作用域类似

  • 使用var声明的变量,不管在什么位置声明 都相当于是一个全局变量

java:

for(int i=0;i<10;i++){

int y = i+1;

}

int z = i+y; 报错 i和y超出了自身的作用域

JS:

for(let i=0;i<10;i++){

let y = i+1;

}

let z = i+y; 不报错,但是访问不到i和y 因为超出了作用域

for(var i=0;i<10;i++){

var y = i+1;

}

var z = i+y; 不仅不报错还能够访问到i和y的值

数据类型

  • JavaScript中只有对象类型

  • 常见的对象类型包括:

    • 字符串: string 可以用单引号或双引号修饰

    • 数值: number 相当于Java中所有数值类型的总和

    • 布尔值: boolean true和false

    • 未定义: undefined 当变量只声明不赋值时属于未定义

  • 获取变量类型的方法 typeof 变量;

运算符

  • 算数运算符: + - * / % , JS中的除法会根据结果自动转换整数或小数

    • Java: int x =5 ; int y = 2; x/y = 2;

    • JS : let x =5; let y = 2; x/y =2.5; x=6 x/y=3;

  • 关系运算符: > < >= <= != 和=

    • ==: 先统一两个变量的类型 再比较值

“666”==666 true

  • ===:先比较类型,类型相同后再比较值

“666”===666 false

  • 逻辑运算符: && || !

  • 赋值运算符: = += -= *= /= %= ++ –

  • 三目运算符: 条件?值1:值2

各种语句:

  • if else
  • for
  • while
  • do while
  • switch case

方法

  • java: public 返回值类型 方法名(参数列表){方法体}

  • JS: function 方法名(参数列表){方法体}

  • 常见的四种方法:

    • 无参无返回值

    • 有参无返回值

    • 无参有返回值

    • 有参有返回值

  • 三种声明方法的格式:

    • function 方法名(参数列表){方法体}

    • let 方法名 = function (参数列表){方法体}

    • let 方法名 = new Function(“参数1”,“参数2”,“方法体”);

和页面相关的方法

  1. 通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector(“选择器”)

  1. 获取和修改元素的文本内容

元素对象.innerText = “xxx”; 修改文本内容

元素对象.innerText 获取文本内容

  1. 获取和修改input控件的值

控件对象.value=“xxx”; 修改

控件对象.value 获取

NaN

  • Not a Number: 不是一个数

  • isNaN(x) 判断变量是否是NaN

JavaScript对象分类

  • 内置对象:包括string,number,boolean等

  • BOM: Browser Object Model, 浏览器对象模型, 包括和浏览器相关的内容

  • DOM: Document Object Model, 文档对象模型,包括和页面标签相关的内容

BOM浏览器对象模型

  • window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window.

  • window中常见的方法:

    • alert(“xxx”)弹出提示框

    • confirm(“xxx”) 弹出确认框

    • prompt(“xxx”) 弹出文本框

    • isNaN(x) 判断变量是否是NaN

    • parseInt()和parseFloat() 把字符串转成整数或小数

    • console.log() 控制台输出

    • let timer = setInterval(方法,时间间隔) 开启定时器

    • clearInterval(timer) 停止定时器

    • setTimeout(方法,时间间隔) 开启只执行一次的定时器

  • window对象中常见的属性

    • location位置

      • location.href 获取和修改浏览器的请求地址

      • location.reload() 刷新页面

    • history历史

      • history.length 获取历史页面数量

      • history.back() 返回上一页面

      • history.forward() 前往下一页面

      • history.go(n) n=1是前往下1页面 n=-1 返回上一页面 n=2 前往下2个页面 n=0代表刷新

day05

DOM文档对象模型

  • 包含和页面元素相关的内容
  1. 通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector(“选择器”)

  1. 获取和修改元素的文本内容

元素对象.innerText = “xxx”; 修改文本内容

元素对象.innerText 获取文本内容

  1. 获取和修改input控件的值

控件对象.value=“xxx”; 修改

控件对象.value 获取

  1. 创建元素对象

let 元素对象 = document.createElement(“标签名”);

  1. 添加元素对象到某个元素里面

document.body.appendChild(元素对象);

父元素.appendChild(元素对象);

父元素.append(元素对象,元素对象,元素对象);

前端MVC设计模式

  • MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分

  • Model: 模型, 指数据模型,这个数据一般来自于服务器

  • View: 视图, 指页面标签内容

  • Controller:控制器, 指将数据展示到视图中的过程代码

  • 前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作, 会影响执行效率.

M,V,VM设计模式

  • Model: 模型, 指数据模型,这个数据一般来自于服务器

  • View: 视图, 指页面标签内容

  • ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.

Vue

  • Vue框架是目前最流行的前端框架

  • Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.

  • 相关指令:

    • {{变量}}:插值, 让此处的文本内容和变量进行绑定

    • v-text=“变量”, 让元素的文本内容和变量进行绑定

    • v-html=“变量”, 让元素的html内容和变量进行绑定

    • v-bind:属性名=“变量”, 让元素的xxx属性和变量进行绑定 可以省略掉v-bind

    • v-model=“变量”, 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定.

    • v-on:事件名=“方法”, 事件绑定 简写@事件名=“方法” , 调用的方法必须声明在Vue里面的methods里面

day06

Vue指令(续)

  • v-for=“(变量,i) in 数组”; 遍历数组 同时重复生成当前标签,数量和数组中对象的数量一致

  • v-if=“变量” , 变量值为true时显示元素 ,为false时 删除元素

  • v-else 和v-if结合使用 取反

  • v-show=“变量” , 变量值为true时显示元素 ,为false时 隐藏元素(需要频繁切换显示状态时使用)

ElementUI

http://localhost:63342/2202CGB/Web/day06/eui/css/fonts/element-icons.woff

Idea中安装Vue插件

File->Settings->Plugins 搜索Vue
在这里插入图片描述

day07

在idea中安装elementUI代码提示插件

  • 先从老师工程中得到element.jar 文件,保存到磁盘中的某个位置(容易找到的位置)

  • File->Settings->Plugins 如下图 操作 找到element.jar文件 最后重启idea即可
    在这里插入图片描述

数据库笔记地址:

https://shimo.im/docs/NJkbEwl9LouJZ5qR/

青木编码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端开发学习笔记 - Day01
weixin_45571829的博客
06-17 1029
Day01学习笔记 1. 认识网页 网页是如何形成的？ 网页学名为HTML文件，主要由文字、图像和超链接构成，还可以包含音频、视频以及动画等。 所见的网页由：前端代码 → 浏览器内核渲染 → 用户页面 2. 常用浏览器内核 浏览器是网页显示、运行的平台，常用的五大浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera。 Windows 10的浏览器有两款，除了IE还有一个Microsoft Edge。 2.1 浏览器内核 英文名：Rendering Engine 浏览
Web前端开发学习笔记
qq_41622776的博客
02-02 1652
自学笔记，仅供参考
web前端学习笔记2
2301_80480494的博客
12-21 938
​ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;为什么需要清除浮动？父级没高度。子盒子浮动了。影响下面布局了，我们就应该清除浮动了。
web前端之HTML全部笔记（包含html5)
JLY19970726的博客
12-18 1497
-meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，用来避免乱码--> <meta charset="utf-8"> <!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title 中的内容来判断网页的主要内容-->--body是html的子元素，表示网页的主体，网页中所有可见的内容都应该写在body里--> <!/前面的audio用来指定文件的大的类型，比如音频<audio>还是视频<vedio>，/后面用来指定具体的细分的类型mp3音频或者MP4视频。
web前端基础知识
qq_43375584的博客
02-28 5842
HTML&CSS基础经典版 HTML：结构（页面元素和内容） css：表现（网页元素的外观和位置等页面样式） 行为：JavaScript：行为（网页模型定义与页面交互） 排版标签 排版标签标题标签：h系列标签 重要程度依次递减 特点：独占一行、h1-h6文字逐渐减小 段落标签：p 特点：段落之间存在间隙、独占一行 换行标签： 水平分割线： 文本格式化标签 场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等 语义：突出重要
Web前端基础.md
01-13
Web前端基础
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
web前端基础案例
09-30
介绍了web前端技术基础html+css+js的运用教程，通过一个小案例学习
web前端基础学习笔记
01-08
web前端基础知识学习笔记，内含有HTML、CSS、JavaScript的基础知识的总结，可以帮助大家学习
Web前端基础笔记1
08-08
标记：<form></form>表单的开始和结束6.2 表单项的分类 （1）input标记系列 文本框 ”text” /> 密码框 <i
《Web前端开发技术》笔记
tiantianzs的博客
11-27 5292
参考文献——《Web前端开发技术》 by 储久良 目录 第1章 Web前端开发技术综述 1.1 Web概述 1.1.1 Web的起源 1.1.2 Web的特点 1.1.3 Web工作原理 1.1.4 Web相关概念 1.3 Web前端开发技术 1.3.1 HTML(Hypertext Markkup Language) 1.3.2 CSS 1.3.3 JavaScript 1.3.4 HTML DOM 1.3.5 BOM 1.3.6 AJAX 1.3.7 jQuery 1.4
Web 中的“选区”和“光标”需求实现
嘿嘿
05-11 463
在 web 开发中，有时不可避免会和“选区”与“光标”打交道，比如选中高亮、选中出现工具栏、手动控制光标位置等。选区就是用鼠标选中的那一部分，通常是蓝色 光标呢，是那个闪烁的竖线吗？ 温馨提示：文章比较长，耐心看完可以完全自主的操作选区和光标 一、“选区”和“光标”是什么？ 先说结论：光标是一种特殊的选区。 想搞清楚这个，不得不提到两个重要的对象：Section[1]和Range[2]。这两个对象都有大量的属性和方法，详细可以查看官方文档，这里简单介绍一下： 1.Selectio..
Web自动化 - 选择操作元素 2
weixin_30260399的博客
04-06 234
文章转自 白月黑羽教Python 前面我们看到了根据 id、class属性、tag名 选择元素。 如果我们要选择的 元素 没有id、class 属性， 这时候我们通常可以通过 CSS selector 语法选择元素。 CSS Selector 语法选择元素 HTML中经常要 为 某些元素 指定显示风格，比如 前景文字颜色是红色， 背景颜色是黑色， 字体是微软雅黑等。 那么CS...
JAVA前端HTML页面设计
weixin_68138130的博客
07-10 1379
JAVA前端HTML页面设计
元素选择器(type selectors)
Lonelydesertea的博客
12-04 2363
■所有的div元素 ■或者叫”标签选择器” ■class值有one的元素 Class注意点 ■一个元素可以有很多个class值,每一个class之间空格隔开 ■class值如果由多个单词组成,单词之间可以用中划线,下划线_连接,也可以使用驼峰标识 ■最好不要用标签名作为class值 驼峰标识 小驼峰:第一个单词的首字母小写,后面遇到一个单词字母就大写 Html class小驼峰 Js 函数名字 大驼峰:所有的单词...
元素选择器 （+， ~）
weixin_30699831的博客
01-24 842
元素选择器中w3cschool中有些翻译不太准确 比如 +：其实是与element1元素同级，位于element1元素之后的第一个element2元素 ~：其实是与element1元素同级，位于element1元素之后的所有element2元素 1. 资料 1 <!DOCTYPE html> 2 <html ...
Web前端笔记部分
qq_69355613的博客
08-26 510
html5笔记汇总。纯小白也能看懂，跟着做，一步一步来就可以
Web前端基础知识
学习笔记
07-09 9232
1. 前端基础知识 文件分类 文件类型 中文 备注 SGML 标准通用标记语言 HTML和XML的前身 HTML 超本文标记语言 B/S(浏览器/服务器) XML 扩展标记语言 加载数据/配置信息 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区...
CSS3---子元素选择器
We_jia的博客
12-09 8969
子元素选择器的作用 在之前的选择器中当我们遇到一个元素下有多个子元素时（针对list列表元素），我们在进行css控制时都是在每个子元素定义class，通过class来控制对应的子元素，这样做会很麻烦，子元素选择器也可以不用定义class也能控制子元素的作用。 一、常见的子元素选择器 ：first-child                     父元素的首个子元素 ：last-chil...
web前端基础练习题
最新发布
02-28
以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青木编码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值