著崗位競爭的越來越激烈,而設計師掌握的技能要求也越多,設計師不光只會設計,而且也要懂(會)代碼(會手寫代碼更會加金的),所以我們要做一位懂代碼設計師,還好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小時內與您取得聯系。