html+css+javascript学习总结

2023-11-14

html用来写页面的结构和内容,css写样式和呈现效果,javascript写行为和动作

1.html常用标签
a 超链接
div 盒子,常用来控制样式的
ul,ol 无序列表和有序列表
img 图片标签
button 按钮
form 表单
input 输入框标签,type属性不同,功能也不同。例如:text文本输入框,button按钮,submit提交按钮,checkbox复选框,radio单选按钮,password密码输入框
label 定义 input 元素的标注。

2.css
2.1.常用选择器
class属性选择器 .class属性名
id选择器 #id名
标签选择器 标签名
选择下级元素用空格隔开,同级元素用逗号’,'隔开。
选择子元素中指定的第几个用nth-child,例: div:nth-child(2),选择div元素下的第二个子元素
2.2.常用属性
background 设置背景相关属性
color 设置元素中文字颜色
font 设置字体相关元素
text-indent 设置首行缩进
text-align 设置元素对其方式
text-decoration 设置a元素的下划线
line-height 设置文字行高
list-style:none 取消列表前面默认的数字或小圆点
a:hove hove属性设置当鼠标移动到元素上时显示的样式
margin 设置元素的外边距
padding 设置元素的内边距
border 设置元素边框
border-radius 设置圆角
outline 设置元素被选中时的边框
transition 设置动画
transform 设置动画属性,这个属性要和transition配合使用,例如rotate(90deg)旋转90度,translate(20px,20px)元素在x轴移动20像素在y轴移动20像素
animation 使用这个动画要先用@keyframes定义
2.3.浮动相关
float 设置浮动,left左浮动,right右浮动
.clearfix:after,.clearfix:before{ content: “”;display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动或者解决塌陷问题
overflow:hidden 设置当元素超出父元素时的显示模式,hidden为隐藏,scroll显示滚动条,auto如果超出则自动显示滚动条
2.4.移动端布局
移动端布局首先要用下列方式在html头部声明视口问题,(在sublime text3编辑器里输入 meta:vp再按tab键即可出来)

用rem可以解决移动端缩放的问题,其原理是把文档内元素的尺寸换算成基于html根标签定义的font-size尺寸,随着屏幕尺寸的变化改变根标签的font-size尺寸就可改变文档整体的尺寸。
2.4.1 首先在文档里加入以下javascript代码

(function(){
var calc = function(){
var docElement = document.documentElement;
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement.style.fontSize = 20*(clientWidthValue/375) + ‘px’;
}
calc();
window.addEventListener(‘resize’,calc);
})();
2.4.2
然后把文档里所有元素的尺寸换算成rem就好。例如:200px等于200/40=5rem。为什么要除以40而不是20,是因为要解决移动端视网膜屏(retina屏)的问题

3.JavaScript
3.1 JavaScript用来处理页面的一些行为和动作,常用函数。
window.οnlοad=function(){}; 当文档加载完后要执行的函数
document.getElementById(‘box’); 获取文档中id为box的元素
元素.οnclick=function(){}; 当鼠标点击某个元素时触发的事件。
javascript内容太多,请参看https://www.runoob.com/js/js-tutorial.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html+css+javascript学习总结 的相关文章

  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持
  • Python FTP下载550错误

    我编写了一个 ftp 爬虫来下载特定文件 它会一直工作 直到找到要下载的特定文件 然后抛出此错误 ftplib error perm 550 该文件存在于我的下载文件夹中 但文件大小为 0 kb 我需要转换某些内容才能下载吗 我可以访问 f
  • 当元组列表中相同项目的值是字符串时,对它们的值求和

    如果我有这样的元组列表 my list books 5 books 10 ink 20 paper 15 paper 20 paper 15 我怎样才能把列表变成这样 books 15 ink 20 paper 50 即添加同一项目的费用
  • 如何在 python 中使用交叉验证执行 GridSearchCV

    我正在执行超参数调整RandomForest如下使用GridSearchCV X np array df features all features y np array df gold standard labels x train x
  • 使图像宽度为父 div 的 100%,但不大于其自身宽度

    我试图让图像 动态放置 对尺寸没有限制 与其父 div 一样宽 但前提是该宽度不比 100 时其自身宽度宽 我已经尝试过这个 但没有成功 img width 100 height auto max width 100 其中许多图像比它们的父
  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD
  • 机器学习的周期性数据(例如度角 -> 179 与 -179 相差 2)

    我使用 Python 进行核密度估计 并使用高斯混合模型对多维数据样本的可能性进行排名 每一条数据都是一个角度 我不确定如何处理机器学习的角度数据的周期性 首先 我通过添加 360 来删除所有负角 因此所有负角都变成了正角 179 变成了
  • “KMeans”对象没有属性“k”

    我使用 Yellowbrick 包绘制数据集的肘部曲线 以使用 KMeans 作为模型找到数据集的最佳簇数 我正在使用 Scikit learn KMeans 和 Yellowbrick kelbowvisualizer 函数 生成了肘部曲
  • Python GTK3 Treeview 向上或向下移动选择

    如何在树视图中向上或向下移动所选内容 我的想法是 我可以使用向上和向下按钮将选择向上移动一行或向下移动一行 我的 Treeview 使用 ListStore 不确定这是否重要 首先 我将使用我熟悉的 C 代码 如果您在将其翻译为 Pytho
  • 为什么我无法杀死 k8s pod 中的 python 进程?

    我试图杀死一个 python 进程 ps aux grep python root 1 12 6 2 1 2234740 1332316 Ssl 20 04 19 36 usr bin python3 batch run py root 4
  • 如何将 django ModelForm 字段显示为不可编辑

    接受我的初步教训django ModelForm 我想让用户能够编辑博客中的条目 BlogEntry has a date postedTime title and content 我想向用户展示一个编辑表单 其中显示所有这些字段 但仅包含
  • 为什么我会在 Python 字符串格式中使用除 %r 之外的其他内容?

    我偶尔会使用 Python 字符串格式 这可以像这样完成 print int i Float f String s 54 34 434 some text 但是 这也可以这样做 print int r Float r String r 54
  • JQuery Mobile - 内联显示 HTML 表单

    Goal 在 Jquery Mobile 中的同一行显示文本框和提交按钮 Problem 它们不会显示在同一行 我曾多次尝试在同一行显示文本框和提交按钮 但它从未起作用 这是我的代码和我使用的组合
  • 本地主机上的 Google App Engine GQL 查询

    我正在 Google App Engine Windows 上的 SDK 版本 1 7 0 上开发一个应用程序 我需要经常测试该应用程序 并且此测试涉及数据存储上的大量 GQL 查询 您可以在 App Engine 管理界面的浏览器中在线运
  • 如何使用 python 模块的多个 git 分支?

    我想使用 git 来同时处理我正在编写的模块中的多个功能 我目前正在使用 SVN 只有一个工作区 因此我的 PYTHONPATH 上只有该工作区 我意识到这不太理想 所以我想知道是否有人可以建议一种更 正确 的方法来做到这一点 让我用一个假
  • 网页执行回发时如何停止在注册表单上?

    我正在做我的最后一年的项目 其中 我在一页上有登录和注册表单 WebForm 当用户点击锚点时Sign Up下拉菜单ddlType 隐藏 和文本框 txtCustName txtEmail and txtConfirmPassword 显示
  • 如何仅读取 CSV 文件每行的第一列 [重复]

    这个问题在这里已经有答案了 如何在Python中读取CSV文件每行的第一列 我的数据是这样的 1 abc 2 bcd 3 cde 我只需要循环第一列的值 另外 当我在 calc 中打开 csv 文件时 每行中的数据都在同一个单元格中 这正常
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css
  • 如何在不同的目录中执行python脚本?

    Solved对于可能觉得这有帮助的人 请参阅下面我的答案 我有两个脚本 a py 和 b py 在我当前的目录 C Users MyName Desktop MAIN 中 我运行 gt python a py 第一个脚本 a py 在我当前
  • 在Python中使用os.makedirs创建目录时出现权限问题

    我只是想处理上传的文件并将其写入工作目录中 该目录的名称是系统时间戳 问题是我想以完全权限创建该目录 777 但我不能 使用以下代码创建的目录755权限 def handle uploaded file upfile cTimeStamp

随机推荐

  • QT5.15以及QT VS TOOL安装教程(精简版)

    前言 大作业需要做一个图形化的计算器 不给用Java 又只学过C 所以投奔QT的怀抱 网上有些教程已经没法用了 还不更新 这是我刚摸出来的方法 2023 Apr 实测可用捏 欢迎补充指正 QT5 15下载安装教程 点击这个链接 Index
  • IOC/DI/AOP回顾

    IOC BeanFactory ClassPathXmlApplicationContext AbstractApplicationContext 通过调 refrech 方法 去实现ioc容器的初始化 然后执行三个步骤 1 定位 主要执行
  • shell 脚本中总是会忘记的一些语法总结!!!!

    一 cmd gt file 2 gt 1 与 cmd 2 gt 1 gt file 区别 1 cmd gt file 2 gt 1 的意思是标准输出和标准错误输出都定向到 file 等价于 cmd gt file 或 cmd gt file
  • 【ML特征工程】第 6 章 :降维:用 PCA 压缩数据薄饼

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • 请确保您已登录客户机操作系统。在客户机中装载虚拟CD驱动器,启动终端,使用tar解压...

    参考文档 官网指导文档 linux公社参考文档 转载于 https www cnblogs com bigorang p 10839217 html
  • QT创建计算器 [数据库实验课]

    QT创建计算器 数据库实验课 前言 qt我没有系统的学习过 所以对很多细节都很不清楚 今天写这个计算器 遇到了好多问题 问题 上课的时候老师做c 示例的时候 老师是在每一个0 9的按钮里 都双击添加函数的 然后我就想到当时写Java计算器的
  • 第二章:预备知识整理 ——2.1数据操作

    数据操作的课后练习题 2 1 8 练习 运行本节中的代码 将本节中的条件语句 X Y 更改为 X lt Y 或 X gt Y 然后看看你可以得到什么样的张量 用其他形状 例如三维张量 替换广播机制中按元素操作的两个张量 结果是否与预期相同
  • 解决eclipse maven 项目重新下载包这个问题

    本文转载至 http www cnblogs com huzi007 p 5602063 html 问题 eclipse项目使用maven下载依赖包 但是有时候断网什么来着就不会自动下载了 挺蛋疼了 所以 需要我们重新更新项目下载呢 首先是
  • Android PowerSupply (四)ChargeIC SGM41511 IC driver调试

    目录 Android PowerSupply 一 总概 Android PowerSupply 二 power supply core Android PowerSupply 三 power supply sys Android Power
  • IDEA 自动生成 serialVersionUID 的设置

    1 没有设置之前 选中对应的类名 然后按 alt enter 快捷键 的情况如下所示 2 设置自动生成 serialVersionUID 的方式如下图所示 关键点已逐个标识 3 设置之后 选中对应的类名 然后按 alt enter 快捷键
  • 分布式版本控制工具--Git

    分布式版本控制 Git的灵魂使用 版本控制简介 集中式版本控制 分布式版本控制 Git安装 Git的常用命令 Git配置项 新建仓库 增加 删除文件 提交文件 Git分支 Git的标签 查看信息 远程同步 撤销 版本控制简介 集中式版本控制
  • Vector容器的底层实现

    Vector容器的底层实现 Vector 类成员 构造函数 拷贝构造函数和析构函数 迭代器 函数功能 完整代码 总结 Vector Vector同样是STL六大组件之一 简单来讲他就是一个封装了动态大小数组的顺序容器 同时他可以存入各种各样
  • vue elementUI实现双(多)列表格,内容均自定义

    需求类似这样的 使用普通table实现 样式需要自己设置 table class person info border 1 cellspacing 0 tbody tr th 档案编号 th td personInfo name td th
  • 巴比特

    摘要 之前 由于没法开放注册 中国大模型厂商其实一直束手束脚 而8月31日 北京 上海率先通过了大模型备案 这意味着 跑得快 的企业可以大胆向市场推出产品了 从靠PPT来嘴花花 到放开手脚大干一场 大模型厂商们走向了真正的战场 争用户 抢市
  • LeetCode (二)找出数组中多于半数的数字

    题目 给定一个大小为 n 的数组 找到其中的多数元素 多数元素是指在数组中出现次数 大于 n 2 的元素 解法 自己的解法 思路 for循环遍历存Map 记录key对应的Count 如果大于半数 返回 package com jzj stu
  • React v16.3新生命周期、性能优化及注意事项

    欢迎点击领取 前端面试题进阶指南 前端登顶之巅 最全面的前端知识点梳理总结 React Version 16 3版本对组件的生命周期函数进行了一些修改 在每个react组件中都有以下几个生命周期方法 我们应该掌握最新生命周期 学以致用 以达
  • mciSendString函数简介(播放音乐以及录音相关操作)

    函数功能 播放多媒体音乐 视频等 mciSendString是用来播放多媒体文件的API指令 可以播放MPEG AVI WAV MP3 等等 这个函数有自己的mci指令 可以通过不同的指令实现不同的功能 这里我会详细讲解mciSendStr
  • qemu 启动自定义文件系统命令

    kvm qemu aarch64 bin qemu system aarch64 M virt smp 8 cpu cortex a76 m 4G nographic kernel out kernel arm64 Image append
  • 对以太网粗略理解

    1 以太网定义 以太网 Ethernet 指的是由 Xerox公司创建并由Xerox Intel和 DEC公司联合开发的基带局域网规范 通用的以太网标准于1980年9月30日出台 是当今现有局域网采用的最通用的通信协议标准 是局域网的一种
  • html+css+javascript学习总结

    html用来写页面的结构和内容 css写样式和呈现效果 javascript写行为和动作 1 html常用标签 a 超链接 div 盒子 常用来控制样式的 ul ol 无序列表和有序列表 img 图片标签 button 按钮 form 表单