JavaWeb学习笔记（一）—— HTML

kxttmx

已于 2022-04-20 13:25:56 修改

阅读量1.4k

点赞数 1

分类专栏： JavaWeb学习笔记（尚硅谷2022版）文章标签： idea java-ee java

于 2022-04-20 13:24:56 首次发布

本文链接：https://blog.csdn.net/kuaixiao0217/article/details/124295215

版权

JavaWeb学习笔记（尚硅谷2022版）专栏收录该内容

36 篇文章 6 订阅

订阅专栏

01、HTML

1.1、HTML介绍

HTML(Hyper Text Markup Language)：超文本标记语言——决定页面上显示什么内容
CSS：页面上的内容显示的风格——决定页面上内容的美观程度
JS(JavaScript)：页面特效

1.2、HTML标签的介绍

1.标签的格式：

<标签名>封装的数据</标签名>

2.标签名不区分大小写。

3.标签拥有自己的属性。

i. 分为基本属性：bgcolor="red" 可以修改简单的样式效果
ii. 事件属性：onclick="alert('你好！');" 可以直接设置事件响应后的代码。

4.标签又分为，单标签和双标签。

i. 单标签格式： <标签名 />
- <br/>：换行
- <hr/> ：水平线
ii. 双标签格式: <标签名> …封装的数据… < /标签名>

5、标签的语法：

①标签不能交叉嵌套

②标签必须正确关闭

③属性必须有值，属性值必须加引号

④注释不能嵌套

<!-- 这是 html 注释，可以在页面右键查看源代码中看到 -->

注意：html 代码不是很严谨。有时候标签不闭合，也不会报错。

1.3、HTML中的基础标签

1.3.1、页面标签

1、html页面中由一对标签组成：<html></html>

<html>称为：开始标签，表示整个html页面的开始
</html>称为：结束标签，表示整个html页面的结束

2、<html></html>中由两对标签组成，分别为：

<head></head>：头信息
<body></body>：页面的主题内容

3、<title>网页的标题</title>

4、通过<meta charset="UTF-8">设置编码方式

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <!-- 指定页面的编码方式: 可以在meta标签中设置编码-->
    <meta charset="UTF-8">
    <!-- title表示网页的标题 -->
    <title>这是我的第一个网页</title>
</head>
<body>
    
</body>
</html>

1.3.2、`<br/>`、`<hr/>`、`<p>`、`<div>`

1、<br/>表示换行，<br/>标签是一个单标签。

单标签：开始标签和结束标签是同一个，'/'写在单词后面。

2、<hr/>表示直线标签

3、<p></p>表示段落标签

4、<div></div>：层标签

1.3.3、`<img/>`：图片标签

7、<img src=""/>表示图片标签

src：表示图片文件的路径
width：表示图片的宽度
height：表示图片的高度
alt：表示图片的提示。当指定路径找不到图片时，用来替代显示的文本内容
border：表示图片边框的大小

<!-- img标签表示图片标签
       src:图片的路径 imgs文件夹与该网页文件在同一目录下 -->
  <img src="imgs/2.jpg" width="57" height="74" alt="这里是一张图片"/>

路径的问题：

（1）在 JavaSE 中路径也分为相对路径和绝对路径：

相对路径：从工程名开始算
绝对路径：盘符:/目录/文件名

（2）在 web 中路径分为相对路径和绝对路径两种：

相对路径：
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件，相当于 ./文件名
./ 可以省略

绝对路径:
正确格式是：http://ip:port工程名/资源路径
错误格式是：盘符:/目录/文件名

1.3.4、标题标签

1、<h1>~<h6>：标题标签

<h1>最大，<h6>最小
align：对齐属性
- left：左对齐（默认）
- center：居中对齐
- right：右对齐

  <h1 align='center'>标题一</h1>
  <h2>标题一</h2>
  <h3>标题一</h3>
  <h4>标题一</h4>
  <h5>标题一</h5>
  <h6>标题一</h6>

2、注意：

html语言是解释型语言，不是编译型。
浏览器是容错的。

1.3.5、列表标签

ol：有序列表

start：表示从*开始

type：表示显示的类型，即 A、a、I、i、1

<!-- ol:有序列表 start:表示从A开始第三个，即C开始-->
  <ol type="A" start="3" >
    <li>扫地僧</li>
    <li>萧远山</li>
    <li>慕容博</li>
    <li>虚竹</li>
  </ol>

ul：无序列表

type：表示显示的类型

disc：default
circle：圆形标记
square：方块标记

<ul type="circle">
    <li>乔峰</li>
    <li>阿朱</li>
    <li>马夫人</li>
    <li>白世镜</li>
  </ul>

li：表示列表项

1.3.6、对字体进行修饰的标签

<u></u>：表示下划线标签
<b></b>：表示粗体标签
<i></i>：表示斜体标签

1.3.7、上标、下标

<sub></sub>：表示下标

<sup></sup>：表示上标

水分子的表达式：H<sub>2</sub>O
<br/>
氧气的表达式：O<sup>2</sup>

在这里插入图片描述

1.3.8、HTML中的字符实体

小于号：<
大于号：>
小于等于号：≤
大于等于号：≥

  5 &lt; 10 <!-- 5<10 -->
  10 &gt; 5 <!-- 10>5 -->
  5 &le; 10 <!-- 5<=10 -->
  10 &ge; 5 <!-- 10>=5 -->

注册商标：®
版权符号：@copy;
空格：

注：更多字符实体，可查看网页：http://caibaojian.com/w3c/html/html_entities.html

13、<span></span>：表示不换行的块标记

1.3.9、超链接标签

<a href=""></a>：表示超链接的标签

href：表示链接的地址
target：设置哪个目标进行跳转
- _self：表示在本窗口打开
- _blank：表示在一个新窗口打开
- _parent：表示在父窗口打开
- _top：表示在顶层窗口打开
```
<a href="http://www.baidu.com" target="_blank">百度一下</a>
```

1.3.10、字体标签

<font></font>字体标签：

color ：表示颜色
face：表示字体

size ：表示文本大小

<font color="red" face="宋体" size="7">我是字体标签</font>

1.3.11、表格标签

1、<table></table>：表格标签

border：表示表格边框的粗细
width：表示表格的宽度
cellspacing：表示单元格间距
cellpadding：表示单元格填充

2、<tr></tr>：表格行标签

align：对齐属性
- left：左对齐（默认）
- center：居中对齐
- right：右对齐

3、<td></td>：表格列标签

4、<th></th>：表格表头标签

    <table border="1" width="600px" cellspacing="0" cellpadding="4">
        <tr align="center">
            <th>姓名</th>
            <th>门派</th>
            <th>成名绝技</th>
            <th>内功值</th>
        </tr>
        <tr align="center">
            <td>乔峰</td>
            <td>丐帮</td>
            <td>少林长拳</td>
            <td>5000</td>
        </tr>
        <tr align="center">
            <td>虚竹</td>
            <td>灵鹫宫</td>
            <td>北冥神功</td>
            <td>15000</td>
        </tr>
    </table>

5、跨行跨列标签

rowspan：表示跨行标签，行合并
colspan：表示跨列标签，列合并

    <table border="1" cellspacing="0" cellpadding="4" width="600">
    <tr align="center">
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>苹果</td>
        <!-- 在表格中合并单元行 -->
        <td rowspan="2">5</td>
        <td>20</td>
        <td>100</td>
        <!-- 在表格中插入图片 -->
        <td><img src="imgs/deleteIcon.jpg" width="24" height="24"/></td>
    </tr>
    <tr align="center">
        <td>菠萝</td>
        <td>15</td>
        <td>75</td>
        <td><img src="imgs/deleteIcon.jpg" width="24" height="24"/></td>
    </tr>
    <tr align="center">
        <td>西瓜</td>
        <td>6</td>
        <td>20</td>
        <td>120</td>
        <td><img src="imgs/deleteIcon.jpg" width="24" height="24"/></td>
    </tr>
    <tr>
        <td align="center">总计</td>
        <!-- 在表格中合并单元列 -->
        <td align="center" colspan="4">295</td>
    </tr>
    </table>

在这里插入图片描述

1.3.12、表单标签

1、<form></form>：表单标签

action：表示提交的服务器地址
method：设置提交的方式：Get(默认值)、Post
- Get请求的特点：
  - 浏览器地址栏中的地址是：action 属性[+?+请求参数]
    
    请求参数的格式是：name=value&name=value
  - 不安全
  - 它有数据长度的限制
- Post请求的特点：
  - 浏览器地址栏中只有 action 属性值
  - 相对于GET请求要安全
  - 理论上没有数据长度的限制

2、表单的显示：

<input type = "text" name = ""/>：表示文本输入框
- name必须要指定，否则这个文本框的数据将来不会发送给服务器
<input type = "password" name = ""/>：表示密码输入框
<input type = "radio" name = ""/>：表示单选框
- name属性值保持一致，这样才会有互斥的效果
- checked="checked"表示默认选中
<input type = "checkbox" name = ""/>：表示复选框
- name属性值建议保持一致，这样将来我们服务器端获取值的时候，获取的是一个数组
- checked="checked"表示默认选中
<select><select/>：表示下拉表框
- <option value=""><option/>：表示下拉表框中的选项
  - value属性时发送给服务器端的值
- selected="selected"表示默认选中的项
<textarea><textarea/>：表示多行文本输入框（或者称之为文本域）
- 起始标签和结束标签中的内容是默认值
- 它的value值就是开始结束标签之间的内容
- rows：表示可以显示几行的高度
- cols：表示可以显示几个子字符宽度
<input type = "submit" name = ""/>：表示提交按钮
<input type = "reset" name = ""/>：表示重置按钮
<input type = "button" name = ""/>：表示普通按钮
<input type = "file" name = ""/>：表示文件上传域
<input type = "hidden" name = ""/>：表示隐藏域
- 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

    <form action="demo04.html" method="post">
        <!--input是输入框 text:文本框 若是没有name属性，则文本框内容不会发送给服务器-->
        昵称：<input type="text" name="nickName"/><br/>
        <!--input是输入框 password:密码框 -->
        密码：<input type="password" name="password"/><br/>
        <!--input是输入框 radio:单选框 通过value值来指定单选框的值
            单选框只能选一个是由name值决定的，因为name值相同，所以只能选一个-->
        性别：<input type="radio" name="gender" value="male"/>男
             <!--checked:默认选中-->
             <input type="radio" name="gender" value="female" checked/>女<br/>
        <!--input是输入框 checkbox:复选框 -->
        爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
             <input type="checkbox" name="hobby" value="football" checked/>足球
             <input type="checkbox" name="hobby" value="badminton"/>羽毛球<br/>
        星座：<select name="star">
                 <option value="1">白羊座</option>
                 <!--selected:默认选中-->
                 <option value="2" selected>金牛座</option>
                 <option value="3">双子座</option>
             </select><br/>
        备注：<textarea name="remark" rows="10" cols="50" ></textarea><br/>
        <input type="submit" value="注  册">
        <input type="reset" value="重  置">
        <input type="button" value="这是一个普通的按钮">
    </form>

1.3.13、iframe 框架标签

1、<frameset><frameset/>：表示页面框架（这个标签已经淘汰）

2、<frame><frame/>：表示页面框架中的具体页面引用

    <frameset rows="20%,*" frameborder="no">
        <frame src="frames/top.html"/>
        <frameset cols = "15%,*">
            <frame src="frames/left.html"/>
            <frameset rows = "80%,*">
                <frame src="frames/main.html"/>
                <frame src="frames/bottom.html"/>
            </frameset>
        </frameset>
    </frameset>