HTML基础
什么是HTML?
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup Language。
它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 标签是由尖括号包围的关键词，比如 <html>，通常是成对出现的，比如 <b> 和 </b>。
HTML页面就是由许多标签组成的。我们的浏览器负责解析这些标签，从而为我们展示丰富的内容。
HTML 属性
属性一般描述于开始标签，属性总是以名称/值对的形式出现，比如：name="value"。
例如：下面a标签中的href就是a标签的一个属性。
<a href="http://www.runoob.com">这是一个链接</a>
下面从一个页面分析具体的HTML
下面具体的列出了测试代码的运行显示情况。可以很直观的看到各种常用HTML元素的使用情况。
这是个测试文章-文章标题
本篇文章列举了常用HTM的元素。
文章段落标签span这是个a标签，通常用来表示链接，href属性配置链接地址
文本格式化标签：定义粗体文本b。定义着重文字em。定义斜体字i。定义加重语气strong。定义下标字sub。定义上标字sup。定义插入字ins。定义删除字del。
“计算机输出”标签:定义计算机代码code定义键盘码kbd。定义计算机代码样本。samp
定义预格式文本pre。
引用、引用和术语定义:定义缩写abbr。
定义地址address。定义文字方向bdo。
定义长的引用blockquote。
定义短的引用语q。
定义引用、引证cite。定义一个定义项目dfn。
<!-这个换行符->
<!-这个分隔线符->
- 这是无序列表ul
- 这是无序列表ul
- 这是有序列表ol
- 这是有序列表ol
表格：
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
下面的代码为测试文章代码，可对比观看就可知道：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>这是个测试文章-文章标题</h1> 9 <p>本篇文章列举了常用HTM的元素。</p> 10 <p id="pp">文章段落标签<span>span</span><a href="http://www.w3school.com.cn">这是个a标签，通常用来表示链接，href属性配置链接地址</a></p> 11 <p>文本格式化标签：<b>定义粗体文本b。</b><em>定义着重文字em。</em><i>定义斜体字i。</i><strong>定义加重语气strong。</strong><sub>定义下标字sub。</sub><sup>定义上标字sup。</sup><ins>定义插入字ins。</ins><del>定义删除字del。</del></p> 12 <p>“计算机输出”标签:<code>定义计算机代码code</code><kbd>定义键盘码kbd。</kbd><samp>定义计算机代码样本。samp</samp><pre>定义预格式文本pre。</pre></p> 13 <p>引用、引用和术语定义:<abbr>定义缩写abbr。</abbr><address>定义地址address。</address><bdo>定义文字方向bdo。</bdo><blockquote>定义长的引用blockquote。</blockquote><q>定义短的引用语q。</q><cite>定义引用、引证cite。</cite><dfn>定义一个定义项目dfn。</dfn></p> 14 <br/><!-这个换行符-> 15 <hr/><!-这个分隔线符-> 16 17 <ul> 18 <li>这是无序列表ul</li> 19 <li>这是无序列表ul</li> 20 </ul> 21 22 <ol> 23 <li>这是有序列表ol</li> 24 <li>这是有序列表ol</li> 25 </ol> 26 <dl> 27 <dt>这是个自定义列表dl</dt> 28 <dd>具体项目</dd> 29 <dt>Milk</dt> 30 <dd>White cold drink</dd> 31 </dl> 32 <img src="pikaqiu.ico" alt="图片显示"> 33 <form> 34 <!-- ------------------------------------------------------> 35 <fieldset> 36 <legend>文本输入样例组</legend> 37 <label>文本输入框：</label><input id='i1' type="text" value="原始字符" placeholder="这是提示信息"/><br> 38 <label>密码框：</label><input id='i2' type="password" value="123" /><br> 39 <label>email：</label><input type="email" value="12@qq.com"/><br> 40 <label>多行文本输入：</label><textarea id="i3" placeholder="这是提示信息">value </textarea><br> 41 <label>url：</label><input type="url" value="www.test.com"/><br> 42 <label>颜色：</label><input type="color" /><br> 43 <label>文件：</label><input type="file" /><br> 44 45 </fieldset> 46 <!-----------------------chexkbox-----------------------------> 47 <fieldset> 48 <legend>选择样例组</legend> 49 <ul id="check-box"> 50 复选框： 51 <li><input type="checkbox" value="1" checked="checked"/>篮球</li> 52 <li><input type="checkbox" value="2"/>足球</li> 53 <li><input type="checkbox" value="3"/>排球</li> 54 </ul> 55 <ul id="radio-test"> 56 单选框： 57 <!--name一样才能同组互斥--> 58 <li><input type="radio" value='11' name="text" checked="checked"/>男</li> 59 <li><input type="radio" value='22' name="text"/>女</li> 60 <li><input type="radio" value='33' name="text"/>人妖</li> 61 </ul> 62 select下拉选择框： 63 <select id="select-test"> 64 <option value="11">北京</option> 65 <option value="22" selected="selected">上海</option> 66 <option value="33">广州</option> 67 <option value="44">深证</option> 68 </select> 69 </fieldset> 70 <fieldset> 71 <legend>按钮样例组</legend> 72 <input type="button" value="普通按钮"/> 73 <input type="submit" value="提交按钮"/> 74 <input type="image" src="submit.gif" alt="图像按钮"/> 75 <input type="reset" value="重置按钮"/> 76 </fieldset> 77 </form> 78 <hr/> 79 表格： 80 <table border="1"> 81 <tr> 82 <th>表头</th> 83 <th>表头</th> 84 </tr> 85 <tr> 86 <td>单元格</td> 87 <td>单元格</td> 88 </tr> 89 </table> 90 </body> 91 </html>
