html基礎(chǔ)
網(wǎng)頁=html + css + javascript (框架+樣式style+效果)
htlm 網(wǎng)頁元素內(nèi)容
css 控制網(wǎng)頁樣式(cascading style sheet)
javascript 操作網(wǎng)頁內(nèi)容,實(shí)現(xiàn)功能或者效果?
文件較大時(shí)有專門的css文件和js文件
基本的頁面中
UTF-8 國際編碼方式
GBK 國內(nèi)編碼方式
style 內(nèi)置樣式標(biāo)簽
script(css) 放在body的最后(1.渲染從上到下 2.在加載js時(shí)會阻礙渲染)
當(dāng)css放在body前面的原因
基本樣式和標(biāo)簽
doctype html 說明是html文檔
html ?head body title style script h1-h6 ?p(段落)
color background-color:#ffffff(白色) ?rgb{255,255,255} red(顏色的三種表示方法) rgba(255,255,255,0.3(透明度))
meta?
搜索引擎定義關(guān)鍵字
<meta name="keywords" content="前端 饑人谷">
網(wǎng)頁定義推送內(nèi)容
<meta name="description(描述內(nèi)容)" content="饑人谷,最專業(yè)的互聯(lián)網(wǎng)教育">
樣式的三種寫法和JS的兩種寫法
(瀏覽器缺省設(shè)置)設(shè)置默認(rèn)樣式
css的三中插入方法
1.外部樣式表
<link rel="stylesheet" type="text/css" herf="index.css"> ? ?(herf里面是文件的路徑 引用css 下面的js外部引用用src(resource資源))
放在head里面(其實(shí)放在那里都可以)
@import url{index2.css}另一種樣式寫入(一般不用)
2.內(nèi)部樣式表(位于標(biāo)簽內(nèi)部)
<style>
? ? ? ? ?p{
? ? ? ? ? ? color: red;
font-size:16px;
pading:4px:
border:1px solider black;
?}
</style>
3.內(nèi)聯(lián)樣式(在html元素(段落 )內(nèi)部)
<p style="color:bule font-size14px">段落</p>
js的兩種插入方法
1.內(nèi)部JS
<script>
? ? alert(1);
console.log(100)(在運(yùn)行時(shí)不會彈出警告框)
console.log(101)
var obj={
? ? ? ? ? ? name:"hunger"
? ? ? ? ? ? age:"100"
}
console.log(obj)
alert(obj)
注意alert和console.log的區(qū)別
2.外部JS
<script type="text/javascript" src="index.js">
</script>
CSS的一些寫法
字體
font-family
color
font-size (px與em的區(qū)別 ? em相對于父元素的大小 rem相對于根節(jié)點(diǎn)的大小)根節(jié)點(diǎn)不設(shè)置大小默認(rèn)為16px
風(fēng)格 font-style font-italic斜體 font-nomal正常?
粗體 font-weight:bold/*700*/
位置 text-algin:center文本居中(left right justifyify針對文字比較多時(shí)靠左自動對齊)
line-hight:2 (200%)行高是它字體本身的2倍 ?典型應(yīng)用:文字的垂直居中 (用在按鈕中比較多)
text-indent:2em 縮進(jìn)兩個(gè)字體寬度
word-wrap:break-word; 強(qiáng)行將一個(gè)長的話自動折行