前端Day1
本章內(nèi)容：
1.了解前端知識(shí)
2.學(xué)習(xí)HTML
3.學(xué)會(huì)制作一個(gè)網(wǎng)站界面
?
一.了解前端知識(shí)
什么是Html？
HTML是英文Hyper Text Mark-up Language(超文本標(biāo)記語(yǔ)言)的縮寫，他是一種制作萬(wàn)維網(wǎng)頁(yè)面標(biāo)準(zhǔn)語(yǔ)言（標(biāo)記）。相當(dāng)于定義統(tǒng)一的一套規(guī)則，大家都來(lái)遵守他，這樣就可以讓瀏覽器根據(jù)標(biāo)記語(yǔ)言的規(guī)則去解釋它。
瀏覽器負(fù)責(zé)將標(biāo)簽翻譯成用戶“看得懂”的格式，呈現(xiàn)給用戶！
?
?
Doctype
Doctype告訴瀏覽器使用什么樣的html或xhtml規(guī)范來(lái)解析html文檔
有和無(wú)的區(qū)別
這個(gè)屬性會(huì)被瀏覽器識(shí)別并使用，但是如果你的頁(yè)面沒(méi)有DOCTYPE的聲明，那么compatMode默認(rèn)就是BackCompat,這也就是惡魔的開(kāi)始 -- 瀏覽器按照自己的方式解析渲染頁(yè)面，那么，在不同的瀏覽器就會(huì)顯示不同的樣式。如果你的頁(yè)面添加了那么，那么就等同于開(kāi)啟了標(biāo)準(zhǔn)模式，那么瀏覽器就得老老實(shí)實(shí)的按照W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面，這樣一來(lái)，你的頁(yè)面在所有的瀏覽器里顯示的就都是一個(gè)樣子了。?
?
?
Meta(metadata information)
提供有關(guān)頁(yè)面的元信息，例：頁(yè)面編碼、刷新、跳轉(zhuǎn)、針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞
頁(yè)面編碼（告訴瀏覽器是什么編碼）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
刷新和跳轉(zhuǎn)
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
關(guān)鍵詞
< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >
描述
例如：cnblogs
微軟的IE6是通過(guò)XP、Win2003等操作系統(tǒng)發(fā)布出來(lái)，作為占統(tǒng)治地位的桌面操作系統(tǒng)，也使得IE占據(jù)了通知地位，許多的網(wǎng)站開(kāi)發(fā)的時(shí)候，就按照IE6的標(biāo)準(zhǔn)去開(kāi)發(fā)，而IE6自身的標(biāo)準(zhǔn)也是微軟公司內(nèi)部定義的。到了IE7出來(lái)的時(shí)候，采用了微軟公司內(nèi)部標(biāo)準(zhǔn)以及部分W3C的標(biāo)準(zhǔn)，這個(gè)時(shí)候許多網(wǎng)站升級(jí)到IE7的時(shí)候，就比較痛苦，很多代碼必須調(diào)整后，才能夠正常的運(yùn)行。而到了微軟的IE8這個(gè)版本，基本上把微軟內(nèi)部自己定義的標(biāo)準(zhǔn)拋棄了，而全面的支持W3C的標(biāo)準(zhǔn)，由于基于對(duì)標(biāo)準(zhǔn)徹底的變化了，使得原先在早期IE8版本上能夠訪問(wèn)的網(wǎng)站，在IE8中無(wú)法正常的訪問(wèn)，會(huì)出現(xiàn)一些排版錯(cuò)亂、文字重疊，顯示不全等各種兼容性錯(cuò)誤。
與任何早期瀏覽器版本相比，Internet Explorer 8 對(duì)行業(yè)標(biāo)準(zhǔn)提供了更加緊密的支持。 因此，針對(duì)舊版本的瀏覽器設(shè)計(jì)的站點(diǎn)可能不會(huì)按預(yù)期顯示。 為了幫助減輕任何問(wèn)題，Internet Explorer 8 引入了文檔兼容性的概念，從而允許您指定站點(diǎn)所支持的 Internet Explorer 版本。 文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現(xiàn)網(wǎng)站。 如果您的站點(diǎn)在 Internet Explorer 8 中無(wú)法正確顯示，則可以更新該站點(diǎn)以支持最新的 Web 標(biāo)準(zhǔn)（首選方式），也可以強(qiáng)制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點(diǎn)的方式來(lái)顯示內(nèi)容。 通過(guò)使用 meta 元素將 X-UA-Compatible 標(biāo)頭添加到網(wǎng)頁(yè)中，可以實(shí)現(xiàn)這一點(diǎn)。
當(dāng) Internet Explorer 8 遇到未包含 X-UA-Compatible 標(biāo)頭的網(wǎng)頁(yè)時(shí)，它將使用 指令來(lái)確定如何顯示該網(wǎng)頁(yè)。 如果該指令丟失或未指定基于標(biāo)準(zhǔn)的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網(wǎng)頁(yè)。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
?
Title
網(wǎng)頁(yè)頭部信息
<title>AbeoHu</title>顯示信息
?
Link
1.css
< link rel="stylesheet" type="text/css" href="css/common.css" >
2.icon
< link rel="shortcut icon" href="image/favicon.ico">
?
常用標(biāo)簽
標(biāo)簽一般分為兩種：塊級(jí)標(biāo)簽 和 行內(nèi)標(biāo)簽
- a、span、select 等
- div、h1、p 等
各種符號(hào)
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.htmlp 和 br
p表示段落，默認(rèn)段落之間是有間隔的！
br 是換行
<p>hello,<br>everyone</p>h1,h2,h3,h4,h5代表標(biāo)簽，加大加粗
<h1>A</h1><h2>A</h2><h3>A</h3><h4>A</h4><h5>A</h5><span>
白板自身不帶任何特性
<div>
白板自身不帶任何特性
<select>標(biāo)簽 multiple多選
上海 ? 北京 ? 廣州 ?上海 ? 北京 ? 廣州 ? 廣州 ?上海 ? 北京 ? 廣州 ? 廣州 ?石家莊 ? 邯鄲 ? ? 太原 ? 平遙 ? ?
<select name="city" size="4" multiple="multiple">?
<input>
輸入框，可以提交到后臺(tái)
?
類型：
?
Checkbox
表示多選
<p>愛(ài)好</p>籃球:<input type="checkbox"name="favor" value="1" />足球:<input type="checkbox"name="favor" value="2" />拍球:<input type="checkbox"name="favor" value="3" />羽毛球:<input type="checkbox"name="favor" value="4" />?
?
redio
表示單選，checked表示默認(rèn)選擇
男 女 保密
男 女 保密
?
text
表示文本框
<input type="text" name="user"/>passwd
表示密碼
<input type="password" name="pwd"/>button
代表圖標(biāo)
<input type="button" value="登陸1"/>submit
提交，可以跳轉(zhuǎn)，類似于登陸功能
<input type="submit" value="登陸1"/>file
選擇文件
?
<input type="file" value="選擇文件"/>?
提交文件時(shí)： enctype='multipart/form-data' method='POST'
標(biāo)簽：
textarea
多行輸入
<textarea></textarea>form
from表單，不管里面嵌套多少標(biāo)簽，提交只提交input
action代表提交位置
method代表方法 GET/POST方式不一樣
<form action="http://localhost:63347/index" method="POST">總結(jié)：
塊及標(biāo)簽：H系列，div標(biāo)簽，p標(biāo)簽
行內(nèi)標(biāo)簽：span，input，a標(biāo)簽
?
小作業(yè)：
要求：
第一個(gè)頁(yè)面：協(xié)議，選擇【我同意】進(jìn)入注冊(cè)頁(yè)面
第二個(gè)頁(yè)面：用戶名、密碼、重復(fù)密碼、省份（下拉菜單）、性別、愛(ài)好（多選），使用label來(lái)修飾。
?
CSS
代表在標(biāo)簽上設(shè)置style屬性（顏色，高度居中等等）
<div style="background-color: red;height: 48px" >2</div>屬性重用性：
選擇器：
笨方法，id重復(fù)：
<style>#i1{background-color: red;height: 48px}</style>類選擇器
class class可以重復(fù)
<head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: red;height: 48px}</style> </head> <body><div class="c1">2</div><div class="c1">2</div>>div 選擇所有包括div標(biāo)簽：
<head><meta charset="UTF-8"><title>Title</title><style>div{background-color: red;height: 48px}</style> </head>?
組合選擇器：
#i1，#i2
屬性選擇器：
根據(jù)標(biāo)簽里的屬性進(jìn)行篩選
<style>div[n="2"]{width:100px;height:200px}</style>?
邊框：
<body> <div style="border: 1px solid #ff8b8e ">ssss</div>> </body>類型：
height：高
width：寬
border：邊框
font-size：字體大小
text-align：居中
line-height：水平居中
font-weight：字體加粗
?
float
飄起來(lái)，兩個(gè)div合并
<div style="width: 20%;background-color: #0f0f0f">s</div><div style="width: 80%;background-color: red;float: left">s</div>去除body頂層一行
<body style="margin: auto">父與子：
<div style="width: 300px;border: 1px solid red;"><div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div><div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>?
display
display：inline轉(zhuǎn)換行內(nèi)標(biāo)簽
block：轉(zhuǎn)換成塊標(biāo)簽
inline-block：具有所有inline屬性和自己設(shè)定的block屬性
none：讓標(biāo)簽小時(shí)
?
padding，margin邊距
內(nèi)邊距，外邊距
外邊距：外部增加距離
內(nèi)邊距：內(nèi)部增加距離
font-weight
轉(zhuǎn)載于:https://www.cnblogs.com/AbeoHu/p/6042337.html
總結(jié)
- 上一篇： HDU 2444：The Accomod
- 下一篇： HTML5 - Canvas动画样例（谷