微信小程序>新闻>资讯>「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite
「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite-微信小程序

「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite

16

分类:新闻资讯

开发作者: 「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite

发布时间: 2019-04-02 00:01:42

更新时间: 2019-04-02 00:01:42

查看要求: 微信app最新版本

更多信息: 关于「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite

「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite-微信小程序二维码

微信扫码体验

「理想国真恵玩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小程序评分

0.0

共收到0条评价

5星0条

4星0条

3星0条

2星0条

1星0条

「理想国真恵玩Web前端进阶之旅教程加源码第002天」百家号Lite小程序评论

请给小程序评分

提交小程序关注微信

海量浏览,人人体验

提交申请

入驻催审,首页推荐