HTML快速入门 - 技术栈

HTML

<table border="1">
     <tr>
           <th>列标题1</th>
           <th>列标题2</th>
           <th>列标题3</th>
       </tr>
       <tr>
           <td>元素1</td>
           <td>元素2</td>
           <td>元素3</td>
       </tr>
       <tr>
           <td>元素21</td>
           <td>元素22</td>
           <td>元素23</td>
       </tr>
</table>

HTML标签属性

HTML 标签属性用于在 HTML 元素中设置各种属性，从而控制元素的行为、外观和其他特性。以下是关于 HTML 标签属性的一些重要信息：

1. 基础属性

id ：用于为 HTML 元素指定唯一的标识符。例如，<div id="header"></div>。
class ：用于为 HTML 元素指定一个或多个类名，这些类名可以在 CSS 中使用。例如，<p class="text-primary"></p>。
style ：用于直接在元素上内联应用 CSS 样式。例如，<h1 style="color:blue;">Hello World</h1>。
title ：用于为元素添加工具提示，当用户将鼠标悬停在元素上时显示。例如，<abbr title="World Health Organization">WHO</abbr>。

2. 表单属性

type ：用于定义 <input> 元素的输入类型，例如文本、密码、按钮等。

html 复制代码

 <input type="text"> <br><br>
 <input type="text"> <br><br>
 <input type="password"> <br><br>
 <input type="button"> <br><br>

placeholder ：用于在输入字段为空时显示提示文本。<input type="text" placeholder="Enter your name">。
value ：用于设置输入字段的默认值。<input type="text" value="John Doe">。
name ：用于表单数据提交时标识输入字段。<input type="text" name="username">。
disabled ：将元素禁用，使其不可编辑或点击。<button disabled>Submit</button>。
checked ：用于预选中复选框或单选按钮。<input type="checkbox" checked>。
readonly ：使输入字段为只读。<input type="text" value="Readonly Text" readonly>。
maxlength ：限制输入字段的最大字符数。<input type="text" maxlength="10">。

3. 链接和图像属性

href ：用于指定超链接目标的 URL。<a href="https://www.example.com">Visit Example</a>。
target ：指定链接打开的方式，常见值为 _blank (在新窗口或标签页中打开)。<a href="https://www.example.com" target="_blank">Open in new tab</a>。
_self表示在当前窗口打开
_blank表示在新窗口打开
_parent表示在父窗口或者父框架打开
_top在顶层窗口或者顶层框架打开
src ：用于指定图像的来源 URL。<img src="image.jpg" alt="Image Description">。
alt ：为图像添加替代文本，当图像无法加载时显示。<img src="image.jpg" alt="当前图片无法显示">。
width 和 height ：用于设置图像的宽度和高度。<img src="image.jpg" width="500" height="300">。

4. 全局属性

这些属性可以应用于几乎所有的 HTML 元素。

data-* ：自定义数据属性，通常用于在 JavaScript 中存储和访问自定义数据。<div data-user-id="12345"></div>。
hidden ：使元素在页面中隐藏。<p hidden>This text is hidden</p>。
lang ：指定元素内容的语言。<html lang="en">。
tabindex ：控制元素的键盘导航顺序。<input type="text" tabindex="1">。
draggable ：指定元素是否可以被拖动。<img src="image.jpg" draggable="true">。

5. 事件属性

onclick ：当用户点击元素时触发 JavaScript 函数。<button onclick="alert('Clicked!')">Click Me</button>。
onmouseover ：当鼠标悬停在元素上时触发。<div onmouseover="this.style.backgroundColor='yellow'">Hover over me!</div>。
onfocus ：当元素获得焦点时触发。<input type="text" onfocus="this.style.border='2px solid blue'">。

6. 媒体属性

controls ：为音频或视频元素添加播放控件。<video src="video.mp4" controls></video>。
autoplay ：页面加载时自动播放音频或视频。<video src="video.mp4" autoplay></video>。
loop ：自动重播音频或视频。<audio src="audio.mp3" loop></audio>。
muted ：默认静音播放音频或视频。<video src="video.mp4" muted></video>。

7. SEO 和元信息属性

meta 标签中的 name 和 content ：定义页面的元数据，如描述、关键词等。<meta name="description" content="This is an example of a meta description.">。
rel ：用于定义 <link> 和 <a> 元素之间的关系。例如，<link rel="stylesheet" href="styles.css">。

块元素与行内元素

HTML中的元素主要分为两类：块元素（Block Elements）和行内元素（Inline Elements）。这两类元素在页面布局和显示上有不同的行为。

块元素（Block Elements）

块元素通常用于定义文档结构中的大块内容。它们的特点是：

独占一行：块元素通常会从新的一行开始，并且其后的内容也会换行。
默认宽度：块元素的默认宽度是它们的父容器的100%，除非手动设置宽度。
可以包含其他块元素和行内元素：块元素可以嵌套其他块元素或行内元素。

常见的块元素有：

<div>：常用于布局的通用容器。
<p>：表示一个段落。
<h1> 到 <h6>：表示标题，级别从1到6。
<ul> 和 <ol>：表示无序列表和有序列表。
<li>：表示列表项，通常用于<ul> 和 <ol> 内。
<blockquote>：表示块引用，用于引用一段内容。
<header>、<footer>、<section>、<article>：表示HTML5的语义化元素，用于文档结构划分。

示例：

html 复制代码

    <div>
        <span>这是一个标签</span>
        <span>这是一个标签</span>
        <span>这是一个标签</span>
    </div>
    <div>
        <span>这是一个标签</span>
        <span>这是一个标签</span>
    </div>

行内元素（Inline Elements）

行内元素用于在文本中嵌入内容，不会打断文本的流动。它们的特点是：

不独占一行：行内元素不会从新的一行开始，且其后的内容不会换行。
宽度取决于内容：行内元素的宽度通常与其内容的宽度相同。
只能包含行内元素或文本：行内元素通常只能嵌套其他行内元素或文本，不能包含块元素。

常见的行内元素有：

<span>：常用于文本样式设置的通用行内容器。
<a>：表示超链接。
<strong> 和 <em>：表示加粗和斜体，用于强调文本。
<img>：表示图像。
<br>：表示换行符。
<abbr>：表示缩写或缩略词。
<code>：表示代码片段。

示例：

html 复制代码

<span>这是一个标签</span>
<span>这是一个标签</span>
<span>这是一个标签</span>

块元素与行内元素的区别

布局行为：块元素独占一行，而行内元素在同一行内排列。
内容容纳：块元素可以容纳其他块元素和行内元素，而行内元素通常只能容纳文本或其他行内元素。
使用场景：块元素用于定义页面的结构和布局，而行内元素用于样式化和格式化文本。

表单

HTML 表单（Form）是用于收集用户输入数据的部分，可以将数据发送到服务器进行处理。表单通常用于各种用户交互，如登录、注册、搜索等。HTML 表单由多个元素组成，这些元素可以包括文本框、按钮、选择框、复选框等。

表单的基本结构

HTML 表单的核心是 <form> 标签。表单中的各种输入控件通过不同的标签定义，如 <input>, <textarea>, <select> 等。

html 复制代码

<form action="submit_form.php" method="POST">
    <!-- 表单控件 -->
</form>

action 属性：指定表单数据提交到的服务器端脚本或处理程序的URL。
method 属性 ：指定表单数据提交的方式，通常有两种：
- GET：数据附加在URL的查询字符串中，适合于非敏感数据传输。
- POST：数据在HTTP请求的主体中发送，适合传输大量或敏感数据。

常用的表单元素

<input> 标签
<input> 是最常用的表单元素，通过 type 属性来指定输入控件的类型。

文本输入 (type="text")

html 复制代码

<label for="name">Name:</label>
<input type="text" id="name" name="name">

密码输入 (type="password")

html 复制代码

<label for="password">Password:</label>
<input type="password" id="password" name="password">

单选按钮 (type="radio")

html 复制代码

<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

复选框 (type="checkbox")

html 复制代码

<label><input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter</label>

提交按钮 (type="submit")
html 复制代码
```
<input type="submit" value="Submit">
```
重置按钮 (type="reset")
html 复制代码
```
<input type="reset" value="Reset">
```

<textarea> 标签
<textarea> 用于多行文本输入，例如评论或反馈。

html 复制代码

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

<select> 和 <option> 标签
<select> 标签用于创建下拉列表，<option> 标签定义列表中的选项。

html 复制代码

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

<label> 标签
<label> 标签用于为表单控件定义标签，并通过 for 属性与表单控件关联，增强可访问性。
html 复制代码
```
<label for="email">Email:</label>
<input type="email" id="email" name="email">
```
<button> 标签
<button> 标签可以定义一个按钮，按钮的功能可以通过 type 属性指定，例如 submit（提交表单）或 button（普通按钮）。
html 复制代码
```
<button type="submit">Submit Form</button>
```

表单验证

HTML5 提供了一些内置的表单验证特性，减少了对JavaScript的依赖。

必填字段 (required)

html 复制代码

<input type="text" name="username" required>

输入模式 (pattern)

html 复制代码

<input type="text" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890">

输入范围 (min, max, step)

html 复制代码

<input type="number" name="age" min="18" max="100" step="1">

表单的提交与处理

当用户点击提交按钮时，表单数据将根据 action 属性指定的 URL 和 method 属性的请求方法发送到服务器。服务器接收到数据后，可以进行处理，如存储、验证、或执行其他操作。

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <label for="username">用户名：</label>
        <input type="text" id="username" placeholder="请输入内容">
        <input type="value" id="username" value="请输入内容">
        <br><br>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" placeholder="请输入密码">
        <br><br>
        <label>性别</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
        <br><br>
        <label for="">爱好</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">唱歌2
        <input type="checkbox" name="hobby">唱歌3
        <input type="checkbox" name="hobby">唱歌4
        <input type="checkbox" name="hobby">唱歌5
        <br><br>
        <input type="submit" value="上传">
    </form>
</body>
</html>