• JavaWeb

    目录

    一、JavaWeb整体介绍

    1.1 网页的概念

    1.2 Web标准

    1.2.1 为什么需要Web标准

    1.2.2 Web标准的构成

    1.2.3 Web标准的构成

    二、HTML

    2.1 什么是HTML？

    2.2 HTML快速入门

    2.2.1 案例演示

    三、HTML基础标签

    3.1 部分基础标签

    3.2 代码骨架解释

    3.3 使用案例

    四、HTML图片、音频、视频标签

    4.1 标签属性

    4.2 尺寸单位

    4.3 资源路径

    4.4 使用案例

    五、超链接标签

    5.1 标签属性

    5.2 使用案例

    六、列表标签

    6.1 使用案例

    七、表格标签

    7.1 标签属性

    7.2 使用案例

    八、布局标签

    九、表单标签

    9.1 form标签属性

    9.2 使用案例

    十、表单项标签

    10.1 使用案例

    一、JavaWeb整体介绍

    1.1 网页的概念

    • 什么是网页

    1. 网站是指在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合

    2. 网页是网站中的一"页"，通常是HTML格式的文件，它需要通过浏览器来阅读

    3. 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm或 .html后缀结尾的文件，因此将其俗称为HTML文件

    1.2 Web标准

    Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

    1.2.1 为什么需要Web标准

     

    1.2.2 Web标准的构成

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面

    标准说明
    结构结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
    表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
    行为行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

    Web标准提出的最佳体验方案：结构、样式、行为相分离

    （简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中）

    1.2.3 Web标准的构成

    二、HTML

    2.1 什么是HTML？

    1. HTML是一门语言，所有的页面都是用HTML这门语言编写出来的

    2. HTML(HyperText Markup Language)：超文本标记语言

            ▶超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

            ▶标记语言：由标签构成的语言

    3. HTML运行在浏览器上，HTML标签由浏览器来解析

    4. HTML标签都是预定义好的。例如：使用<img>展示图片

    5. W3C标准：网页主要由三部分组成

            ▶结构：HTML

            ▶表现：CSS

            ▶行为：JavaScript

    2.2 HTML快速入门

    步骤：1. 新建文本文件，后缀名改为.html

               2. 编写HTML结构标签

               3. 在<body>中定义文字

    每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。如下图所示

    2.2.1 案例演示

    1. <html>
    2. 	<head>
    3. 		<title>HTML的快速入门</title>
    4. 	</head>
    5. 	<body>
    6. 		<font color="blue">咕咕猫~</font>
    7. 	</body>
    8. </html>

    三、HTML基础标签

    3.1 部分基础标签

    如有特殊字符，需要使用转义字符。

    3.2 代码骨架解释

    1. <!DOCTYPE html>   <!-- 本行代码意思是当前页面采取的是HTML5版本来显示网页-->
    2. <meta charset="UTF-8">  <!-- 本行代码的意思是页面的字符集采用UTF8-->
    3. <html lang="en">  <!-- 用来定义当前文档显示的语言 en定义语言为英文，zh-CN定义语言问中文-->
    4. <p>这是段落标签</p>
    5. <br> 这是换行标签
    6. <hr> 这是水平线标签，呈现出一条横线效果

    3.3 使用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <h2><b>企业简介</b><br></h2>
    10. <b><hr color="green"></b>
    11. <p><font color="red">传智教育</font>(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，
    12.     是第一个实现A股IPO的教育企业，公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、
    13.     软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理
    14.     经验，且来自互联网或研究机构的IT精英组成，负责研究、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在
    15.     整个行业发展的前端，在行业内竖立起了良好的品质口碑。</p>
    16.  
    17. <p>民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺
    18.     讲台诲人不倦著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：
    19.     <b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。</b></p>
    20.  
    21. <p>探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个
    22.     新的教育生态环境，让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此“
    23.     <b>探索教育本源，开辟教育新生态</b>”便成为了所有传智人为之奋斗的终极愿景，也是所有传智人共同努力的目标。
    24.     为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。</p>
    25. <b><hr color="green"></b>
    26. <center>江苏传智播客教育科技股份有限公司<br></center>
    27. <center>版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882</center>
    28. </body>
    29. </html>

    该代码呈现效果如下

    四、HTML图片、音频、视频标签

    4.1 标签属性

    • img：定义图片

           ◇ src：规定显示图像的URL(统一的资源定位符)

           ◇ height：定义图像的高度

            ◇ width：定义图像的宽度

    • audio：定义音频。支持的音频格式：MP3、WAV、OGG

           ◇ src：规定音频的URL

           ◇ controls：显示播放控件

    • video：定义视频。支持的音频格式：MP4、WebM、OGG

           ◇ src：规定视频的URL

           ◇ controls：显示播放控件

    4.2 尺寸单位

    • 像素：单位是px
    • 百分比：占父标签的百分比。例如宽度设置为50%，意思是占它父标签宽度的50%

    4.3 资源路径

    图片、音频、视频标签抖音src属性，而src是用来指定对应的图片、音频、视频文件的路径。资源路径有如下两种设置方式

    • 绝对路径：完整路径

            这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称。

    • 相对路径：相对位置关系

    ./ 表示当前路径

    ../ 表示上一级路径

    ../../ 表示上两级路径

    4.4 使用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <!--
    9.     资源路径：
    10.         1. 绝对路径：完整路径
    11.         2. 相对路径：相对位置关系
    12.             xxx/html/02-图片音频视频.html
    13.             xxx/html/a.jpg
    15.             ./a.jpg  &  a.jpg
    17.             xxx/html/02-图片音频视频.html
    18.             xxx/html/img/a.jpg
    20.             ./img/a.jpg
    23.             xxx/html/02-图片音频视频.html
    24.             xxx/img/a.jpg
    26.             ../img/a.jpg
    27.     尺寸单位：
    28.         1. px：像素
    29.         2. 百分比：
    30. -->
    31.  
    32. <img src = "a.jpg" width="300" height="400">
    33. <audio src="b.mp3" controls></audio>
    34. <video src="c.mp4" controls width="300" height="400"></video>
    35.  
    36. </body>
    37. </html>

    代码呈现效果如下

    五、超链接标签

    5.1 标签属性

    • href：指定访问资源的URL
    • target：指定打开资源的方式

            ◇ _self：默认值，在当前页面打开

            ◇ _blank：在空白页面打开(新建一个页面)

    5.2 使用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <a href="https://www.bilibili.com/" target="_self">点我有惊喜</a>
    10. </body>
    11. </html>

    六、列表标签

    • 有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）
    • 无序列表中的 type 属性用来指定标记的形状

    6.1 使用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <ol type="A">
    10.     <li>咖啡</li>
    11.     <li>牛奶</li>
    12.     <li>茶</li>
    13. </ol>
    14.  
    15. <ul>
    16.     <li>咖啡</li>
    17.     <li>牛奶</li>
    18.     <li>茶</li>
    19. </ul>
    20. </body>
    21. </html>

    七、表格标签

    7.1 标签属性

    • table：定义表格

            ◇ border：规定表格边框的宽度

            ◇ width：规定表格的宽度

            ◇ cellspacing：规定单元格之间的空白

    • tr：定义行

            ◇ align：定义表格行的内容对齐方式

    • td：定义单元格

            ◇ rowspan：规定单元格可横跨的行数

            ◇ colspan：规定单元格可横跨的列数

    • th：定义表头单元格

    7.2 使用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <table border="1" cellspacing="0" width="600">
    10.     <tr>
    11.         <th>序号</th>
    12.         <th>品牌logo</th>
    13.         <th>品牌名称</th>
    14.         <th>企业名称</th>
    15.     </tr>
    16.     <tr align="center">
    17.         <td>010</td>
    18.         <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
    19.         <td>三只松鼠</td>
    20.         <td>三只松鼠</td>
    21.     </tr>
    22.     <tr align="center">
    23.         <td>009</td>
    24.         <td><img src="../img/优衣库.png" width="60" height="50"></td>
    25.         <td>优衣库</td>
    26.         <td>优衣库</td>
    27.     </tr>
    28.     <tr align="center">
    29.         <td>008</td>
    30.         <td><img src="../img/小米.png" width="60" height="50"></td>
    31.         <td>小米</td>
    32.         <td>小米科技有限公司</td>
    33.     </tr>
    34. </table>
    35.  
    36.  
    37. <br>
    38. <hr>
    39. <br>
    40.  
    41.  
    42. <table border="1" cellspacing="0" width="600">
    43.     <tr>
    44.         <th colspan="2">品牌logo</th>
    45.         <th>品牌名称</th>
    46.         <th>企业名称</th>
    47.     </tr>
    48.     <tr align="center">
    49.         <td>010</td>
    50.         <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
    51.         <td>三只松鼠</td>
    52.         <td>三只松鼠</td>
    53.     </tr>
    54.     <tr align="center">
    55.         <td rowspan="2">009</td>
    56.         <td><img src="../img/优衣库.png" width="60" height="50"></td>
    57.         <td>优衣库</td>
    58.         <td>优衣库</td>
    59.     </tr>
    60.     <tr align="center">
    61.         <td><img src="../img/小米.png" width="60" height="50"></td>
    62.         <td>小米</td>
    63.         <td>小米科技有限公司</td>
    64.     </tr>
    65. </table>
    66.  
    67. </body>
    68. </html>

    代码呈现结果如下

    八、布局标签

     这两个标签一般都是和css结合到一块使用来实现页面的布局

    div标签在浏览器上会有换行的效果，而span标签在浏览器上没有换行效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <div>我是div</div>
    10. <div>我是div</div>
    11. <span>我是span</span>
    12. <span>我是span</span>
    13.  
    14. </body>
    15. </html>

    代码呈现结果如下

    九、表单标签

    9.1 form标签属性

    1. form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。

    2. form会把范围内的表单元素信息提交给服务器

    1. <form action="url地址 method="提交方式" name="表单域名称">
    2. 	各种表单元素控件
    3. </form>
    • action：规定当提前表单时向何处发送表单数据，该属性值就是URL

            以后会将数据提交到服务端，该属性需要书写服务端的URL。而目前可以书写#，表示提交到当前页面来查看效果

    • method：规定用于发送表单数据的方式

            method取值有如下两种

                    ①get：默认值。如果不设置method属性则默认就是该值

                            ◇ 请求参数会拼接在URL后边

                            ◇ URL的长度有限制，为4KB

                    ②post：

                            ◇ 浏览器会将数据放到http请求消息体中

                            ◇ 请求参数无限制的

    9.2 使用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <!--
    9. form：
    10.     action:指定表单数据提交的URL
    11.         * 表单项数据要想被提交，则必须指定其name属性
    12.     method：指定表单提交的方式
    13.         1. get：默认值
    14.             * 请求参数会拼接在URL后边
    15.             * url的长度有限制 4KB
    16.         2. post：
    17.             * 请求参数会在http请求协议的请求体中
    18.             * 请求参数无限制的
    19. -->
    20.  
    21.     <form action="#" method="post">
    22.         <input type="text" name="username">
    23.         <input type="submit">
    24.     </form>
    25.  
    26. </body>
    27. </html>

                            

    十、表单项标签

    表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

    1. <input>：表单项，通过type属性控制输入形式

            input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

    属性值描述
    text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
    password定义密码字段，该字段中的字符被掩码
    radio定义单选按钮
    checkbox定义复选框
    file定义输入字段和“浏览”按钮，供文件上传
    hidden定义隐藏的输入字段
    submit定义提交按钮，提交按钮会把表单数据发送到服务器
    reset定义重置按钮，重置按钮会清除表单中的所有数据
    button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
    image定义图像形式的提交按钮

    2. <select>：定义下拉列表，定义列表项

    3. <textarea>：文本域

    除type属性外，input标签还有其他很多属性，其常用属性如下

    属性属性值描述
    name由用户自定义定义input元素的名称
    value由用户自定义规定input元素的值
    checkedchecked规定此input元素首次加载时应当被选中
    maxlength正整数规定输入字段中的字符的最大长度

    注意：

           1. name和 value是每个表单元素都有的属性值，主要给后台人员使用

           2. name表单元素的名字，要求单选按钮和复选框要有相同的name值

           3. 以上标签项的内容要想提交，必须得定义 name 属性。

           4. 每一个标签都有id属性，id属性值是唯一的标识。

           5. 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

    10.1 使用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <form action="#" method="post">
    10.     <input type="hidden" name="id" value="123">
    11.     
    12.     <label for="username">用户名:</label>
    13.     <input type="text" name="username" id="username"><br>
    14.  
    15.     <label for="password">密码:</label>
    16.     <input type="password" name="password" id="password"><br>
    17.  
    18.     性别：
    19.     <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    20.     <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
    21.     <br>
    22.  
    23.     爱好：
    24.     <input type="checkbox" name="hobby" value="1">旅游
    25.     <input type="checkbox" name="hobby" value="2">电影
    26.     <input type="checkbox" name="hobby" value="3">游戏
    27.     <br>
    28.  
    29.     头像：
    30.     <input type="file"><br>
    31.  
    32.     城市：
    33.     <select>
    34.         <option>北京</option>
    35.         <option>上海</option>
    36.         <option>广州</option>
    37.     </select>
    38.     <br>
    39.  
    40.     个人描述：
    41.     <textarea cols="20" rows="3"></textarea>
    42.     <br>
    43.  
    44.     <br>
    45.     <input type="submit" value="免费注册">
    46.     <input type="reset" value="重置">
    47.     <input type="button" value="按钮">
    48.  
    49.  
    50. </form>
    51.  
    52.  
    53. </body>
    54. </html>

    代码呈现结果如右图所示        

  • 相关阅读:
    Unity UGUI的CanvasScaler（画布缩放器）组件的介绍及使用
    MyBatis 如何使用set标签呢？
    函数式接口@FunctionalInterface
    如何有效防止公司内部的信息泄露？
    Spring In Action 5 学习笔记 chapter8 JMS(ActiveMQ Artemis)要点
    高保真神经网络音频编码器
    Linux环境下省时省力的线程池代码分享
    Hubble数据库再获得国家级重点项目推荐，作为HTAP国产数据库入选工信部全国试点
    pdf如何批量压缩不影响清晰度
    制作一个简单HTML抗疫逆行者网页作业（HTML+CSS）
  • 原文地址：https://blog.csdn.net/weixin_61843013/article/details/125439035