HTML基础

推荐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-h6 独占一行显示,字体变大加粗-->
<h1>一级标题</h1>
<h6>二级标题</h6>

段落标签p

用于定义段落内容的标记

<!-- 段落标记 p 独占一行 段落之间有间距-->
<p>这是第一段内容</p>
<p>这是第二段内容</p>

换行标签br

<!-- 换行标记(单) 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. 点击链接时,页面会自动定位到对应的锚点位置。

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

<!-- 可用公式生成:ol>li*200{拉黑两分钟} 
为了更好的演示所以设置成有序列表,全改p标签也可以-->
<p id="first">街头的乌鸦</p>
    <ol>
        <li>拉黑两分钟</li>
        <li>拉黑两分钟</li>
        <li>拉黑两分钟</li>
        <!-- 中间省略N行 -->
        <li>拉黑两分钟</li>
        <li>拉黑两分钟</li>
        <li>拉黑两分钟</li>
    </ol>
<a href="#first">回到第一个</a>

运行效果:
请添加图片描述

图像标签img

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

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

<!-- 图片标记 img -->
<!-- 必须设置scr属性:图片地址 -->
<img src="./image.jpg">

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

<img src="./image.jpg" alt="图片描述" width="500" height="300">
<!-- 上述代码中,src属性指定了要显示的图片文件的路径,而 alt属性则提供了一个替换文本,
如果在显示图片时出现问题,则会显示此替换文本。 -->

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

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

列表标签

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

有序列表ol

子标记 列表项:li

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

<!-- ol>li*2 公式生成 -->
<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
</ol>

无序列表ul

子标记 列表项:li

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

<!-- ul>li*2 公式生成 -->
<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
</ul>

定义列表dl

子标记:dt(简要说明),dd(详细描述)

<!-- dl>(dt+dd)*3 公式生成-->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言,用于创建网页</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表,用于控制网页的样式</dd>
  
  <dt>JavaScript</dt>
  <dd>一种编程语言,可用于创建动态和交互性效果</dd>
</dl>

表格标签

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

<table border="1" cellpadding="5" cellspacing="0">
  <caption>表格标题</caption>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">表格备注</td>
    </tr>
  </tfoot>
</table>

表格列合并

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

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

【例】做一个类似于下图的大一课表
在这里插入图片描述

<!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>
            <!-- colspan="8",代表后面这个数据横向占8列 -->
        </tr>
        <tr>
            <td>节次</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td rowspan="2">上午</td>
            <!-- rowspan="2", 代表后面这个数据纵向占2行-->
            <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默认值

<form>
    <p>
        文本框 <input type="text" placeholder="请输入想输入的内容" value="你好">
    </p>
</form> 

在这里插入图片描述

密码框

<form>
    <p>
        密码框 <input type="password">
    </p>
</form> 

在这里插入图片描述

单选按钮

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

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

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

<form>
    <p>
        <!-- input[type=radio]*2 公式自动生成 -->
        <input type="radio" name="sex" checked><!-- checked属性是默认选中 -->
        <input type="radio" name="sex"></p>
</form> 

在这里插入图片描述

复选框

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

<form>
    <p>
        <!-- input[type=checkbox]*4 公式自动生成 -->
        <input type="checkbox">JAVA
        <input type="checkbox">MySQL
        <input type="checkbox">Python
        <input type="checkbox" checked>VUE
                        <!-- checked属性是默认选中 -->
    </p>
</form> 

在这里插入图片描述

上传文件按钮

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

<form>
    <p>
        文件框 <input type="file">
    </p>
</form> 

在这里插入图片描述

下拉列表

<select>:定义下拉列表框

<form>
    <p>
    	下拉列表 <select>
    		<option value="">高中</option>
    		<option value="">专科</option>
        	<option value="">本科</option>
        	<option value="">硕士</option>
        	<option value="">博士</option>
        </select>
    </p>
</form> 

在这里插入图片描述

文本域

大段的文字输入

<form>
    <p>
        文本域 
        <textarea cols="30" rows="10"></textarea>
    </p>
</form> 

在这里插入图片描述

只读框和禁用框

只读框(readonly)是指用户可以看到文本,但无法编辑它

禁用框(disabled)是指用户既无法看到文本,也无法编辑它

<form>
    <p>
        只读框 <input type="text" value="只读文本" readonly>
    </p>
    <p>
        禁用框 <input type="text" value="禁用文本" disabled>
    </p>
</form> 

按钮

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

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

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

<form>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通</button>
</form> 

在这里插入图片描述

也可以电钮样式做更改

<!-- 按钮事件: 使用JavaScript可以为按钮添加各种事件,例如点击事件、鼠标悬停事件等 -->
<button onclick="myFunction()">点击我</button>

<!-- 按钮样式: 可以使用CSS来自定义按钮的样式,例如修改背景颜色、字体样式等 -->
<button style="background-color: blue; color: white;">点击我</button>

在这里插入图片描述

容器标签div与span

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

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

div标签

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

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

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

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

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

<body>
    <!-- 下面的示例代码展示了如何使用div标签创建两个不同的区域: -->
    <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>

输出结果:
在这里插入图片描述

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 标签
输出效果:
在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/34914.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch:文档版本控制和乐观并发控制

在今天的文章中&#xff0c;我来详细描述一下 Elasticsearch 文档的版本控制以及如何更新文档。你也可以阅读我之前的文章 “Elasticsearch&#xff1a;深刻理解文档中的 verision 及乐观并发控制”。 版本控制 我们知道 Elasticsearch 的每个文档都有一个相对应的版本。这个版…

html前端输入框模糊查询

1、一个页面内多个模糊查询情况&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalable0, minimum-scale1.0, maximum-…

geoserver加载arcgis server瓦片地图显示异常问题处理

1.全能地图下载的瓦片conf.xml格式有问题首先要修改格式&#xff0c;conf.cdi文件也需要修改格式&#xff0c;修改为UTF-8或者UTF-8无BOM编码(不同的notepadd显示不同) 2. 下载的conf.xml坐标系默认从最小级别开始&#xff0c;一定要把前几级也补全&#xff0c;从0级开始 <L…

抖音SEO矩阵源码开发(一)

前言&#xff1a; 1.抖音SEO矩阵系统源码开发 是一项技术密集型工作&#xff0c;需要对大数据处理、人工智能等领域有深入了解。该系统开发过程中需要用到多种编程语言在服务器上安装LNMP环境&#xff0c;包括Linux操作系统、Nginx、MySQL、PHP等&#xff0c;如Java、Python等…

GitHub打不开的解决方案(超简单)

在国内&#xff0c;github官网经常面临打不开或访问极慢的问题&#xff0c;不挂梯子&#xff08;VPN&#xff0c;飞机&#xff0c;魔法&#xff09;使用体验极差&#xff0c;那有什么好办法解决GitHub官网访问不了的问题&#xff1f;今天小布教你几招轻松访问github官网。 git…

自定义MVC工作原理

目录 一、MVC二、MVC的演变2.1 极易MVCController层——Servletview层——JSP缺点&#xff1a;Servlet过多、代码冗余 2.2 简易MVCController层——Servletview层——JSP缺点&#xff1a;在Servlet中if语句冗余 2.3普易MVCController层——Servletview层——JSP缺点&#xff1a…

CentOS Linux的最佳替代方案(二)_AlmaLinux OS 8.6基础安装教程

文章目录 CentOS Linux的最佳替代方案&#xff08;二&#xff09;_AlmaLinux OS 8.6基础安装教程一 AlmaLinux介绍和发展历史二 AlmaLinux基础安装2.1 下载地址2.2 安装过程 三 AlmaLinux使用3.1 关闭selinux/firewalld3.2 替换默认源3.3 安装一些必要工具 CentOS Linux的最佳替…

uniapp - [全端兼容] 多选弹框选择器,弹框形式的列表多选选择器组件插件(底部弹框式列表多选功能,支持数据回显、动态数据、主题色等配置)

前言 网上的教程都太乱了,各种不兼容且 BUG 太多,注释也没有很难进行改造。 本文 实现了 uniapp 全端兼容的弹框多选选择器,从底部弹出列表项进行多选(可回显已选中和各种主题色、样式配置), 您可以直接复制代码,稍微改改样式就能用了。 如下图所示,数据列表(支持接口…

Centos7.9通过expect脚本批量修改H3C交换机配置

背景&#xff1a; 公司有几百台H3C二层交换机设备&#xff0c;当需要批量更改配置时非常的消耗工作量 解决&#xff1a; 通过一台Linux服务器&#xff0c;编写shell脚本&#xff0c;模拟Telnet至各台交换机&#xff0c;让一切变的很容易 1.首先在安装Telnet服务前需要检测centO…

途乐证券|股票低开好还是高开好?股票低开高走再回落什么意思?

对于一向不涨的股票&#xff0c;出资者常常感到困惑和不安。那么一向不涨的股票要留吗&#xff1f;什么股票更简单上涨&#xff1f;为我们预备了相关内容&#xff0c;以供参阅。 一向不涨的股票要留吗&#xff1f; 一向不涨的股票要不要留没有一个绝对的答案&#xff0c;出资者…

java开发微信公众平台之素材上传

微信公众平台官方文档 我在本地使用工具请求接口一切正常。 当我开始写代码的时候 我蒙了 后台怎么模拟form表单上传图片 放参考文章链接https://blog.csdn.net/subaiqiao/article/details/122059076 首先引入依赖 <dependency><groupId>com.squareup.okhttp3&l…

软件测试的生命周期、Bug

一、软件测试的生命周期 1、软件的生命周期&#xff1a; 需求分析&#xff1a;分析需求是否正确、完整。 设计&#xff1a;项目的上线时间、开始开发时间、测试时间、人员... 计划&#xff1a;设计技术文档、进行UI设计... 编码&#xff1a;写代码&#xff08;实现用户需求&am…

已上架的App在AppStore上无法搜索到的问题

已上架的App在AppStore上无法搜索到的问题 在AppStore上搜不到已经上架的应用程序可以采取以下解决办法&#xff1a; 拨打iTunes提供的支持电话&#xff1a;4006-701-855&#xff08;中国时间9:00-17:00&#xff09;。发送邮件给Review团队&#xff0c;在iTunes Connect登录后…

堆排序算法及其稳定性分析

堆排序算法及其稳定性分析 什么是堆排序&#xff1f; 堆排序是利用数据结构堆而设计的一种排序算法。 堆分为两种&#xff0c;大顶堆和小顶堆。 所谓大顶堆就是每个节点的值都大于或者等于其左右孩子节点的值。 小顶堆则是相反的&#xff0c;每个节点的值都小于或者等于其…

单片机STM32看门狗详解(嵌入式学习)

单片机STM32看门狗 什么是看门狗为什么需要看门狗&#xff1f;STM32CubeMX配置和应用示例独立看门狗&#xff08;IWDG&#xff09;窗口看门狗&#xff08;WWDG&#xff09; 注意事项 什么是看门狗 单片机STM32的看门狗&#xff08;Watchdog&#xff09;是一种硬件定时器&#…

Android中级——IPC

IPC IPC是什么&#xff1f;多进程带来的问题IPC前提SerializableParcelableBinder Android中的IPCBundle文件共享MessengerAIDLContentProviderSocket不同IPC优缺点 Binder连接池 IPC是什么&#xff1f; Inter-Process Communcation&#xff0c;含义为进程间通信或者跨进程通信…

【FFMPEG】AVFilter使用流程

流程图 核心类 AVFilterGraph ⽤于统合这整个滤波过程的结构体 AVFilter 滤波器&#xff0c;滤波器的实现是通过AVFilter以及位于其下的结构体/函数来维护的 AVFilterContext ⼀个滤波器实例&#xff0c;即使是同⼀个滤波器&#xff0c;但是在进⾏实际的滤波时&#xff0c;也…

易模为真人3D手办制作带来了创新

3d打印技术是一项近年来迅速发展的先进制造技术&#xff0c;逐渐在各个领域展现出无限的潜力。其中&#xff0c;3d打印真人手办成为了一个备受关注的领域。在市面上&#xff0c;我们常常可以看到一些热门动漫角色或明星的真人3d手办&#xff0c;逼真的细节和完美的再现度让人们…

实验室仪器管理系统/基于微信小程序的实验室仪器管理系统

摘 要 随着当今网络的发展&#xff0c;时代的进步&#xff0c;各行各业也在发生着变化&#xff0c;于是网络已经逐步进入人们的生活&#xff0c;给我们生活或者工作提供了新的方向新的可能。 本毕业设计的内容是设计实现一个实验室仪器管理系统。使用微信开发者是以java语言…

【机器学习】主成分分析实现案例 (PCA)

一、说明 这篇文章的目的是提供主成分分析&#xff08;PCA&#xff09;的完整和简化的解释。我们将逐步介绍它是如何工作的&#xff0c;这样每个人都可以理解并使用它&#xff0c;即使是那些没有强大数学背景的人。 PCA是网络上广泛覆盖的机器学习方法&#xff0c;并且有一些关…