Html学习笔记

最新推荐文章于 2024-05-12 11:55:54 发布

一封手寫信

最新推荐文章于 2024-05-12 11:55:54 发布

阅读量113

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_45320658/article/details/130037937

版权

文章目录

简介
内容

简介

HTML（Hyper Text Markup Language）是一种用于创建和表示网络上内容的标准标记语言。HTML采用标记的方式来描述文档的结构和语义，并且可以通过链接与其他文档相互关联。
HTML文档通常由头部信息和主体内容组成，其中头部信息包含文档的元数据，例如文档的标题、作者、字符编码等。HTML标记通过尖括号包围，例如和，其中尖括号中的内容被称为标签。HTML标签可以用来表示文本、图像、链接、表格、表单等内容。HTML还支持颜色和样式控制、脚本编写以及框架布局等功能。

内容

Html基础语法

Html基础语法指的是Html文档的结构和格式，包括Html文档的声明、头部信息、文本内容等。在Html文档中，基础语法是必须掌握的，因为它涉及到Html文档的整体结构和内容的显示方式。在文档的开头，需要写上Html文档的声明语句，格式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

Html元素和标签

Html元素是指Html文档中的所有内容，包括文本、图片、链接等。每个Html元素都是由一个标签和内容组成的，标签用来定义元素的类型，而内容则是元素的具体内容。

使用方法：Html标签由尖括号包围，通常是成对出现的，例如：

<p>这是一个段落。</p>

1、标题标签

<h1>-<h6>：定义标题
根据重要性逐级递减，<h1>为最高级标题，<h6>为最低级标题

<h1>Hello World!</h1>

2、段落标签

在<body>标签中使用<p>标签来定义段落。
可以在<p>标签中包含文本、图像、表格等等。

- 使用如下：
<p>这是一个段落。</p>

3、超链接

<body>标签中使用<a>标签来定义超链接。
通过href属性指定链接的目标地址。
可以在<a>标签中包含文本、图像等等。

- 使用如下：
- <a href="www.baidu.com">跳转到百度页面</a>

4、图像

在<body>标签中使用<img>标签来定义图像。
通过src属性指定图像的地址。
通过alt属性指定图像的替代文本，用于在图像无法显示时显示的文本信息。

<img src="exampleimg.jpg" alt="这是图片">

5、无序列表

<ul>标签用于定义无序列表，包含了一组无序的列表项，每个列表项前面有一个圆点符号。

<ul>标签的使用方法如下：

在<body>标签中使用<ul>标签来定义无序列表。
在<ul>标签中使用<li>标签来定义每个列表项。
可以在<li>标签中包含文本、图像等等。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

6、有序列表

<ol>标签用于定义有序列表，包含了一组有序的列表项，每个列表项前面有一个数字。<ol>标签的使用方法如下：

在<body>标签中使用<ol>标签来定义有序列表。
在<ol>标签中使用<li>标签来定义每个列表项。
可以在<li>标签中包含文本、图像等等。

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

7、表格

<table>标签用于定义表格

<table>标签的使用方法如下：

在<body>标签中使用<table>标签来定义表格。
在<table>标签中使用<tr>标签来定义每一行。
在<tr>标签中使用<th>标签来定义表格头，使用<td>标签来定义表格单元格。
可以在<th>标签和<td>标签中包含文本、图像等等。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

8、表单

<form>标签用于定义表单，通过action属性指定表单提交的目标地址，通过method属性指定表单提交的方式，通常为get或post。

<form>标签的使用方法如下：

在<body>标签中使用<form>标签来定义表单。
在<form>标签中使用<label>标签来定义表单字段的标签。
在<form>标签中使用<input>标签来定义表单字段的输入框。

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">

  <label for="password">密码：</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="提交">
</form>

用户控件标签

<input>是HTML中用于创建用户输入控件的标签。下面是标签的常用属性和使用方法：

type属性：用于指定输入控件的类型。常见的类型包括：

text：文本输入框。
password：密码输入框，输入的内容会被遮蔽。
checkbox：复选框，允许用户选择一个或多个选项。
radio：单选框，允许用户在一组选项中选择一个选项。
submit：提交按钮，用于提交表单。
button：普通按钮，用于触发自定义操作。
file：文件上传控件，用于选择文件。

name属性：用于指定输入控件的名称，以便在提交表单时使用。

value属性：用于指定输入控件的默认值。

placeholder属性：用于在输入框中显示提示文本，提示用户输入内容的格式或要求。

required属性：用于指定输入控件是否为必填项，如果未填写会提示用户进行填写。

disabled属性：用于禁用输入控件，使其无法编辑或选择。

checked属性：用于指定复选框或单选框是否默认选中。


下面是一些<input>标签的使用示例：
创建文本输入框：
<input type="text" name="username" placeholder="请输入用户名" required>

创建密码输入框：
<input type="password" name="password" placeholder="请输入密码" required>

创建复选框：
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="sports"> 运动

创建单选框：
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女

创建提交按钮：
<input type="submit" value="提交">

创建普通按钮：
<input type="button" value="重置" onclick="document.formName.reset()">

创建文件上传控件：
<input type="file" name="avatar">