bootstrap的引入文件（如果不起作用就引入这个，不起作用可能版本问题）

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

一、HTML的标签、元素 、属性的理解。

HTML是超文本标记语言，用于创建网页的结构和内容。以下是HTML中一些重要的内容：

（1） 标签：

HTML使用标签来定义页面上不同的元素，例如段落、标题、链接等。标签通常由尖括号包围，并且可以带有属性来定义更多的特征。

（2） 元素：

在HTML中，标签和其内容一起形成所谓的“元素”。例如，<p>这是一个段落</p >就是一个完整的段落元素。

（3） 属性：

HTML标签可以带有属性，用于定义元素的额外特征。例如，在<img>标签中使用“src”属性来指定图像文件的URL地址。

二、HTML标签的分类。

（1）块级元素（Block-level Elements）：

块级元素通常用于构建页面的结构，它们会单独占据一行或多行，并且可以设置宽度、高度等样式属性。

块级元素包括 <div>、<h1> 至 <h6>、<p>、<ul>、<ol>、<li> 等。

（2）行内元素（Inline Elements）：

行内元素通常用于构建文本内容，它们不会独占一行，只会在一行中占据所需的空间。这意味着，行内元素不能通过设置宽度、高度来改变其显示方式，但是可以设置一些基础的样式属性（如颜色、字体大小等）。

行内元素包括 <span>、<a>、<strong>、<em>、<img> 等。

（3）行内块元素（Inline-block Elements）：

行内块元素是介于块级元素和行内元素之间的一种元素类型，与行内元素类似，它们不会独占一行，但是可以通过设置宽度、高度等样式属性来改变其显示方式。使用行内块元素，可以将多个元素放在同一行上。

行内块元素包括 <input>、<button>、<select>、<textarea> 等。

（4）表格元素（Table Elements）：

表格元素通常用于组织数据，包括 <table>、<tr>、<td>、<th> 等。

（5）表单元素（Form Elements）：

表单元素通常用于提交用户输入的数据，包括 <form>、<input>、<button>、<label>、<select>、<textarea> 等。

（6）媒体元素（Media Elements）：

媒体元素通常用于添加多媒体内容，包括 <img>、<audio>、<video> 等。

三、以下是一些常见的HTML属性：

1、 id: 为一个元素定义唯一标识符。

例如 <div id="header">...</div>。

2.、class: 为一个或多个元素定义名字（类名）。

例如 <p class="intro">...</p>。

3、href：定义链接地址，用于跳转至其他页面或资源。

例如 <a href=" ">...</a>。

4、src：定义图片或媒体资源地址，用于显示图像或播放音视频。

例如 <img src="image.jpg" alt="example image">。

5、alt：定义图片无法显示时的替代文本，需配合 src 使用。

例如 <img src="image.jpg" alt="example image">。

6、title：定义元素的额外信息，通常用于鼠标悬停提示。

例如 <a href="#" title="click me">...</a>。

7、style：定义元素样式，用于控制元素的外观和布局。

例如 <div style="background-color: #eee; padding: 10px;">...</div>。

8、target：定义链接打开方式，例如 _blank 在新窗口中打开链接。

例如 <a href="https://www.google.com/" target="_blank">...</a>。

9、rel：定义链接与当前页面之间的关系，例如 nofollow 表示不传递搜索引擎权重。

例如 <a href="#" rel="nofollow">...</a>
<link rel="stylesheet" href="${pageContext.request.contextPath}/ps/boot.css">

10、value：定义表单元素的默认值，例如输入框或按钮等。

例如 <input type="text" value="default value">。

11、name：表单提交是所提交的参数名（或为页内命名描点提供名称）。

表单：

<form><div><label for="username">User name:</label><input type="text" id="username" name="username"></div><button type="submit">Submit</button>
</form>

描点：

<a href="#section2">Go to section 2</a><h2 name="section2">Section 2</h2>

  12、checked：选中复选框或单选框等。

例如 <input type="radio" name="gender" value="male" checked> male。

13、selected：默认选中下拉框或列表框等选项。

例如 <select><option value="value1" selected>option 1</option></select>。

 14、type: 定义input按钮或提交按钮等类型;

例如: <input type="submit" value="Submit">

15、placeholder：设置输入框的提示文本。

<input type="text" placeholder="请输入你的用户名">

16、maxlength：定义输入框最大字符数。

例如 <input type="text" maxlength="10">。

17、required：定义表单元素是否为必填项。

例如 <input type="text" required>。

18、pattern：定义表单元素的正则表达式验证规则。

例如 <input type="text" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}">。

19、download：定义链接是否下载。

例如 <a href=" " download>download file</a>。

20、contenteditable：定义元素是否可编辑。

例如 <div contenteditable>editable content</div>。

21、cols：定义文本域中的列数。

例如 <textarea cols="40" rows="5">...</textarea>。

22、rows：定义文本域中的行数。

例如 <textarea cols="40" rows="5">...</textarea>。

23、align：定义图片或表格等的对齐方式。

例如 <img src="image.jpg" alt="example image" align="left">。

24、border：定义表格边框宽度。

例如 <table border="1">...</table>。

25、autocomplete：定义自动完成选项。

例如 <input type="text" autocomplete="off">。

 26、disabled：禁用表单元素或按钮等交互元素。

例如 <button disabled>disabled button</button>。

27、readonly：只读表单元素或输入框等。

例如 <input type="text" readonly value="read-only">。