Anthony的技术博客

发表于2022-11-19|软件|Mac•IDEA| 条评论

教程IDEA查看方法被调用修改光标所在行背景颜色断点判断条件在断点上点右键,正常的写判断代码就行插件Rabinbow Brackets作者:Zhihao Zhang 使用方法 Command+右键,高亮选中部分 Alt+右键,高亮选中部分,其余的代码变暗 CommitMessage作者:郭翰林使用方法,提交的时候,点击✈️的图标 Codeium作者:Codeium 写代码的时候会有自动提示,按tab确定使用AI生成的代码 Key Promoter XTranslation作者:Yii.Guxing 选中要翻译的内容,右键选择翻译 IDEA 2025恢复旧版Commit弹窗从IntelliJ IDEA 2025版本开始,JetBrains默认启用了非模态提交界面(Non-modal Commit),提交操作会显示在Commit工具窗口里,不再是以前独立弹出的Commit窗口. 如果更习惯旧版弹窗式Commit窗口,可以通过官方插件恢复. 安装插件打开Settings,macOS是Preferences 进入Plugins 搜索Modal Commit 安装JetBrains官方插件Modal Commit Interface 重启IDEA 开启旧版提交窗口打开Settings 进入Advanced Settings 搜索commit 在Version Control区域勾选Use modal commit interface for Git and Mercurial 点击Apply或者OK保存配置完成后,Git和Mercurial提交时会恢复成旧版独立弹窗式Commit对话框.

Axure

发表于2025-07-06|Axure|Axure| 条评论

元件库新建元件库的文件随便画一个图,并保存,注意这里的1和2的表示另外个文件引入元件库引入之后,就可以看到移除元件库母版修改了母版,所有使用母版的页面都会修改母版的占用空间创建两个母版一个母版是这样的,坐标位置是0,0 一个母版不是0,0, 创建一个页面,把两个组件都拖过来,能看到这两个母版占用的空间的大小不一样母版的设置随意拖放,就是使用母版之后,位置是可以随意拖放的使用母版的位置,比如母版的位置是0.0, 在页面上拖过去的母版就是0.0 脱离母版:使用母版的内容,可以任意修改内容,跟母版就没有关系了,就相当于复制了母版的内容而已在页面上使用了母版,点击右键也可以脱离母版添加到页面的功能,相当于批量一键把母版添加到多个页面交互面板样式面板降低饱和度不要点击元件,随便点个背景页面,就会有这个显示了自适应文本宽度高度说明编辑区 Axure基本元件图片中间的图是刚从组件库里拖出来的,这是双击画面添加图片, 图片的大小不是组件的大小要双击边框,就变成右边的的图了(黄色变成了白色),再双击图片,就可以把要添加的图片自动缩小成组件的大小了交互设计中的样式鼠标悬停鼠标按下,同理(鼠标悬停,只是选项不一样) 选中(需要通过别的时间,才能触发,比如这里要触发矩形,用右边的按钮触发) 禁用

Dapp

发表于2025-05-29|区块链|Mac•Solidity•Remix•区块链•智能合约•Dapp•web3| 条评论

HelloWorld合约Remix编辑器 12345678// SPDX-License-Identifier: MITpragma solidity ^0.8.13;contract helloworld{ function helloWorld() public pure returns (string memory) { return "Hello, World!"; }} 发行代币在闲鱼,淘宝上买些测试币,也可以通过水龙头获取(只是有点要求和门槛,不如直接买),这里我买了两笔新建合约文件 1234567891011// SPDX-License-Identifier: MITpragma solidity ^0.8.13;import "@openzeppelin/contracts/token/ERC20/ERC20.sol";contract MyError20Token is ERC20{ constructor(string memory _name,string memory _symbol) ERC20(_name,_symbol){ _mint(msg.sender,10000 * 10 ** 18); }}

好用的软件

发表于2025-05-23|记录|软件| 条评论

图片截图软件Snipaste 图片上传到图床PicGo 录屏软件Screenity 文件LocalSend

Vue项目

发表于2022-11-19|前端Vue|教程•笔记•前端•Vue.js| 条评论

安装Vue局部安装局部安装并使用vue-cli 4.x版本,和创建项目 12345678910111213141516171819202122# 先创建一个文件夹# 初始化一个node项目npm init -y# 局部安装vuenpm i -D @vue/cli# 查看vue的版本# 局部安装要用npx命令C:\Users\mmzcg\WebstormProjects>npx vue -V@vue/cli 5.0.8# 创建一个项目# 为啥不能用npm运行npx vue create project-one# 进入项目并且运行cd project-onenpm run serve# 也可以用uinpx vue ui 全局安装Vue2Vue312345npm install -g @vue/clivue create my-projectvue uiVue脚手架官网 123456789101112# 安装脚手架# 会有选项pnpm create vue@latest# 进入项目cd vue-project# 安装依赖pnpm install# 运行项目pnpm dev 安装Element-UI全局安装123456# 安装# npmnpm i element-ui -S# pnpmpnpm add element-ui -S 1234// main.js 使用import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI) 按需引入123# 安装npm i element-ui -Snpm install babel-plugin-component -D 123456789101112131415161718192021222324252627// main.js// 全局引入// import ElementUI from 'element-ui'// import 'element-ui/lib/theme-chalk/index.css'// Vue.use(ElementUI)// 按需引入import {Button} from 'element-ui'Vue.use(Button)// babel.config.jsmodule.exports = { // 自动生成的 presets: [ '@vue/cli-plugin-babel/preset' ], // 从官网上复制的 "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]} 如果没有找到.babelirc文件,找找babel.config.js文件一个一个import 按需引入有点麻烦,在根目录下面创建一个plugins文件夹,在这个文件夹下面创建element.js 123import Vue from 'vue'import {Button} from 'element-ui'Vue.use(Button) 在main.js引入element.js 1import '../element.js' 安装CSS预处理器Sass安装的是sass,使用的时候是scss…. 留意 12npm install --save-dev node-sassnpm install --save-dev sass-loader 12345678# 注意这里是scss<style scoped lang="scss">.hello{ background: yellow; .el-button{ color: red }} Less12npm i less less-loader --save-devnpm i less less-loader --save-dev 1234567<style scoped lang="less">.hello{ background: yellow; .el-button{ color: red }} 重置样式下面的代码可以搜索reset.css在src/assets 下创建css文件夹,在这个文件下创建reset.css文件,粘贴 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;} 在App.vue或者其他的组件中使用 1234567891011<style lang="scss">@import url('./assets/css/reset.css');#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style> 安装图标库12345678# 安装npm i -D font-awesomemain.jsimport 'font-awesome/css/font-awesome.min.css'# 使用<i class="fa fa-user"></i> 安装axios123456npm i axios -Smain.jsimport axios from "axios";# 挂在之后,就可以全局使用了Vue.prototype.axios = axios 安装vue-router12# vue-router3 和 4 的配置不一样npm install [email protected] 创建文件和文件夹src->router->index.js 1234567891011121314151617181920212223import Vue from 'vue'import Router from 'vue-router'import Home from '../components/Home.vue'Vue.use(Router)export default new Router({ routes:[ { path:'/home', component:Home } ], mode:'history'})main.jsimport router from './router'new Vue({ render: h => h(App), router,}).$mount('#app') 路由懒加载和异步组件123456789101112131415export default new Router({ routes:[ { path:'/home', // 路由懒加载 component:()=>import('@/components/Home.vue') }, { path:'/home2', // 异步组件 component:resolve =>require(['@/components/Home.vue'],resolve) } ], mode:'history'}) setToken封装src→utils→settoken.js 1234567891011export function setToken(key,token){ return localStorage.setItem(key,token)}export function getToken(key){ return localStorage.getItem(key)}export function delToken(key){ return localStorage.removeItem(key)} 使用 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<script>import {nameRule,passwordRule} from "@/utils/vaildate";import {setToken} from "@/utils/setToken";export default { data() { return { form: { username: "", password: "" }, rules: { username: [{validator: nameRule, trigger: 'blur'}], password: [{validator: passwordRule, trigger: 'blur'}], } } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { console.log("验证通过") this.axios.post("http://localhost", this.form).then( res => { console.log(res) if (res.data.status === 200) { setToken("username", res.data.username) this.$message({ message: res.data.message, type: 'success' }) this.$router.push('/home') } } ) .catch(err => { console.error(err) }) } else { console.error("验证不通过") } }) } }}</script> 配置代理服务器123456789101112131415161718192021const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer:{ // 运行自动打开浏览器, open:true, // 如果不配置这个,自动打开浏览器,就是0.0.0.0:8080 host:"localhost", proxy:{ '/api':{ target:'http://127.0.0.1', changeOrigin:true, pathRewrite:{ '^/api':'' } } } }}) 40412345{ path:'*', // 路由懒加载 component:()=>import('@/components/404.vue')}

CSS

发表于2022-11-19|CSS|前端•CSS| 条评论

CSS选择器基础选择器选择器名字示例标签选择器 p{color: green;} 类选择器 .red {color: red;} ID选择器 #red {color: red;} 通配符选择器 * {color: red;} 复合选择器选择器作用描述后台选择器 a b{color: green;} b是孩子子代选择器 a> b{color: green;} b是儿子并集选择器 a , b{color: green;} 一次选中多个元素伪类选择器 :link 未被访问的连接 :visited 已经访问的连接 :hover 鼠标放在上面的连接 :active 鼠标按下没有谈起的连接 focus伪类选择器获取焦点的表单选择器字体属性文本属性盒子模型边框还有个表格边框合并的属性:border-collapse:两条边合并成一条边内边距内边距也会影响盒子的实际大小 padding 值得顺序是上右下左没有指定width,加了padding就不会改变盒子宽度外边距margin的语法跟padding用法一样外边距应用-盒子居中让盒子居中的前提条件是: 盒子必须指定了宽度盒子左右的外边距都设置为auto 嵌套外边距塌陷解决方法1: 给父元素定义上边框,坏处就是撑大了盒子border-top: 1px solid transparent; 解决方法2:指定一个上内边距,坏处就是撑大了盒子padding: 1px; 解决方法三:为父元素添加 overflowoverflow: hidden; 在浮动,固定,绝对定位的盒子就不会有塌陷问题元素显示模式块元素 div ,h1 p ul ol li 一个占一行高度,宽度,外边距,内边距都可以控制宽度默认是容器的100% 是一个容器及盒子,里面可以放行内或者块元素 <p>和<h1> 等用于存放文字的标签里面不能放<div> 行内元素 span a strong b em i 一行可以用多个宽高,设置无效,背景颜色设置有效默认宽度就是它本身内容的宽度行内元素只能放文本或者其他行内元素特殊情况链接里面不能再放连接,<a>里面可以放块级元素 <input> <img>是行内款,一行可以给多个,也能设置宽高元素显示模式的转换

Draw.io

发表于2025-05-23|软件|Draw.io•软件| 条评论

连线滚动 Tree Folding折叠

AWS

发表于2022-11-19|Cloud|AWS•云服务器•图床•静态资源•安全组•CDN•边缘加速•cname| 条评论

AWS基本教程场景是:在把22端口关闭了,无法再连上服务器的情况解决办法:关闭服务器,点击操作->实例设置->编辑用户数据 1234567#!/bin/bash# 允许 SSH 端口iptables -P INPUT ACCEPTiptables -P OUTPUT ACCEPTiptables -P FORWARD ACCEPTiptables -Fiptables -A INPUT -p tcp --dport 22 -j ACCEPT 再启动服务器 AWS升级配置1.先停止实例,不是终止实例 2.修改实例类型重启公网IP可能会改变服务器局域网互通需要把局域网想要互通的服务器,加入一个公共的的默认安全组选择default安全组要看服务器部署在哪里 JavaSDK上传图片到S3123456789101112131415161718192021222324252627282930313233343536@RestController@Slf4j@Api(tags = "上传接口")public class UploadController { @Value("${S3.accessKey}") String accessKey; @Value("${S3.secretKey}") String secretKey; @Value("${S3.endPoint}") String endPoint; @Value("${S3.bucketName}") String bucketName; @PostMapping("/upload") @ApiOperation("上传") @NotNeedAuth public Response<String> upload(@RequestParam("file") MultipartFile file) { String originalFilename = file.getOriginalFilename(); if (!Constant.PHOTO_LIST.contains(originalFilename.substring(originalFilename.lastIndexOf(".") + 1))) { return Response.fail(CodeConstant.CODE_095); } String newImageName = ThreadLocalRandom.current().nextInt(10000) + System.currentTimeMillis() + originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase(); String fileName = "lxdt/dt/" + Constant.DIRECTORY_TIME_FORMAT.format(LocalDateTime.now(Constant.TIME_ZONE)) + newImageName; try { S3Util.uploadFileByFile(accessKey, secretKey, endPoint, bucketName, fileName, file); } catch (Exception e) { log.error("上传失败", e); return Response.error(""); } return Response.successData(fileName); }} 12345678910111213141516public class S3Util { /** * 图片上传 */ public static void uploadFileByFile(String accessKey, String secretKey, String endPoint, String bucketName, String folderName, MultipartFile file) throws IOException { ClientConfiguration clientConfig = new ClientConfiguration(); clientConfig.setProtocol(Protocol.HTTPS); AmazonS3 amazonS3 = AmazonS3Client.builder().withEndpointConfiguration(new AwsClientBuilder.EndpointConfiguration(endPoint, Region.getRegion(Regions.AP_SOUTHEAST_1).getName())) .withClientConfiguration(clientConfig).withCredentials(new AWSStaticCredentialsProvider(new BasicAWSCredentials(accessKey, secretKey))) .disableChunkedEncoding().withPathStyleAccessEnabled(true).withForceGlobalBucketAccessEnabled(true).enablePathStyleAccess().build(); ObjectMetadata objectMetadata = new ObjectMetadata(); objectMetadata.setContentType(file.getContentType()); objectMetadata.setContentLength(file.getSize()); amazonS3.putObject(new PutObjectRequest(bucketName, folderName, file.getInputStream(), objectMetadata).withCannedAcl(CannedAccessControlList.PublicRead)); }} S3桶策略公开访问桶策略 123456789101112{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/*" } ]} 印象中有遇到这种情况: 第一次操作桶的时候,桶里面的文件是能正常共享出来的很久之后没有操作了,再上传一个新文件,上传的这个文件就不能共享了第二次出现这样情况的时候,我文件的url搞错了,是可以正常共享的 PicGO+S3创建存储桶红框里不要勾选创建文件夹,设置公开开启静态托管新建IAM用户访问创建IAM页面创建使用者创建使用者详情创建使用者权限,点击下一步,然后就能看到key和密钥了 PicGO配置PicGO软件许要下再S3插件,然后再配置文件里粘贴这个 1234567"aws-s3": { "accessKeyID": "AKIA2Q6ZSIPP7MKZOFHR", "secretAccessKey": "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", "bucketName": "mmzcg.com", "uploadPath": "blog/{year}/{fullName}", "acl": "public-read"} 参考S3教程 PicGoS3教程 CloudFront加速Vercel1.找到vercel自动分配的域名 2.aws 创建分配 3.选择源不要选择源,输入vercel分配的域名 4.选择全部https,其它可以默认 5.选择证书备用域名:比如vercel默认分配的是xxx.vercel.app你想加速的域名是 abc.blog,备用域名就填abc.blog 自定义SSL证书:用aws自带的证书申请工具点击保存,回到CloudFront首页 6.cname 看上次修改时间这一列,如果显示的时间,就表示刚才的配置已经生效了,如果显示在部署中…就等一会 CloudFront这一列会分配一个域名,在域名解析那里Cname指向这个域名就可以了 AWS S3和Hexo1.安装插件 12# 装置npm install hexo-deployer-aws-s3 --save-dev 2.改_config.yml 12345678deploy:# - type: 'git'# repo: [email protected]:aaaaaaanthony/aaaaaaanthony.github.io.git# branch: master type: 'aws-s3' # 写死 region: ap-east-1 # 区域名 bucket: mmzcg.com # 桶名如果要部署多个地方,每个仓库的type前面要加一个- 如果只有一个,就只用type开头就行 3.执行环境变量 123export AWS_ACCESS_KEY_ID=AKIA2Q6ZSIPP7MKZOFHRexport AWS_SECRET_ACCESS_KEY=ZifJfUmVVGMq37hd8Itozp4fws5O97dVlwgMgtCYsource /etc/profile 4.部署 1234hexo cleanhexo algolihexo d -g 发现报错，The bucket does not allow ACLs，还需要在存储中开启 ACLs 接下来要关闭「阻止共有访问操作」部署成功后，开启静态网站托管功能 RDS创建RDS选择mysql社区版本 AWS的RDS开启慢查询日志到cloudwatch中快照导出到S3 参考文档接下来的页面是需要的设置导出标识符,就是导出任务的名字导出的数据,这里测试就简单点,导出全部表,要是选部分表,文档里有导出规则 S3 目标, 选一个存储桶接下来的两个是难点,IAM角色,和加密先看加密,先创建ARN,找到配置的选项卡点击下面的链接在客户管理的秘钥,创建一个秘钥, 客户管理的密钥和AWS托管的密钥是有区别的,要选对创建完之后,再回到密钥列表的页面,点密钥ID,进入到详情页复制ARN刚刚才导出的页面,角色权限什么的,各种尝试下就可以了 front清空缓存API12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import boto3import datetimedef create_invalidation(distribution_id, paths): # 创建一个CloudFront客户端并提供凭证 client = boto3.client('cloudfront',aws_access_key_id='AKIA2UC26S7767GSGKJQ',aws_secret_access_key='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') # 创建一个唯一的无效请求ID caller_reference = str(datetime.datetime.now()) # 格式化路径 items = paths if isinstance(paths, list) else [paths] # 构建无效请求 invalidation_batch = { 'Paths': { 'Quantity': len(items), 'Items': items }, 'CallerReference': caller_reference } # 创建无效请求 response = client.create_invalidation( DistributionId=distribution_id, InvalidationBatch=invalidation_batch ) return response# distribution_id 列表，包含ID、说明和类型distribution_info = [ ["EX123AFBG", "生产环境", "生产", "baidu.com"],]# 要使失效的路径paths_to_invalidate = ['/*']# 循环遍历每个distribution_idfor info in distribution_info: distribution_id = info[0] print(f"Creating invalidation for Distribution ID: {distribution_id}, Description: {info[1]}, Type: {info[2]}") response = create_invalidation(distribution_id, paths_to_invalidate) print(response) print("================")print("刷新完成")

HTML

发表于2022-11-19|HTML|前端•HTML| 条评论

1234567891011121314<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body></html> 标题标签12345678<body> <h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6></body> 段落标签1234<body> <p>我们一进里面一片漆黑，然后老师给我们每一个人都发了一个眼镜，我们戴上眼镜，后面前有一张大白纸，后面有一个投影仪，放了一个电影，名叫“雪怪大冒险”。</p> <p>有几位老师去帮我们买汉堡去了，我们先到那里先吃一些零食，我们吃饱后，我们一起去玩游戏，第一个游戏的名字叫做动物园里有什么。第二个游戏的名字叫做学校里面有什么</p></body> 段落格式的特点段落内容会自动换行，无需手动添加 <br> 标签。段落段落之间会有空隙换行标签123<body>13213123<br/>3123123</body> 文本格式化标签12345678<body> 1<strong>加粗</strong>3 1<b>加粗</b>3 1<em>倾斜</em>3 1<del>删除线</del>3 1<ins>下划线</ins>3</body> div1234<body><div>div单独占一行</div>3213123<div>div单独占一行</div></body> span所有的span占一行 1234<body><span>div单独占一行</span>3213123<span>div单独占一行</span></body> 图像标签123<body>这是百度的图片:<img src="./demo.png"/></body> 通常只需调整宽度或高度中的一个，另一个会自动计算以保持比例不变。超链接target属性有_self为默认值,当前页面_blank 新的页面打开外连接就要加http,内连接就是路径地址 123<body><a href="http://baidu.com">这是超裂解</a></body> 锚点123456789101112131415161718192021<body>目录:<a href="#1">1</a><a href="#2">2</a><hr><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h2 id="1">这是锚点1</h2><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h2 id="2">这是锚点2</h2></body> 表格标签123456789101112<body><table border="1" align="center"> <tr> <th>姓名</th> <th>性别</th> </tr> <tr> <td>anthony</td> <td>南</td> </tr></table></body> 列表标签1234567891011121314151617181920212223242526<body><ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> <li>无序列表4</li></ul><ol> <li>1</li> <li>2</li> <li>4</li> <li>3</li></ol><dl> <dt>这是自定义列表</dt> <dd>1</dd> <dd>2</dd> <dd>4</dd> <dd>3</dd></dl></body> 表单标签12345678910111213141516171819<form action="url地址" method="提交方式" name="表单名称">  <label for="usernameId">用户名</label> <input type="text" name="username" value="anthony" id="usernameId"> <br> 密码 :<input type="password" name="pwd"> <br> 性别 : 男<input type="radio" name="sex" value="男" checked> 女<input type="radio" value="女" name="sex"><br> 爱好: 吃饭<input type="checkbox" name="hobby" value="1"> 睡觉<input type="checkbox" name="hobby" value="2"> 玩<input type="checkbox" name="hobby" value="3"><br> <label for="selectId">选项:</label> <select id="selectId"> <option value="1" >一</option> <option value="2" selected>二</option> <option value="3">三</option> </select><br> 文本域元素:<textarea>23123</textarea></form> input12345678910111213141516171819<body> <form> 用户名:<input type="text" name="myName" value="anthony"><br /> 密码:<input type="password" name="myPassword" value="123456"><br /> 测试重置:<input type="text" name="myTest"><br /> 性别: <input type="radio" name="myGender" value="male" checked> 男 <input type="radio" name="myGender" value="female"> 女 <br /> 爱好: <input type="checkbox" name="myHobby" value="basketball" checked> 篮球 <input type="checkbox" name="myHobby" value="football"> 足球 <input type="checkbox" name="myHobby" value="pingpong"> 乒乓球 <br /> <input type="submit" value="提交"> <input type="reset" value="重置"> </form></body> select1234567891011<body> <form> 地区: <select name="myArea"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou" selected>广州</option> <option value="shenzhen">深圳</option> </select> </form></body> 综合练习123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合案例-注册</title></head><body> <h4>青春不常在,赶紧谈恋爱</h4> <table border="1" cellspacing="0" cellpadding="0" width="500px"> <tr> <td>性别:</td> <td> <input type="radio" name="myGender" id="man"><label for="man">男<img src="./assert/male.svg" alt="male" width="12px"></label> <input type="radio" name="myGender" id="woman"><label for="woman">女<img src="./assert/female.svg" alt="female" width="12px"></label> </td> </tr> <tr> <td>生日:</td> <td> <select name="myBirthday"> <option value="1990" selected>请选择年</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> </select> <select name="myBirthday"> <option value="1" selected>请选择月</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> <select name="myBirthday"> <option value="1" selected>请选择日</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </td> </tr> <tr> <td>所在地区:</td> <td> <input type="text" name="myLocation" placeholder="请输入所在地区"> </td> </tr> <tr> <td>婚姻状态:</td> <td> <input type="radio" name="myMarriage" id="married"><label for="married">已婚</label> <input type="radio" name="myMarriage" id="unmarried"><label for="unmarried">未婚</label> <input type="radio" name="myMarriage" id="divorced"><label for="divorced">离异</label> </td> </tr> <tr> <td>学历:</td> <td> <input type="text" name="myEducation" placeholder="请输入学历"> </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="myHobby"><label for="basketball">篮球</label> <input type="checkbox" name="myHobby"><label for="football">足球</label> <input type="checkbox" name="myHobby"><label for="pingpong">乒乓球</label> </td> </tr> <tr> <td>自我介绍:</td> <td> <textarea name="myIntro" cols="30" rows="10" placeholder="请输入自我介绍"></textarea> </td> </tr> <tr> <td></td> <td> <input type="submit" name="myCode" value="免费注册"> </td> </tr> <tr> <td></td> <td> <input type="checkbox" checked><label for="myAgreement">我同意《用户协议》</label> </td> </tr> <tr> <td></td> <td> <a href="https://www.baidu.com">我是会员,立即登录</a> </td> </tr> <tr> <td></td> <td> <h5>我承诺</h5> <ul> <li>1. 我是成年人</li> <li>2. 我是成年人</li> <li>3. 我是成年人</li> <li>4. 我是成年人</li> </ul> </td> </tr> </table></body></html> 动态修改html标题 123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>欢迎来到我的网页</title></head><body><h1>试着切换标签页吧！</h1><script> // 记录原始标题 var originalTitle = document.title; // 定义当页面可见性发生变化时的事件处理函数 document.addEventListener('visibilitychange', function() { if (document.hidden) { // 如果页面不可见，修改标题 document.title = "我等着你回来"; } else { // 如果页面可见，恢复原始标题 document.title = originalTitle; } });</script></body></html>