HTML快速入门

大家好，欢迎来到IT知识分享网。

HTML简介

HEML是一种超文本标记语言，用于创建网页结构，使用标记来展示文本，图片以及其他媒体的展示方式和布局。

标签

标签是HTML的基本组成单位，每个标签包含一个名称，例如<p>表示段落，<h1>表示一级标题，<img>表示图像,<a>表示超链接等。标签可以嵌套在其他标签中，形成一个层级结构，以创建更复杂的网页布局。

 在HTML中，标签分为单标签和双标签两种类型。

单标签

用于定义没有内容或不需要包裹其他元素的元素。它们只有一个标签名称，没有开始标签和结束标签。常见的单标签包括<br>用于换行，<img>用于插入图片，<input>用于输入控件等。

双标签

用于定义包含内容的元素。它们由开始标签和结束标签组成，开始标签包含了元素的名称和其他属性，结束标签使用斜杠/在标签名称之前来表示结束。开始标签和结束标签之间的内容就是该元素的内容。

常用标签

标题标签

 <h1>一级标题标签</h1> <h2>二级标题标签</h2> <h3>三级标题标签</h3> <h4>四级标题标签</h4> <h5>五级标题标签</h5> <h6>六级标题标签</h6>

段落标签

 //段落标签 <p> 这是一个段落标签 <br> <b>字体jia字体加粗</b> <br> <i>斜体</i> <br> <u>下划线</u> <br> <s>删除</s> </p>

 有序、无序列表

 <ul> //无序列表 <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> <li>无序列表4</li> </ul> <ol> //有序列表 <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> <li>有序列表4</li> </ol>

 表格标签

 <table border="15"> //表格标签 <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td>数据00</td> <td>数据01</td> <td>数据02</td> </tr> <tr> <td>数据10</td> <td>数据11</td> <td>数据12</td> </tr> </table>

图片标签

 <img src="code.png" alt="" width="100" height="100">

HTML属性

 介绍

 HTML属性是用于定义HTML元素的特性或行为。

属性以键值对的形式出现，其中键是属性的名称，值是属性的具体定义。

基本语法

• <开始标签 属性名=”属性值”>
• 属性名不区分大小写，属性值区分大小写。

常见html属性

适用于大多数HTML元素的属性

id

定义元素的唯一标识符，可以通过JavaScript或CSS选择器来操作该元素。

class

定义元素的类名，用于指定元素的样式和设置样式规则。

style

定义元素的内联样式，用于设置元素的具体样式规则。

其他HTML元素属性

href

指定链接的目标URL，电子邮箱，电话等。用于创建超链接。

 <a href="https://www.baidu.com">baidu</a>

target

指定链接在何处打开，通常用于控制链接在当前窗口打开还是新窗口打开。

 <a href="https://www.baidu.com" target="_blank">baidu</a>

src

指定元素的来源，通常用于嵌入图像、视频、音频等外部资源。

alt

指定图像的替代文本，用于在图像无法加载时显示。

 HTML区块

块元素与行内元素

块元素（block element）是指在HTML中会占据一整行的元素。块元素会自动换行，并且可以设置宽度、高度、边距和内边距等样式属性。常见的块元素有<div>,<p>,<h1>到<h6>,<section>,<article>等。

行内元素（inline element）是指在HTML中不会独占一行的元素。行内元素不会自动换行，并且宽度由内容决定，无法设置宽度、高度、边距和内边距等样式属性。常见的行内元素有<span>,<a>,<strong>,<em>,<img><br><input>等。

div标签

<div>标签是一个块级元素，用于定义文档中的一个分区或区块。它可以用来创建和定义网页的布局结构，例如页眉、页脚、侧边栏等。可以通过CSS来为<div>标签设置样式和属性，例如背景颜色、边框、宽度、高度等。

span标签

<span>标签是一个内联元素，用于为文本的一部分或一段文字设置样式和属性。它可以用来设置文本的颜色、字体大小、字体样式、加粗、斜体等。一般情况下，<span>标签不会单独使用，而是作为其他标签的子元素来使用，例如<p>、<a>、<h1>等。

HTML表单

form标签

介绍

用于创建表单。表单是用来收集用户输入的信息的工具。<form>标签可以包含一个或多个输入元素，比如文本框、复选框、单选按钮、下拉列表等。用户可以在这些输入元素中输入自己的信息，并通过表单提交按钮将信息发送到服务器进行处理。

常见的属性

• action：用于指定表单提交的目标URL。后端API；
• method：用于指定表单提交的HTTP方法，常见的有GET和POST。
• enctype：用于指定表单提交的编码类型，常见的有application/x-www-form-urlencoded和multipart/form-data。
• target：用于指定表单提交后的显示目标窗口或框架。

input标签

介绍

是HTML中的一种表单元素标签，用于创建一个输入框，允许用户在其中输入文本。

<input>标签有许多不同的属性，可以用来指定输入框的类型、默认值、最小值、最大值以及其他的一些限制条件。

常用属性

• type：指定输入框的类型，如文本框（text）、密码框（password）、复选框（checkbox）、单选框（radio）等。
• value：指定输入框的默认值。
• placeholder：指定输入框中的提示文本，在用户输入之前显示。
• required：指定输入框是否为必填项。
• min、max：指定输入框的最小值和最大值，只适用于某些类型的输入框，如数字输入框（number）。
• pattern：指定输入框的输入格式，可以使用正则表达式进行匹配。

label标签

for属性

将label标签绑定到input元素，与input中的id相对应。

使用

 //文本框 <form action=""> //使用label和input搭配 <label>名字</label> <input type="text" placeholder="输入名字"> <br> //使用span和input搭配 <span>密码</span> <input type="password" placeholder="输入密码"> </form> //单选框 <form action=""> <label for="">性别</label> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <br> <input type="submit" value="上传"> </form>