1. <html>
    2.     <head>
    3.     <title>这是我的第一个网页</title>
    4.     <meta charset="UTF-8">
    5.     </head>
    6.     <body>
    7.         HELLO WORLD!<br/>你好，HTML！
    8.         <p>这里是一个段落</p>
    9.         <p>这里第二个个段落</p>
    10.         <img src="imgs/girl.jpg" width="57" height="73" alt="这里是一张图片"/>
    11.         <h1>标题一</h1>
    12.         <h2>标题二</h2>
    13.         <h3>标题三</h3>
    14.         <h4>标题四</h4>
    15.         <h5>标题五</h5>
    16.         <h6>标题六</h6>
    18.         武林高手排行榜：
    19.         <ol type="A" start="3">
    20.             <li>扫地僧</li>
    21.             <li>萧远山</li>
    22.             <li>慕容博</li>
    23.             <li>虚竹</li>
    24.             <li>阿紫</li>
    25.         </ol>
    27.         武林大会人员名单：
    28.         <ul>
    29.             <li>乔峰</li>
    30.             <li>阿朱</li>
    31.             <li>马夫人</li>
    32.             <li>百世镜</li>
    33.         </ul>
    34.         你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>
    35.         <br/>
    36.         水分子：H<sub>2</sub>O<br/>
    37.         氧气的化学式：O<sup>2</sup>
    39.         5&lt;10
    40.         10&gt;5
    41.         5&le;10
    42.         10&ge;5
    43.         注册商标&reg;
    44.         版权符号&copy;
    46.         <span>赵又廷</span>，夺妻之仇。
    48.         <a href="http://www.baidu.com" target="_self">百度一下</a>
    50.     </body>
    52. </html>
    54. <!--
    55. 1）
    56. HTML语言是解释型语言，不是编译型语言
    57. 浏览器是容错的
    58. 2）
    59. heml页面由一对标签组成：<html></html>
    60. <html>称之为 开始标签
    61. </html>称之为 结束标签
    62. 3）
    63. title 网页的标题
    64. 4）
    65. 可以在meta标签中设置编码方式
    66. 5）
    67. <br/>表示换行。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面
    68. 6）
    69. p表示段落标签
    70. 7）
    71. img表示图片
    72.     src属性表示图片文件的路径
    73.     width和height表示图片的大小
    74.     alt表示图片的提示（有图片放上去的是title标签，alt是图片加载失败时的显示内容的标签）
    75. 8）
    76. 路径的问题：
    77.     1、相对路径
    78.     2、绝对路径
    79. 9）
    80. h1~h6：标题标签
    81. 10）
    82. 列表标签：
    83. -ol 有序列表
    84.     start表示从*开始，type显示的类型：A a I i（罗马数字） 1（default）
    85. -ul 无序列表
    86.     type disc（default），circle，square
    87. 11)u 下划线 b 粗体 i 斜体
    89. 12)上标 sup 下标 sub
    91. 13）HTML中的实体 小于号&lt;大于等于&ge;版权&copy;
    93. 14）span不换行的块标记
    95. 15）a 表示超链接
    96.         href链接的地址
    97.         target:
    98.             _self 在本窗口打开
    99.             _blank 在一个新窗口打开
    100.             _parent 在父窗口打开
    101.             _top 在顶层窗口打开
    103. 16）div层
    104. -->
    1. <html>
    2.     <head>
    3.     <title>表格标签的学习</title>
    4.     <meta charset="UTF-8">
    5.     </head>
    6.     <body>
    7.         <table border="1" width="600" cellspacing="0" cellpadding="4" >
    8.             <tr align="center">
    9.                 <th>姓名</th>
    10.                 <th>门派</th>
    11.                 <th>成名绝技</th>
    12.                 <th>内功值</th>
    13.             </tr>
    15.             <tr align="center">
    16.                 <td>乔峰</td>
    17.                 <td>丐帮</td>
    18.                 <td>降龙十八掌</td>
    19.                 <td>5000</td>
    20.             </tr>
    22.             <tr align="center">
    23.                 <td>虚竹</td>
    24.                 <td>灵鹫宫</td>
    25.                 <td>北冥神功</td>
    26.                 <td>15000</td>
    27.             </tr>
    28.             <tr align="center">
    29.                 <td>扫地僧</td>
    30.                 <td>少林</td>
    31.                 <td>七十二绝技</td>
    32.                 <td>未知</td>
    33.             </tr>
    34.         </table>
    35.         <hr/>
    37.         <table border="1" cellspacing="0" cellpadding="4" width="600">
    38.             <tr>
    39.                 <th>名称</th>
    40.                 <th>单价</th>
    41.                 <th>数量</th>
    42.                 <th>小计</th>
    43.                 <th>操作</th>
    44.             </tr>
    46.             <tr align="center">
    47.                 <td>菠萝</td>
    48.                 <td>5</td>
    49.                 <td>20</td>
    50.                 <td>100</td>
    51.                 <td><img src="imgs/del.png" width="24" width="24"></td>
    52.             </tr>
    53.             <tr align="center">
    54.                 <td>西瓜</td>
    55.                 <td>6</td>
    56.                 <td>6</td>
    57.                 <td>36</td>
    58.                 <td><img src="imgs/del.png" width="24" width="24"></td>
    59.             </tr>
    60.             <tr align="center">
    61.                 <td>苹果</td>
    62.                 <td>3</td>
    63.                 <td>15</td>
    64.                 <td>45</td>
    65.                 <td><img src="imgs/del.png" width="24" width="24"></td>
    66.             </tr>
    67.         </table>
    68.     </body>
    70. </html>
    72. <!--
    73. 17）表格    table
    74.     行        tr
    75.     列        td
    76.     表头列    th
    78.     table中有如下属性（虽然已经淘汰了）
    79.     -border：表格边框的粗细
    80.     -width：表的宽度
    81.     -cellspacing：单元格间距
    82.     -cellpadding：单元格填充
    84.     tr中有一个属性：align->center,left,right
    86.     rowspan：行合并
    87.     colspan：列合并
    88. -->
    1. <html>
    2.     <head>
    3.     <title>表格标签的学习</title>
    4.     <meta charset="UTF-8">
    5.     </head>
    6.     <body>
    7.         <form action="demo04.html" method="post">
    8.             昵称：<input type="text" name="nickName"/><br/>
    9.             密码：<input type="password" name="pwd"/><br/>
    10.             性别：<input type="radio" name="gender" value="male"/>男
    11.                   <input type="radio" name="gender" value="female" checked/>女<br/>
    12.             爱好：<input type="checkbox" name="hobby" value="basketball">篮球
    13.                   <input type="checkbox" name="hobby" value="football">足球
    14.                   <input type="checkbox" name="hobby" value="earth">地球<br/>
    15.             星座：<select name="star">
    16.                     <option>白羊座</option>
    17.                     <option>金牛座</option>
    18.                     <option>双子座</option>
    19.                     <option>天蝎座</option>
    20.                     <option>天秤座</option>
    21.                   </select><br/>
    22.             备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
    23.             <input type="submit" value="注册"/>
    24.             <input type="reset" value="重置"/>
    25.             <input type="button" value="这是一个普通按钮">
    26.         </form>
    27.     </body>
    29. </html>
    31. <!--
    32. 18）表单    form
    33. 19）input type="text" 表示文本框，其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
    34.     input type="password"表示密码框
    35.     input type="radio"表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果；可以通过checked属性设置默认选中的项
    36.     input type="checkbox" 表示复选框。name属性建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
    37.     select 表示下拉列表，每一个选项是option，其中value属性是发送给服务器的值，selected表示默认选中的项
    38.     textarea表示多行文本框（或者称之为文本域），它的value值就是开始结束标签之间的内容
    39.     input type="submit"表示提交按钮
    40.     input type="reset"表示重置按钮
    41.     input type="button"表示普通按钮
    42. -->

    总结：
    1、HTML是解释型的文本标记语言，不区分大小写
    2、html,head,title,meta,body,br,p,hr,div,table,form,u,i,b,sup,sub, ,span,ul,ol,li,tr,td,th,h1-h6,a,input,select,textarea,img
    2-1. html , head , title , meta , body , br , ul , ol , h1-h6 , a , img ,   , p , div , span
    2-2. table tr ,th ,td
    2-3. form(action=’’ , method=’post’) input type= “text, password, radio, checkbox, submit, button, reset”