目录
1.第一个前端程序
2.前端工具的选择与安装
3.VSCode开发者工具快捷键
4.HTML5简介与基础骨架
4.1 HTML5的DOCTYPE声明
4.2 HTML5基本骨架
4.2.1 html标签
4.2.2 head标签
4.2.3 body标签
4.2.4 title标签
4.2.5 meta标签
5.标签之标题
6.标签之段落、换行、水平线
7.标签之图片
8.图片路径详解
8.1 绝对路径
8.2 相对路径
8.2.1 子级`/`
8.2.2 父级`../`
8.2.3 同级`./`
8.3 网络路径
9.标签之超文本链接
9.1 超链接描述
9.2 超链接属性
9.3 超链接表现
10.标签之文本
11. 列表标签之有序列表
11.1 有序列表
11.2 type属性
11.3 有序列表嵌套
12.列表标签之无序列表
12.1 无序列表实现
12.2 type属性
12.3 无序列表嵌套
12.4 常见应用场景
12.5 快捷键
13.标签之表格
13.1 表格展示效果
13.2 快捷键
13.3 表格属性
14.表格单元格合并
15.Form表单
16.表单元素
16.1 文本框
16.2 密码框
16.3 提交按钮
17.块元素与行内元素(内联元素)
18.HTML5新增标签
1.第一个前端程序
用记事本创建文件名为Welcome.html
< html>
< head>
< title>
我的第一个网页
title>
head>
< body>
欢迎来到网页制作
body>
html>
2.前端工具的选择与安装
浏览器选择:谷歌浏览器(有开发者调试工具) 鼠标右键,选择检查,进入开发者调试工具
开发者工具:VSCode 安装中文,扩展,收索chinese,安装
3.VSCode开发者工具快捷键
生成浏览器文件.html
的快捷方式
! + 回车(注意是英文的叹号)
VSCode常用快捷键列表
1.代码格式化:shift + alt + f
2.向上或向下移动一行:alt+up或alt+down
3.快速复制一行代码:shift+alt+up或shift+alt+down
4.快速保存:ctrl+s
5.快速查找:ctrl+f
6.快速替换:ctrl+h
4.HTML5简介与基础骨架
4.1 HTML5的DOCTYPE声明
避免浏览器怪异模式,防止不同浏览器渲染出不同效果来。
1. DOCTYPE html >
4.2 HTML5基本骨架
4.2.1 html标签
其他元素要包裹在它里面,限定了文档的开始点和结束点
1. DOCTYPE html >
2. < html>
3. html>
4.2.2 head标签
head标签用于定义文档的头部,描述了文档的各种属性和信息,包括文档的标题、在Web中的文职以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
1. DOCTYPE html >
2. < html>
3. < head>
4. head>
5. < html>
4.2.3 body标签
body元素定义文档的主体。 body元素包含文档中的所有内容(比如文本、超链接、图像、表格和列表等等) 它会直接在页面中显示出来,也就是用户可以直观看到的内容
1. DOCTYPE html >
2. < html>
3. < head>
4. head>
5. < body>
6. 我会显示在浏览器中
7. body>
8. html>
4.2.4 title标签
可定义文档的标题
它显示在浏览器窗口的标题栏或状态栏上
标签是
标签中唯一必须要求包含的东西,就是说写head一定要写title
的增加有利于SEO优化(收索引擎优化)
DOCTYPE html >
< html>
< head>
< title> 我的网页 title>
head>
< body>
欢迎光临
body>
html>
4.2.5 meta标签
meta是一个单标签。meta标签用来描述一个HTML网页文档的属性,关键词等,例如:charset="utf-8"
是说当前使用的是utf-8
编码格式,在开发中我们经常会看到utf-8
,或是gbk
,这些都是编码格式,通常使用utf-8
DOCTYPE html >
< html>
< head>
< title> 我的网页 title>
< meta charset = " UTF-8" >
head>
< body>
欢迎光临
body>
html>
5.标签之标题
总共有六级
< h1> 一级标题 h1>
< h2> 二级标题 h2>
< h3> 三级标题 h3>
< h4> 四级标题 h4>
< h5> 五级标题 h5>
< h6> 六级标题 h6>
5.1 快捷键
生成h1-h6
的快捷键h$*6
快速打开浏览器安装插件 拓展,搜索open in browser,点击安装 正确使用标签可以提高seo
5.1 标题标签位置摆放
在标签中添加属性:align=left|center|right
6.标签之段落、换行、水平线
6.1 标签之段落
段落是通过
标签定义的 建议文本写在标签内,标签内可以修改其字体大小等,标签外无法控制
6.2换行
或
单标签
6.3 水平线
标签在html页面中创建水平线 属性:color,width,size,align
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< p>
我是一个段< br> 落标签
p>
< hr color = " red" width = " 300px" size = " 20px" align = " left" >
body>
html>
7.标签之图片
网站中最多的元素就是图片
标签定义html页面中的图像,它是单标签 属性:
1 src:路径(图片地址与名字) 2 alt:规定图像的替代文本(当图片无法正常显示的时候,显示的文字) 3.width:图像的宽度 4. height:图像的高度 5. title:鼠标悬停在图片上给予提示
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< img src = " 1.webp" alt = " 美丽的小姐姐" width = " 300px" title = " 小姐姐" >
body>
html>
8.图片路径详解
8.1 绝对路径
从盘符开始
8.2 相对路径
8.2.1 子级/
8.2.2 父级../
8.2.3 同级./
8.3 网络路径
具体的网络地址
9.标签之超文本链接
9.1 超链接描述
html使用标签
来设置超文本链接 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,点击这些内容来跳转到新的文档或者当前文档中的某个部分。
9.2 超链接属性
在标签
中使用了href
属性来描述链接的地址 链接文本
默认情况下,链接未点是蓝色带下划线,点击后是紫色带下划线,点击时红色带下划线。后期可用css样式修改这些效果
9.3 超链接表现
鼠标移动到超链接上会变成小手
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< a href = " https://www.baidu.com" > 百度一下 a>
< a href = " https://www.baidu.com" >
< img src = " 1.webp" width = " 300px" >
a>
body>
html>
10.标签之文本
10.1 常用文本标签
标签
描述
定义着重文字
定义粗体文本
定义斜体字
定义家中语气
定义删除字
元素没有特定的含义(为了日后添加css样式方便)
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< p> 白菜 p>
< p> 我喜欢吃< em> em白菜 em> p>
< i> i白菜 i>
< b> b白菜 b>
< strong> strong白菜 strong>
< span> span白菜 span>
< del> del白菜 del>
body>
html>
11. 列表标签之有序列表
11.1 有序列表
有序列表是一列项目,列表项目使用数字进行标记。有序列表始于
标签。每个列表项始于
标签
11.2 type属性
的属性type拥有的选项
1 表示列表项目用数字标号(1,2,3…)
a 表示列表项目用小写字母标号 (a,b,c…)
A 表示列表项目用大写字母标号(A,B,C…)
i 表示列表项目用小写罗马数字标号(i,ii,iii…)
I 表示列表项目用大写罗马数字标号(I, II, III…)
11.3 有序列表嵌套
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< ol type = " a" >
< li> 苹果 li>
< li> 橘子 li>
< li> 香蕉 li>
< li> 火龙果 li>
ol>
< ol type = " A" >
< li> 苹果 li>
< li> 橘子 li>
< li> 香蕉 li>
< li> 火龙果 li>
ol>
< ol type = " 1" >
< li> 苹果 li>
< li> 橘子 li>
< li> 香蕉 li>
< li> 火龙果 li>
ol>
< ol type = " i" >
< li> 苹果 li>
< li> 橘子 li>
< li> 香蕉 li>
< li> 火龙果 li>
ol>
< ol type = " I" >
< li> 苹果 li>
< li> 橘子 li>
< li> 香蕉 li>
< li> 火龙果 li>
ol>
< ol>
< li> 水果 li>
< li>
蔬菜
< ol>
< li> 白菜 li>
< li> 油菜 li>
< li> 辣椒 li>
< li> 黄瓜 li>
ol>
li>
< li> 肉类 li>
ol>
body>
html>
12.列表标签之无序列表
12.1 无序列表实现
无序列表是一个项目的列表,此列项目使用粗体原点(典型的小黑圆圈)进行标记 无序列表始于
标签。每个列表项始于
标签。
12.2 type属性
的属性type拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
12.3 无序列表嵌套
12.4 常见应用场景
12.5 快捷键
快速生成ul+li的布局:ul>li*3
(数字根据自己的需要的li数量修改)
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< ul type = " disc" >
< li> 香蕉 li>
< li> 苹果 li>
ul>
< ul type = " circle" >
< li> 香蕉 li>
< li> 苹果 li>
ul>
< ul type = " square" >
< li> 香蕉 li>
< li> 苹果 li>
ul>
< ul type = " none" >
< li> 香蕉 li>
< li> 苹果 li>
ul>
< ul>
< li> 蔬菜 li>
< li>
水果
< ul>
< li> 苹果 li>
< li> 香蕉 li>
< li> 橘子 li>
ul>
li>
< li> 肉类 li>
ul>
< ul>
< li> li>
< li> li>
< li> li>
< li> li>
< li> li>
ul>
body>
html>
13.标签之表格
13.1 表格展示效果
表格: 行: 单元格(列):
13.2 快捷键
快速生成表格结构:table>tr*4>td*5{单元格}
13.3 表格属性
border:设置表格的边框
width:设置表格的宽度
height:设置表格的高度
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< table border = " 1" width = " 400px" height = " 200px" >
< tr>
< td> 单元格 td>
< td> 单元格 td>
< td> 单元格 td>
tr>
< tr>
< td> 单元格 td>
< td> 单元格 td>
< td> 单元格 td>
tr>
< tr>
< td> 单元格 td>
< td> 单元格 td>
< td> 单元格 td>
tr>
table>
< table>
< tr>
< td> 单元格 td>
< td> 单元格 td>
< td> 单元格 td>
tr>
< tr>
< td> 单元格 td>
< td> 单元格 td>
< td> 单元格 td>
tr>
< tr>
< td> 单元格 td>
< td> 单元格 td>
< td> 单元格 td>
tr>
< tr>
< td> 单元格 td>
< td> 单元格 td>
< td> 单元格 td>
tr>
table>
body>
html>
14.表格单元格合并
单元格合并属性
水平合并:colspan
垂直合并: rowspan
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< p> 合并单元格6和7:colspan p>
< p> 合并单元格15和20:rowspan p>
< p> 水平合并:保留左边,删除右边 p>
< p> 垂直合并:保留上边,删除下边 p>
< table border = " 1" width = " 600px" height = " 400px" >
< tr>
< td> 单元格1 td>
< td> 单元格2 td>
< td> 单元格3 td>
< td> 单元格4 td>
< td> 单元格5 td>
tr>
< tr>
< td colspan = " 2" > 单元格6单元格7 td>
< td> 单元格8 td>
< td> 单元格9 td>
< td> 单元格10 td>
tr>
< tr>
< td> 单元格11 td>
< td> 单元格12 td>
< td rowspan = " 3" > 单元格13、18、23 td>
< td> 单元格14 td>
< td rowspan = " 2" > 单元格15、20 td>
tr>
< tr>
< td colspan = " 2" rowspan = " 2" > 单元格16、17、21、22 td>
< td> 单元格19 td>
tr>
< tr>
< td> 单元格24 td>
< td> 单元格25 td>
tr>
table>
body>
html>
15.Form表单
作用:让网站具有交互性 表单在Web网页中用来给用户填写信息,从而能采用户信息,使网页具有交互的功能。 所有的用户输入内容的地方都用表单来写,如登录注册、搜索框
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等,这些输入框,按钮叫控件,表单就是容器,它能够容纳各种各样的控件
< form action = " url" method = " get|post" name = " myform" > form>
属性说明 action服务器地址 name表单名称 method中Get和Post的区别
数据提交方式,get把提交的数据url可以看到,post看不到
get一般用于提交少量数据,post用来提交大量数据
15.1 表单元素(可理解为表单控件)
一个完整的表单包含三个基本组成部分:表单标签()、表单域(输入框)、表单按钮(button按钮) 1.表单标签 2.表单域 3.表单按钮
< form>
< input type = " text" >
< input type = " submit" >
form>
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< form action = " url" method = " get|post" name = " myform" > form>
< form>
< input>
< input type = " submit" >
< button> 按钮 button>
form>
< form>
< input type = " text" >
< input type = " submit" >
form>
body>
html>
16.表单元素
16.1 文本框
文本域通过
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域
< form>
First name:< input type = " text" name = " firstname" >
< br>
Last name:< input type = " test" name = " lastname" >
form>
16.2 密码框
密码字段通过标签
来定义
< form>
Password:< input type = " password" name = " pwd" >
form>
16.3 提交按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
< form name = " input" action = " url" method = " get" >
Username:< input type = " text" name = " user" >
< input type = " submit" value = " Submit" >
form>
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< form>
< input type = " text" >
< input type = " submit" >
form>
< form>
用户名:< input type = " text" >
< br>
密码:< input type = " password" >
< br>
< input type = " submit" value = " 登入" >
form>
body>
html>
17.块元素与行内元素(内联元素)
html5之前元素分为块级元素和内联元素; html5之后按内容模型来区分,分为元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。元素不属于任何一个类别,被称为穿透的,元素可能属于不止一个类别,称为混合的。
内联元素和块级元素的区别
块级元素
内联元素
块元素会在页面中独占一行(自上向下垂直排列)
行内元素不会独占页面中的一行,只占自身的大小
可以设置width,height属性
行内元素设置width,height属性无效
一般块级元素可以包含行内元素和其他块级元素
一般内联元素包含内联元素不包含块级元素
常见块级元素
div、form、h1~h6、hr、p、table、ul等
常见内联元素(行内元素)
a、b、em、i、span、strong等
行内块级元素(特点:不换行、能够识别宽高)
button、img、input等
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< h1> 标签 h1>
< p> 段落 p>
< ul>
< li> 列表1 li>
< li> 列表2 li>
ul>
< a href = " #" > 超链接 a>
< span> 内容 span>
< em width = " 400px" > 注重语气 em>
< img width = " 300px" src = " 2.webp" alt = " " >
< img src = " 2.webp" alt = " " >
body>
html>
18.HTML5新增标签
目的:新增布局标签利于SEO
18.1 拓展知识
div
容器元素,也是页面中见到的最多的元素。本身没有任何样式效果。
18.2 H5新标签
头部
导航
定义文档中的节,比如章节、页眉、页脚
侧边栏
脚部
代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等。
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Document title>
head>
< body>
< h3> 标签 h3>
< a href = " #" > 超链接 a>
< strong> 文本 strong>
< p> 段落 p>
< ul>
< li> 列表 li>
ul>
< table>
< tr>
< td> 单元格 td>
tr>
table>
< div>
< ul>
< li> 导航1 li>
< li> 导航2 li>
< li> 导航3 li>
ul>
div>
< div>
< img src = " " alt = " " >
div>
< div>
< img src = " " alt = " " >
< p> p>
div>
< div id = " header" > div>
< div id = " nav" > div>
< div id = " article" >
< div id = " section" > div>
div>
< div id = " silder" > div>
< div id = " footer" > div>
< header> header>
< nav> nav>
< article>
< section> section>
article>
< aside> aside>
< footer> footer>
body>
html>
你可能感兴趣的:(web前端开发基础,前端,html5,css3)
第28节课:前端项目实战—从需求分析到开发流程的全方位指南
学问小小谢
HTML学习笔记 前端 需求分析 安全 web安全 网络 性能优化 html5
目录项目需求分析与设计项目背景与目标项目背景项目目标需求收集与分析用户需求业务需求项目设计技术栈选择系统架构设计数据库设计项目开发流程环境搭建安装Node.js和npm初始化项目编码实践组件化开发状态管理测试与调试单元测试集成测试部署与维护部署维护结语在前端开发领域,将理论知识应用于实际项目是提升技能的关键。本节课将通过一个完整的前端项目实战案例,详细介绍项目需求分析与设计,以及项目开发流程,帮助
前端——JS
逆风局?
前端 javascript 开发语言
目录什么是JS?JS引入方式JS基础语法输出语句变量常量数据类型函数自定义对象什么是JS?JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言,是用来控制网页行为的,实现人机交互效果。JavaScript和Java是完全不同的语言,不论是概念还是设计。但是基础语法类似。组成:ECMAScript:规定了JS基础语法核心知识,包括变量、数据类型、流程控制、函数、对象等。BOM:浏览器对
基于Python的图书馆借阅记录管理系统设计与实现
IT实战课堂@白老师
Python项目 python 开发语言 毕设指导推荐 毕设选题推荐 智能家居 爬虫
基于Python的图书馆借阅记录管理系统设计与实现|计算机毕业设计|毕设选题|选题推荐|答辩指导|课程设计|毕设答疑l论文降重该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利!技术路线:软件开发环境及开发工具:开发语言:python使用框架:Django前端技术:JavaScript、VUE.js(2.
HarmonyOS 开发实践——常见预置应用的跳转方式
六号嘉宾
HarmonyOS 移动开发 鸿蒙开发 harmonyos 鸿蒙开发 ArkUI 前端 移动开发 界面布局 组件化
往期学习笔录:鸿蒙(HarmonyOS)北向开发知识点记录~鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~对于大前端开发来说,转鸿蒙开发究竟是福还是祸?鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中……场景描述三方应用实际使用过程中,可能需要跳转到
AI智慧社区--百度地图
Y在努力学编程
项目 vue spring boot java 百度地图
数据库:前端实现页面代码import{getCommunityMap}from'@/api/sys/community'exportdefault{name:'Map',data(){return{listQuery:{gradeId:''},center:{lng:116.3755,lat:39.80896},zoom:12,mapData:[]}},mounted(){},methods:{i
大学生HTML期末大作业——HTML+CSS+JavaScript美食网站(西餐)
无·糖
Web前端期末大作业 html 课程设计 css 大学生 javascript 美食 大作业
HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️如何学习进步七、☠️更多干货文章目录一、网站题目美食网站(西餐)精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单
大学生期末大作业|HTML+CSS+JavaScript 登录页面实例:超实用、新手友好、完整源码分享 从零开始:用原生 HTML、CSS 和 JS 打造简洁美观的登录页面(附完整代码) 新手必看:一
南北极之间
前端进阶练手实战 html css 大学生期末大作业 前端 html5 javascript
效果图:目录一、新建一个HTML项目二、创建基本结构三、使用CSS美化页面四、添加交互功能五、完整代码六、结语步骤在Web开发中,登录页面是常见且重要的组件。一个设计良好的登录页面可以提升用户体验,并为网站留下良好的第一印象。今天,我们将一起学习如何使用HTML、CSS和JavaScript(不使用任何框架)来构建一个响应式的登录页面,实现基本的前端验证功能。一、新建一个HTML项目首先,创建一个
HTML5 技术深度解读:本地存储与地理定位的最佳实践
吴师兄大模型
html5 前端 html 本地存储 地理定位 localStorage Geolocation API
系列文章目录01-从零开始学HTML:构建网页的基本框架与技巧02-HTML常见文本标签解析:从基础到进阶的全面指南03-HTML从入门到精通:链接与图像标签全解析04-HTML列表标签全解析:无序与有序列表的深度应用05-HTML表格标签全面解析:从基础到高级优化技巧06-HTML表单深度解析:GET和POST提交方法07-HTML表单控件类型大全:文本框、密码框、文件上传全掌握08-前端表单验
HTML5 Canvas 与 SVG:让网页图形与动画活跃起来
吴师兄大模型
html5 前端 html Canvas SVG 网页图形与动画 HTML5
系列文章目录01-从零开始学HTML:构建网页的基本框架与技巧02-HTML常见文本标签解析:从基础到进阶的全面指南03-HTML从入门到精通:链接与图像标签全解析04-HTML列表标签全解析:无序与有序列表的深度应用05-HTML表格标签全面解析:从基础到高级优化技巧06-HTML表单深度解析:GET和POST提交方法07-HTML表单控件类型大全:文本框、密码框、文件上传全掌握08-前端表单验
前端表单验证终极指南:HTML5 内置验证 + JavaScript 自定义校验
吴师兄大模型
前端 html5 javascript html 表单验证 内置验证 自定义校验
系列文章目录01-从零开始学HTML:构建网页的基本框架与技巧02-HTML常见文本标签解析:从基础到进阶的全面指南03-HTML从入门到精通:链接与图像标签全解析04-HTML列表标签全解析:无序与有序列表的深度应用05-HTML表格标签全面解析:从基础到高级优化技巧06-HTML表单深度解析:GET和POST提交方法07-HTML表单控件类型大全:文本框、密码框、文件上传全掌握08-前端表单验
python dashboard django_Django + MySQL Dashboard 网页端数据库可视化
weixin_39639600
python dashboard django
1.OverviewPython+MySQL+Django,有些数据托管在MySQL的数据库,然后我们希望进行可视化,通过web的方式对数据库的信息去进行展示/检索/维护/..这个项目中,我们的数据托管在MySQL的数据库中,然后在Django中配置数据库信息,连接到数据库,在前端用Django-table2进行渲染;最终我们可以在web端看到如下所示效果,可以进行展示所有的数据,然后进行检索和过
Vue:前端体系、前后端分离
天宇阿
Vue 前端 vue.js
文章目录一、前端核心分析1、概述2、前端知识体系2.1、前端三要素2.2、结构层(HTML)2.3、表现层(CSS)2.4、行为层(JavaScript)2.5、三端统一2.6、后端技术2.7、主流前端框架3、了解前后分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MV*时代3.4、NodeJS带来的全栈时代3.5、总结学习视频来自于:秦疆(遇见狂神说
【转】Vue.js:轻量高效的前端组件化方案
diantihui2890
前端 javascript webpack ViewUI
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。Vue.js是我在2014年2月开源的一个前端开发库,通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在Gi
Vue 组件开发:构建高效可复用的前端界面要素
随风九天
Vue六脉神剑 前端 前端 vue.js Vue 组件
1引言在现代Web开发中,构建高效且可复用的前端界面要素是提升开发效率和用户体验的关键。Vue.js作为一种轻量级且功能强大的前端框架,提供了丰富的工具和机制,帮助开发者快速构建高质量的应用程序。通过合理设计和封装Vue组件,我们可以实现组件的高效复用,提高开发效率,同时保证界面的一致性和可维护性。2理解Vue组件2.1组件的基本概念Vue组件是Vue实例的一个扩展。每个组件都有自己的模板、数据、
【自学笔记】Web前端的重点知识点-持续更新
Long_poem
笔记 前端
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录Web前端知识点一、HTML基础二、CSS样式三、JavaScript基础四、前端框架与库五、前端工具与构建六、前端性能优化七、响应式设计与适配八、前端安全总结Web前端知识点一、HTML基础常用标签超链接(标签)图片(标签)表格(、、等标签)列表(无序列表、有序列表、定义列表)HTML5新特性语义化标签(、、等)音频视频(、
React 和 Vue _使用区别
m0_74823490
vue.js react.js javascript
目录一、框架介绍1.Vue2.React?二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架,前端程序员应该将两种框架都掌握,本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求
题解 | #求小球落地5次后所经历的路程和第5次反弹的高度#
2301_78234743
java
无锡国企事业单位信息收集加比较找工作必看!互联网还是军工研究所,该如何选择?十三战腾讯京东校招两年,因言获罪被逼主动离职京东校招两年,因言获罪被逼主动离职携程/前端/秋招提前批/一二HR面面经(已意向书)测试开发工程师招聘58同城测试实习一面写在最后富途产品一面面经蚂蚁暑期实习推荐算法岗面经(已挂)快手推荐算法一面【找暑期实习ing】海信英语口语ai面试题目1(3分钟,单次录制3分钟内):跟读一段
前端必知必会-Vue 指令
编程岁月
前端必知必会 vue.js 前端 javascript
文章目录Vue指令不同的Vue指令总结Vue指令Vue指令是带有v-的特殊HTML属性,可以为HTML标记提供额外的功能。Vue指令连接到Vue实例以创建动态和响应式用户界面。使用Vue,与传统的JavaScript方法相比,创建响应式页面要轻松精简,而且所需的代码很少。不同的Vue指令指令详细信息v-bind将HTML标记中的属性连接到Vue实例内的数据变量。v-if根据条件创建HTML标记。指
代码审计学习路线
白帽子技术分享
python 网络安全 代码审计
学习代码审计分以下四部分一.编程语言1.前端语言html/javascript/dom元素使用,主要是为了挖掘xss漏洞,jquery主要写一些涉及到CSRF脚本使用的或者DOM型XSS,JSON劫持等2.后端语言基础语法要知道,例如变量类型,常量,数组(python是列表,元组,字典),对象,类的调用,引用等,MVC设计模式要清楚,因为大部分目标程序都是基于MVC写的,包括不限于php,pyth
七种实现左侧固定,右侧自适应两栏布局的方法
css
总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。关于最终的效果,可以查看这里常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS中的新
前端——vue代码结构
Alisazxy
前端
默认代码结构README.md---项目说明文件package.json---定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。package-lock.json---会自动为npm修改node_modules树或任何操作而生成package.jsonLICENSE---开源协议index.html---项目默认首页模板.postcssrc.js---是对pos
jQuery和CSS3响应式网站导航幻灯片插件
�时过境迁,物是人非
jquery css3 前端
这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件。该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息。在线演示下载该幻灯片插件是响应式的,幻灯片中可以嵌入图片背景、视频及文本信息。为了提高与用户的互动,幻灯片中将前后导航按钮替换为导航按钮。按钮和导航箭头的区别是:每个按钮是一个标题,它会提示用户该页幻灯片所对应的网
Webpack 模块加载、动态引入机制源码解读
AIGC小陈
正则表达式 javascript 开发语言 react.js 前端
今天的文章简单探讨一下Vue和React的不同。本人Vue2和React都用过,但不熟悉Vue3,没用它做过项目。其实我对这两大框架也没有认真钻研过它们的细节,也就是工作上用它们写一些简单业务,或偶尔看看相关的博客文章,但还是有一些浅显的认识的,写下来记录一下。Vue和React都是用于构建UI界面的流行框架。它们的哲学也有很多相似的地方,我们可以认为这些特性是流行前端框架的一个趋势。它们是:组件
探索前端可观察性:如何使用Telemetry提高用户体验
桂月二二
前端 ux
随着前端应用变得日益复杂,可观察性(Observability)在前端开发中的重要性正逐步显现。通过实现Telemetry(遥测)功能,开发者能够收集、分析应用的运行数据,从而更好地了解用户行为、定位问题,并持续优化用户体验。什么是Telemetry?**Telemetry(遥测)**是指通过自动化手段远程采集系统或应用运行时的状态数据和行为信息。这些数据通常包括性能指标、错误日志、用户交互事件等
npm启动前端项目时报错(vue) error:0308010C:digital envelope routines::unsupported
华如锦
开发 本地环境配置 js java 前端 npm vue.js node.js java
vue启动项目时,npmrunserve报下面的错:error:0308010C:digitalenveloperoutines::unsupportedatnewHash(node:internal/crypto/hash:67:19)atObject.createHash(node:crypto:133:10)atFSReqCallback.readFileAfterClose[asoncom
智能汽车嵌入式软件开发基础篇-嵌入式C语言基础2
每日超级储能
汽车 c语言 开发语言
1、引入函数的原因编程中常遇到完成某个功能的程序段出现多次;大家均要用到的功能。为了减少不必要的重复编程使程序质量提高。在计算机高级语言中,引入函数(或子程序、过程)2、函数的分类C程序是由一个主函数和其它若干函数构成,每个函数实现一定的功能,其中主函数main()是必需的,其它函数被主函数调用或者其它函数之间相互调用。C语言的函数可以分为三类:主函数main()、库函数(如printf()、sc
JavaScript-黑马程序员-前端零基础
羊羊的代码笔记本
javascript 前端 html
目录1.初识JavaScript1.1浏览器执行js1.2js的组成1.3js三种书写方式1.4JavaScript输入输出语句2.变量2.1变量是一个装东西的容器2.2变量是使用2.3更新变量2.4声明多个变量1.初识JavaScript是一种高级编程语言1.1浏览器执行js浏览器分成两部分:渲染引擎和js引擎渲染引擎:用来解析HTML和CSS,俗称内核js引擎:也称为js解释器。用来读取网页中
HTML5+SVG+CSS3 雪中点亮的圣诞树
坏男孩!
css3 html5 css
HTML5+SVG+CSS3雪中点亮的圣诞树源码下载地址:HTML5+SVG+CSS3雪中点亮的圣诞树css3:body{background:-webkit-linear-gradient(top,#235,#22240%,#fff50%,#fff);background:linear-gradient(tobottom,#235,#22240%,#fff50%,#fff);overflow:h
.net core + vue 搭建前后端分离的框架
战族狼魂
C# .netcore
目录步骤一:创建.NETCore后端项目步骤二:创建Vue.js前端项目步骤三:集成后端和前端项目步骤一:创建.NETCore后端项目安装.NETCoreSDK:确保你的开发环境中已安装了最新版本的.NETCoreSDK。你可以从.NET下载页面获取最新版本。创建.NETCoreWebAPI项目:在命令行或者通过VisualStudio等集成开发环境,创建一个新的.NETCoreWebAPI项目。
前后端交互的方式能分为几种
阿贾克斯的黎明
java java
前后端交互主要可以分为以下几类:**一、HTTP请求交互**1.GET请求:用于从服务器获取资源,通常将参数放在URL中进行传递。特点是简单、快速,但不太适合传递大量数据或敏感信息,因为参数会在URL中显示。GET请求:用于获取商品列表、商品详情、用户订单状态等信息。例如,用户浏览商品页面时,前端通过GET请求从服务器获取商品的图片、价格、描述等数据进行展示。2.POST请求:用于向服务器提交数据
Maven
Array_06
eclipse jdk maven
Maven
Maven是基于项目对象模型(POM), 信息来管理项目的构建,报告和文档的软件项目管理工具。
Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性,所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法,许多 Apache Jakarta 项目发文时使用 Maven,而且公司
ibatis的queyrForList和queryForMap区别
bijian1013
java ibatis
一.说明
iBatis的返回值参数类型也有种:resultMap与resultClass,这两种类型的选择可以用两句话说明之:
1.当结果集列名和类的属性名完全相对应的时候,则可直接用resultClass直接指定查询结果类
LeetCode[位运算] - #191 计算汉明权重
Cwind
java 位运算 LeetCode Algorithm 题解
原题链接:#191 Number of 1 Bits
要求:
写一个函数,以一个无符号整数为参数,返回其汉明权重。例如,‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。
汉明权重:指一个字符串中非零字符的个数;对于二进制串,即其中‘1’的个数。
难度:简单
分析:
将十进制参数转换为二进制,然后计算其中1的个数即可。
“
浅谈java类与对象
15700786134
java
java是一门面向对象的编程语言,类与对象是其最基本的概念。所谓对象,就是一个个具体的物体,一个人,一台电脑,都是对象。而类,就是对象的一种抽象,是多个对象具有的共性的一种集合,其中包含了属性与方法,就是属于该类的对象所具有的共性。当一个类创建了对象,这个对象就拥有了该类全部的属性,方法。相比于结构化的编程思路,面向对象更适用于人的思维
linux下双网卡同一个IP
被触发
linux
转自:
http://q2482696735.blog.163.com/blog/static/250606077201569029441/
由于需要一台机器有两个网卡,开始时设置在同一个网段的IP,发现数据总是从一个网卡发出,而另一个网卡上没有数据流动。网上找了下,发现相同的问题不少:
一、
关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树
安卓按主页键隐藏程序之后无法再次打开
肆无忌惮_
安卓
遇到一个奇怪的问题,当SplashActivity跳转到MainActivity之后,按主页键,再去打开程序,程序没法再打开(闪一下),结束任务再开也是这样,只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity
本来代码:
// 销毁这个Activity
fin
通过cookie保存并读取用户登录信息实例
知了ing
JavaScript html
通过cookie的getCookies()方法可获取所有cookie对象的集合;通过getName()方法可以获取指定的名称的cookie;通过getValue()方法获取到cookie对象的值。另外,将一个cookie对象发送到客户端,使用response对象的addCookie()方法。
下面通过cookie保存并读取用户登录信息的例子加深一下理解。
(1)创建index.jsp文件。在改
JAVA 对象池
矮蛋蛋
java ObjectPool
原文地址:
http://www.blogjava.net/baoyaer/articles/218460.html
Jakarta对象池
☆为什么使用对象池
恰当地使用对象池化技术,可以有效地减少对象生成和初始化时的消耗,提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化
ArrayList根据条件+for循环批量删除的方法
alleni123
java
场景如下:
ArrayList<Obj> list
Obj-> createTime, sid.
现在要根据obj的createTime来进行定期清理。(释放内存)
-------------------------
首先想到的方法就是
for(Obj o:list){
if(o.createTime-currentT>xxx){
阿里巴巴“耕地宝”大战各种宝
百合不是茶
平台战略
“耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”,“耕地宝”由阿里巴巴投入一亿 ,主要是用来进行农业方面,将农民手中的散地集中起来 不仅加大农民集体在土地上面的话语权,还增加了土地的流通与 利用率,提高了土地的产量,有利于大规模的产业化的高科技农业的 发展,阿里在农业上的探索将会引起新一轮的产业调整,但是集体化之后农民的个体的话语权 将更少,国家应出台相应的法律法规保护
Spring注入有继承关系的类(1)
bijian1013
java spring
一个类一个类的注入
1.AClass类
package com.bijian.spring.test2;
public class AClass {
String a;
String b;
public String getA() {
return a;
}
public void setA(Strin
30岁转型期你能否成为成功人士
bijian1013
成功
很多人由于年轻时走了弯路,到了30岁一事无成,这样的例子大有人在。但同样也有一些人,整个职业生涯都发展得很优秀,到了30岁已经成为职场的精英阶层。由于做猎头的原因,我们接触很多30岁左右的经理人,发现他们在职业发展道路上往往有很多致命的问题。在30岁之前,他们的职业生涯表现很优秀,但从30岁到40岁这一段,很多人
[Velocity三]基于Servlet+Velocity的web应用
bit1129
velocity
什么是VelocityViewServlet
使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中,以Servlet+Velocity的方式实现web应用
Servlet + Velocity的一般步骤
1.自定义Servlet,实现VelocityViewServl
【Kafka十二】关于Kafka是一个Commit Log Service
bit1129
service
Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解?
A message is considered "committed" when all in sync replicas for that partition have applied i
NGINX + LUA实现复杂的控制
ronin47
lua nginx 控制
安装lua_nginx_module 模块
lua_nginx_module 可以一步步的安装,也可以直接用淘宝的OpenResty
Centos和debian的安装就简单了。。
这里说下freebsd的安装:
fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz
tar zxvf lua-5.1.4.tar.gz
cd lua-5.1.4
ma
java-14.输入一个已经按升序排序过的数组和一个数字, 在数组中查找两个数,使得它们的和正好是输入的那个数字
bylijinnan
java
public class TwoElementEqualSum {
/**
* 第 14 题:
题目:输入一个已经按升序排序过的数组和一个数字,
在数组中查找两个数,使得它们的和正好是输入的那个数字。
要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字,输出任意一对即可。
例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于
Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder
bylijinnan
java netty
今天看Netty如何实现一个Http Server
org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory:
pipeline.addLast("decoder", new HttpRequestDecoder());
pipeline.addLast(&quo
java敏感词过虑-基于多叉树原理
cngolon
违禁词过虑 替换违禁词 敏感词过虑 多叉树
基于多叉树的敏感词、关键词过滤的工具包,用于java中的敏感词过滤
1、工具包自带敏感词词库,第一次调用时读入词库,故第一次调用时间可能较长,在类加载后普通pc机上html过滤5000字在80毫秒左右,纯文本35毫秒左右。
2、如需自定义词库,将jar包考入WEB-INF工程的lib目录,在WEB-INF/classes目录下建一个
utf-8的words.dict文本文件,
多线程知识
cuishikuan
多线程
T1,T2,T3三个线程工作顺序,按照T1,T2,T3依次进行
public class T1 implements Runnable{
@Override
 
spring整合activemq
dalan_123
java spring jms
整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分: a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接 b、真正产生到JMS服务器链接的ConnectionFactory还得
MySQL时间字段究竟使用INT还是DateTime?
dcj3sjt126com
mysql
环境:Windows XPPHP Version 5.2.9MySQL Server 5.1
第一步、创建一个表date_test(非定长、int时间)
CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`
Parcel: unable to marshal value
dcj3sjt126com
marshal
在两个activity直接传递List<xxInfo>时,出现Parcel: unable to marshal value异常。 在MainActivity页面(MainActivity页面向NextActivity页面传递一个List<xxInfo>): Intent intent = new Intent(this, Next
linux进程的查看上(ps)
eksliang
linux ps linux ps -l linux ps aux
ps:将某个时间点的进程运行情况选取下来
转载请出自出处:http://eksliang.iteye.com/admin/blogs/2119469
http://eksliang.iteye.com
ps 这个命令的man page 不是很好查阅,因为很多不同的Unix都使用这儿ps来查阅进程的状态,为了要符合不同版本的需求,所以这个
为什么第三方应用能早于System的app启动
gqdy365
System
Android应用的启动顺序网上有一大堆资料可以查阅了,这里就不细述了,这里不阐述ROM启动还有bootloader,软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来(包括wifi, power, rild, surfaceflinger, mediaserver等等)-> 启动Dalivk中的第一个进程Zygot
App Framework发送JSONP请求(3)
hw1287789687
jsonp 跨域请求 发送jsonp ajax请求 越狱请求
App Framework 中如何发送JSONP请求呢?
使用jsonp,详情请参考:http://json-p.org/
如何发送Ajax请求呢?
(1)登录
/***
* 会员登录
* @param username
* @param password
*/
var user_login=function(username,password){
// aler
发福利,整理了一份关于“资源汇总”的汇总
justjavac
资源
觉得有用的话,可以去github关注:https://github.com/justjavac/awesome-awesomeness-zh_CN 通用
free-programming-books-zh_CN 免费的计算机编程类中文书籍
精彩博客集合 hacke2/hacke2.github.io#2
ResumeSample 程序员简历
用 Java 技术创建 RESTful Web 服务
macroli
java 编程 Web REST
转载:http://www.ibm.com/developerworks/cn/web/wa-jaxrs/
JAX-RS (JSR-311) 【 Java API for RESTful Web Services 】是一种 Java™ API,可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位
CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项
超声波
oracle linux
前言:
这两天项目要上线了,由我负责往服务器部署整个项目,因此首先要往服务器安装oracle,服务器本身是CentOS6.5的64位系统,安装的数据库版本是11g,在整个的安装过程中碰到很多的坑,不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。
安装过程中可能遇到的问题(注
HttpClient 4.3 设置keeplive 和 timeout 的方法
supben
httpclient
ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() {
@Override
public long getKeepAliveDuration(HttpResponse response, HttpContext context) {
long keepAlive
Spring 4.2新特性-@Import注解的升级
wiselyman
spring 4
3.1 @Import
@Import注解在4.2之前只支持导入配置类
在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean
3.2 示例
演示java类
package com.wisely.spring4_2.imp;
public class DemoService {
public void doSomethin