初识前端——个人总结
生活随笔
收集整理的這篇文章主要介紹了
初识前端——个人总结
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML
網(wǎng)站建站流程：
?
WEB標(biāo)準(zhǔn)的概念及組成
（1）W3C( World Wide Web Consortium )萬(wàn)維網(wǎng)聯(lián)盟，創(chuàng)建于1994年是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。
W3C (制定了結(jié)構(gòu)(xhtml、xml)和表現(xiàn)(css)的標(biāo)準(zhǔn)，非贏利性的。)
（2）ECMA(European Computer Manufactures Association) 歐洲電腦場(chǎng)商聯(lián)合會(huì)。
ECMA制定了行為(DOM(文檔對(duì)象模型)，ECMAScript)標(biāo)準(zhǔn)
（3）WHATWG網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作小組是：
一個(gè)以推動(dòng)網(wǎng)絡(luò)HTML 5 標(biāo)準(zhǔn)為目的而成立的組織。在2004年，由Opera、Mozilla基金會(huì)和蘋(píng)果這些瀏覽器廠商組成。
HTML及相關(guān)概念的介紹
HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language) www萬(wàn)維網(wǎng)的描述性語(yǔ)言。
XHTML指可擴(kuò)展超文本標(biāo)記語(yǔ)言（標(biāo)識(shí)語(yǔ)言）（EXtensible HyperText Markup Language）是一種置標(biāo)語(yǔ)言，表現(xiàn)方式與超文本標(biāo)記語(yǔ)言（HTML）類(lèi)似，不過(guò)語(yǔ)法上更加嚴(yán)格。
HTML5指的是HTML的第五次重大修改（第5個(gè)版本）(HTML5 是 W3C 與 WHATWG 合作的結(jié)果)
三、相關(guān)軟件的應(yīng)用以及站點(diǎn)的創(chuàng)建
1) 站點(diǎn)的作用
A/ 用來(lái)歸納一個(gè)網(wǎng)站上所有的網(wǎng)頁(yè)、素材以及他們之間的聯(lián)系
B/ 規(guī)劃網(wǎng)站的所有內(nèi)容和代碼 整合資源
2)創(chuàng)建站點(diǎn)的步驟
創(chuàng)建網(wǎng)頁(yè)所需各個(gè)文件夾 css、js、images
3)文件的命名規(guī)則
a/ 件命名規(guī)則：用英文，不用中文
b/ 名稱(chēng)全部用小寫(xiě)英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；必須以英文字母開(kāi)頭。@#￥%……！ -_
c/ 網(wǎng)站的首頁(yè)必須命名為index.html不建議使用shouye.html
HTML基本結(jié)構(gòu)
?
定義文檔類(lèi)型 分為四種：Strict（嚴(yán)格型)、Trasitional（過(guò)渡型 常用這種）、Frameset（框架型）、手機(jī)瀏覽器DTD mobile.
HTML的基本語(yǔ)法:
1、<常規(guī)標(biāo)記>
<標(biāo)記 屬性=“屬性值” 屬性=“屬性值”></標(biāo)記>
例如：<head></head>
2.空標(biāo)記
<標(biāo)記 屬性=“屬性值” />
例如：<meta charset=”utf-8”> <br/>
說(shuō)明：
1.寫(xiě)在<>中的第一個(gè)單詞叫做標(biāo)記，標(biāo)簽，元素。
2.標(biāo)記和屬性用空格隔開(kāi)，屬性和屬性值用等號(hào)連接，屬性值必須放在“”號(hào)內(nèi)。
3.一個(gè)標(biāo)記可以沒(méi)有屬性也可以有多個(gè)屬性，屬性和屬性之間不分先后順序。
4.空標(biāo)記沒(méi)有結(jié)束標(biāo)簽，用“/”代替。
HTML常用標(biāo)記
1、文本標(biāo)題（h1-h6)
<h1>LOGO</h1> <h2>次要欄目或標(biāo)題-小標(biāo)題H2</h2> <h3>再次要欄目或分類(lèi)小標(biāo)題H3</h3> <h4>文中分類(lèi)小標(biāo)題H4</h4> <h5>二級(jí)標(biāo)題</h5> <h6>六級(jí)標(biāo)題</h6>html標(biāo)題標(biāo)簽使用原則：H1在一個(gè)網(wǎng)頁(yè)中最好只使用一次，如對(duì)一個(gè)網(wǎng)頁(yè)LOGO使用。?
?2、段落文本(p)?
<p>段落文本內(nèi)容</p> 標(biāo)識(shí)一個(gè)段落(段落與段落之間有段間距)?
?3、空格??
所占位置沒(méi)有一個(gè)確定的值,這與當(dāng)前字體字號(hào)都有關(guān)系.4、換行(br)
<br /> 換行是一個(gè)空標(biāo)記(強(qiáng)制換行)5、加粗 加粗有兩個(gè)標(biāo)記
A、<b>加粗內(nèi)容</b> B、<strong>加粗內(nèi)容</strong>6、傾斜
<em></em> ,<i></i>7、水平線
<hr />空標(biāo)記8、列表(ul,ol,dl)
HTML中有三種列表分別是：無(wú)序列表，有序列表，自定義列表 *無(wú)序列表 無(wú)序列表組成： <ul>(unordered list) <li></li> <li></li></ul> *有序列表 有序列表組成： <ol>(ordered list) <li></li> <li></li></ol> *自定義列表 <dl>(definition list) <dt>名詞</dt> <dd>解釋</dd> (definition description)?
?9、插入圖片
<img src="目標(biāo)文件路徑及全稱(chēng)" alt="圖片替換文本" title="圖片標(biāo)題" /> 注:所要插入的圖片必須放在站點(diǎn)下 title的作用: 在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示，鼠標(biāo)離開(kāi)就沒(méi)有了，HTML的絕大多數(shù)標(biāo)簽都支持title屬性，title屬性就是專(zhuān)門(mén)做提示信息的 alt的作用:alt屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息，它會(huì)直接輸出在原本加載圖片的地方。?
10、超鏈接的應(yīng)用
語(yǔ)法： <a href="目標(biāo)文件路徑及全稱(chēng)/連接地址" title="提示文本">鏈接文本/圖片</a> <a href="#"></a>空鏈接 屬性：target:頁(yè)面打開(kāi)方式，默認(rèn)屬性值_self。 屬性值：_blank 新窗口打開(kāi) <a href="#" target="_blank">新頁(yè)面打開(kāi)</a>?
11、div和span的用法
<div ></div>沒(méi)有具體含義，統(tǒng)稱(chēng)為塊標(biāo)簽， 用來(lái)設(shè)置文檔區(qū)域，是文檔布局常用對(duì)象<span> </span> 文本結(jié)點(diǎn)標(biāo)簽 可以是某一小段文本，或是某一個(gè)字。?
12、數(shù)據(jù)表格的作用及組成
作用：顯示數(shù)據(jù) 表格組成 <table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value"> <tr> <td></td> <td></td> </tr> </table>注：一個(gè)tr表示一行;一個(gè)td表示一列(一個(gè)單元格) *數(shù)據(jù)表格的相關(guān)屬性 1）width="表格的寬度" 2）height="表格的高度" 3）border="表格的邊框" 4）bgcolor="表格的背景色" bg=background 5）bordercolor="表格的邊框顏色" 6）cellspacing="單元格與單元格之間的間距" 7）cellpadding="單元格與內(nèi)容之間的空隙" 8）對(duì)齊方式：align="left/center/right"; 9)合并單元格屬性： colspan=“所要合并的單元格的列數(shù)"合并列;rowspan=“所要合并單元格的行數(shù)”合并行;?
13、表單的作用及組成
1)、表單框
<form name="表單名稱(chēng)" method="post/get" action=""></form>?
2）文本框
<input type="text" value="默認(rèn)值"/>?
3)密碼框
<input type="password" /> <input type="password" placeholder="密碼" />?
4)重置按鈕
<input type="reset" value="按鈕內(nèi)容" />
?5)按鈕
<input name="'" type="button" value=“按鈕內(nèi)容” /> <input name="'" type="submit" value=“按鈕內(nèi)容” /> <button></button>?
轉(zhuǎn)載于:https://www.cnblogs.com/4813html/p/10497750.html
總結(jié)
以上是生活随笔為你收集整理的初识前端——个人总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 获取金蝶云试用许可
- 下一篇： HTML textarea标签属性