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>