零基础入门JavaWeb——HTML相关知识

￡神魔★判官ぃ 2024-03-31 12:45 57阅读 0赞

## 一、HTML概念 ##

HTML是Hyper Text Markup Language的缩写。意思是**超文本标记语言**。它的作用是搭建网页结构，在网页上展示内容。

### 1.1 超文本 ###

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

### 1.2 标记语言 ###

说HTML是一种**标记语言**，是因为它是由一系列**标签**组成的，没有常量、变量、流程控制、异常处理。IO等等这些功能。

HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

标签是通过一组尖括号和标签名的方式来定义的。`开始标签<>`和`结束标签</>`一起构成了一个完整的标签。开始标签的结束标签之间的部分叫**文本标签体**，也简称**标签体**。

## 二、HTML的结构 ##

### 2.1 文档声明 ###

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。

HTML5版本的文档类型声明如下：

<!DOCTYPE html>

### 2.2 根标签 ###

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。

### 2.3 头部 ###

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

### 2.4 主体 ###

body标签用于定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

### 2.5 注释 ###

HTML注释的写法如下：

注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明。

## 三、HTML语法规则 ##

1.  根标签有且只能有一个
2.  无论是双标签还是单标签都必须正确关闭
3.  标签可以嵌套但不能交叉嵌套
4.  注释不能嵌套
5.  属性必须有值，值必须加引号，单引号或双引号均可
6.  标签名不区分大小写，但建议使用小写

## 四、HTML的各个标签的使用 ##

### 4.1 标题标签 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题标签的介绍</title>
    </head>
    <body>
    
    
        <h1>我是标题</h1>
        <h2>我是标题</h2>
        <h3>我是标题</h3>
        <h4>我是标题</h4>
        <h5>我是标题</h5>
        <h6>我是标题</h6>
    </body>
    </html>

页面效果如下：

![请添加图片描述][41c087d7ea3b48089c86db0c2ef7e6a4.png]

### 4.2 段落标签和换行标签 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>段落标签</title>
    </head>
    <body>
    
    <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
    <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
    <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
    <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
    
    
    
        helloworld<br>
        你好世界
    </body>
    </html>

页面效果如下：

![请添加图片描述][1b7b3a7596a34485b8292aa652c98ca5.png]

### 4.3 无序列表标签 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无序列表标签</title>
    </head>
    <body>
    
    <ul>
        <li>刘备</li>
        <li>关羽</li>
        <li>张飞</li>
        <li>马超</li>
    </ul>
    </body>
    </html>

页面效果如下：  
![请添加图片描述][b25969f917374519a94602d92b0486d9.png]

### 4.4 超链接标签 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接标签</title>
    </head>
    <body>
    
    
        <a href="01_header.html">跳转到01_header.html</a>
    
        <br>
    
        <a href="../01_html入门/start.html">跳转到start.html</a>
    
        <br>
    
        <a href="http://www.baidu.com">跳转到百度</a>
    
        <br>
    
    
        <a href="http://www.baidu.com" target="_blank">跳转到百度</a>
    </body>
    </html>

页面效果如下：

![请添加图片描述][973e8456cf3b40ae80f32f37616b6966.png]

### 4.5 图片标签 ###

将准备好的图片放在img文件夹下。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
    
        <img src="../img/前端.jpeg" width="550" height="310"/>
    </body>
    </html>

页面效果如下：

![请添加图片描述][8c3a821a999342febd2a1ba1f87cd2b1.png]

### 4.6 块标签 ###

块并不是为了显示文章的内容，而是为了方便结合CSS对页面进行布局。

块有两种，div是前后有换行的块，span是前后没有换行的块。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div和span标签的介绍</title>
    </head>
    <body>
        
    
        <div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块</div>
        <div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块</div>
    
        <span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块</span>
        <span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块</span>
    
        <div>hello world         你好世界</div>
    </body>
    </html>

页面效果如下：

![请添加图片描述][418431e2a66b4bc3955009e4ddf619b9.png]

### 4.7 转义字符 ###

在HTML文件中，<、>等等符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果要使用符号本身怎么办呢？需要使用HTML实体来进行转义。

### 4.8 小结 ###

<table> 
 <thead> 
  <tr> 
   <th>标签名称</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h1~h6</td> 
   <td>1级标题~6级标题</td> 
  </tr> 
  <tr> 
   <td>p</td> 
   <td>段落</td> 
  </tr> 
  <tr> 
   <td>a</td> 
   <td>超链接</td> 
  </tr> 
  <tr> 
   <td>br</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>ul/li</td> 
   <td>无序列表</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>图片</td> 
  </tr> 
  <tr> 
   <td>div</td> 
   <td>定义一个前后有换行的块</td> 
  </tr> 
  <tr> 
   <td>span</td> 
   <td>定义一个前后无换行的块</td> 
  </tr> 
 </tbody> 
</table>

## 五、表格标签 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
        
        <style type="text/css">
            table,th,td {
          
                border-collapse: collapse;
                border: 1px solid black;
                padding: 5px;
            }
        </style>
    </head>
    <body>
    
        <table>
            <tr>
                <th>姓名</th>
                <th>属性</th>
                <th>级别</th>
                <th>忍村</th>
            </tr>
            <tr>
                <td>漩涡鸣人</td>
                <td>风</td>
                <td>下忍</td>
                <td>木叶</td>
            </tr>
            <tr>
                <td>宇智波佐助</td>
                <td rowspan="2">雷&火</td>
                <td colspan="2">下忍</td>
            </tr>
            <tr>
                <td>我爱罗</td>
                <td>影</td>
                <td>砂隐村</td>
            </tr>
        </table>
    </body>
    </html>

页面效果如下：

![请添加图片描述][c4a12b4c390b43b48d7b22eb0f926204.png]

## 六、表单标签 ##

### 6.1 表单标签的作用 ###

在项目开发过程中，凡是需要用户填写的信息都需要用到表单。

表单的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器。

### 6.2 form标签的介绍 ###

在HTML中使用form标签来定义一个表单。form标签有两个重要的属性：action和method。

#### 6.2.1 action属性 ####

用户在表单里填写的信息需要发送到服务器端。服务器端接收表单数据的地址要写在form标签的action属性中。

#### 6.2.2 method属性 ####

form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。

## 七、 表单项标签 ##

表单中的每一项，包括：文本框、密码框、单选框、多选框等等，都称之为表单项，一个表单中可以包含多个表单项。

### 7.1 name和value属性 ###

在各个具体的表单标签中，通过**name属性**来给数据起**名字**，通过**value属性**来保存要发送给服务器的**值**。

### 7.2 单行文本框 ###

用户名<input type="text" name="username"/><br/>

### 7.3 密码框 ###

密码<input type="password" name="pwd"/><br/>

### 7.4 单选框 ###

性别<input type="radio" name="gender" value="male" checked="checked"/>男
            <input type="radio" name="gender" value="female"/>女<br/>

### 7.5 多选框 ###

兴趣爱好
            <input type="checkbox" name="hobby" value="basketball"/>篮球
            <input type="checkbox" name="hobby" value="football" checked/>足球
            <input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球
            <input type="checkbox" name="hobby" value="badminton"/>羽毛球
            <br/>

### 7.6 下拉框 ###

学历
            <select name="education">
                <option value="gz">高中</option>
                <option value="zk">专科</option>
                <option value="bk">本科</option>
                <option value="ss">硕士</option>
                <option value="bs">博士</option>
            </select>
            <br/>

### 7.7 按钮 ###

### 7.8 隐藏域 ###

<input type="hidden" name="id" value="1"/>

### 7.9 多行文本框 ###

<textarea name="desc" rows="10" cols="50">

### 7.10 效果 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单标签</title>
    </head>
    <body>
        <form action="http://www.baidu.com" method="post">
            
            用户名<input type="text" name="username"/><br/>
            密码<input type="password" name="pwd"/><br/>
            性别<input type="radio" name="gender" value="male" checked="checked"/>男
            <input type="radio" name="gender" value="female"/>女<br/>
    
            兴趣爱好
            <input type="checkbox" name="hobby" value="basketball"/>篮球
            <input type="checkbox" name="hobby" value="football" checked/>足球
            <input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球
            <input type="checkbox" name="hobby" value="badminton"/>羽毛球
            <br/>
    
            学历
            <select name="education">
                <option value="gz">高中</option>
                <option value="zk">专科</option>
                <option value="bk">本科</option>
                <option value="ss">硕士</option>
                <option value="bs">博士</option>
            </select>
            <br/>
    
            <input type="button" value="普通按钮"/>
            <br/>
    
            <input type="submit" value="提交"/>
            <br/>
    
            <input type="reset" value="重置表单">
            <br/>
    
            <button type="button">普通按钮</button>
            <button type="submit">提交按钮</button>
            <button type="reset">重置按钮</button>
            <br/>
            
            <input type="hidden" name="id" value="1"/>
    
            
            <textarea name="desc" rows="10" cols="50">
    
            </textarea>
            <br/>
        </form>
    </body>
    </html>

页面效果如下：

![请添加图片描述][e173a0ad95ad4fdbb95ce3ac96e46328.png]

## 学海无涯苦作舟 ##

[41c087d7ea3b48089c86db0c2ef7e6a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e5ecae28e18c43468134d5d6eab99128.png
[1b7b3a7596a34485b8292aa652c98ca5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4c8e5f590a1743988745d3f5c9c8422b.png
[b25969f917374519a94602d92b0486d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/983dd448993242b989a90e4529009426.png
[973e8456cf3b40ae80f32f37616b6966.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/35f30257a26e4df8974cb55e8e53656c.png
[8c3a821a999342febd2a1ba1f87cd2b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8a58bc68feb34331916d52904264d2ea.png
[418431e2a66b4bc3955009e4ddf619b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/004326e21be54afeb2f3b28511e53901.png
[c4a12b4c390b43b48d7b22eb0f926204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/505e46afa6584e10b97715b1ee0fe722.png
[e173a0ad95ad4fdbb95ce3ac96e46328.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/01c107cb59bd46d8bc903cc425bb2593.png