Hyper Text Markup Language(超文本标记语言) 简写:HTMLI
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如:文字如何处理，画面如何安排，图片如何显示等)

  1. <!DOCTYPE html> <!--声明-->
  2. <html lang="zh_CN"><!--html标签表示html开始 zh_CN表示中文 html标签中一般分为两部分，分别是：head和body-->
  3. <head> <!--表示头部信息，一般包含三部分：title标签，css样式，js代码-->
  4.     <meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符集-->
  5.     <title>JavaWeb学习</title> <!--标题-->
  7. </head>
  8. <body> <!--body标签是整个html页面显示的主体内容-->
  9. hello
  10. </body>
  11. </html>

标签

  • 标签名大小写不敏感

  • 标签可以拥有自己的属性

    • 基本属性：如：bgcolor=”red” 可以修改简单的样式效果
    • 事件属性：如：onclick=”alert(‘你好！’);” 可以直接设置响应后的代码

  • 分为单标签和双标签

    • 单标签格式：<标签名/>
    • 双标签格式：<标签名>…数据…</标签名>

标签实例

  • 标题标签是h1到h6（h1最大） 对齐属性：aline
  • 列表标签（li是列表项，type属性可以修改列表前的符号）
    • 无序列表 ul
    • 有序列表 ol
    • 定义列表
  1. <ul type="none">
  2.   <li>1</li>
  3.   <li>2</li>
  4.   <li>3</li>
  5.   <li>4</li>
  6. </ul>
  • img标签 （用来显示图片，src属性用来设置图片的路径， width和height属性用来设置图片大小，border用来设置图片边框，alt属性用来设置当指定路径找不到图片时，用来代替显示的文本内容）
  • 表格标签table（border设置边框，width设置宽度，height设置高度，aline设置表格相对于页面的对齐方式，cellspacing设置单元格间距）
    • tr是行标签
    • th是表头标签
    • td是单元格标签（aline设置单元格文本对齐方式，colspan属性设置单元格跨列，rowspan属性设置跨行）
    • b是字体加粗标签
  1. <table align="center" border="1" width="300" height="300" cellspacing="2">
  2.     <tr>
  3.         <th>1.1</th>
  4.         <th>1.2</th>
  5.         <th>1.3</th>
  6.     </tr>
  7.     <tr>
  8.         <td>2.1</td>
  9.         <td>2.2</td>
  10.         <td>2.3</td>
  11.     </tr>
  12.     <tr>
  13.         <td>3.1</td>
  14.         <td>3.2</td>
  15.         <td>3.3</td>
  16.     </tr>
  17. </table>
  • iframe标签，在一个html页面上打开一个小窗口加载一个单独的页面（src属性用来设置页面的路径， width和height属性用来设置窗口大小）

iframe标签与a标签组合使用：

  • 在iframe标签中使用name属性定义一个名称
  • 在a标签的target属性上iframe的name属性值
  • 表单标签，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。 ```html <!DOCTYPE html>

<!— form标签就是表单 input type=text 是文件输入框 value设置输入框中默认显示内容 input type=password 是密码输入框 value设置输入框中默认显示内容 input type=radio 是单选框 name属性可以对其进行分组，同组内单选只能选一个，checked=”checked”表示默认选中 input type=”checkbox” 是复选框，checked=”checked”表示默认选中 input type=”reset” 是重置按钮，value属性可以修改按钮上的文本 input type=”submit” 是提交按钮，value属性可以修改按钮上的文本 input type=”submit” 是按钮，value属性可以修改按钮上的文本 input type=”file” 是文件上传域 input type=”hidden” 是隐藏域，当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交时同样可以发送给服务器）

  1.     select标签是下拉列表框
  2.     option标签是下拉列表框中的选项 selected="selected"指默认选中
  4.     textarea表示多行文本输入框 rows属性设置可以显示几行的高度，cols设置每行可以显示几个字符宽度，起始标签和结束标签中的内容是默认值
  5. -->
  6. <form>
  7.     用户名称：<input type="text" value="默认值"/>
  8.     <br/>
  9.     用户密码：<input type="password"/>
  10.     <br/>
  11.     确认密码：<input type="password"/>
  12.     <br/>
  13.     性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女
  14.     <br/>
  15.     兴趣爱好：<input type="checkbox"/>Java<input type="checkbox"/>C++<input type="checkbox"/>JavaScript
  16.     <br/>
  17.     国籍：
  18.     <select>
  19.         <option>--请选择国籍--</option>
  20.         <option selected="selected">--中国--</option>
  21.         <option>--美国--</option>
  22.         <option>--日本--</option>
  23.     </select>
  24.     <br/>
  25.     自我评价：<textarea rows="10" cols="20">默认值</textarea>
  26.     <br/>
  27.     <input type="reset" value="重置按钮"/>
  28.     <input type="submit" value="提交按钮"/>
  29.     <input type="button" value="按钮"/>
  30.     <input type="file"/>
  31. </form>

  1. ```html
  2. <!DOCTYPE html> <!--声明-->
  3. <html lang="zh_CN"><!--html标签表示html开始 zh_CN表示中文 html标签中一般分为两部分，分别是：head和body-->
  4. <head> <!--表示头部信息，一般包含三部分：title标签，css样式，js代码-->
  5.     <meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符集-->
  6.     <title>JavaWeb学习</title> <!--标题-->
  8. </head>
  9. <body> <!--body标签是整个html页面显示的主体内容-->
  10.     <!--
  11.         form标签就是表单
  12.         input type=text 是文件输入框 value设置输入框中默认显示内容
  13.         input type=password 是密码输入框 value设置输入框中默认显示内容
  14.         input type=radio 是单选框 name属性可以对其进行分组，同组内单选只能选一个，checked="checked"表示默认选中
  15.         input type="checkbox" 是复选框，checked="checked"表示默认选中
  16.         input type="reset" 是重置按钮，value属性可以修改按钮上的文本
  17.         input type="submit" 是提交按钮，value属性可以修改按钮上的文本
  18.         input type="submit" 是按钮，value属性可以修改按钮上的文本
  19.         input type="file" 是文件上传域
  20.         input type="hidden" 是隐藏域，当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交时同样可以发送给服务器）
  22.         select标签是下拉列表框
  23.         option标签是下拉列表框中的选项 selected="selected"指默认选中
  25.         textarea表示多行文本输入框 rows属性设置可以显示几行的高度，cols设置每行可以显示几个字符宽度，起始标签和结束标签中的内容是默认值
  26.     -->
  27.     <form>
  28.         <h2 align="center">用户注册</h2>
  29.         <table align="center">
  30.             <tr>
  31.                 <td>用户名称：</td>
  32.                 <td><input type="text" value="默认值"/></td>
  33.             </tr>
  34.             <tr>
  35.                 <td>用户密码：</td>
  36.                 <td><input type="password"/></td>
  37.             </tr>
  38.             <tr>
  39.                 <td>确认密码：</td>
  40.                 <td><input type="password"/></td>
  41.             </tr>
  42.             <tr>
  43.                 <td>性别：</td>
  44.                 <td>
  45.                     <input type="radio" name="sex" checked="checked"/>男
  46.                     <input type="radio" name="sex"/>女
  47.                 </td>
  48.             </tr>
  49.             <tr>
  50.                 <td>兴趣爱好：</td>
  51.                 <td>
  52.                     <input type="checkbox"/>Java
  53.                     <input type="checkbox"/>C++
  54.                     <input type="checkbox"/>JavaScript
  55.                 </td>
  56.             </tr>
  57.             <tr>
  58.                 <td> 国籍：</td>
  59.                 <td>
  60.                     <select>
  61.                         <option>--请选择国籍--</option>
  62.                         <option selected="selected">--中国--</option>
  63.                         <option>--美国--</option>
  64.                         <option>--日本--</option>
  65.                     </select>
  66.                 </td>
  67.             </tr>
  68.             <tr>
  69.                 <td>自我评价：</td>
  70.                 <td><textarea rows="10" cols="20">默认值</textarea></td>
  71.             </tr>
  72.             <tr>
  73.                 <td><input type="reset" value="重置按钮"/></td>
  74.                 <td><input type="submit" value="提交按钮"/></td>
  75.             </tr>
  76.             <tr>
  77.                 <td><input type="button" value="按钮"/></td>
  78.                 <td><input type="file"/></td>
  79.             </tr>
  80.         </table>
  81.     </form>
  82. </body>
  83. </html>
  1. <!DOCTYPE html> <!--声明-->
  2. <html lang="zh_CN"><!--html标签表示html开始 zh_CN表示中文 html标签中一般分为两部分，分别是：head和body-->
  3. <head> <!--表示头部信息，一般包含三部分：title标签，css样式，js代码-->
  4.     <meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符集-->
  5.     <title>JavaWeb学习</title> <!--标题-->
  7. </head>
  8. <body> <!--body标签是整个html页面显示的主体内容-->
  9.     <!--
  10.         form标签是表单标签
  11.         action属性设置提交的服务器地址
  12.         method属性设置提交的方式GET（默认值）或POST
  14.         表单提交时，数据没有发送给服务器的三种情况：
  15.             1、表单项没有name属性值
  16.             2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
  17.             3、表单项不在提交的form标签中
  19.          get请求特点：
  20.             1、浏览器地址栏中的地址是：action属性[+?+请求参数]，请求参数的格式是：name=value&name=value
  21.             2、不安全
  22.             3、它有数据长度的限制
  24.          post请求特点：
  25.             1、浏览器地址栏中只有action属性值
  26.             2、相对于get请求要安全
  27.             3、理论上没有数据长度的限制
  29.     -->
  30.     <form action="http://www.baidu.com" method="get">
  31.         <input type="hidden" name="action" value="login">
  32.         <h2 align="center">用户注册</h2>
  33.         <table align="center">
  34.             <tr>
  35.                 <td>用户名称：</td>
  36.                 <td><input type="text" value="默认值"/></td>
  37.             </tr>
  38.             <tr>
  39.                 <td>用户密码：</td>
  40.                 <td><input type="password"/></td>
  41.             </tr>
  42.             <tr>
  43.                 <td>确认密码：</td>
  44.                 <td><input type="password"/></td>
  45.             </tr>
  46.             <tr>
  47.                 <td>性别：</td>
  48.                 <td>
  49.                     <input type="radio" name="sex" checked="checked"/>男
  50.                     <input type="radio" name="sex"/>女
  51.                 </td>
  52.             </tr>
  53.             <tr>
  54.                 <td>兴趣爱好：</td>
  55.                 <td>
  56.                     <input type="checkbox"/>Java
  57.                     <input type="checkbox"/>C++
  58.                     <input type="checkbox"/>JavaScript
  59.                 </td>
  60.             </tr>
  61.             <tr>
  62.                 <td> 国籍：</td>
  63.                 <td>
  64.                     <select>
  65.                         <option>--请选择国籍--</option>
  66.                         <option selected="selected">--中国--</option>
  67.                         <option>--美国--</option>
  68.                         <option>--日本--</option>
  69.                     </select>
  70.                 </td>
  71.             </tr>
  72.             <tr>
  73.                 <td>自我评价：</td>
  74.                 <td><textarea rows="10" cols="20">默认值</textarea></td>
  75.             </tr>
  76.             <tr>
  77.                 <td><input type="reset" value="重置按钮"/></td>
  78.                 <td><input type="submit" value="提交按钮"/></td>
  79.             </tr>
  80.             <tr>
  81.                 <td><input type="button" value="按钮"/></td>
  82.                 <td><input type="file"/></td>
  83.             </tr>
  84.         </table>
  85.     </form>
  86. </body>
  87. </html>
  • div标签默认独占一行
  • span标签，其长度是封装数据的长度

  • p段落标签，默认会在段落上方和下方各空出一行（如果已有就不再空行）

    相对路径和绝对路径

    JavaSE中相对路径和绝对路径

  • 相对路径:从工程名开始算

  • 绝对路径:盘符:/目录/文件名

    web中路径分为相对路径和绝对路径两种

  • 相对路径:

. 表示当前文件所在的目录
.. 表示当前文件所在的上—级目录
文件名 表示当前文件所在目录的文件,相当于 ./文件名 , ./可以省略

  • 绝对路径:

正确格式是: http://ip:port/工程名/资源路径

补充

  • 特殊字符要用字符实体表示
  • 连续的空白字符（空格、回车）也要用字符实体表示