html常见元素分为HEAD内的元素和BODY内的元素，其中HEAD中的元素不直接显示在网页中，BODY内的元素直接体现在网页中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- 编码 UTF-8编码能满足大部分中文网站的 --> 5 <meta charset="UTF-8"> 6 <!-- 移动端不可缩放,默认页面宽度等于设备宽度，否则影响页面阅读 --> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>网页标题</title> 9 <style> 10 /* CSS样式 */ 11 </style> 12 <!-- 外部引入CSS样式 --> 13 <link rel="stylesheet" href=""> 14 <script> 15 // JavaScript代码 16 </script> 17 <!-- 基本地址所有的地址以此地址为基本地址 --> 18 <base href=""> 19 </head> 20 <body> 21 <!-- 布局相关 --> 22 <div></div> 23 <section></section> 24 <article></article> 25 <aside></aside> 26 <header></header> 27 <footer></footer> 28 29 <!-- 段落 --> 30 <p></p> 31 32 <span></span> 33 <em></em> 34 <strong></strong> 35 36 <!-- 表格相关 --> 37 <table> 38 <thead></thead> 39 <tbody> 40 <tr> 41 <td></td> 42 <td></td> 43 <td></td> 44 </tr> 45 </tbody> 46 </table> 47 48 <!-- 列表相关 --> 49 <ul> 50 <li></li> 51 <li></li> 52 <li></li> 53 </ul> 54 <ol> 55 <li></li> 56 <li></li> 57 <li></li> 58 </ol> 59 <dl> 60 <dt>列表标题</dt> 61 <dd>列表内容</dd> 62 <dd>列表内容</dd> 63 ... 64 </dl> 65 66 <!-- 超链接 --> 67 <a href=""></a> 68 69 <!-- 表单相关 --> 70 <form action=""> 71 <input type="text"> 72 <select name="" id=""></select> 73 <textarea name="" id="" cols="30" rows="10"></textarea> 74 <button></button> 75 </form> 76 </body> 77 </html>
html重要属性如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML元素的重要属性</title> </head> <body> <!-- HREF 规定链接指向的页面的 URL --> <!-- _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。 _parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。 _top 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。 提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符 --> <a href="http://www.baidu.com" target="_blank">新窗口打开</a>
<!--src为图片地址alt为图片加载失败之后显示的内容--> <img src="" alt=""> <table border="1" style="width:300px;height: 300px;"> <tr> <td colspan="3">合并第一行三列</td> </tr> <tr> <td rowspan="2">合并两行</td> <td>123</td> <td>12312</td> </tr> <tr> <td>12321</td> <td>12313</td> </tr> </table> <!-- 表单 action:规定当提交表单时向何处发送表单数据。 target:规定在何处打开url _blank _self _parent _top enctype:规定在发送表单数据之前如何对其进行编码。 值 描述 application/x-www-form-urlencoded 在发送前编码所有字符（默认） multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 text/plain 空格转换为 "+" 加号，但不对特殊字符编码。 --> <form action="" target="" enctype=""></form> <!-- type:inut元素的类型 button 按钮 checkbox 复选框 file 文件选择 hidden 隐藏域 password 密码输入框 radio 单选框 reset 重置form表单数据 submit 提交表单数据form text 文本输入 value为指定input元素的值 --> <input type="text" value="123"> <!-- button type为 button 普通按钮 reset 重置表单 submit 提交表单 --> <button type="button">普通按钮</button> <!-- 下拉选择框 option value为下拉选择的值 --> <select> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select> <!-- label for 某元素ID 点击label后直接选中该元素 --> <input type="radio" id="radio1"> <label for="radio1">点击后直接选中radio1</label> </body> </html>
| html4 | xhtml | html5 | |
| 严格模式 |
|
|
-------- |
| 松散模式 |
|
|
|
原文：https://www.cnblogs.com/qianduan888/p/12245844.html