01 前端篇（标签）
HTML：
- 標簽：
是由一對尖括號包裹的單詞構成
標簽不區分大小寫
標簽分為兩部分，開始標簽和結束標簽 <a></a>
自閉和標簽 <br/><hr/><inpt/><img/>
標簽可以嵌套，但不能交叉嵌套
所有標簽統分為塊級標簽和內聯標簽
- 標簽的屬性
一組鍵值對
只能出現在開始標簽，自閉和標簽
屬性名全部小寫，屬性值必須使用單引號或雙引號包裹 ?name = “lily”
如果屬性名和屬性值完全一樣，則直接寫屬性名即可。如 readonly
- ?<!DOCTYPE html> ：告訴瀏覽器以哪種規范
- head 標簽：
<meta>：自閉和標簽。 http-requiv、content；URL 和 name
????name：主要用于描述網頁。 ??keywords、description
????http-equiv：refresh、content-Type、X-UA-Compatible
<title></title>：標題
<link>：自閉和標簽 ??rel=”icon”?href = “jd.ico”??圖標
- body標簽：
<h1></h1>：從 1 到 6 ；塊級標簽
<p></p>：段落。換行+隔行； 塊級標簽
<br/>：換行
<hr/>：水平線
<b></b>：給自己加粗
<em></em>：變成斜體
<strike></strike>：去除。
<del></del>：去除
2<sub>3</sub>：下角標
2<sup>3</sup>：上角標
& nbsp; ：表示一個空格
& copy;：版權符號
& lt; ：< 符號
& gt; ： > 符號
<img src=”1.jpg”??width=”200px”?height=”200px”?alt=”hehe”?title=”girl”>：自閉和標簽,內聯標簽 ??alt 是加載失敗時顯示的內容
<a href=”http://www.baidu.com”?target=”_blank”?title=”hehe”>百度</a>：1. 超鏈接 2. 錨(#id)
?
<div></div>：沒有特殊的處理，控制一塊。 ?和<p></p>區別是沒有隔行
<span></span>：內聯標簽
塊級標簽（block）：自己獨占一行，即使沒有填滿。
內聯標簽（in-line）：和其它元素位于同一行，占的地方取決于文本
?
- 列表標簽：
<ul></ul> ?<li></li>： unordered list 無序列表
<ol></ol> ?<li></li>：有序列表
<dl></dl> ?<dt></dt> <dd></dd>
?
- 表格標簽：<table border=”1”> : <tr>: <td> <th> 合并單元格 rowspan colspan
- 表單標簽：<form>
????表單用于向服務器傳輸數據
????表單屬性：
????????method：?get：1.提交的鍵值對放在url 后面2. 安全性相對較差3. 對提交內容有長度限制 ?； post：1.提交鍵值對不在地址欄 2. 安全性相對較高 3. 提交內容長度理論上無限制
????????action：表單提交到哪里
????表單元素：
? ? ? ?1. ?<input>：自閉和標簽。 type、value、name
? ? ? ?2. ?<select></select>：?name、multiple、size
? ? ? ? ? ? ? <optgroup label=””></optgroup>
? ? ? ? ? ? ? <option value=””></option>
? ? ? ? 3. <textarea></textarea>：
? ? ? ?4. ?<label for=”www”></label> <input id=”www”?type=”text”> label 和 input進行一個關聯
?
div：
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>div</title><style>div{color: #cc3399;background-color: cadetblue;}span{color: green;background-color: pink;}#div1{color: antiquewhite;height: 500px;background-color: #cc3399;}#div2{height: 500px;background-color: pink;}#div3{height: 500px;background-color: yellow;}</style> </head> <body> hello world <h1>hello world</h1> <p>hello world</p> <!--<div style="color: yellow">hello div</div>--> hello before<div>hello div</div>hello after <span>hello span</span> <b>加粗</b> <em>斜體</em> <strike>不建議使用的 strike </strike> <del>delete</del> <br> 2<sub>3</sub> 2<sup>3</sup> hello world ©<h1> <img src="1.jpg" width="200px" height="200px" alt="hehe" title="girl"> <a href="http://www.baidu.com" target="_blank">百度</a> <br> <div id="div_top">top</div> <a href="#div1">第一章</a> <a href="#div2">第二章</a> <a href="#div3">第三章</a><div id="div1">第一章</div><a href="#div_top">返回</a> <div id="div2">第二章</div><a href="#div_top">返回</a> <div id="div3">第三章</div><a href="#div_top">返回</a> </body> </html>?
?
form：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form</title> </head> <body> <form action="127.0.0.1:8090/index" method="get"><p>姓名：<input type="text" name="username"></p><p>密碼：<input type="password" name="password"></p><p><input type="submit" value="submit"></p><p><input type="button" value="button"></p><p>hobby: basketball<input type="checkbox" name="hobby" value="1"></p><p>hobby: volleyball<input type="checkbox" name="hobby" value="2"></p><p>male<input type="radio" name="sex" value="0"></p><p>female<input type="radio" name="sex" value="1"></p><p>upload<input type="file"></p> </form> </body> </html>list：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>list</title> </head> <body> <ul><li>111</li><li>111</li><li>111</li><li>111</li> </ul><ol><li>222</li><li>222</li><li>222</li><li>222</li> </ol><dl><dt>第一章</dt><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dt>第二章</dt><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dt>第三章</dt><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd> </dl> </body> </html>?
?
轉載于:https://www.cnblogs.com/mlllily/p/10348838.html
總結
以上是生活随笔為你收集整理的01 前端篇（标签）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 训练指南 UVALive - 3713
- 下一篇： 2017年html5行业报告,云适配发布