HTML基础

以你之姓@ 2023-10-12 15:01 2阅读 0赞

> 推荐[W3school][]、[developer.mozilla.org][]学习

### 文章目录 ###

*  前言
 *  标签
 *  html标签
 *  标题标签h1-h6
 *  段落标签p
 *  换行标签br
 *  超链接标签a
 *  锚点定位
 *  图像标签img
 *  列表标签
 *   *  有序列表ol
     *  无序列表ul
     *  定义列表dl
 *  表格标签
 *  表格列合并
 *  表单标签
 *   *  input：输入框
     *  文本框
     *  密码框
     *  单选按钮
     *  复选框
     *  上传文件按钮
     *  下拉列表
     *  文本域
     *  只读框和禁用框
 *  按钮
 *  容器标签div与span
 *   *  div标签
     *  span标签

--------------------

# 前言 #

`提示：HTML不区分大小写，是一种超文本的标记语言`

另外用VS Code写HTML是有公式的  
`*`：生成的数量，  
`{}`：标记中的文本内容  
`>`：子标记  
`+`：同级标记  
`$`：序号  
`^`：上级

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

# 标签 #

HTML标记是指HTML语言的标签（tag）和属性（attribute）。  
HTML标签是用于定义HTML文档结构、元素的语法和显示效果的代码。  
HTML属性是用于控制HTML元素行为和样式的代码。

HTML标签是网页开发中最基础的元素，是构成网页结构的基本单元。  
以下是HTML标签的一些常用示例：

# html标签 #

<html>标签定义了HTML文档的根元素，通常在这个标签中包含了<head>和<body>标签，用来定义文档的头部和主体部分

下面的示例代码展示了一个基本的HTML结构：

<!DOCTYPE html>
    <html>
      <head>
        <title>页面标题</title>
      </head>
      <body>
      
        <h1>欢迎来到我的网站</h1>
        <p>这是一个段落。</p>
      </body>
    </html>

# 标题标签h1-h6 #

用于定义文档标题的标记，共有六个等级，从h1到h6

<h1>一级标题</h1>
    <h6>二级标题</h6>

# 段落标签p #

用于定义段落内容的标记

<p>这是第一段内容</p>
    <p>这是第二段内容</p>

# 换行标签br #

<p>
       黑云压城城欲催<br>
       甲光向日金鳞开
    </p>

# 超链接标签a #

`<a>`标签用于定义超链接，可以链接到其他页面、文件或页面内的某个位置  
**超链接`a`**，**必须设置`href`属性**：跳转地址，可以实现界面跳转

<a href="https://blog.csdn.net/rej177">CSDN二哈喇子！</a>
    
    
    <a href="https://blog.csdn.net/rej177"> 
        <img src="./img.jpg" width="100" height="100">  
    </a>

# 锚点定位 #

HTML锚点是指在同一个文档中为页面的不同部分设置超链接，这样用户在点击链接时直接跳转到相应的页面部分而不需要滚动。

要创建HTML锚点，需要使用以下步骤：

1.  给目标元素添加id属性，作为锚点的名称  
    例如：`<h2 id="section1">Section 1</h2>`
2.  在锚点的链接中添加`#`符号和对应的锚点名称，  
    例如：`<a href="#section1">转到第1行</a>`
3.  点击链接时，页面会自动定位到对应的锚点位置。

请注意，在单页应用程序中，锚点也可以用于页面内的导航。

<p id="first">街头的乌鸦</p>
        <ol>
            <li>拉黑两分钟</li>
            <li>拉黑两分钟</li>
            <li>拉黑两分钟</li>
            
            <li>拉黑两分钟</li>
            <li>拉黑两分钟</li>
            <li>拉黑两分钟</li>
        </ol>
    <a href="#first">回到第一个</a>

运行效果：  
![请添加图片描述][4a6ac8e3cbbf42b1a0089945ae3e68c1.gif]

# 图像标签img #

`<img>`标签用于在HTML页面中插入图片，用于定义图片的标记

下面中的 jpg图片要放在与代码同级文件夹下

<img src="./image.jpg">

除了 `src` 和 `alt` 属性之外，还有其他属性可以用于控制图片的大小、对齐方式等等  
可以使用 `width` 和 `height` 属性设置图片的宽度和高度：  
`alt`属性可省略，如果要加的话应该使用有意义的 `alt` 属性来提供图片的描述

该标记将显示一个宽度为 500px、高度为 300px 的图片。

需要注意的是，使用 `<img>` 标记时应该注意图片格式和大小，以确保页面加载速度较快，并且不占用过多的带宽

# 列表标签 #

用于定义有序或无序列表的标记

## 有序列表ol ##

子标记 列表项：li

每个列表项独占一行显示，列表项前有序号

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

## 无序列表ul ##

子标记 列表项：li

每个列表项独占一行显示，列表项前有圆点图标

<ul>
      <li>无序列表项1</li>
      <li>无序列表项2</li>
    </ul>

## 定义列表dl ##

子标记：dt(简要说明)，dd(详细描述)

<dl>
      <dt>HTML</dt>
      <dd>超文本标记语言，用于创建网页</dd>
      
      <dt>CSS</dt>
      <dd>层叠样式表，用于控制网页的样式</dd>
      
      <dt>JavaScript</dt>
      <dd>一种编程语言，可用于创建动态和交互性效果</dd>
    </dl>

# 表格标签 #

用于定义表格的标记  
table：整个表格  
tr：行  
列：  
th：居中加粗  
td：居左不加粗

# 表格列合并 #

**跨行合并**  
1：删除合并后下方多余的列  
2：设置rowspan属性，行范围属性

**扩列合并**  
1：删除合并后右侧多余的列  
2：设置colspan属性，列范围属性

【例】做一个类似于下图的大一课表  
![在这里插入图片描述][5f734489cf3d47a5a8c50fb75b6511bc.png]

<!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>
        <table border="1">
            <tr>
                <td colspan="8">大一课表</td>
                
            </tr>
            <tr>
                <td>节次</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
            <tr>
                <td rowspan="2">上午</td>
                
                <td>英语</td>
                <td>数据库</td>
                <td>软件测试</td>
                <td>Java</td>
                <td>体育</td>
                <td></td>
                <td></td>
                
            </tr>
            <tr>
                <td>前端</td>
                <td>形势政策</td>
                <td>软件测试</td>
                <td>Java</td>
                <td>体育</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>Java</td>
                <td></td>
                <td>前端</td>
                <td>数据库</td>
                <td>Python</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
           
                <td>Java</td>
                <td>数学</td>
                <td>前端</td>
                <td>数据库</td>
                <td>Python</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>晚上</td>
                <td>自习</td>
                <td>自习</td>
                <td>自习</td>
                <td>自习</td>
                <td>自习</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="8">注意</td>
                
            </tr>
        </table>
    </body>
    </html>

# 表单标签 #

表单标记的意义：用于获取用户的输入与选择数据

HTML中的表单标签用于创建用户输入的交互式部分。以下是一些常用的表单标签：  
HTML中的常用的表单标签包括：

1.  `<form>`：定义表单，用于包裹表单元素。
2.  `<textarea>`：用于创建多行文本输入框。
3.  `<option>`：定义下拉列表框中的选项。
4.  `<label>`：定义表单元素的标签，用于增加对输入字段的描述或说明。
5.  `<button>`：用于创建按钮
6.  `<fieldset>`：用于将相关的表单元素分组。
7.  `<legend>`：定义fieldset元素的标题。
8.  `<optgroup>`：定义一个选项组，用于在下拉列表框中分组选项。
9.  `<input type="submit">`：定义提交按钮。
10. `<input type="reset">`：定义重置按钮，用于清除表单中的数据。

以上是一些常用的表单标签，可以根据实际需求选择适合的标签来构建表单。

## input：输入框 ##

`<input>`：定义输入字段，例如文本输入框、密码输入框、单选按钮、复选框等

## 文本框 ##

`placeholder`输入提示属性，`value`默认值

![在这里插入图片描述][1acb8aa65f09445aa00f7b93f7dfb4f5.png]

## 密码框 ##

![在这里插入图片描述][5479897186a4480689f5fecb4706611d.png]

## 单选按钮 ##

`<input type="radio">`：定义单选按钮

设置性别或同意与否的时候经常用到

多个单选按钮必须**设置相同的name属性**，才会单选，

![在这里插入图片描述][d116d790d7b14334b3f957829d10f04a.png]

## 复选框 ##

`<input type="checkbox">`：定义复选框

<form>
        <p>
            
            <input type="checkbox">JAVA
            <input type="checkbox">MySQL
            <input type="checkbox">Python
            <input type="checkbox" checked>VUE
                            
        </p>
    </form>

![在这里插入图片描述][e20e339cf9dc4afeba9d7c7507da4363.png]

## 上传文件按钮 ##

上传图片或文件时用到，比如买东西时评论带图片  
`<input type="file">`：定义文件上传字段

![在这里插入图片描述][6c4e802550af48259c3602e356464406.png]

## 下拉列表 ##

`<select>`：定义下拉列表框

![在这里插入图片描述][2189f28e39454bbe8bb851f42d408bf7.png]

## 文本域 ##

大段的文字输入

![在这里插入图片描述][f1e103a45fde4adabb35b2efee6c14df.png]

## 只读框和禁用框 ##

只读框（readonly）是指用户可以看到文本，但无法编辑它

禁用框（disabled）是指用户既无法看到文本，也无法编辑它

# 按钮 #

HTML按钮是用于在网页中触发特定操作的元素

按钮类型： `<button>`元素有不同的类型属性，用于定义按钮的类型。常见的类型包括：

`submit`：用于提交表单数据。  
`reset`：用于重置表单数据。  
`button`：普通按钮，不会有任何默认行为。

![在这里插入图片描述][3b782e388dfb4e4aa962781547d65799.png]

也可以电钮样式做更改

<button onclick="myFunction()">点击我</button>
    
    
    <button style="background-color: blue; color: white;">点击我</button>

![在这里插入图片描述][3a5a1d66da2a4bc6b2d64e62f8e5accc.png]

# 容器标签div与span #

当涉及到HTML标记和CSS样式时，div和span是两个常用的容器标签  
它们本身没有特定的语义，而是用于组织和样式化其他HTML元素

**div和span没有默认的视觉效果，需要结合css代码使用**

## div标签 ##

div：区域标记 ，**一个复杂的界面必须使用若干个div标记划分出不同的区域**  
中间一般装的是若干个子标记

div标签是一个块级元素，它通常用于将HTML文档的一部分划分为独立的区域

可以使用div标签来创建布局，将多个元素组合在一起，并对它们应用共同的样式  
通过设置div的CSS属性，如宽度、高度、背景色等，可以控制div的外观

给<div>标签设置不同的样式，可以实现各种不同的布局效果。

我们加一点css代码让他更好的显示：

<body>
        
        <div style="background-color: lightblue; padding: 20px;">
            <div style="background-color: lightgray; margin-bottom: 10px; padding: 10px;">
                <h1>这是第一个标题</h1>
                <p>你好世界！</p>
            </div>
        </div>
        <div style="background-color: lightblue; padding: 20px;">
            <div style="background-color: lightgray; margin-bottom: 10px; padding: 10px;">
                <h2>这是第二个标题</h2>
                <p>Hello World！</p>
            </div>
        </div>
    
    </body>

输出结果：  
![在这里插入图片描述][b0c9ebff6139408db069e98dbe01432e.png]

## span标签 ##

span：范围标记 ，在一行文本中使用span标记，**凸显某一块文本内容**  
span标记中间装的是纯文本内容

span标签是一个内联元素，它通常用于对文本的一部分进行样式化或标记。  
可以使用span标签来对文本中的某个词、句子或字符应用特定的样式，如颜色、字体大小等。  
通过设置span的CSS属性，可以改变其外观，但不会破坏文本的流动性。

这里也加一点css代码让他更好的显示：

<body>
        <p>这是一个 <span style="color: cyan;">带颜色</span> 的文字</p>
    
        <p>这是一段 <span id="mySpan">可点击的文本</span>。</p>
        <script>
            document.getElementById("mySpan").addEventListener("click", function() {
          
                alert("你点击了span标签！");
            });
        </script>
    </body>

在第二个方法中使用了 JavaScript 的 addEventListener 方法来给 id 为 mySpan 的 span 标签添加了一个“点击”事件。当用户点击这个 span 标签时，会触发一个函数，该函数使用 alert() 方法在屏幕上显示一个弹出框，其中包含一条消息：“你点击了 span 标签！”。

更具体地说，这段代码的作用是：

使用 document.getElementById() 方法获取 id 为 mySpan 的 span 标签。

使用 addEventListener() 方法向该 span 标签添加一个“点击”事件监听器，当用户点击该 span 标签时触发。

创建一个匿名函数，在用户点击 span 标签时执行该函数。该函数使用 alert() 方法在页面上显示一个弹出框，其中包含一条消息：“你点击了 span 标签！”。

这段代码的效果是向 id 为 mySpan 的 span 标签添加了一个“点击”事件监听器，当用户点击该标签时，会显示一个弹出框，告诉用户他们点击了 span 标签  
输出效果：  
![在这里插入图片描述][86f7a38a21dd4634af22d875eb25d852.png]

--------------------

[W3school]: https://www.w3school.com.cn/h.asp
[developer.mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Learn/CSS
[4a6ac8e3cbbf42b1a0089945ae3e68c1.gif]: https://img-blog.csdnimg.cn/4a6ac8e3cbbf42b1a0089945ae3e68c1.gif
[5f734489cf3d47a5a8c50fb75b6511bc.png]: https://img-blog.csdnimg.cn/5f734489cf3d47a5a8c50fb75b6511bc.png
[1acb8aa65f09445aa00f7b93f7dfb4f5.png]: https://img-blog.csdnimg.cn/1acb8aa65f09445aa00f7b93f7dfb4f5.png
[5479897186a4480689f5fecb4706611d.png]: https://img-blog.csdnimg.cn/5479897186a4480689f5fecb4706611d.png
[d116d790d7b14334b3f957829d10f04a.png]: https://img-blog.csdnimg.cn/d116d790d7b14334b3f957829d10f04a.png
[e20e339cf9dc4afeba9d7c7507da4363.png]: https://img-blog.csdnimg.cn/e20e339cf9dc4afeba9d7c7507da4363.png
[6c4e802550af48259c3602e356464406.png]: https://img-blog.csdnimg.cn/6c4e802550af48259c3602e356464406.png
[2189f28e39454bbe8bb851f42d408bf7.png]: https://img-blog.csdnimg.cn/2189f28e39454bbe8bb851f42d408bf7.png
[f1e103a45fde4adabb35b2efee6c14df.png]: https://img-blog.csdnimg.cn/f1e103a45fde4adabb35b2efee6c14df.png
[3b782e388dfb4e4aa962781547d65799.png]: https://img-blog.csdnimg.cn/3b782e388dfb4e4aa962781547d65799.png
[3a5a1d66da2a4bc6b2d64e62f8e5accc.png]: https://img-blog.csdnimg.cn/3a5a1d66da2a4bc6b2d64e62f8e5accc.png
[b0c9ebff6139408db069e98dbe01432e.png]: https://img-blog.csdnimg.cn/b0c9ebff6139408db069e98dbe01432e.png
[86f7a38a21dd4634af22d875eb25d852.png]: https://img-blog.csdnimg.cn/86f7a38a21dd4634af22d875eb25d852.png