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點擊事件，點擊隨機改變目標顏色。

總結

以上是生活随笔為你收集整理的实训DAY01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。