链接数据 文本链接 图片链接 2.属性 href属性 name属性 3，img标签属性 alt:替换文本属性 width：宽 height:高
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>Document</title> </head> <body> <table border="1">//border表格边框 <tr>//行 <td>单元格</td> <td>单元格</td> </tr> <tr>//行 <td>单元格</td> <td>单元格</td> </tr> <th></th> </table> <table border="1">//border表格边框 <tr> <th>单元</th>//表头 <th>单元</th> </tr> <tr>//行 <td>单元格</td> <td>单元格</td> </tr> <tr>//行 <td>单元格</td> <td>单元格</td> </tr> </table> <p>表格</p>//加表头 <table border="1">//border表格边框 <tr> <th>单元</th>//表头 <th>单元</th> </tr> <tr>//行 <td>单元格</td> <td>单元格</td> </tr> <tr>//行 <td>单元格</td> <td>单元格</td> </tr> </table> <table border="1">//border表格边框 <caption>单元表头</caption> <tr> <th>单元</th>//表头 <th>单元</th> </tr> <tr>//行 <td>单元格</td> <td>单元格</td> </tr> <tr>//行 <td>单元格</td> <td>单元格</td> </tr> </table> <table border="1">//border表格边框 <tr> <td> 表格一</td> <td>表格二</td> </tr> <tr> <td> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
</td> <td> 4 </td> </tr> </table>
<table border="1">//border表格边框 <tr> <td> 表格一</td> <td>表格二</td> </tr> <tr> <td> 单元格三 </td> <td> 单元格四 </td> </tr> </table>
<table border="1" cellpadding="10">//border表格边框 cellpadding单元格大小 <tr> <td> 表格一</td> <td>表格二</td> </tr> <tr> <td> 单元格三 </td> <td> 单元格四 </td> </tr> </table> <table border="1" cellspacing="10">//border表格边框 cellpadding单元格间距 <tr> <td> 表格一</td> <td>表格二</td> </tr> <tr> <td> 单元格三 </td> <td> 单元格四 </td> </tr> </table> <table border="1" bgcolor="black">//border表格边框 bgcolor单元格颜色 <tr> <td> 表格一</td> <td>表格二</td> </tr> <tr> <td> 单元格三 </td> <td> 单元格四 </td> </tr> </table> <table border="1" background="1.jpg">//border表格边框 bgcolor单元格颜色 </table> </body> </html>
列表、 <ol>有序列表 <ul>无序列表 <li>列表项 <dl>列表 <dt>列表项 <dd>描述
<!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>Document</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <ul type="disc">//实体圆 <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul type="circle">//空心圆 <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul type="square">//实体方块 <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <ol type="A">//大写ABCD <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <ol type="a">//小写ABCD <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <ol type="I">//大写I <li>1</li> <li>2</li> <li>3</li> <li>4</li> <ol type="i">//小写i <li>1</li> <li>2</li> <li>3</li> <li>4</li> <ol start="10">//定义从10开始 <li>1</li> <li>2</li> <li>3</li> <li>4</li> <ul>//无序列表的嵌套 <li>1</li> <ul> <li>11</li> <li>12</li> </ul> <li>2</li> <ul> <li>21</li> <li>22</li> </ul> <li>3</li> </ul> </ol> <dl>//自定义列表 <dt>1</dt> <dd>123</dd> <dt>2</dt> <dd>233</dd> <dt>3</dt> <dd>333</dd> </dl> </body> </html>
1.HTML块元素 显示时，通常以新行开始 如<h1> <p> <ul> 2.HTML内联元素 不会以新行开始 如<b><a><img> 3.HTML<div>元素 <div>元素被称为块元素，主要组合HTML元素的容器 4HTML<span>元素 是内联元素，可作为文本容器 <!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>Document</title> </head> <body> <!--块--> <p>123</p> <h1>1234</h1> <b>加重标签</b> <a>123</a>
<div>//配合样式 <p>12345</p> </div> <div>//div一般与span联用 <p><span>1234</span>123456</p> </div> </body> </html>
布局 <div> <!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>Document</title> <style type="text/css"> body{ margin:0px; } #container{ width: 100%; height:950px; background-color: darkgray; } #heading{ width: 100%; height:950px; background-color: aqua; } div#content_menu{ width:30%; height:80%; background-color: blue; float:left; } div#content_body{ width:70%; height:80%; background-color:red; float:left; } div#footing{ width:100%; height:10%; background-color:black; } </style> </head>
<body> <div id="container"> <div id="heading">头部</div> <div id="content_menu">内容菜单</div> <div id="content_body">内容主体</div> <div id="footing">底部</div>
</div> </body> </html>
