前端开发_HTML

news2025/2/25 15:55:43

简介

CSS用于美化内容

HTML用于摆放内容

可以理解为HTML是基础，CSS是工具

HTML定义

HTML 超文本标记语言——HyperText Markup Language

超文本——链接

标记——标签，即带尖括号的文本

标签语法

双标签

  • 开始标签： <xxx> 即尖括号+标签文字
  • 结束标签：</xxx> 即尖括号中+‘/’+标签文字

开始标签和结束标签中文字需要相同

标签成对出现

单标签

只有开始标签，没有结束标签

例如：<br>、<hr>

标签关系

标签的书写位置和标签的关系相关

父子关系嵌套，兄弟关系并列

体现在代码格式上：

  • 父子关系：子级标签换行且缩进（Tab键）
  • 兄弟关系：兄弟标签换行要对齐

注释

使用<!--...-->在文档中插入注释，注释不会在文档中显示

VS Code中使用Ctrl+/即可快速添加注释

基本骨架

<html>
    整个网页的所有内容都在其中书写
</html>

<html>
    <head>
    	网页头部
    </head>
    <body>
    	网页主体内容
    </body>
</html>

<html>
    <head>
        <title>网页标题</title>
    </head>
    
</html>

在这里插入图片描述

上述看到的CSDN - 专业开发者社区就是网页标题

如果使用VS Code进行html开发的话，使用!+Enter/Tab即可快速生成如下基本骨架

在这里插入图片描述

标签分类

标题标签

使用<h1>-<h6>(双标签)即可在页面中添加标题

<html>
    <body>
        <h1>章节标题</h1>
        <h2>次标题</h2>
    </body>
</html>

在这里插入图片描述

显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

一般用于新闻标题、文章标题、网页区域名称等

h1在一个网页中只能使用一次（用来放新闻标题或者网页LOGO）

h2-h6没有使用次数的限制

段落标签

<p>(双标签)，用于将文章分段

显示特点：

  • 独占一行
  • 段落之间存在间隙

换行和水平线标签

换行：<br>(单标签)

水平线：<hr>(单标签)

文本格式化标签

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等

标签名效果
strong加粗
b加粗
em倾斜
i倾斜
ins下划线
u下划线
del删除线
s删除线

strong、em、ins、del标签自带强调含义

图像标签

作用：在网页中插入图片

<img src="图片的 URL">

src用于指定图像的位置和名称，是<img>的必须属性

URL可以是服务器本地路径，也可以是其他服务器的资源路径

  • 相对路径：从当前文件位置出发查找目标文件

    • 文件夹名字/ 表示进入某个文件夹里面

    • ./ 表示当前文件所在文件夹

    • ../ 表示当前文件的上一级文件夹

  • 绝对路径：从盘符出发查找目标文件

img标签还有以下一些属性：

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片宽度值为数字，没有单位
height图片高度值为数字，没有单位

示例：<img src= "./cat.jpg" alt= "替换文本" title= "提示文本">

属性名=“属性值”

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

音频标签

<audio src="音频的 URL"></audio>

常见属性：

属性作用特殊说明
src(必须属性)音频URL支持格式：MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放浏览器一般禁用自动播放

视频标签

<video src="视频的 URL"></video>

常见属性：

属性作用特殊说明
src(必须属性)音频URL支持格式：MP4、Ogg、WebM
controls显示音频控制面板
loop循环播放
muted静音播放
autoplay自动播放浏览器支持在静音状态自动播放

超链接标签

作用：点击跳转到其他页面。

示例：<a href="https://www.baidu.com">跳转到百度</a>

href是跳转地址，是超链接的必须属性

超链接默认在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。

列表

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li> 
    ……
</ul>

在这里插入图片描述

ul 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目

<ol>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li> 
    ……
</ol>

在这里插入图片描述

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd

dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<dl>
	<dt>列表标题</dt>
	<dd>列表描述 / 详情</dd> 
    ……
</dl>

在这里插入图片描述

dl 里面只能包含dt 和 dd

dt 和 dd 里面可以包含任何内容

表格

网页中的表格与 Excel 表格类似，用来展示数据。

标签：table 嵌套 tr，tr 嵌套 td / th。

标签名说明
table表格
tr行
th表头单元格
td内容单元格

示例：

		<table>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </table>

在这里插入图片描述

网页中表格默认没有边框线，加上border="1"属性即可为表格添加边框线

在这里插入图片描述

用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

标签名说明特殊说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域

修改后的语句如下：

		<table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>总分</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>99</td>
                    <td>100</td>
                    <td>199</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>98</td>
                    <td>100</td>
                    <td>198</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>总结</td>
                    <td>全市第一</td>
                    <td>全市第一</td>
                    <td>全市第一</td>
                </tr>
            </tfoot>
        </table>

但实际效果并无区别，因此表结构标签也可省略

合并单元格

合并单元格的步骤：

  1. 明确合并的目标

  2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

    • 跨行合并，保留最上单元格，添加属性 rowspan

    • 跨列合并，保留最左单元格，添加属性 colspan

  3. 删除其他单元格

示例：

		<table border="1">
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
        </table>

在这里插入图片描述

表单

作用：收集用户信息。

使用场景：

  • 登录页面
  • 注册页面
  • 搜索区域

input

input (单标签)标签 type 属性值不同，则功能不同。

<input type="..." >

type属性值说明
text文本框，用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

占位文本：placeholder属性，文本框和密码框都可以使用

<input type="..." placeholder="提示信息">

在这里插入图片描述

radio

常用属性：

属性名作用特殊说明
name控件名称控件分组，同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同，简写为一个单词

示例：

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

示例：

<input type="file" multiple>
checkbox

复选框：默认选中同样使用checked属性

<input type="checkbox" checked>

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

示例代码：

		<select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected>武汉</option>
        </select>

在这里插入图片描述

默认显示第一项，selected属性实现默认选中功能

文本域

多行输入文本的表单控件

标签：textarea，双标签。

<textarea>默认提示文字</textarea>

实际开发中用CSS设置文本域的尺寸以及禁用右下角的拖拽功能

label

label标签，双标签，网页中用作某个标签的说明文本

可以用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

  1. label 标签只包裹内容，不包裹表单控件

    设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

    <input type="radio" id="man">
<label for="man">男</label>

  2. 使用 label 标签包裹文字和表单控件，不需要属性

    <label><input type="radio"> 女</label>

支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

button

按钮

<button type="xxx">按钮</button>

type属性值：

type属性值说明
submit提交按钮，点击后可以提交数据到后台(默认功能)
reset重置按钮，点击后将表单控件恢复默认
button普通按钮，默认没有功能，一般配合JavaScript使用

按钮需配合 form 标签（表单区域）才能实现对应的功能。

示例：

		<form>
            <input type="radio" checked name="gender"> 男
            <input type="radio" name="gender"> 女
            <button type="reset">重置</button>
        </form>

在这里插入图片描述

语义化

无语义的布局标签

  • div：独占一行
  • span：不换行

可以理解为div自带结束换行，span没有结束换行

有语义的布局标签

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

字符实体

作用：在网页中显示预留字符。

显示结果描述实体名称
空格&nbsp
<小于号&lt;
>大于号&gt;

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

模糊C均值聚类（Fuzzy C-means clustering，FCM）的基本概念，详细流程以及广泛应用！

模糊C均值聚类（Fuzzy C-means clustering，FCM）的基本概念，详细流程以及广泛应用！

文章目录 1.基本概念2. FCM的详细流程3.FCM的应用 1.基本概念 模糊C均值聚类&#xff08;Fuzzy C-means clustering&#xff0c;FCM&#xff09;是一种软聚类方法&#xff0c;它允许数据点属于多个聚类中心&#xff0c;每个聚类中心都有一个权重。与传统的硬聚类方法&#xff…
阅读更多...
hyper-V操作虚拟机ubuntu 22.03

hyper-V操作虚拟机ubuntu 22.03

安装hyper-V 点击卸载程序 都勾选上即可 新建虚拟机&#xff0c;选择镜像文件 选择第一代即可 设置内存 配置网络 双击 启动安装虚拟机 输入用户名 zenglg 密码&#xff1a;LuoShuwen123456 按照enter键选中openssh安装 安装中 安装完成 选择重启 输入用户名、密码
阅读更多...
回归预测 | MATLAB实现基于LightGBM算法的数据回归预测（多指标，多图）

回归预测 | MATLAB实现基于LightGBM算法的数据回归预测（多指标，多图）

回归预测 | MATLAB实现基于LightGBM算法的数据回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现基于LightGBM算法的数据回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLA…
阅读更多...
《数据结构、算法与应用C++语言描述》-优先级队列-大根堆的C++实现

《数据结构、算法与应用C++语言描述》-优先级队列-大根堆的C++实现

优先级队列 完整可编译运行代码见&#xff1a;Github::Data-Structures-Algorithms-and-Applications/_25Priority queue 定义 优先级队列&#xff08;priority queue&#xff09;是0个或多个元素的集合&#xff0c;每个元素都有一个优先权或值&#xff0c;对优先级队列执行…
阅读更多...
使用Redis实现接口防抖

使用Redis实现接口防抖

说明&#xff1a;实际开发中&#xff0c;我们在前端页面上点击了一个按钮&#xff0c;访问了一个接口&#xff0c;这时因为网络波动或者其他原因&#xff0c;页面上没有反应&#xff0c;用户可能会在短时间内再次点击一次或者用户以为没有点到&#xff0c;很快的又点了一次。导…
阅读更多...
Django路由分发

Django路由分发

首先明白一点&#xff0c;Django的每一个应用下都可以有自己的templates文件夹&#xff0c;urls.py文件夹&#xff0c;static文件夹&#xff0c;基于这个特点&#xff0c;Django能够很好的做到分组开发&#xff08;每个人只写自己的app&#xff09;&#xff0c;作为老大&#x…
阅读更多...
基于springboot+vue的在线考试系统(前后端分离)

基于springboot+vue的在线考试系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…
阅读更多...
20. Matplotlib 数据可视化

20. Matplotlib 数据可视化

目录 1. 简介2. Matplotlib 开发环境2.1 画图2.2 画图接口2.4 线形图2.5 散点图2.6 等高线图2.7 直方图 1. 简介 Matplotlib网址&#xff1a;https://matplotlib.org/ 数据可视化是数据分析中最重要的工作之一。Matploblib是建立在Numpy数组基础上的多平台数据可视化程序库&a…
阅读更多...
UI自动化测试工具工作原理是怎样的?

UI自动化测试工具工作原理是怎样的?

随着软件开发的不断演进&#xff0c;保障软件质量成为了至关重要的一环。在这个过程中&#xff0c;UI自动化测试工具崭露头角&#xff0c;为开发团队提供了一种强有力的方式来确保应用程序的稳定性、功能性和兼容性。本文将深入探讨UI自动化测试工具的定义、工作原理以及其在提…
阅读更多...
FOC系列（三）----AS5600磁编码器

FOC系列（三）----AS5600磁编码器

一、 关于AS5600 1.1 芯片内部框图和引脚功能介绍 具体的内容大家可以查看数据手册&#xff1a;AS5600数据手册&#xff0c;在这里只是对一下重要的地方进行说明。    系统框图如下&#xff1a;    电源设计选项&#xff0c;我在设计时选择的是第二种电源方案&#xff0c…
阅读更多...
基于Django+Tensorflow卷积神经网络鸟类识别系统

基于Django+Tensorflow卷积神经网络鸟类识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介系统概述系统功能核心技术系统架构系统优势 二、功能三、系统四. 总结  总结 一项目简介 介绍一个基于DjangoTensorflow卷积神经网络鸟类识别系统是一个非…
阅读更多...
NoSQL大数据存储技术思考题及参考答案

NoSQL大数据存储技术思考题及参考答案

思考题及参考答案 第1章 绪论 1. NoSQL和关系型数据库在设计目标上有何主要区别&#xff1f; (1)关系数据库 优势&#xff1a;以完善的关系代数理论作为基础&#xff0c;具有数据模型、完整性约束和事务的强一致性等特点&#xff0c;借助索引机制可以实现高效的查询&#xf…
阅读更多...
前五年—中国十大科技进展新闻（2012年—2017年）

前五年—中国十大科技进展新闻（2012年—2017年）

前五年—中国十大科技进展新闻&#xff08;2012-2017&#xff09; 2017年中国十大科技进展新闻1. 我国科学家利用化学物质合成完整活性染色体2. 国产水下滑翔机下潜6329米刷新世界纪录3. 世界首台超越早期经典计算机的光量子计算机诞生4. 国产大型客机C919首飞5. 我国首次海域天…
阅读更多...
SQL HAVING 子句详解：在 GROUP BY 中更灵活的条件筛选

SQL HAVING 子句详解：在 GROUP BY 中更灵活的条件筛选

SQL HAVING子句 HAVING子句被添加到SQL中&#xff0c;因为WHERE关键字不能与聚合函数一起使用。 HAVING语法 SELECT column_name(s) FROM table_name WHERE condition GROUP BY column_name(s) HAVING condition ORDER BY column_name(s);演示数据库 以下是Northwind示例数…
阅读更多...
【BUG合集】（一）①数据库存1/0，请求结果返回true和false；②sql查数据库能查，但mybatis查为空；③data64图片存储为异常；

【BUG合集】（一）①数据库存1/0，请求结果返回true和false；②sql查数据库能查，但mybatis查为空；③data64图片存储为异常；

前言 最近&#xff0c;在工作上接手的任务中&#xff0c;各种 bug 问题出现&#xff0c;在解决的同时也可以记录一下。因此&#xff0c;觉得可以出个记录 bug 合集。方便后来者碰到类似情况&#xff0c;可以作为一个参考进行解决。 文章题目就包含当前文章内容中所遇到的三个 b…
阅读更多...
立刻解决缺少msvcp140_1.dll解决方法，msvcp140_1.dll修复指南

立刻解决缺少msvcp140_1.dll解决方法，msvcp140_1.dll修复指南

在日常使用电脑的过程中&#xff0c;我们有时会遇到由于某些重要的DLL文件缺失而导致的程序无法正常启动的问题。很多用户可能都经历过由于缺少msvcp140_1.dll导致应用程序无法运行的情况。本文将为你提供解决msvcp140_1.dll缺失问题的详尽方法&#xff0c;附带对每种方法优点和…
阅读更多...
配置自动化部署Jenkins和Gitea

配置自动化部署Jenkins和Gitea

配置自动化部署 这里使用的是JenkinsGitea 如果不知道怎么安装Jenkins和Gitea可以参考下面文章 https://blog.csdn.net/weixin_46533577/article/details/134644144 我的另一篇文章 介绍 前端 先说下自己的情况&#xff0c;因为自己服务器原因&#xff0c;使用的服务器内…
阅读更多...
滴滴打车崩了！全过程

滴滴打车崩了！全过程

滴滴发布致歉10元补偿券&#xff0c;文末可领取 。 事情发生于 2023年11月27日晚~28日中午&#xff0c;滴滴打车服务出现大面积故障&#xff0c;登上微博热搜。 许多用户在使用滴滴出行时遇到了无法叫车、订单异常等问题&#xff0c;导致大量用户滞留在外&#xff0c;出行受阻…
阅读更多...
极速整理文件！Python自动化办公新利器

极速整理文件！Python自动化办公新利器

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 当涉及到自动化办公和文件整理&#xff0c;Python确实是一个强大的工具。在这篇博客文章中&#xff0c;我将深入探讨《极速整理文件&#xff01;Python自动化办公新利器》这个话题&#xff0c;并提供更加丰富和全…
阅读更多...
基于单片机智能电子密码锁设计

基于单片机智能电子密码锁设计

**单片机设计介绍&#xff0c;基于单片机智能电子密码锁设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能电子密码锁设计是一种利用单片机&#xff08;如Arduino、Raspberry Pi等&#xff09;和相关电子元件来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023