【JavaWeb】第一章 HTML标签

末蓝、 2023-10-08 17:09 10阅读 0赞

#### 文章目录 ####

*  1、B/S软件结构
 *  2、前端的开发流程
 *  3、网页的组成部分
 *  4、HTML简介
 *  5、新建html文件
 *  6、html文件的书写规范
 *  7、html标签的语法
 *  8、常用的html标签
 *   *  8.1 字体标签：\`<font>\`
     *  8.2 标题标签：\`<h1>\`到\`<h6>\`
     *  8.3 超链接标签：\`<a>\`
     *  8.4 列表标签\`<ul>\`和\`<ol>\`
     *  8.5 图片标签\`<image>\`
     *  8.6 表格标签\`<table>\`
     *  8.7 内嵌页面标签\`<iframe>\`
     *  8.8 特殊字符
     *  8.9 表单标签\`<form>\`
     *  8.10 其他标签\`<div> <span> <p>\`

JavaWeb学习：  
![在这里插入图片描述][c5c28f239b804c549b02279dbdf58678.png]

## 1、B/S软件结构 ##

C/S结构，即Client - -Server客户端服务端结构，而B/S结构，即Browser - -Server浏览器服务器结构  
![在这里插入图片描述][b0e505170c8e4703a08b9c3a5358161e.png]

## 2、前端的开发流程 ##

![在这里插入图片描述][8a18eb86dc36430f880178a2ef8b5a14.png]

## 3、网页的组成部分 ##

*  **内容**：即在页面中看到的数据，使用html展示
 *  **表现**：指这些内容在页面上的展现形式，比如布局、颜色、大小等，使用CSS完成
 *  **行为**：指页面元素与输入设备的交互的相应，通过JavaScript实现

## 4、HTML简介 ##

全称Hyper Text Markup Language，即超文本标记语言。HTML通过标签来标记要显示的网页中的各个部分，从而告诉浏览器怎么显示其中的内容。

## 5、新建html文件 ##

*  先新建工程project  
    ![在这里插入图片描述][d64241a66b834451b8ba8934e9a92d5c.png]
 *  再工程下面创建html文件  
    ![在这里插入图片描述][af23231ec0734799ae3b630b33285163.png]  
    ![在这里插入图片描述][99d5766bc6884e7d998eee671350bb6d.png]
 *  选择运行的浏览器  
    ![在这里插入图片描述][83a32c7deeec44d69e98f4fddfe3c178.png]  
    ![在这里插入图片描述][5b5a8630e0ee45a0ae6d32f3343c321c.png]

## 6、html文件的书写规范 ##

<html>表示整个html页面的开始
    
         <head> 头信息
    		  <tittle>标题</tittle> 标题
    	 </head>
    	 
    	 <body>
    	   页面主题内容
    	 </body>
    
    </html> 表示整个html页面的结束

![在这里插入图片描述][6ec80c9b17834e16b5436cad40862bca.png]

## 7、html标签的语法 ##

*  标签的格式

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

*  标签名对大小写不敏感，<body>和<BODY>一样
 *  标签拥有自己的基本属性和事件属性，其中，基本属性用来修改简单的样式效果；而事件属性可以设置事件响应后的代码  
    ![在这里插入图片描述][50fa9bd2a6ab44caa4987eae5be7bda7.png]

<body>加背景颜色属性
    
    <body bgcolor="blue">

<body>标签加事件属性
    
    <body onclick="alert('加油啊')">

alert()是javaScript语言提供的一个警告框函数，它可以接受任意参数，传参就是警告框的信息。  
![在这里插入图片描述][65515ae1e9944b3b9a1d317546de4e34.png]

*  标签分为单标签和双标签  
    ![在这里插入图片描述][149a840b57d447d5a9c0a2fffcfb7a04.png]
 *  标签不能交叉嵌套

*  标签必须闭合，不论单双标签

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

*  注释标签不能嵌套

ps:  
html代码不是很严谨，有时标签漏了没闭合，浏览器或者IJ也会帮忙修复，但别这样。

## 8、常用的html标签 ##

### 8.1 字体标签：`<font>` ###

font是字体标签，用来修改文本的字体、颜色、大小，相应的属性值为face、color、size

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

### 8.2 标题标签：`<h1>`到`<h6>` ###

标题标签用h1到h6，其中h1最大，h6最小。该标签拥有对齐align属性，属性值为left、center、right，即左对齐、居中、右对齐，默认left

### 8.3 超链接标签：`<a>` ###

超链接标签<a>有两个属性，属性href设置链接的地址。属性target设置哪个目标进行跳转，target属性值\_self表示当前页面，\_blank表示新开个页面去跳转

### 8.4 列表标签`<ul>`和`<ol>` ###

列表标签分为无序列表<ul>和有序列表<ol>，o即order，其中的<li>是列表项，type属性可以修改列表项前面的符号

//加了type="none"，则截图前面的黑点就不见的
    <ul type="none">
    	<li>甲</li>
    	<li>乙</li>
    	<li>丙</li>
    	<li>丁</li>
    </ul>

运行：  
![在这里插入图片描述][516ed77ec2c24d359c90c0013a1b550c.png]

运行:  
![在这里插入图片描述][6f316674a324476287e731427268cf3c.png]

### 8.5 图片标签`<image>` ###

image标签用来显示图片，它有src属性，可以设置图片的路径，不同于Java中的盘符起手，绝对路径的写法格式则是**http://ip:port/工程名/资源路径**。相对路径的表示javaSE中是从工程名开始，而src属性是 . 表示当前文件所在的目录， …表示当前文件的上一层目录，直接一个文件名表示./文件名

width属性设置宽和heigth设置长，border属性设置边框粗细，alt属性用来设置图片路径找不到的时候代替显示的文本内容。

### 8.6 表格标签`<table>` ###

表格标签即<table>，其中行用<tr>，每行中的每个格子用标签<td>，<th>是表头标签，自带居中加粗效果。

align属性加在td标签中设置单元格的对齐属性，加在table标签设置的是整个表格的位置对齐属性。table标签还有cellspacing属性设置单元格间距

运行效果：  
![在这里插入图片描述][3f33ea36570349eba4e637c5c030d556.png]  
**跨行跨列的效果：**  
![在这里插入图片描述][ebb9dd2ecf0b49ed85ed65dc449424b5.png]

设置跨列，在<td>标签加colspan属性，设置跨行，加rowspan属性

### 8.7 内嵌页面标签`<iframe>` ###

iframe标签和a标签组合使用步骤：

*  在iframe标签中使用name属性定义一个名称
 *  在a标签的target属性上设置iframe的name的属性值

**从而达到点击超链接，内嵌页面跟着变化的效果**。

运行效果：  
![在这里插入图片描述][9a3bebf1b33f4e4cb1315f80b72c0d6b.png]

### 8.8 特殊字符 ###

下面的例子中，<br/>标签会被解析成换行，想让它显示为文本，需将其转换你成字符集

这是<br/>标签

改为：

这是<br>标签

此外，通常情况下，HTML会去掉文档中的空格，比如html文件中输入了10个连续空格，则其中九个会被过滤掉，空格用&nbsp  
![在这里插入图片描述][c077c4fd5c4643598e281dfa04058200.png]

### 8.9 表单标签`<form>` ###

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

>  *  input type=text 是文本输入框，value设置默认显示内容
>  *  input type=password是密码输入框，value设置默认显示的内容
>  *  input type=radio是单选框，加checked="checked"表示默认选中，name属性可以对其进行分组（同一个组里的选项才限制单选）
>  *  input type=checkbox是复选框，加checked="checked"表示默认选中
>  *  input type=reset是重置按钮，value属性可以修改按钮上的文本
>  *  input type=submit是提交按钮，value属性可以修改按钮上的文本
>  *  input type=button是按钮，value属性可以修改按钮上的文本
>  *  input type=file是文件上传域，点击可选择电脑本地文件
>  *  input type=hidden是隐藏域，当我们需要向服务器发送某些信息，而这些信息不需要用户参与输入。就可以用隐藏域，提交的时候一起发送给服务器
>  *  select标签是下拉列表框，option标签是下拉框中的一个个选项，selected="selected"设置默认选中
>  *  textarea表示多行文本输入框，且其实标签和结束标签的中间文本就是默认值，rows设置可以显示几行的高度，超过这几行出现滚动条，cols属性设置每行可以显示几个字符的宽度

<!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>表单收集</title>
    </head>
    <body>
      <form>
        用户名称：<input type="text" value="默认值user"/><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" checked="checked"/>Java<input type="checkbox"/>Sleep<input type="checkbox"/>fight<br/>
        国籍：<select>
                <option>中国</option>
                <option selected="selected">英国</option>
                <option>美国</option>
      </select><br/>
          自我评价：<textarea rows="10" cols="20">这里写默认值</textarea><br/>
          <input type="reset" value="重置输入内容"/><br/>
          <input type="submit" value="提交"/><br/>
          <input type="button" value="按钮"/><br/>
          <input type="file"/><br/>
          <input type="hidden"/>
    
    
    
      </form>
    </body>
    </html>

运行效果：

![在这里插入图片描述][ae530ff9f33049a9a7a9e3ef3edc8651.png]

**表单格式化—将表单的放入table中**，一列存提示语，一列存值

<!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>表单收集</title>
    </head>
    <body>
      <form>
          <h1 align="center">用户注册</h1>
          <table align="center">
              <tr>
                  <td>用户名称：</td>
                  <td><input type="text" value="默认值user"/></td>
              </tr>
              <tr>
                  <td>用户密码：</td>
                  <td><input type="password"/></td>
              </tr>
              <tr>
                  <td>确认密码：</td>
                  <td><input type="password"/></td>
              </tr>
              <tr>
                  <td>性别：</td>
                  <td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女</td>
              </tr>
              <tr>
                  <td>兴趣爱好：</td>
                  <td><input type="checkbox" checked="checked"/>Java<input type="checkbox"/>Sleep<input type="checkbox"/>fight</td>
              </tr>
              <tr>
                  <td>国籍：</td>
                  <td> <select>
                      <option>中国</option>
                      <option selected="selected">英国</option>
                      <option>美国</option>
                       </select>
                  </td>
              </tr>
              <tr>
                  <td>自我评价：</td>
                  <td><textarea rows="10" cols="20">这里写默认值</textarea></td>
              </tr>
              <tr>
                  <td><input type="reset" value="重置输入内容"/></td>
                  <td align="center"><input type="submit" value="提交"/></td>
              </tr>
              <tr>
                  <td><input type="button" value="按钮"/></td>
                  <td><input type="file"/></td>
              </tr>
              <tr>
                  <td><input type="hidden"/></td>
              </tr>
          </table>
      </form>
    </body>
    </html>

> form标签的`action属性设置提交的服务器地址，method属性设置提交的方式`GET（默认）还是POST

**表单提交的时候，数据没有发送给服务器的三种情况：**

*  表单项没有name属性，加name=“key”，key就是接口传参的key

![在这里插入图片描述][a60b7de13bf44073a8185c2a78c6ea44.png]

*  单选、复选、下拉列表框中的option标签，都需要加value属性，否则传入的值变为一串编码

<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女

此时boy显示为on  
![在这里插入图片描述][6cf37ec5e8ba4885ab9ce6d3bf7c778a.png]  
加入value：

<input type="radio" name="sex"  value="boy" checked="checked"/>男<input type="radio" name="sex" value="girl"/>女

![在这里插入图片描述][daa8ff11eb1c463e959ed9b8f88eb0ca.png]

*  表单项不在提交的form标签中

<input type="hidden" name="admin" passwd="123"/>
    <form action="http://localhost:8080" method="get">
    ……

比如这里的hidden在提交的form标签外

> method属性选GET请求的特点是：

*  浏览器中的地址栏显示：action属性值\[+?+请求参数\] ,请求参数格式是name=value&name=value
 *  不安全
 *  它有数据长度的限制  
    ![在这里插入图片描述][d3152563a6e54e0a92f9a845d601e69e.png]

> method属性选post请求的特点是：

*  浏览器地址栏中只有action属性值，也就是服务器的地址
 *  相对于GET要安全些
 *  理论上没有长度限制

### 8.10 其他标签`<div> <span> <p>` ###

![在这里插入图片描述][c0628a09521f4715a886161bbb7fb7e9.png]

*  p段落标签，默认会在段落的上方或者下方各空出一行来

![在这里插入图片描述][ca786254d3f24b6d85a529962e2bf808.png]

div和span标签的具体用法特点在CSS章节中再整理。

[c5c28f239b804c549b02279dbdf58678.png]: https://img-blog.csdnimg.cn/c5c28f239b804c549b02279dbdf58678.png
[b0e505170c8e4703a08b9c3a5358161e.png]: https://img-blog.csdnimg.cn/b0e505170c8e4703a08b9c3a5358161e.png
[8a18eb86dc36430f880178a2ef8b5a14.png]: https://img-blog.csdnimg.cn/8a18eb86dc36430f880178a2ef8b5a14.png
[d64241a66b834451b8ba8934e9a92d5c.png]: https://img-blog.csdnimg.cn/d64241a66b834451b8ba8934e9a92d5c.png
[af23231ec0734799ae3b630b33285163.png]: https://img-blog.csdnimg.cn/af23231ec0734799ae3b630b33285163.png
[99d5766bc6884e7d998eee671350bb6d.png]: https://img-blog.csdnimg.cn/99d5766bc6884e7d998eee671350bb6d.png
[83a32c7deeec44d69e98f4fddfe3c178.png]: https://img-blog.csdnimg.cn/83a32c7deeec44d69e98f4fddfe3c178.png
[5b5a8630e0ee45a0ae6d32f3343c321c.png]: https://img-blog.csdnimg.cn/5b5a8630e0ee45a0ae6d32f3343c321c.png
[6ec80c9b17834e16b5436cad40862bca.png]: https://img-blog.csdnimg.cn/6ec80c9b17834e16b5436cad40862bca.png
[50fa9bd2a6ab44caa4987eae5be7bda7.png]: https://img-blog.csdnimg.cn/50fa9bd2a6ab44caa4987eae5be7bda7.png
[65515ae1e9944b3b9a1d317546de4e34.png]: https://img-blog.csdnimg.cn/65515ae1e9944b3b9a1d317546de4e34.png
[149a840b57d447d5a9c0a2fffcfb7a04.png]: https://img-blog.csdnimg.cn/149a840b57d447d5a9c0a2fffcfb7a04.png
[516ed77ec2c24d359c90c0013a1b550c.png]: https://img-blog.csdnimg.cn/516ed77ec2c24d359c90c0013a1b550c.png
[6f316674a324476287e731427268cf3c.png]: https://img-blog.csdnimg.cn/6f316674a324476287e731427268cf3c.png
[3f33ea36570349eba4e637c5c030d556.png]: https://img-blog.csdnimg.cn/3f33ea36570349eba4e637c5c030d556.png
[ebb9dd2ecf0b49ed85ed65dc449424b5.png]: https://img-blog.csdnimg.cn/ebb9dd2ecf0b49ed85ed65dc449424b5.png
[9a3bebf1b33f4e4cb1315f80b72c0d6b.png]: https://img-blog.csdnimg.cn/9a3bebf1b33f4e4cb1315f80b72c0d6b.png
[c077c4fd5c4643598e281dfa04058200.png]: https://img-blog.csdnimg.cn/c077c4fd5c4643598e281dfa04058200.png
[ae530ff9f33049a9a7a9e3ef3edc8651.png]: https://img-blog.csdnimg.cn/ae530ff9f33049a9a7a9e3ef3edc8651.png
[a60b7de13bf44073a8185c2a78c6ea44.png]: https://img-blog.csdnimg.cn/a60b7de13bf44073a8185c2a78c6ea44.png
[6cf37ec5e8ba4885ab9ce6d3bf7c778a.png]: https://img-blog.csdnimg.cn/6cf37ec5e8ba4885ab9ce6d3bf7c778a.png
[daa8ff11eb1c463e959ed9b8f88eb0ca.png]: https://img-blog.csdnimg.cn/daa8ff11eb1c463e959ed9b8f88eb0ca.png
[d3152563a6e54e0a92f9a845d601e69e.png]: https://img-blog.csdnimg.cn/d3152563a6e54e0a92f9a845d601e69e.png
[c0628a09521f4715a886161bbb7fb7e9.png]: https://img-blog.csdnimg.cn/c0628a09521f4715a886161bbb7fb7e9.png
[ca786254d3f24b6d85a529962e2bf808.png]: https://img-blog.csdnimg.cn/ca786254d3f24b6d85a529962e2bf808.png