1.HTML

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

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

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

（1） 标签：

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

（2） 元素：

在HTML中，标签和其内容一起形成所谓的“元素”。例如，

这是一个段落

就是一个完整的段落元素。

（3） 属性：

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

二、HTML标签的分类。

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

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

块级元素包括

、

至

、

、

、
、
1. 等。

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

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

   行内元素包括 、、、、 等。

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

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

   行内块元素包括 、、、 等。</p> <h2>（4）表格元素（Table Elements）：</h2> <p>表格元素通常用于组织数据，包括 <table>、<tr>、<td>、<th> 等。</p> <h2>（5）表单元素（Form Elements）：</h2> <p>表单元素通常用于提交用户输入的数据，包括 <form>、<input>、<button>、<label>、<select>、<textarea> 等。</p> <h2>（6）媒体元素（Media Elements）：</h2> <p>媒体元素通常用于添加多媒体内容，包括 <img>、<audio>、<video> 等。</p> <h1>三、以下是一些常见的HTML属性：</h1> <p>1、 <strong>id</strong>: 为一个元素定义唯一标识符。</p> <pre><code class="language-html">例如 <div id="header">...</div>。</code></pre> <p>2.、<strong>class</strong>: 为一个或多个元素定义名字（类名）。</p> <pre><code class="language-html">例如 <p class="intro">...</p>。</code></pre> <p>3、<strong>href</strong>：定义链接地址，用于跳转至其他页面或资源。</p> <pre><code class="language-html">例如 <a href=" ">...</a>。</code></pre> <p>4、<strong>src</strong>：定义图片或媒体资源地址，用于显示图像或播放音视频。</p> <pre><code class="language-html">例如 <img src="image.jpg" alt="example image">。</code></pre> <p>5、<strong>alt</strong>：定义图片无法显示时的替代文本，需配合 src 使用。</p> <pre><code class="language-html">例如 <img src="image.jpg" alt="example image">。</code></pre> <p>6、<strong>title</strong>：定义元素的额外信息，通常用于鼠标悬停提示。</p> <pre><code class="language-html">例如 <a href="#" title="click me">...</a>。</code></pre> <p>7、<strong>style</strong>：定义元素样式，用于控制元素的外观和布局。</p> <pre><code class="language-html">例如 <div style="background-color: #eee; padding: 10px;">...</div>。</code></pre> <p>8、<strong>target</strong>：定义链接打开方式，例如 _blank 在新窗口中打开链接。</p> <pre><code class="language-html">例如 <a href="https://www.google.com/" target="_blank">...</a>。</code></pre> <p>9、<strong>rel</strong>：定义链接与当前页面之间的关系，例如 nofollow 表示不传递搜索引擎权重。</p> <pre><code class="language-html">例如 <a href="#" rel="nofollow">...</a> <link rel="stylesheet" href="${pageContext.request.contextPath}/ps/boot.css"></code></pre> <p>10、<strong>value</strong>：定义表单元素的默认值，例如输入框或按钮等。</p> <pre><code class="language-html">例如 <input type="text" value="default value">。</code></pre> <p>11、<strong>name</strong>：表单提交是所提交的参数名（或为页内命名描点提供名称）。</p> <p>表单：</p> <pre><code class="language-html"><form> <div> <label for="username">User name:</label> <input type="text" id="username" name="username"> </div> <button type="submit">Submit</button> </form></code></pre> <p>描点：</p> <pre><code class="language-html"><a href="#section2">Go to section 2</a> <h2 name="section2">Section 2</h2></code></pre> <p>  12、<strong>checked</strong>：选中复选框或单选框等。</p> <pre><code class="language-html">例如 <input type="radio" name="gender" value="male" checked> male。</code></pre> <p>13、<strong>selected</strong>：默认选中下拉框或列表框等选项。</p> <pre><code class="language-html">例如 <select><option value="value1" selected>option 1</option></select>。</code></pre> <p> 14、<strong>type</strong>: 定义input按钮或提交按钮等类型;</p> <pre><code class="language-html">例如: <input type="submit" value="Submit"></code></pre> <p>15、<strong>placeholder</strong>：设置输入框的提示文本。</p> <pre><code class="language-html"><input type="text" placeholder="请输入你的用户名"></code></pre> <p>16、maxlength：定义输入框最大字符数。</p> <pre><code class="language-html">例如 <input type="text" maxlength="10">。</code></pre> <p>17、required：定义表单元素是否为必填项。</p> <pre><code class="language-html">例如 <input type="text" required>。</code></pre> <p>18、pattern：定义表单元素的正则表达式验证规则。</p> <pre><code class="language-html">例如 <input type="text" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}">。</code></pre> <p>19、download：定义链接是否下载。</p> <pre><code class="language-html">例如 <a href=" " download>download file</a>。</code></pre> <p>20、contenteditable：定义元素是否可编辑。</p> <pre><code class="language-html">例如 <div contenteditable>editable content</div>。</code></pre> <p>21、cols：定义文本域中的列数。</p> <pre><code class="language-html">例如 <textarea cols="40" rows="5">...。

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

   例如 ...。

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

   例如 。

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

   例如 ...。

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

   例如 

   。

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

   例如 

   disabled button。

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

   例如 。