微信扫码体验
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序介绍
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite_作者自评：
如何评价百家号Lite小程序热议话题「理想国真恵玩Web前端进阶之旅教程加源码第002天」
今天的内容是:em单位源码结构截图
运行效果截图
源码
源码内容,可直接复制粘贴到自己的IDE中运行
<!DOCTYPEhtml>
<html>
<head>
<metacharset=UTF8>
<title>em单位</title>
<styletype=text/css>
.box1{
fontsize:12px;
/*1em相当于一个文字的大小*/
textindent:2em;
width:20em;
height:10em;
backgroundcolor:gold;
} .box2{
/*如果不设置,会有默认大小,则1em等于默认文字大小*/
fontsize:40px;
textindent:2em;
width:20em;
height:10em;
backgroundcolor:yellowgreen; } /*通过设置以上两个样式进行测试,我们发现:*/
/*中文中1em代表一个普通字符大小*/
/*英文中1em代表2个普通字符大小*/ p{
fontsize:20px;
textindent:2em;
}
</style>
</head>
<body>
<div>
咱们用中文测试一下em的大小,查看缩进有多少个字
咱们用中文测试一下em的大小,查看缩进有多少个字
咱们用中文测试一下em的大小,查看缩进有多少个字
咱们用中文测试一下em的大小,查看缩进有多少个字
</div>
<br><br>
<div>
UseEnglishtotest
UseEnglishtotest
UseEnglishtotest
UseEnglishtotest
UseEnglishtotest
</div>
<p>
em单位是参照元素自身的文字大小来设置尺寸,
rem指的是参照根节点的文字大小
根节点指的是html标签,设置html标签的文字大小,其他元素相关尺寸用rem,这样
所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置
的大小
</p>
</body>
</html>
分割线~~~H5新增表单控件
源码结构截图
运行效果截图
源码
源码内容,可直接复制粘贴到自己的IDE中运行
<!DOCTYPEhtml>
<html>
<head>
<metacharset=UTF8>
<title>H5新增表单控件</title>
</head>
<body>
<formaction=>
<!网址标签,required表示必填,h5自带,还是很方便的>
<label>网址:</label><inputtype=urlrequired><br><br>
<!自带验证功能省却了很多写后台代码的麻烦,如果要自定义也可以提高开发效率推荐>
<label>邮箱:</label><inputtype=emailrequired><br><br>
<!自带选择器和下拉框>
<label>日期:</label><inputtype=date><br><br>
<!格式是时:分am/pm>
<label>时间:</label><inputtype=time><br><br>
<!格式是第几周,哪一年>
<label>星期:</label><inputtype=week><br><br>
<!是一个滑动块>
<label>范围:</label><inputtype=range><br><br>
<!和邮箱一样,自带校验>
<label>电话:</label><inputtype=tel><br><br>
<!是一个取色器>
<label>颜色:</label><inputtype=color><br><br>
<!没有发现特别大的区别>
<label>搜索:</label><inputtype=search><br><br>
<inputtype=text>
<inputtype=submitvalue=提交></form>
</body>
</html>分割线~~~rem单位
源码结构截图
运行效果截图
源码
源码内容,可直接复制粘贴到自己的IDE中运行
<!DOCTYPEhtml>
<!要设置rem,一定要对html设置大小,之后所有的rem值都是以这个为单位的>
<htmlstyle=fontsize:10px>
<head>
<metacharset=UTF8>
<title>rem单位</title>
<styletype=text/css>
.box1{
fontsize:12px;
/*这里的20rem=20x10px*/
width:20rem;
height:10rem;
backgroundcolor:333333;
margin:1rem;
} .box2{
fontsize:12px;
width:20rem;
height:10rem;
backgroundcolor:2aa198;
/*这里实际上是外边距为1x10px*/
margin:1rem;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>分割线~~~H5新增标签
源码结构截图
运行效果截图
源码
源码内容,可直接复制粘贴到自己的IDE中运行
<!DOCTYPEhtml>
<html>
<head>
<metacharset=UTF8>
<title>H5新增标签</title>
</head>
<body>
<!新增的标签没有任何样式,主要是为了方便结构清晰>
<header>新增了头部</header>
<nav>新增了导航</nav>
<footer>新增了底部</footer>
</body>
</html>分割线~~~HTML中使用JavaScript脚本的三种方法
源码结构截图
运行效果截图
源码
源码内容,可直接复制粘贴到自己的IDE中运行
<!DOCTYPEhtml>
<html>
<head>
<metacharset=UTF8>
<title>使用js的三种方法</title>
<!第三种,引入js文件,这个推荐,说明一下,在最新版本,中,js可以不写type>
<scriptsrc=js/lxgzhw.js></script><!第二种方法,直接写再页面上,和css一样,不推荐,不好维护>
<script>
alert('理想国真惠玩')
</script>
</head>
<body>
<!第一种方法,直接引入,不推荐,因为会不好维护>
<inputtype=buttonvalue=点击onclick=alert('理想国真惠玩')>
</body>
</html>分割线~~~JavaScript的变量什么和类型
源码结构截图
运行效果截图
源码
源码内容,可直接复制粘贴到自己的IDE中运行
<!DOCTYPEhtml>
<html>
<head>
<metacharset=UTF8>
<title>变量声明和类型</title>
<script>
vara=12;//数字类型
varb='理想国真惠玩';//字符串类型
varc=true;//布尔类型
//在JavaScript中,无需定义变量类型,一个var通用,能够自动推断出你设置的变量类型
alert(a);
alert(b);
alert(c);
</script>
</head>
<body></body>
</html>分割线~~~JavaScript获取页面元素源码结构截图
运行效果截图
源码
源码内容,可直接复制粘贴到自己的IDE中运行
<!DOCTYPEhtml>
<html>
<head>
<metacharset=UTF8>
<title>获取元素</title>
<script>
//为了保证代码的顺利执行,一般要加上这句
//这个代码的含义是,在整个文档加载完成一行再执行脚本
window.onload=function(){
//对于原生js,最好使用id来获取元素,这样不容易出错
varbox1=document.getElementById(box1);
box1.style.background='red';
box1.style.color='green';
box1.style.fontsize='30px';
box1.style.width='200px';
box1.style.height='200px';
box1.style.margin='50pxauto0';
}
</script>
</head>
<body>
<divid=box1>理想国真惠玩</div>
</body>
</html>分割线~~~希望对您有用~~~
该话题由百家号作者理想国真恵玩「简介:北京理想国恵玩科技有限公司！」
更多有关理想国真恵玩Web前端进阶之旅教程加源码第002天的话题讨论请访问百家号Litex小程序关注作者-理想国真恵玩
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite_使用指南：
步骤1：微信扫描「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序码即可使用;
步骤2：微信搜索「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序名称即可使用;
步骤3：微信网页访问即速商店-长按识别「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序码即可使用。
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite_服务声明：
本服务由「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序开发者向微信用户提供，并对本服务信息内容、数据资料及其运营行为等的真实性、合法性及有效性承担全部责任。
"「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite"由开发者"「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite"原创首发于微信小程序商店shop.jisuapp.cn，转载请注明出处。
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序截图
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序评分
共收到5条评价
5星3条
4星2条
3星0条
2星0条
1星0条
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序评论
海量浏览，人人体验
提交申请入驻催审,首页推荐
[G.L]☆_帝国2020-07-13 02:16:15
哎呦 还有这样的「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序 nice
〓荒漠メ屠夫〓2020-07-13 02:14:13
这么好用的「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序当然要分享给好朋友啦！
半学期努力、换张小破纸2020-07-13 02:05:18
这「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序长得好看，功能又多，还不占内存，很好很强势
寂寞在、空虚中度过2020-07-13 02:01:05
这「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite微信小程序颜值又高，功能又实用，秀外慧中，说的就是它！
三个人就是你死我活 *2020-07-13 02:01:01
这个「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序很实用，而且还不用我下载，棒！