一、HTML相关内容

-  <img> 标签：

- 用于在网页中嵌入图像， src 属性指定图像的路径，可以是绝对路径（如 D:\Git\java115_java116\课堂代码\前端代码\pic\cat.jpg ）、相对路径（如 ./pic/cat.jpg ，表示当前目录下的 pic 文件夹中的 cat.jpg ）或网络路径（如 https://hbimg.huaban.com/33c21fbe73e4bd967dfeae4cf56f26382d5c285-e6epw6_fw658 ）。

-  title 属性是鼠标悬停在图片上时显示的提示文本。

-  alt 属性是图像加载失败时显示的替代文本。

-  width 和 height 属性用于设置图像的宽度和高度，如果只设置其中一个，图像会按比例缩放；如果两个都设置，图像会按指定的大小显示。

-  <a> 标签：

- 用于创建超链接， href 属性指定链接的目标地址， target="_blank" 表示在新的浏览器窗口中打开链接。例如 <a href="https://www.baidu.com/" target="_blank">百度</a> 会在新窗口打开百度网站。

-  <table> 标签：

- 用于创建HTML表格， <tr> 标签定义表格中的行， <td> 标签定义表格中的单元格。例如：

<table>

    <tr>

        <td>aaa</td>

        <td>111</td>

    </tr>

    <tr>

        <td>bbb</td>

        <td>222</td>

    </tr>

    <tr>

        <td>ccc</td>

        <td>333</td>

    </tr>

</table>

- HTTP请求：

- 示例 http://127.0.0.1:8080/register?userName=zhangsan&password=123456 展示了一个GET请求的URL，其中 ? 后面的部分是查询字符串，用于向服务器传递参数，这里传递了用户名 zhangsan 和密码 123456 到 /register 路径。

-  <form> 标签：

- 用于创建表单，用于收集用户输入的数据并提交到服务器。 action 属性指定表单提交的目标URL， method 属性指定提交数据的HTTP方法（这里是 get ）。表单中可以包含各种表单元素，如文本框（ <input type="text"> ）、密码框（ <input type="password"> ）和提交按钮（ <input type="submit"> ）。例如：

<form action="demo.html" method="get">

    文本框：<input type="text" name="userName" id="userName"><br>

    密码框：<input type="password" name="password" id="password"><br>

    <input type="submit" value="提交">

</form>

- 块级元素和行内元素：

- 块级元素（如 div 、 p 、 h1 - h6 等）会独占一行，默认宽度为父元素的100%，可以设置宽高。

- 行内元素（如 span 、 a 、 input 等）不会独占一行，多个行内元素可以在同一行显示，宽高由内容决定，一般不能直接设置宽高。

- 列表：

- 无序列表（ <ul> ）：使用 <ul> 标签定义，列表项使用 <li> 标签，默认项目符号是圆点。例如：

<ul>

    <li>aaa</li>

    <li>bbb</li>

    <li>ccc</li>

</ul>

- 有序列表（ <ol> ）：

使用 <ol> 标签定义，列表项使用 <li> 标签，默认项目符号是数字。例如：

<ol>

    <li>aaa</li>

    <li>bbb</li>

    <li>ccc</li>

</ol>

 

二、CSS相关内容

- CSS选择器：

- 标签选择器：通过HTML标签名来选择元素，例如 p 选择所有 <p> 元素。

- 类选择器：通过元素的 class 属性来选择元素，以 . 开头，例如 .box 选择所有 class="box" 的元素。

- ID选择器：通过元素的 id 属性来选择元素，以 # 开头，例如 #header 选择 id="header" 的元素。

- 通配符选择器： * 选择所有元素。

- 复合选择器：由多个简单选择器组合而成，例如 div.box 选择所有 class="box" 的 <div> 元素。

- 复合属性：

- 以 border-width 为例，可以分别设置 border-top-width （上边框宽度）、 border-right-width （右边框宽度）、 border-bottom-width （下边框宽度）和 border-left-width （左边框宽度），也可以使用简写形式 border-width: 10px 5px 2px 1px; ，分别对应上、右、下、左四个方向的边框宽度。

- 盒模型：

-  margin ：外边距，控制元素与其他元素之间的距离。

-  padding ：内边距，控制元素内容与元素边框之间的距离。

- 示例中用学校和楼的关系形象地说明了内外边距，学校到楼的距离可以类比为外边距，楼内部的空间可以类比为内边距。

- CSS样式规则：

- 由选择器和声明块组成，声明块包含在花括号 {} 中，每个声明由属性和值组成，以分号 ; 结尾。例如：

p {

    color: blue;

}

这里 p 是选择器， color: blue; 是声明，将所有 <p> 元素的文本颜色设置为蓝色。

- 还可以通过外部样式表（使用 <link rel="stylesheet" href="css.css"> 引入）或内部样式表（在 <style> 标签内编写CSS代码）来应用样式。

三、JavaScript和Java对比

- JavaScript：是一种动态类型的脚本语言，主要用于网页的前端交互，例如表单验证、动态内容更新等。它的变量类型在运行时确定，不需要提前声明类型。

- Java：是一种静态类型的编程语言，需要在编译前声明变量类型，具有严格的类型检查，常用于后端开发、Android应用开发等。