当前位置：首页 > news >正文

前端快速入门学习2-HTML

news 2025/7/13 20:39:58

一、概述

HTML全称是Hypertext Markup Language(超文本标记语言)

HTML通过一系列的 标签(也称为元素) 来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。
标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如:
在这里插入图片描述
除了双标签，也存在单标签，例如:

区别：单标签用于内容的元素，双标签用于有内容的元素

二、练习

1.新建html
在本地新建一个文件夹，然后使用vscode打开文件夹，
在这里插入图片描述
然后在文件夹那点击新建文件，命名为xxx.html,点开文件，输入英文感叹号，然后回车，就可以生成一个基础的html文件了

2.标题标签

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

在这里插入图片描述

3.段落标签

<p>段落标签</p>
<p>更改文本样式:<b>加粗</b>，<i>斜体</i>，<u>下划线</u>，<s>删除线</s></p>
<p>文本颜色:<span style="color: red;">红色</span>，<span style="color: green;">绿色</span>，<span style="color: blue;">蓝色</span></p>
<p>文本大小:<span style="font-size: 20px;">20px</span>，<span style="font-size: 30px;">30px</span>，<span style="font-size: 40px;">40px</span></p>

在这里插入图片描述

4.列表

无序列表

 <ul>
     <li>列表项1</li>
     <li>列表项2</li>
     <li>列表项3</li>
</ul>

在这里插入图片描述
有序列表

<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <li>有序列表项3</li>
 </ol>

在这里插入图片描述

 <dl>
     <dt>定义列表标题</dt>
     <dd>定义列表内容</dd>
     <dt>定义列表标题2</dt>
     <dd>定义列表内容2</dd>
</dl>

在这里插入图片描述

5.表格标签

    <table border="1" cellspacing="5" cellpadding="10">
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
        <tr>
            <td>列表项1</td>
            <td>列表项2</td>
            <td>列表项3</td>
        </tr>
        <tr>
            <td>列表项1</td>
            <td>列表项2</td>
            <td>列表项3</td>
        </tr>
    </table>

在这里插入图片描述

三、HTML属性

属性在HTML中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素之间的关系。
基本语法：

<开始标签 属性名="属性值">

每个HTML元素可以具有不同的属性

<p id="describe" class="section">这是一个段落标签</p>
<a href="https://blog.csdn.net/fyfy96?spm=1000.2115.3001.5343" targent="_blank">这是我的主页</a>

效果：

这是一个段落标签

这是我的主页

属性名称不区分大小写，属性值对大小写敏感

<img src="example.jpg" alt="图片描述" width="200" height="200">
<img SRC="example.jpg" alt="图片描述" style="width: 200px; height: 200px;">

在这里插入图片描述

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

四、HTML区块

1.块级元素block
通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块
可以包含其他块级元素和行内元素。
常见的块级元素包括<div>，<p>，<h1>到，<h6>，<ul>，<ol>，<li>，<table>，<form>等

2.行内元素inline
通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在同一行内呈现，不会独占一行。
它们只占据其内容所需的宽度，而不是整行的宽度。
行内元素不能包含块级元素，但可以包含其他行内元素
常见的行内元素包括<br>,<span>，<a>,<strong>，<em>等。
3.行内块元素inline-block
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个。
具体特点如下：
高度、行高、外边距以及内边距都可以控制；
默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

1.div

<div>标签定义HTML 文档中的一个分隔区块或者一个区域部分。 <div>标签常用于组合块级元素，以便通过CSS 来对这些元素进行格式化。

    <div class="nav">       
        <ul>
            <li><a href="#">链接1</a></li>
            <li><a href="#">链接2</a></li>
            <li><a href="#">链接3</a></li>
        </ul>
    </div>

效果：

链接1
链接2
链接3

可接着在代码后面输入.content可创建一个class类的div，如果使用#nav,可创建id=content的div。

2.span

<span> HTML 元素是一个通用的行级容器，本身不具备特殊含义。它可被用于对元素进行编组，以便于添加样式（通过使用 class 或 id 属性），或共享属性值（例如lang属性）。该元素仅应在无其他合适语义元素时使用。<span> 与<div>元素非常相似，但是<div>是块级元素，而 <span> 是一个行级元素。

<p>
   这是一个行级元素<span class="ingredient">span</span>，本身不具备特殊含义。
</p>

效果：

这是一个行级元素span，本身不具备特殊含义。

### 3.元素类型转换 display display：block ，定义元素为块级元素

display : inline ，定义元素为行内元素

display：inline-block，定义元素为行内块级元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inline-block{
            display: block;
            width: 200px;
            height: 200px;

        }
    </style>
</head>
<body>
    <span>这是行内块元素演示</span>
    <img class="inline-block" src="example.jpg" alt="示例图片" width="200" height="200">
    
</body>
</html>

在这里插入图片描述

五、HTML表单

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联<label>元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

    <form action="/" method="post">
        <!--文本输入框-->
        <label for="username">用户名:</label>
        <input type="text" placeholder="请输入用户名" id="username" name="username" required><br><br>
        <!--密码输入框-->
        <label for="password">密码：</label>
        <input type="password" placeholder="请输入密码" id="password" name="password" required><br><br>
        <!--单选按钮-->
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
        <br><br>
        <!--复选框-->
        <input type="checkbox" id="subscribe" name="subscribe" value="yes">
        <label for="subscribe">订阅新闻</label><br><br>
       
        <!--下拉列表-->
        <label for="hobby">爱好:</label>
        <select id="hobby" name="hobby" multiple>
            <option value="reading">阅读</option>
            <option value="sports">运动</option>
            <option value="music">音乐</option>
            </select>
        <br><br>
        <!--提交按钮-->

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