HTML笔记-526互联

1.什么是HTMl：

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它使用一系列标签来定义网页的结构、内容和样式。HTML文档由一系列的元素组成，这些元素包括标题、段落、链接、图片、列表等。通过使用HTML标签，开发者可以创建出具有交互性和动态效果的网页。

2.HTML的基本常用标签包括：

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：根元素，包含整个页面的内容。
<head>：包含文档的元数据，如字符集、标题等。
<title>：定义网页的标题。
<body>：包含页面的实际内容，如文本、图片、链接等。
<h1>到<h6>：表示标题，从一级到六级。
<p>：表示段落。
<a>：表示超链接。
<img>：表示图像。
<ul>和<ol>：表示无序列表和有序列表。
<li>：表示列表项。
<div>：表示一个块级元素。
<span>：表示内联元素。
<table>：表示表格。
<tr>：表示表格行。
<td>：表示表格单元格。
<th>：表示表格头部单元格。
<form>：表示表单。
<input>：表示输入框。
<textarea>：表示多行文本输入框。
<select>：表示下拉列表。
<option>：表示下拉列表中的选项。
<button>：表示按钮。
<label>：表示标签。
<br>：表示换行符。
<hr>：表示水平分隔线。
<link>：用于引入外部CSS样式表。
<style>：用于编写内联CSS样式。

3.HTML标签的属性用于为元素添加额外的信息或配置。属性以名称和值的形式存在，并使用等号连接。以下是一些常见的HTML标签属性：

id：为元素指定一个唯一的标识符，以便在JavaScript中引用该元素。
class：为元素指定一个或多个类名，以便应用CSS样式或JavaScript操作。
style：内联样式属性，用于直接设置元素的样式。
href：链接标签（如<a>）的必需属性，指定链接的目标URL。
src：图像标签（如<img>）的必需属性，指定图像的源文件路径。
alt：图像标签的可选属性，提供图像无法显示时的替代文本。
width和height：图像标签的可选属性，指定图像的宽度和高度。
value：输入框、选择框和单选按钮等表单元素的必需属性，指定元素的初始值。
checked：复选框和单选按钮等表单元素的可选属性，表示元素是否被选中。
disabled：表单元素的可选属性，表示元素是否禁用，用户无法与它交互。
required：表单元素的可选属性，表示元素是必填项，用户必须填写才能提交表单。
target：链接标签的可选属性，指定链接打开的位置（例如，在新窗口中打开）。

4.HTML表格：

HTML表格是一种用于显示数据的数据结构，它由行和列组成。

一个简单的HTML表格：

如何将表格边框合并：使用border-collapse: collapse;属性将表格的边框合并为一个单一的边框。同时，还可以设置了border属性来定义边框的宽度、样式和颜色。

列合并：rowspan 行合并：colspan

5.表单：<form action="登录处理页面的URL" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br> <input type="submit" value="登录">

form表单的特点：

交互性：form表单可以让用户输入信息，提交后服务器进行处理。
数据收集：form表单可以收集用户的各种信息，如姓名、电话、邮箱等。
验证：form表单可以进行数据的验证，确保用户输入的信息符合要求。
提交方式：form表单可以通过GET或POST方法提交数据到服务器。
可扩展性：form表单可以根据需要添加更多的字段和功能。

form的常用元素：

input：用于接收用户输入的数据，如文本、数字、日期等。
select：用于让用户从下拉列表中选择一个选项。
textarea：用于让用户输入多行文本。
button：用于创建一个按钮，用户可以点击该按钮提交表单或执行其他操作。
label：用于为input元素添加描述性标签，提高用户体验。
fieldset和legend：用于将相关表单元素分组，并为其添加标题。
datalist：用于为input元素提供预定义的选项列表，以提高用户体验。

单选：<input type="radio" name="group1" value="option1"> 选项1 <input type="radio" name="group1" value="option2"> 选项2 <input type="radio" name="group1" value="option3"> 选项3

复选：<input type="checkbox" name="group1" value="option1"> 选项1 <input type="checkbox" name="group1" value="option2"> 选项2 <input type="checkbox" name="group1" value="option3"> 选项3

下拉框：<select name="group1"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select>

文本域：<textarea name="group1" rows="4" cols="50"></textarea>

提交重置：<form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>