整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
著崗位競爭的越來越激烈，而設(shè)計(jì)師掌握的技能要求也越多，設(shè)計(jì)師不光只會設(shè)計(jì)，而且也要懂（會）代碼（會手寫代碼更會加金的），所以我們要做一位懂代碼設(shè)計(jì)師，還好Jason在大學(xué)學(xué)過代碼，畢業(yè)也做過一段時(shí)間的設(shè)計(jì)+前端，我將我在代碼方面的知識總結(jié)分享給大家，趕緊往下看吧
基礎(chǔ)認(rèn)識
html語句是由標(biāo)簽+屬性構(gòu)成的
html 標(biāo)簽由開始標(biāo)簽和結(jié)束標(biāo)簽組成，開始標(biāo)簽是被括號包圍的元素名，結(jié)束標(biāo)簽是被括號包圍的斜杠和元素名，但某些 html 元素沒有結(jié)束標(biāo)簽，比如 <br />、<img>，這類標(biāo)簽稱為單標(biāo)簽。
屬性的語法
1、寫在標(biāo)簽的<>內(nèi)，而且在標(biāo)簽代碼之后，如<p *></p>
2、屬性名=""(一定得是英文的引號，不能是中文的引號。其實(shí)不用引號對于它的顯示沒有影響，但加上引號為標(biāo)準(zhǔn)做法)
如 align="center" align為屬性名 center left right是屬性值
3、有的標(biāo)簽沒有任何屬性（<br>），有的標(biāo)簽雖然有屬性，但可以不加上也不影響它的使用(<p></p>),但有的標(biāo)簽則是必須與屬性連用方能正常顯示(<a></a>)
網(wǎng)頁的基本結(jié)構(gòu)
<html>
<head></head>
<body></body>
</html>
html，head，body 是html代碼必不可少的三大標(biāo)簽，其中
html標(biāo)簽：用于定義html文件的標(biāo)簽，這個(gè)標(biāo)簽意味著這個(gè)文件是一個(gè)html文件
head標(biāo)簽：里面的內(nèi)容不能再瀏覽器中直接呈現(xiàn)，但它會用后臺運(yùn)作的方式為html頁面提供種種功能
body標(biāo)簽：里面出現(xiàn)的內(nèi)容會在瀏覽器中得到直接呈現(xiàn)，供讀者瀏覽
必須要記住的標(biāo)簽和屬性
放在<head></head>之間的
<title> </title>
<title> </title>標(biāo)簽定義html文檔的標(biāo)題。<title>與</title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。
<meta>標(biāo)簽
<meta>標(biāo)簽類可以插入很多很有用的元素屬性。常用的有以下四種：
<meta name="keywords" content="study,computer">
用來標(biāo)記搜索引擎在搜索你的頁面時(shí)所取出的關(guān)鍵詞。
<meta name="author" content=“wutao">
用來標(biāo)記文檔的作者。
<meta http-equiv=“content-type” content=“text/html; charset=gb2312”>
用來標(biāo)記你的頁面的解碼方式。
<meta http-equiv=“refresh” content=“5;url=http://www.xnc.edu.cn”>
用來自動刷新網(wǎng)頁
放在<body></body>之間的
與文字相關(guān)的標(biāo)簽
文字標(biāo)題
<h#> ... </h#>
#=1, 2, 3, 4, 5, 6
段(paragraph) <p>
空白占位符
換行<br>
文字的分區(qū)顯示
<div align=#> ... </div> (#=left, center, right)
<i> 顯示斜體文本效果。
<b> 呈現(xiàn)粗體文本效果。
<big> 呈現(xiàn)大號字體效果。
<small> 呈現(xiàn)小號字體效果。
無序列表
無序列表是由<ul>和<li>元素定義的:
<ul>
<li>sports</li>
<li> food </li>
<li> drink </li>
<li> friends </li>
</ul>
<ul>和<li>中均可加入type屬性，type的屬性值有：disc(圓)、circle（圓圈）、square（方塊）
有序列表 start 值為數(shù)字
有序列表由<ol>和<li>定義:
<ol>
<li>sports</li>
<li> drink</li>
<li> friends</li>
</ol>
....................................................................
我的微信公眾號：UI嚴(yán)選 —越努力，越幸運(yùn)
注意以下幾點(diǎn)：
示例：
let html = "";
for(var i=0;i<data.length;i++){
html += '<tr>'+
'<td>'+ data[i].appName +'</td>'+
'<td>'+ '<button type="button" onclick="edit('+JSON.stringify(data[i]).replace(/\"/g,"'")+')">按鈕1</button>'+'</td>'+
'<td>'+ "<button type='button' onclick='del("+JSON.stringify(data[i])+")'>按鈕2</button>"+'</td>'+
+'</tr>'
}
上述代碼中，使用了兩種不同的引號嵌套格式。按鈕1外層使用單引號，因此需要將JSON字符串中所有雙引號轉(zhuǎn)化成單引號，比較繁瑣。從語法角度考慮，JavaScript 字符串與 JSON 字符串的最大區(qū)別在于，JSON 字符串必須使用雙引號（單引號會導(dǎo)致語法錯(cuò)誤），因此不推薦此寫法。
推薦第二種寫法，直接在外層嵌套雙引號，無需進(jìn)行額外操作。
性為 HTML 元素提供附加信息。
HTML 屬性
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。
屬性實(shí)例
HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：
<a >This is a link</a>
更多 HTML 屬性實(shí)例
屬性例子 1:
<h1> 定義標(biāo)題的開始。
<h1 align="center"> 擁有關(guān)于對齊方式的附加信息。
屬性例子 2:
<body> 定義 HTML 文檔的主體。
<body bgcolor="yellow"> 擁有關(guān)于背景顏色的附加信息。
屬性例子 3:
<table> 定義 HTML 表格。（您將在稍后的章節(jié)學(xué)習(xí)到更多有關(guān) HTML 表格的內(nèi)容）
<table border="1"> 擁有關(guān)于表格邊框的附加信息。
HTML 提示：使用小寫屬性
屬性和屬性值對大小寫不敏感。
不過，萬維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。
始終為屬性值加引號
屬性值應(yīng)該始終被包括在引號內(nèi)。雙引號是最常用的，不過使用單引號也沒有問題。
在某些個(gè)別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：
name='Bill "HelloWorld" Gates'
HTML 屬性參考手冊
我們的完整的 HTML 參考手冊提供了每個(gè) HTML 元素可使用的合法屬性的完整列表：
下面列出了適用于大多數(shù) HTML 元素的屬性：
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
