当前位置:网站首页 / web前端 / 正文

AY H5笔记1

时间:2019年03月07日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 524次 | 评论 0

每天学2H web,2个月后做pc前端,手机app,处于.NET 尊重,我用core的web去测试了,不想用第三方文本编辑器,你以后vs code,hbuilder,webstorm,editplus,sublime啥的

记事本也可以写,我使用Core2.1,当然这时候3.0也出来了,需要vs2019

image.png

第一天AYH5STUDY_0307

建立空项目即可,不用docker,我自己玩,不https了。

image.png

肯定先静态了,

右键

image.png

默认结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

默认输出helloworld的

image.png

image.png

增加一个Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>测试Index</h1>
</body>
</html>

当然放到外面是没有用的。要拖到wwwroot里面,你也可以直接右键wwwroot文件夹新建文件

image.png    

运行,此时默认是Index.html页面的

image.png


增加一个JavaScript文件 1.js

var divxPos = 0;
window.onload = function () {
    runCode();
};
function runCode() {
    var test = document.getElementById("gogo");
    test.style.left = divxPos++ + 'px';
    setTimeout(() => runCode(), 50);
};
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="1.js"></script>
</head>
<body>
    <h1 id="gogo" style="position:absolute">测试Index</h1>
</body>
</html>

运行后,文字慢慢向右移动,因为left的属性越来越大

image.png

如果想使用其他页面

Startup下的Configure可以修改为

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            DefaultFilesOptions options = new DefaultFilesOptions();
            options.DefaultFileNames.Clear();
            options.DefaultFileNames.Add("Index01.html");
            app.UseDefaultFiles(options);
            app.UseStaticFiles();
        }

image.png



当然我们是学H5,这些不是重点,

H5+CSS3+Bootstrap4+vue+其他框架,可以做pc的web,可以做手机的app,可以做微信公众号等。


====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========


介绍

支持  

  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

或者

  <meta charset="utf-8" />

在vs2017中,输入html然后tab2下,就可以输出默认的html结构

输入html5然后tab2下,就是html5结构

不要在<html><head>和</head><body>和</body></html>中插入任何内容

写法不区分大小写。

验证规范:http://validator.w3.org


空元素,例如img只能<img />写法,不能<img></img>

area/base/br/col/command/embed/hr/img/input/keygen/link/mata/param/source/wbr

可以省略结束标签的

colgroup/dt/dd/li/optgroup/option/p/rt/rp/thhead/tbody/tfoot/tr/td/th

可以省略全部的, html head body colgroup tbody

例如

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title></title>
    <h1>测试Index01</h1>

支持boolean的值属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input checked type="checkbox" />
    <input readonly type="text" />
    <input disabled type="text" />
    <select style="width:100px">
        <option value="100"  selected >一百
        <option value="200"  >二百
    </select>
</body>
</html>

没用到后台代码的,不用F5重启解决方案,直接刷新浏览器就行了。

image.png

你可以完全标准的去写 selected="true"

你也可以空值,空代表true

image.png

如果属性名都不写,就代表false

还有些可以省略属性值的

checked , readonly, disabled,selected,defer,ismap,nohref,noshade,nowrap,multiple,noresize


有些值,还可以省略引号

比如<img src=ay.gif alt=ay2019>

还是建议使用双引号扩起来的,因为万一图片路径的某个文件夹名字有空格。



====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========



推荐您阅读更多有关于“web前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表