Web开发学习记录_web前端开发导师指导记录-CSDN博客

本文链接：https://blog.csdn.net/shichen501/article/details/50498379

Web开发学习记录

推荐编辑器
Sublime Text3
推荐插件安装： Emmet(点击查看使用方法)、Tag(自动补全)
安装方法(以Emmet为例)：
1. 打开Sublime Text3
2. Ctrl+`打开控制台
3. 输入以下代码(直接复制粘贴即可)
import urllib.request,os; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );> open(os.path.join(ipp, pf), ‘wb’).write(urllib.request.urlopen(‘http://sublime.wbond.net/’ + pf.replace(’ ‘,’%20’)).read())
4. 在Prefences–>Package Control打开插件管理界面
5. 删除所有文字输入Install Package打开安装插件界面
6. 搜索emmet安装即可

Web开发学习记录

HTML5

常用标签介绍

<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<nav> 标签定义导航链接的部分。

     <nav>
        <li>首页</li>
        <li>HTML5</li>
        <li>Javascript</li>
        <li>CSS3</li>
    </nav>

input类型

<input type="color" name="favcolor">
<input type="date" name="bday">
<input type="datetime" name="bdaytime">
<input type="datetime-local" name="bdaytime">
<input type="email" placeholder="email" name="email">               //自动验证格式是否正确;placeholder提示文字
<input type="month" name="bdaymonth">
<input type="number" name="quantity" step="2" min="1" max="5" value="2">
<input type="range" name="points" min="1" max="10">//显示为滑动条
<input type="search" name="googlesearch">
<input type="tel" name="usrtel">
<input type="url" name="homepage">
<input type="week" name="week_year">

video

<video src=".\mv.mp4" id="mv" controls="controls"></video>
//controls控制是否显示控制条

a
<a href="./log.html">返回</a>
form

<form  action="./video.html" method="post" autocomplete="on" >              //action为跳转页面;method为提交方法;autocomplete自动补全
    <label class="log">用户名:</label>
    <input type="email" placeholder="email"><br>
    <button type="submit">Submit</button> //提交按钮

JS

video

if(myVideo.paused){
            myVideo.play();
        }else{
            myVideo.pause();
        }

LocalStorage

localStorage.a="as";
localStorage.['item01']="as3";
localStorage.setItem('item01',10023);
localStorage.removeItem('a');
localStorage.clear();
localStorage.getItem(item01)

如何在JS更改CSS样式

对象调用属性

obj.style.display=""                //显示对象
obj.style.display="none"            //隐藏对象

设置对象属性

var obj=document.getElementById(id);
obj.setAttribute("class", "type2");

其他

在标签中调用js事件： οnclick=”function()”;
定义变量

var idfin=[];           //定义全局变量数组
var i=0;                //定义全局变量`

在JS中需要调用对象的id时:

onclick="function(event)";

var b1=document.getElementById(arg1.target.id);

加载界面时调用js:window.onload=function;
在js中打开本地页面self.location='recycle.html';
在新窗口打开页面window.open(url);
在js的对象内容中加入空格同样需要使用
在js中调用html的内容:obj.innerHTML

CSS

常用样式

position: absolute;                     //绝对定位，相对于父元素
float: left;                            //浮动方向
width: 150px;                           //可以设置为百分数
height: 500px;
top: 0px;
left: 0px;
background: #dddddd;
text-align: center;                     //居中
font-weight: bold;    
font-size: 70px;
line-height: 100px;                     //行高  
font-family: MicroSoft YaHei;
font: bold 15px/40px "microsoft yahei"; //简写
color: #FF00FF;     
border:1px solid #000000;               //边框属性
display:block;                          //将对象的表现类型设置为块状类型
margin-left:200px;                  
padding: 200px;                         //内容相对于控件的距离
z-index:-1;                             //属性参数值越大,则被层叠在最上面
vertical-align:middle                   //属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
{position:relative;left:0px;top:0px;}与{position:static}相同
内容的定位以内容的中心为校准点，块状元素的定位一边缘为校准点

在标签中直接设置CSS样式

<button style="position:absolute;top:510px;left:150px;background:#00FF00;font-size:28px;width:200px">撤销</button>

事件

拖拽事件

设置被拖拽控件属性draggable=”true”;设置开始拖拽事件 οndragstart=”drag(event)”
设置拖拽后放置位置
ondrop="drop(event)" ondragover="dragover(event)"
JS函数如下实现标签删除

    function drag (arg0) {
        arg0.dataTransfer.setData("id",arg0.target.id);
    }//将标志为id的数据赋予参数arg0的id
    function dragover(arg0) {
        arg0.preventDefault();//阻止默认事件
    }
    function drop (arg0) {
        arg0.preventDefault();//阻止默认事件
        var id=arg0.dataTransfer.getData("id");
        var b2=document.getElementById(id);
        b2.parentNode.removeChild(b2);//删除对象b2
    }

鼠标事件

函数	说明
onmousedown	在元素上按下鼠标
onmousemove	鼠标在元素上移动
onmouseout	鼠标移出元素
onmouseover	鼠标移动到元素。
onmouseup	在元素上释放鼠标