页面组件
1 元素的尺寸/边框/背景
1.1 css尺寸相关属性
height 高度
min-height 最小高度
max-height 最大高度
width 宽度
min-width 最小宽度
max-width 最大宽度
1.2 css内边距
padding 内边距
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
1.3 边框
1.4 背景
background
background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置>
例:background:red url('./123.png') no-repeat 100px 10px;
background-color 设置背景色,或设置为transparent(透明)
background-image 背景图片 url 或者 none
background-repeat 背景重复 repeat | repeat-x | repeat-y | no-repeat
background-attachment 背景附件 scroll | fixed
background-position 背景位置
background-position: 水平方向 垂直方向
background-position:left top;
background-position:100px 100px;
left | center | right (横向)
top | center | bottom (纵向)
或者使用百分比或者数值
2 超链接和锚点
2.1 超链接
<a href='要跳转的地址'>超链接文字a>
a标签的属性
href -- 代表一个url链接源(就是链接到什么地方)
url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。
url还可以是指向HTML文件中的一个位置。
url还可以是Email地址。
target -- 用来指出哪个窗口或框架应该被此链接打开
target=_blank: 将链接内容在新的浏览窗口中打开。
target=_self: 将链接的内容,显示在目前的窗口中。
target=_parent:将链接的内容,当成文件的上一个画面。
target=_top:这个参数可以解决新内容被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容。
title -- 代表链接的附加提示信息
download HTML5新添加属性 表示下载
超链接范例
网站链接: <a href="http://www.oldboy.cn">Python专家a> 电子邮件链接: <a href="mailto:[email protected] ">写信给我a> 电话 <a href="tel:10086">10086a> 短信 <a href="sms:10086">发短息给我a>
路径
文档相对路径(例如 adver/contents.html)
绝对路径(例如 http://www.sohu.com/index.html)
站点根目录相对路径(例如 /support/app/customer.html,其中“/”表示根目录)
鼠标光标设置 (CSS属性)
2.2 锚点
用定义,例如: 第一部分 ,
使用跳转到第一部分 超链接就可以定位到网页中的“第一部分”这个位置。
锚点的跳转
使用# 跳转
跳转到指定页面指定锚点 http://www.lampuser.com/index.html#section2
2.3 URL
URL(Uniform Resoure Locator),统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的组成
http://www.fuming.com/product/news/add?name=xiaolili&age=10#section1
protocol 协议,常用的协议是http
hostname 主机地址,可以是域名,也可以是IP地址
port 端口 http协议默认端口是:80端口,如果不写默认就是:80端口
path 路径 网络资源在服务器中的指定路径
query 查询字符串 如果需要从服务器那里查询内容,在这里编辑
hash 锚点部分,指向页面中的某个位置
3 图片
3.1 img 标签
<img src="图片地址" title="" alt="">
属性
alt -- 代表图像的替代文字
src -- 代表一个图像源(就是图像的位置)
title 提示信息
border – 代表图片边框的宽度
height -- 代表一个图像的高度
width -- 代表一个图像的宽度
usemap 将图像定义为客户器端图像映射。
常见图片格式
GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.
3.2 图像映射
<img src="planets.gif" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area href="sun.htm" shape="rect" coords="0,0,110,260">Suna> <area href="mercur.htm" shape="circle" coords="129,161,10">Mercurya> <area href="venus.htm" shape="circle" coords="180,139,14">Venusa> map>
map标签
标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
area标签
4 列表
4.1 HTML列表标签
代表HTML无序列表 ,里面每一列表项使用
标签定义
代表HTML有序列表 ,里面每一列表项使用
标签定义
属性
start 规定有序列表的起始值。
type 规定在列表中使用的标记类型。(1 a A i I)
reversed H5新添加 降序
代表HTML列表项目,每个列表项使用一对
标记
定义了定义列表(definition list)
标签定义了定义列表中的项目(即术语部分)
在定义列表中定义条目的定义部分。
4.2 CSS列表属性
list-style-type
disc 实心点
circle 圆圈
square 小方框
decimal 数字
lower-roman 小写罗马字
upper-roman 大写罗马字
lower-alpha 小写字母
upper-alpha 大写字母
list-style-position 位置
inside 标示在li里面
outside 标示在li外面
list-style-image 使用图片 url(./123.gif)
list-style 复合属性 list-style: type position image
list-style: none
5 表格
5.1 HTML列表标签
5.2 CSS列表属性
table-layout 表格布局方式
auto(默认) 布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢
fixed 平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切
border-collapse 表格的行和单元格的边是合并还是独立
separate (默认) 独立
collapse 合并
border-spacing 当表格边框独立时,行和单元格的边框在横向和纵向上的间距
caption-side caption 在table上面还是下面
top
bottom
empty-cells 没有内容的单元格隐藏还是显示
show (默认)
hide
5.3 合并单元格
给 或者 设置属性 rowspan 和 colspan
rowspan 合并行
colspan 合并列
6 表单
6.1 表单相关标签
定义一个 HTML 表单,用于用户输入。
属性
action
method
get
post
enctype
multipart/form-data(有文件表单时候,必须使用这个)
application/x-www-form-urlencoded
target
定义一个输入控件
属性
name 必须有,否则数据无法传递
type text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等
定义按钮
属性
type submit、reset、submit
name
定义选择列表(下拉列表)
属性
disabled 禁用
name 必须有
multiple 多选,默认会显示所有,名字要使用数组like[]
size 显示几个下拉
定义选择列表中的选项。
属性
value 提交的值,若没有,则提交内容
selected 定义选中项
disabled 选项禁用
把相关的选项组合在一起
属性
disabled 规定禁用该选项组。
label 为选项组规定描述。
属性
cols 可见宽度
rows 可见行数
readonly 文本区只读
name 必须有
disabled 禁用
定义 fieldset 元素的标题。
定义围绕表单中元素的边框
定义 fieldset 元素的标题。
6.2 表单组成控件
文本输入框
<input type="text" name="username"> <input type="text" name="username" placeholder="请输入用户名"> <input type="text" name="username" value="李大钊"> <input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
密码框
<input type="password" name="pwd"> <input type="password" name="pwd" placeholder="请输入密码"> <input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
单选按钮
<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">男
复选框
<input type="checkbox" name="hobby" value="basketball"> 篮球 <input type="checkbox" name="hobby" value="football"> 足球 <input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 <input type="checkbox" name="hobby" value="baseball"> 棒球
文件选择框
<input type="file" name="pic"> <input type="file" name="pics" multiple>
规定类型的文本输入框(HTML5新增)
范围选择框(HTML5新增)
<input type="range" name="range"> <input type="range" name="range" value="80"> <input type="range" name="range" value="80" max="100" min="0">
颜色选择框(HTML5新增)
<input type="color" name="color">
时间日期选择框(HTML5新增)
<input type="date" name="date"> <input type="month" name="month"> <input type="week" name="week"> <input type="time" name="time"> <input type="datetime" name="datetime"> <input type="datetime-local" name="datetime">
下拉选项
<select name="major">
<option value="computer">计算机option> <option value="archaeology">考古学option> <option value="medicine" selected>医学option> <option value="Architecture">建筑学option> <option value="Biology">生物学option> select>
多行文本输入
<textarea name="content">textarea> <textarea name="content" cols="30" rows="10">textarea>
按钮
6.3 表单中其他标签
field/legend
<form>
<fieldset>
<legend>health informationlegend> height: <input type="text" /> weight: <input type="text" /> fieldset> form>
datalist(新增)
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> datalist>
6.4 表单输入内容的智能验证(H5新增)
required 必填
给所有可输入的控件 添加 required属性,表示必填
指定类型验证
Input:email 、input:url、input:number 会自动验证类型
pattern 正则
<input type="text" pattern="\w{4,6}"> <input type="text" pattern="\d{4,6}" title="必须是4~6位数字">
6.5 表单控件相关属性
7 音频/视频 (HTML5新增)
7.1 HTML标签
定义视频
| 属性 | 值 | 描述
| -------- | ------------------ | ------------------------------------------------------
| autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。
| height | pixels | 设置视频播放器的高度。
| loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。
| muted | muted | 如果出现该属性,视频的音频输出为静音。
| poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。
| preload | auto metadata none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
| src | URL | 要播放的视频的 URL。
| width | pixels | 设置视频播放器的宽度。
定义音频
| 属性 | 值 | 描述
| -------- | ------------------ | ----------------------------------------------------------
| autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。
| controls | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。
| muted | muted | 如果出现该属性,则音频输出为静音。
| preload | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。
| src | URL* | 规定音频文件的 URL。
为媒体元素(比如
和
)定义媒体资源 | 属性 | 值 | 描述
| ----- | ------------- | ------------------------------------------
| media | media_query | 规定媒体资源的类型,供浏览器决定是否下载。
| src | URL | 规定媒体文件的 URL。
| type | MIME_type | 规定媒体资源的 MIME 类型。
7.2 视频
支持的视频类型
浏览器
MP4
WebM
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始
YES
YES
Safari
YES
NO
NO
Opera
YES 从 Opera 25 版本开始
YES
YES
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
视频格式的MIME类型
格式
MIME-type
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开
7.3 音频
支持的音频格式
浏览器
MP3
Wav
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
YES
YES
YES
Safari
YES
YES
NO
Opera
YES
YES
YES
音频格式MIME类型
格式
MIME-type
MP3
audio/mp3
Wav
audio/wav
Ogg
audio/ogg
转载于:https://www.cnblogs.com/wangcheng9418/p/9398123.html
你可能感兴趣的:(HTML5/CSS3 第二章页面组件)
element实现动态路由+面包屑
软件技术NINI
vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
下载github patch到本地
小米人er
我的博客 git patch
以下是几种从GitHub上下载以.patch结尾的补丁文件的方法:通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件,浏览器会显示文件的内容,在页面的右上角通常会有一个“Raw”按钮,点击它可以获取原始文件内容。然后在浏览器中使用快捷键(如Ctrl+S或者Command+S)将原始文件保存到本地,选择保存的文件名并确保后缀为.p
DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
利用LangChain的StackExchange组件实现智能问答系统
nseejrukjhad
langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中,StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架,提供了StackExchange组件,使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
在一台Ubuntu计算机上构建Hyperledger Fabric网络
落叶无声9
区块链 超级账本 Hyperledger fabric 区块链 ubuntu 构建 hyperledger fabric
在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台,为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时,我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件,部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线
ARM中断处理过程
落汤老狗
嵌入式linux
一、前言本文主要以ARM体系结构下的中断处理为例,讲述整个中断处理过程中的硬件行为和软件动作。具体整个处理过程分成三个步骤来描述:1、第二章描述了中断处理的准备过程2、第三章描述了当发生中的时候,ARM硬件的行为3、第四章描述了ARM的中断进入过程4、第五章描述了ARM的中断退出过程本文涉及的代码来自3.14内核。另外,本文注意描述ARM指令集的内容,有些sourcecode为了简短一些,删除了T
《我的青葱岁月之缘来是你》 第二章 迎新晚会
思源思缘思怨
“怎么你也来了这里?”我愉快的问到,想着这是上天给的缘分吗?我还没去找他竟然就相遇了。那个让我开心的老乡。“你好,我也是舞蹈社的新人啊!”他说,笑起来回答我,眼睛弯弯的。“这么巧,我叫吴倩,你叫啥?”“我叫韩欢,你也是B市人吧,c中毕业的?”“我不是,我是f中的,不然肯定会认识你的”“是吗?以后多多关照了”他还冲我眨了眨眼睛。内心一阵悸动,这是……回到寝室,我兴奋的告诉我的室友这个事情,我再次觉得
ES聚合分析原理与代码实例讲解
光剑书架上的书
大厂Offer收割机 面试题 简历 程序员读书 硅基计算 碳基计算 认知计算 生物计算 深度学习 神经网络 大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中,特别是在使用Elasticsearch(ES)进行数据存储和检索时,聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组,以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前,ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
JVM、JRE和 JDK:理解Java开发的三大核心组件
Y雨何时停T
Java java
Java是一门跨平台的编程语言,它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中,JVM(Java虚拟机)、JRE(Java运行时环境)和JDK(Java开发工具包)是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别,帮助你更好地理解Java的运行机制。1.JVM:Java虚拟机(JavaVirtualMachine)什么是JVM?JVM,即Java虚拟机,是Ja
uniapp map组件自定义markers标记点
以对_
uni-app学习记录 uni-app javascript 前端
需求是根据后端返回数据在地图上显示标记点,并且根据数据状态控制标记点颜色,标记点背景通过两张图片实现控制{{item.options.labelName}}exportdefault{data(){return{storeIndex:0,locaInfo:{longitude:120.445172,latitude:36.111387},markers:[//标点列表{id:1,//标记点idin
基于STM32与Qt的自动平衡机器人:从控制到人机交互的的详细设计流程
极客小张
stm32 qt 机器人 物联网 人机交互 毕业设计 c语言
一、项目概述目标和用途本项目旨在开发一款基于STM32控制的自动平衡机器人,结合步进电机和陀螺仪传感器,实现对平衡机器人的精确控制。该机器人可以用于教育、科研、娱乐等多个领域,帮助用户了解自动控制、机器人运动学等相关知识。技术栈关键词STM32单片机步进电机陀螺仪传感器AD采集电路Qt人机界面实时数据监控二、系统架构系统架构设计本项目的系统架构设计包括以下主要组件:控制单元:STM32单片机传感器
JAVA·一个简单的登录窗口
MortalTom
java 开发语言 学习
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分,主要用于开发图形用户界面(GUI)程序整体架构流程新建项目,导入sql.jar包(链接放在了文末),编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件,如按钮(JButton)、文本框(JTextField)、标签(JLabel)、下拉列表(JComboBox)等,可以满足不同的界面设计
windows下python opencv ffmpeg读取摄像头实现rtsp推流 拉流
图像处理大大大大大牛啊
opencv实战代码讲解 视觉图像项目 windows python opencv
windows下pythonopencvffmpeg读取摄像头实现rtsp推流拉流整体流程1.下载所需文件1.1下载rtsp推流服务器1.2下载ffmpeg2.开启RTSP服务器3.opencv读取摄像头并调用ffmpeg进行推流4.opencv进行拉流5.opencv异步拉流整体流程1.下载所需文件1.1下载rtsp推流服务器下载RTSP服务器下载页面https://github.com/blu
信息系统安全相关概念(上)
YuanDaima2048
课程笔记 基础概念 安全 信息安全 笔记
文章总览:YuanDaiMa2048博客文章总览下篇:信息系统安全相关概念(下)信息系统安全相关概念[上]信息系统概述信息系统信息系统架构信息系统发展趋势:信息系统日趋大型化、复杂化信息系统面临的安全威胁信息系统安全架构设计--以云计算为例信息系统安全需求及安全策略自主访问控制策略DAC强制访问控制策略MAC信息系统概述信息系统用于收集、存储和处理数据以及传递信息、知识和数字产品的一组集成组件。几
HarmonyOS开发实战( Beta5.0)搜索框热搜词自动切换
让开,我要吃人了
OpenHarmony HarmonyOS 鸿蒙开发 harmonyos 华为 鸿蒙 移动开发 鸿蒙系统 前端 开发语言
鸿蒙HarmonyOS开发往期必看:HarmonyOSNEXT应用开发性能实践总结最新版!“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线!(从零基础入门到精通)介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换,编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
内存保护学习(一):tc27x的内存保护MPU设置浅析(个人理解)
剑从东方起
链接文件及功能安全 开发语言 c语言
目录一、背景二、Tc27x相关寄存器1、注意点2、注意几个强相关寄存器1)、数据保护范围寄存器2)、代码保护范围寄存器3)、保护集启用寄存器命名约定4)、PSW(每个核都有一个)5)、SYSCON三、使用方法1、内存方面2、在ECUM里面初始化MPU3、OS回调CBK检查4、机理5、补充点一、背景根据低ASIL等级开发的软件组件可能会错误地访问具有较高ASIL等级的软件组件的内存区域,从而产生干扰
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
hw_happy
开发语言 前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件,但是提示b文件没有默认导出,对于vue2文件来说有exportdefault,在中,所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此,不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误,原来是我的项目使用了ts和vite\webpack,因为TypeScript和Vue的默认导出
uniapp实现动态标记效果详细步骤【前端开发】
2401_85123349
uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢?比如说上面gif图中的这些人物对象,有一些已被该用户添加为关心,那么当用户下一次进入该页面时,这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大,只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先,整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计 旅游网站首页1个页面
html+css+js网页设计
html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42431718/897527112,点击
KVM虚拟机源代码分析【转】
xidianjiapei001
# 虚拟化技术
1.KVM结构及工作原理1.1KVM结构KVM基本结构有两部分组成。一个是KVMDriver,已经成为Linux内核的一个模块。负责虚拟机的创建,虚拟内存的分配,虚拟CPU寄存器的读写以及虚拟CPU的运行等。另外一个是稍微修改过的Qemu,用于模拟PC硬件的用户空间组件,提供I/O设备模型以及访问外设的途径。KVM基本结构如图1所示。其中KVM加入到标准的Linux内核中,被组织成Linux中标准
Istio pilot-discovery服务发现源码解析(1.13版本)
xidianjiapei001
# Istio istio 云原生 服务发现
Istiopilot-discovery服务发现介绍工作机制初始化初始化Config控制器初始化Service控制器controller初始化NamespaceServiceNodePodPilotDiscovery各组件启动流程DiscoveryServer接收Envoy的gRPC连接请求流程Config变化后向Envoy推送更新的流程总结参考介绍IstioPilot的代码分为Pilot-Dis
spring security中几大组件的作用和执行顺序
阿信在这里
java spring
springsecurity中几大组件的作用和执行顺序在SpringSecurity中,AuthenticationProvider、GroupPermissionEvaluator、PermissionEvaluator、AbstractAuthenticationProcessingFilter、DefaultMethodSecurityExpressionHandler和ManageSecu
h5小游戏定制开发
红匣子实力推荐
随着科技的不断发展,移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下,H5小游戏应运而生,为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式,正逐渐受到市场的关注和青睐。那么,什么是H5小游戏定制开发呢?它又具有哪些特点和优势呢?让我们一起来深入了解一下。首先,我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏,可以在移动端、PC端等多平台
【vite 自动配置路由】
CODER-V
前端 javascript vue.js 前端 软件构建
手动配置路由,是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置,我们就需要遵循以下目录规则:每一个页面对应一个包,当前包下的主页面命名为index.vue;每个包里必须配置一个page.js;在每一个page.js里边配置,额外的路由信息,比如:exportdefault{title:'商品',men
Vue3 vant组件库自动导入
不叫虎子
Vue vue.js 前端 javascript 前端框架 typescript
实现:完整使用vant组件库文档安装:#Vue3项目,安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
vant-element-ts一起使用存在的问题
flynn_
问题总结 vue
由于vant-ui与element-ui部分组件存在冲突,导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案:一个全局导入,一个按需导入,避免冲突的组件同时使用,
学会这招!用python爬取微博评论(无重复数据)
Python白白白白
python爬取微博评论(无重复数据)前言一、整体思路二、获取微博地址1、获取ajax地址2、解析页面中的微博地址3、获取指定用户微博地址三、获取主评论四、获取子评论1、解析子评论2、获取子评论五、主函数调用1、导入相关库2、主函数执行3、结果写在最后Tip:本文仅供学习与交流,切勿用于非法用途!!!前言前段时间微博上关于某日记的评论出现了严重的两极分化,出于好奇的我想对其中的评论以及相关用户做一
第三十一节:Vue路由:前端路由vs后端路由的了解
曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
LeetCode[位运算] - #137 Single Number II
Cwind
java Algorithm LeetCode 题解 位运算
原题链接:#137 Single Number II
要求:
给定一个整型数组,其中除了一个元素之外,每个元素都出现三次。找出这个元素
注意:算法的时间复杂度应为O(n),最好不使用额外的内存空间
难度:中等
分析:
与#136类似,都是考察位运算。不过出现两次的可以使用异或运算的特性 n XOR n = 0, n XOR 0 = n,即某一
《JavaScript语言精粹》笔记
aijuans
JavaScript
0、JavaScript的简单数据类型包括数字、字符创、布尔值(true/false)、null和undefined值,其它值都是对象。
1、JavaScript只有一个数字类型,它在内部被表示为64位的浮点数。没有分离出整数,所以1和1.0的值相同。
2、NaN是一个数值,表示一个不能产生正常结果的运算结果。NaN不等于任何值,包括它本身。可以用函数isNaN(number)检测NaN,但是
你应该更新的Java知识之常用程序库
Kai_Ge
java
在很多人眼中,Java 已经是一门垂垂老矣的语言,但并不妨碍 Java 世界依然在前进。如果你曾离开 Java,云游于其它世界,或是每日只在遗留代码中挣扎,或许是时候抬起头,看看老 Java 中的新东西。
Guava
Guava[gwɑ:və],一句话,只要你做Java项目,就应该用Guava(Github)。
guava 是 Google 出品的一套 Java 核心库,在我看来,它甚至应该
HttpClient
120153216
httpclient
/**
* 可以传对象的请求转发,对象已流形式放入HTTP中
*/
public static Object doPost(Map<String,Object> parmMap,String url)
{
Object object = null;
HttpClient hc = new HttpClient();
String fullURL
Django model字段类型清单
2002wmj
django
Django 通过 models 实现数据库的创建、修改、删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField:一个自动递增的整型字段,添加记录时它会自动增长。你通常不需要直接使用这个字段;如果你不指定主键的话,系统会自动添加一个主键字段到你的model。(参阅自动主键字段) BooleanField:布尔字段,管理工具里会自动将其描述为checkbox。 Cha
在SQLSERVER中查找消耗CPU最多的SQL
357029540
SQL Server
返回消耗CPU数目最多的10条语句
SELECT TOP 10
total_worker_time/execution_count AS avg_cpu_cost, plan_handle,
execution_count,
(SELECT SUBSTRING(text, statement_start_of
Myeclipse项目无法部署,Undefined exploded archive location
7454103
eclipse MyEclipse
做个备忘!
错误信息为:
Undefined exploded archive location
原因:
在工程转移过程中,导致工程的配置文件出错;
解决方法:
 
GMT时间格式转换
adminjun
GMT 时间转换
普通的时间转换问题我这里就不再罗嗦了,我想大家应该都会那种低级的转换问题吧,现在我向大家总结一下如何转换GMT时间格式,这种格式的转换方法网上还不是很多,所以有必要总结一下,也算给有需要的朋友一个小小的帮助啦。
1、可以使用
SimpleDateFormat SimpleDateFormat
EEE-三位星期
d-天
MMM-月
yyyy-四位年
Oracle数据库新装连接串问题
aijuans
oracle数据库
割接新装了数据库,客户端登陆无问题,apache/cgi-bin程序有问题,sqlnet.log日志如下:
Fatal NI connect error 12170.
VERSION INFORMATION: TNS for Linux: Version 10.2.0.4.0 - Product
回顾java数组复制
ayaoxinchao
java 数组
在写这篇文章之前,也看了一些别人写的,基本上都是大同小异。文章是对java数组复制基础知识的回顾,算是作为学习笔记,供以后自己翻阅。首先,简单想一下这个问题:为什么要复制数组?我的个人理解:在我们在利用一个数组时,在每一次使用,我们都希望它的值是初始值。这时我们就要对数组进行复制,以达到原始数组值的安全性。java数组复制大致分为3种方式:①for循环方式 ②clone方式 ③arrayCopy方
java web会话监听并使用spring注入
bewithme
Java Web
在java web应用中,当你想在建立会话或移除会话时,让系统做某些事情,比如说,统计在线用户,每当有用户登录时,或退出时,那么可以用下面这个监听器来监听。
import java.util.ArrayList;
import java.ut
NoSQL数据库之Redis数据库管理(Redis的常用命令及高级应用)
bijian1013
redis 数据库 NoSQL
一 .Redis常用命令
Redis提供了丰富的命令对数据库和各种数据库类型进行操作,这些命令可以在Linux终端使用。
a.键值相关命令
b.服务器相关命令
1.键值相关命令
&
java枚举序列化问题
bingyingao
java 枚举 序列化
对象在网络中传输离不开序列化和反序列化。而如果序列化的对象中有枚举值就要特别注意一些发布兼容问题:
1.加一个枚举值
新机器代码读分布式缓存中老对象,没有问题,不会抛异常。
老机器代码读分布式缓存中新对像,反序列化会中断,所以在所有机器发布完成之前要避免出现新对象,或者提前让老机器拥有新增枚举的jar。
2.删一个枚举值
新机器代码读分布式缓存中老对象,反序列
【Spark七十八】Spark Kyro序列化
bit1129
spark
当使用SparkContext的saveAsObjectFile方法将对象序列化到文件,以及通过objectFile方法将对象从文件反序列出来的时候,Spark默认使用Java的序列化以及反序列化机制,通常情况下,这种序列化机制是很低效的,Spark支持使用Kyro作为对象的序列化和反序列化机制,序列化的速度比java更快,但是使用Kyro时要注意,Kyro目前还是有些bug。
Spark
Hybridizing OO and Functional Design
bookjovi
erlang haskell
推荐博文:
Tell Above, and Ask Below - Hybridizing OO and Functional Design
文章中把OO和FP讲的深入透彻,里面把smalltalk和haskell作为典型的两种编程范式代表语言,此点本人极为同意,smalltalk可以说是最能体现OO设计的面向对象语言,smalltalk的作者Alan kay也是OO的最早先驱,
Java-Collections Framework学习与总结-HashMap
BrokenDreams
Collections
开发中常常会用到这样一种数据结构,根据一个关键字,找到所需的信息。这个过程有点像查字典,拿到一个key,去字典表中查找对应的value。Java1.0版本提供了这样的类java.util.Dictionary(抽象类),基本上支持字典表的操作。后来引入了Map接口,更好的描述的这种数据结构。
&nb
读《研磨设计模式》-代码笔记-职责链模式-Chain Of Responsibility
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
/**
* 业务逻辑:项目经理只能处理500以下的费用申请,部门经理是1000,总经理不设限。简单起见,只同意“Tom”的申请
* bylijinnan
*/
abstract class Handler {
/*
Android中启动外部程序
cherishLC
android
1、启动外部程序
引用自:
http://blog.csdn.net/linxcool/article/details/7692374
//方法一
Intent intent=new Intent();
//包名 包名+类名(全路径)
intent.setClassName("com.linxcool", "com.linxcool.PlaneActi
summary_keep_rate
coollyj
SUM
BEGIN
/*DECLARE minDate varchar(20) ;
DECLARE maxDate varchar(20) ;*/
DECLARE stkDate varchar(20) ;
DECLARE done int default -1;
/* 游标中 注册服务器地址 */
DE
hadoop hdfs 添加数据目录出错
daizj
hadoop hdfs 扩容
由于原来配置的hadoop data目录快要用满了,故准备修改配置文件增加数据目录,以便扩容,但由于疏忽,把core-site.xml, hdfs-site.xml配置文件dfs.datanode.data.dir 配置项增加了配置目录,但未创建实际目录,重启datanode服务时,报如下错误:
2014-11-18 08:51:39,128 WARN org.apache.hadoop.h
grep 目录级联查找
dongwei_6688
grep
在Mac或者Linux下使用grep进行文件内容查找时,如果给定的目标搜索路径是当前目录,那么它默认只搜索当前目录下的文件,而不会搜索其下面子目录中的文件内容,如果想级联搜索下级目录,需要使用一个“-r”参数:
grep -n -r "GET" .
上面的命令将会找出当前目录“.”及当前目录中所有下级目录
yii 修改模块使用的布局文件
dcj3sjt126com
yii layouts
方法一:yii模块默认使用系统当前的主题布局文件,如果在主配置文件中配置了主题比如: 'theme'=>'mythm', 那么yii的模块就使用 protected/themes/mythm/views/layouts 下的布局文件; 如果未配置主题,那么 yii的模块就使用 protected/views/layouts 下的布局文件, 总之默认不是使用自身目录 pr
设计模式之单例模式
come_for_dream
设计模式 单例模式 懒汉式饿汉式 双重检验锁失败 无序写入
今天该来的面试还没来,这个店估计不会来电话了,安静下来写写博客也不错,没事翻了翻小易哥的博客甚至与大牛们之间的差距,基础知识不扎实建起来的楼再高也只能是危楼罢了,陈下心回归基础把以前学过的东西总结一下。
*********************************
8、数组
豆豆咖啡
二维数组 数组 一维数组
一、概念
数组是同一种类型数据的集合。其实数组就是一个容器。
二、好处
可以自动给数组中的元素从0开始编号,方便操作这些元素
三、格式
//一维数组
1,元素类型[] 变量名 = new 元素类型[元素的个数]
int[] arr =
Decode Ways
hcx2013
decode
A message containing letters from A-Z is being encoded to numbers using the following mapping:
'A' -> 1
'B' -> 2
...
'Z' -> 26
Given an encoded message containing digits, det
Spring4.1新特性——异步调度和事件机制的异常处理
jinnianshilongnian
spring 4.1
目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T
squid3(高命中率)缓存服务器配置
liyonghui160com
系统:centos 5.x
需要的软件:squid-3.0.STABLE25.tar.gz
1.下载squid
wget http://www.squid-cache.org/Versions/v3/3.0/squid-3.0.STABLE25.tar.gz
tar zxf squid-3.0.STABLE25.tar.gz &&
避免Java应用中NullPointerException的技巧和最佳实践
pda158
java
1) 从已知的String对象中调用equals()和equalsIgnoreCase()方法,而非未知对象。 总是从已知的非空String对象中调用equals()方法。因为equals()方法是对称的,调用a.equals(b)和调用b.equals(a)是完全相同的,这也是为什么程序员对于对象a和b这么不上心。如果调用者是空指针,这种调用可能导致一个空指针异常
Object unk
如何在Swift语言中创建http请求
shoothao
http swift
概述:本文通过实例从同步和异步两种方式上回答了”如何在Swift语言中创建http请求“的问题。
如果你对Objective-C比较了解的话,对于如何创建http请求你一定驾轻就熟了,而新语言Swift与其相比只有语法上的区别。但是,对才接触到这个崭新平台的初学者来说,他们仍然想知道“如何在Swift语言中创建http请求?”。
在这里,我将作出一些建议来回答上述问题。常见的
Spring事务的传播方式
uule
spring事务
传播方式:
新建事务
required
required_new - 挂起当前
非事务方式运行
supports
&nbs