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