实训DAY01

HTML：

html 超文本标记语言
新建文件夹，把文件拉入到 sublime text3
sublime 右键新建文件 
给新文件命名 带后缀 保存
在创建的新html文件中 按tab补齐代码
双标签符合开闭原则 span标签没有效果 包裹文本可以加入style

pre有带格式的p标签 保留标签内文本的格式(缩进，换行，用来展示代码)

块级元素 默认占一整行 可设置宽高 <div></div>
行内块级 不占整行 可设宽高 <img src="">
行内元素 不占行 不设宽高  <span></span> 
3种元素只能嵌套自己或者下面的元素

<select><optgroup></optgroup><option></option>···</select>下拉菜单

<label>用户名：<input type="" name=""></label>
在label里面点用户名也可以获取输入框的焦点

css样式：

内联样式 元素内部
内部样式 <style type="text/css"></style>
外部样式 css文件 <link rel="stylesheet" type="text/css" href="">

margin 外边距
margin:5px 15px 25px 35px;上右下左

padding 内边距

boder-radius:  设置边框角弧度

float:right(left) 浮动 

position:
absolute 绝对定位 相对上一层祖先元素（外层框架）移动
relative 相对定位 相对自己 left则向右移动
fixed    固定定位 固定在浏览器某个位置

text-align：center 字体左右居中

行高等于高度时，字体上下居中
line-height:字体行高

5种css选择器
.class
#id
tagName 元素名
* 通配符
html,body,.box{}  分组选择器 3种都影响

 

JS：

typeof null; object 历史原因

document.getElementById('id名');

document.getElementsByClassName('类名');

div = document.getElementsByTagName('标签名');

var ele = document.querySelectorAll('*')  //通过css选择器 返回所有匹配元素

var h = document.getElementsByClassName('text');  console.log('h =>',h[2]); //多个text类，h为数组

h[i].onclick = function(e){
                var event=e||window.event;
                var target=event.target||event.srcElement;
                target.style.color="rgb("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+","+Math.random()+")";
                console.log(this);

}   event.target为事件目标，onclick点击事件，点击随机改变目标颜色。