image.png

HTML

  1. HTML是解释性语言，Java是编译性语言
  2. 能够决定页面上能够展示那些内容

第一个HTML程序

  1. 源码文件：demo01.html

  2. 笔记：

  1. <html>
  2.   <head>
  3.     <title>这是我的第一个网页</title>
  4.     <meta charset="UTF-8">
  5.   </head>
  6.   <body>
  7.     <!--
  8.   HELLO WORLD!<br/>你好，HTML！
  9.   <p>这里是一个段落</p>
  10.   <p>这里是第二个段落</p>
  11.   <img src="D:\sgg2021\0927_javaweb\1109\02.代码\imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
  12.   <h1>标题一</h1>
  13.   <h2>标题一</h2>
  14.   <h3>标题一</h3>
  15.   <h4>标题一</h4>
  16.   <h5>标题一</h5>
  17.   <h6>标题一</h6>
  18.   -->
  19.     武林高手排行榜:
  20.     <ol type="i" start="3">
  21.       <li>扫地僧</li>
  22.       <li>萧远山</li>
  23.       <li>慕容博</li>
  24.       <li>虚竹</li>
  25.       <li>阿紫</li>
  26.     </ol>
  27.     武林大会人员名单：
  28.     <ul type="circle">
  29.       <li>乔峰</li>
  30.       <li>阿朱</li>
  31.       <li>马夫人</li>
  32.       <li>白世镜</li>
  33.     </ul>
  35.     你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？
  36.     <br/>
  38.     水分子的化学式： H<sub>2</sub>O <br/>
  39.     氧气的化学式： O<sup>2</sup><br/>
  41.     5&lt;10
  42.     10&gt;5
  43.     5&le;10
  44.     10&ge;5
  45.     注册商标 &reg;
  46.     版权符号 &copy;
  48.     <span>赵又廷</span>，夺妻之仇。
  50.     <a href="http://www.baidu.com" target="_self">百度一下</a>
  55.   </body>
  56. </html>

表格（table）

  1. 快捷键

ctrl+b 可以在editplus 里面先预览 写好的代码

  1. 源码文件：demo_02

  2. 学习内容：

  • 笔记

  • 源码

    1. <html>
    2. <head>
    3.   <title>表格标签的学习</title>
    4.   <meta charset="UTF-8">
    6. </head>
    7. <body>
    8.   <table border="1" width="600" cellspacing="0" cellpadding="4">
    9.     <tr align="center">
    10.       <th>姓名</th>
    11.       <th>门派</th>
    12.       <th>成名绝技</th>
    13.       <th>内功值</th>
    14.     </tr>
    15.     <tr align="center">
    16.       <td>乔峰</td>
    17.       <td>丐帮</td>
    18.       <td>少林长拳</td>
    19.       <td>5000</td>
    20.     </tr>
    21.     <tr align="center">
    22.       <td>虚竹</td>
    23.       <td>灵鹫宫</td>
    24.       <td>北冥神功</td>
    25.       <td>15000</td>
    26.     </tr>
    27.     <tr align="center">
    28.       <td>扫地僧</td>
    29.       <td>少林寺</td>
    30.       <td>七十二绝技</td>
    31.       <td>未知</td>
    32.     </tr>
    33.   </table>
    34.   <hr/>
    35.   <table border="1" cellspacing="0" cellpadding="4" width="600">
    36.     <tr>
    37.       <th>名称</th>
    38.       <th>单价</th>
    39.       <th>数量</th>
    40.       <th>小计</th>
    41.       <th>操作</th>
    42.     </tr>
    43.     <tr align="center">
    44.       <td>苹果</td>
    45.       <td rowspan="2">5</td>
    46.       <td>20</td>
    47.       <td>100</td>
    48.       <td><img src="imgs/del.jpg" width="24" height="24"/></td>
    49.     </tr>
    50.     <tr align="center">
    51.       <td>菠萝</td>
    52.       <td>15</td>
    53.       <td>45</td>
    54.       <td><img src="imgs/del.jpg" width="24" height="24"/></td>
    55.     </tr>
    56.     <tr align="center">
    57.       <td>西瓜</td>
    58.       <td>6</td>
    59.       <td>6</td>
    60.       <td>36</td>
    61.       <td><img src="imgs/del.jpg" width="24" height="24"/></td>
    62.     </tr>
    63.     <tr align="center">
    64.       <td>总计</td>
    65.       <td colspan="4">181</td>
    66.     </tr>
    67.   </table>
    68. </body>
    69. </html>

表单(Form）

  1. 源码文件：demo03.html、demo04.html

  2. 学习内容：

action： 在html中，acton的意思是提交行为的意思，action属性用于规定当提交表单时，向何处发送表单数据
method：语法：


属性值：

  • GET：在方法中，提交后，表单值将在新浏览器中显示选项卡的地址。它的大小限制为大约 3000 个字符。只是对非安全数据有用，而不是对敏感信息有用。
  • POST在方法中，提交后，形式值将不会在新选项卡地址的正文后显示，因为它在方法中获取更多信息。 。此方法不支持将结果添加为限制。

    • 笔记：

  • 源码：

    1. <html>
    2.   <head>
    3.       <title>表单标签的学习</title>
    4.       <meta charset="UTF-8">
    6.   </head>
    7.   <body>
    8.       <form action="demo04.html" method="post">
    9.           昵称：<input type="text" value="请输入你的昵称"/><br/>
    10.           密码：<input type="password" name="pwd"/><br/>
    11.           性别：<input type="radio" name="gender" value="male"/>男
    12.                   <input type="radio" name="gender" value="female" checked/>女<br/>
    13.           爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
    14.                 <input type="checkbox" name="hobby" value="football" checked/>足球
    15.                 <input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
    16.           星座：<select name="star">
    17.                   <option value="1">白羊座</option>
    18.                   <option value="2" selected>金牛座</option>
    19.                   <option value="3">双子座</option>
    20.                   <option value="4">天蝎座</option>
    21.                   <option value="5">天秤座</option>
    22.                 </select><br/>
    23.           备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
    24.           <input type="submit" value=" 注 册 "/>
    25.           <input type="reset" value="重置"/>
    26.           <input type="button" value="这是一个普通按钮"/>
    27.       </form>
    28.   </body>
    29. </html>
  1. <html>
  2.     <head>
  3.         <title>表单标签的学习</title>
  4.         <meta charset="UTF-8">
  6.     </head>
  7.     <body>
  8.         <h1><font color='red'>注册成功</font></h1>
  9.     </body>
  10. </html>
  11. <!--

frameset（不重要，了解内容）

单词：review（复习）

  • 源码：demo05.html demo06.html

  • 课堂笔记：

frameset 表示页面框架 ， 这个标签已经淘汰，了解，不需要掌握
frame表示框架中的具体页面引用

  1. <html>
  2.     <head></head>
  3.     <frameset rows="20%,*" > <!-- frameborder="no" -->
  4.         <frame src="frames/top.html"/>
  5.         <frameset cols="15%,*">
  6.             <frame src="frames/left.html"/>
  7.             <frameset rows="80%,*">
  8.                 <frame src="frames/main.html"/>
  9.                 <frame src="frames/bottom.html"/>
  10.             </frameset>
  11.         </frameset>
  12.     </frameset>
  13. </html>

总结

  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,pasword,radio,checkbox,submit,button,reset”