JavaWeb——HTML - 技术栈

一、什么是HTML

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

超文本：超越了文本的限制，比普通文本更强大。除了文字信息还可以定义图片，音频，视频等。
标记语言：由标签构成的语言
- HTML语言都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

二、HTML基础语法

HTML基本结构

html 复制代码

<html>
    <head>
        <title>标题</title>
    </head>
    <body>  
        填写内容
    </body>
</html>

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

图片标签：<img src="..." width="-" height="-">

src：指定图像的url（绝对路径 / 相对路径）
width：图像的宽度（像素 / 相对于父元素的百分比）
height：图像的高度（像素 / 相对于父元素的百分比）

html 复制代码

<html>
	<head>
		<title>HTML 快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
		<img src="1.jpg"/> <!-- 等价于<img src="1.jpg></img> -->
	</body>
</html>

标题标签：<h1> - <h6>

html 复制代码

<h1>111111111111</h1>
<h2>111111111111</h2>
<h3>111111111111</h3>
<h4>111111111111</h4>
<h5>111111111111</h5>
<h6>111111111111</h6>

h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。

水平线标签：<hr>

布局标签：<span>

一个在开发网页时大量用到没有语义的布局标签。

超链接标签：<a href="..." target="..."></a>

href指定资源访问的url
target：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在新的空白页面处打开

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>

    <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a>
    <hr>
</body>
</html>

视频标签：<vedio src="..." controls="..." width="..." height="...">

src：视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度

音频标签：<audio>

src：音频的url
controls：显示播放控件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>

    <!-- 正文 -->
    <!-- 视频 -->
    <video src="video/1.mp4" controls width="950px"></video>

    <!-- 音频 -->
    <audio src="audio/1.mp3" controls></audio>
    <hr>
</body>
</html>

段落标签：<p>

换行标签：<br>

文本加粗标签：<b>/<strong>

表格标签：

<table>：定义表格整体，可以包裹多个<tr>
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元之间的空间
<tr>：表格的行，可以包裹多个<td>
<td>：表格单元格(普通)，可以包裹内容，如果是表头单元格可以替换为<th>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>
</html>

表单标签：<form>在网页中主要负责数据采集功能，如注册、登录等数据采集。

表单项：不同类型的input元素、下拉列表、文本域等
- <input>：定义表单项，通过type属性控制输入形式
- <select>：定义下拉列表
- <textarea>：定义文本域
属性：
- action：规定当提交表单时向何处发送表单数据,URL
- method：规定用于发送表单数据的方式，GET、POST等

html 复制代码

<body>
    <!-- 
    form表单属性: 
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
        method: 表单的提交方式 .
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
    -->   
	
    <form action="" method="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="提交">
    </form>
	
</body>

表单输入类型：

|------------------------------|-------------------|
| type取值 | 描述 |
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date / time / datetime-local | 定义日期/时间/日期时间 |
| number | 定义数字输入框 |
| email | 定义邮件输入框 |
| hidden | 定义隐藏域 |
| submit / reset / button | 定义提交按钮/充值按钮/可点击按钮 |

html 复制代码

<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">
	 	
     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>