JavaWeb 学习笔记

Posted Spring-_-Bear

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb 学习笔记相关的知识，希望对你有一定的参考价值。

一、HTML 和 CSS

  1. 引课
  2. BS 软件的架构
  3. 前端的开发流程
  • 美术实现（PS：网页设计师根据需求设计网页）-> 前端工程师（html：前端工程师将设计做成静态网页）-> java 程序员（JSP：后台工程师将页面修改为动态网页）
  1. 网页的组成部分
  • 内容（HTML）、结构（CSS）、行为（javascript）
  1. HTML 简介
  • HTML：Hyper Text Markup Language（超文本标记语言）
  1. 创建 HTML 页面
  2. html 的书写规范

  • 书写规范

    <!DOCTYPE html><!-- 约束，声明 -->
<html lang="zh_CN"><!-- html 标签一般包含两部分内容，head 和 body -->
<head><!-- 头部一般包含三部分内容，titile 标签、css 样式、js 代码 -->
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
HelloWorld
</body>
</html>
  1. HTML 标签的介绍

  • 标签名大小写不敏感

  • 标签拥有自己的属性

    基本属性：bgcolor=“red”

    事件属性：οnclick=“alert(‘你好!’);”

  • 标签的分类

    单标签格式：<标签名 /> 换行：<br /> 水平线：<hr />

    双标签格式：<标签名>data</标签名>

  1. HTML 标签的语法
  • 标签不能交叉嵌套、标签必须正确闭合、属性必须有值且用引号包括、注释不能嵌套
  1. font 标签
  • <font color="blue" face="Consolas" size="7">Spring-_-Bear</font>
  1. 特殊字符

  • 特殊字符

    >：&gt;

    <：&lt;

    空格：&nbsp;

  1. 标题标签 h1 - h6
  • <h1 align="center">Spring-_-Bear</h1>>
  1. 超链接标签
  • <a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
  1. 无序列表
  • <ul type="none">
    <li>Spring</li>
    <li>Bear</li>
</ul>
<ol>
    <li>Spring</li>
    <li>Bear</li>
</ol>
  1. img 标签
  • <img src="../images/BeFree.jpg" width="555" height="555" border="1"></img>
<img src="../images/BeFree1.jpg" width="555" height="555" border="1" alt="Image can't find"></img>
<img src="../images/CSDN.png" width="555" height="555" border="1"></img>

  • 绝对路径

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

    错误格式：盘符:/目录/文件名

  1. table 标签
  • <table width="333" height="333" border="1" cellspacing="0">
    <tr>
        <td align="center"><b>姓名</b></td>
        <th>性别</th>
        <th>生日</th>
    </tr>
    <tr>
        <td align="center"><b>lcx</b></td>
        <td align="center"><b>m</b></td>
        <td align="center"><b>2000-02-02</b></td>
    </tr>
    <tr>
        <td align="center"><b>hj</b></td>
        <td align="center"><b>w</b></td>
        <td align="center"><b>2021-08-31</b></td>
    </tr>
</table>
  1. 表格的跨行跨列

  • 合并单元格

    <table width="555" height="555" border="1" cellspacing="0" align="center">
    <tr>
        <th colspan="2">1.1</th>
        <th>1.2</th>
        <th>1.3</th>
        <th>1.4</th>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td rowspan="2" colspan="2" align="center">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
  1. iframe 标签介绍

  • iframe 标签可以在 html 页面上打开一个小窗口，去加载一个单独的页面

    <iframe width="333" height="333" name="abc"></iframe>
<ul>
    <li><a href="SpringBear.html" target="abc">Spring-_-Bear</a></li>
    <li><a href="SpringBear.html" target="abc">Spring-_-Bear</a></li>
    <li><a href="SpringBear.html" target="abc">Spring-_-Bear</a></li>
</ul>
  1. 表单显示

  • 表单就是 html 页面中用来收集用户信息的所有元素的集合，然后将这些信息发送给服务器

  • <form>
    用户名称：<input type="text" value="Please input"/><br/>
    用户密码：<input type="password"/><br/>
    确认密码：<input type="password"/><br/>
    性 别：<input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女<br/>
    兴趣爱好：<input type="checkbox"/>C <input type="checkbox"/>Java <input type="checkbox"/>Python<br/>
    国 籍：<select>
    <option>中国</option>
    <option>日本</option>
    <option>韩国</option>
    <option selected="selected">美国</option>
</select>
    <hr/>
    自我评价：<textarea rows="10" cols="10">积极向上好青年</textarea><br/><br/>
    <hr/>
    <input type="reset" value="重置">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
    <input type="file"><br/>
    <input type="button" value="按钮">
    <input type="hidden" value="hidden area">
</form>
  1. 表单格式化