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

前端HTML相关知识

news 2026/3/26 12:25:17

1.什么是HTML

HTML 指的是超文本标记语言 ( HyperText Markup Language )。
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)
浏览器根据不同的HTML标签，解析成我们看到的网页

2.HTML的特点

  • HTML不是编程语言，而是标记语言。
  • HTML使用标签的形式来标识网页的不同组成部分
  • HTML文档包含了HTML标签和文本
  • HTML文档又叫做Web页面
  • HTML文档的后缀：html 或 htm

3. HTML基本结构标签

Head标签(标签)包含了所有的头部标签标签。
(1)头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>
(2)<title>标签可定义网页的标题
(3)<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新
频度的描述和关键词。
(4)<meta> 标签位于文档的头部   <meta charset="utf-8" /> 标题处添加图标
(5)<link rel="icon" href="ico地址">
如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现

4. 基本语法

HTML标签是由尖括号包围的关键词，例如：<dr/>
HTML标签通常是成对出现的，例如：<html>和</html>,称之为双标签；第一个是开始标签，第二个是结束标签。
有些特殊的标签必须是单标签，例如：<br/>,称之为单标签

 5. HTML网页大至骨架如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>
<!-- 注释
DOCTYPE html 声明html的版本信息
-->
<!-- html是网页中的根标签，所有的内容都应该写到此标签中 -->
<!DOCTYPE html>
<html><!-- head 头标签对网页设置--><head><meta charset="utf-8" /><!-- 网页字符集 --><title>我的第一张网页</title><link herf=""/></head><!-- 标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：<body text=”red”>1.属性的格式 ：属性名 = “属性值“ 2. 属性的位置：<标签名 属性名 = “属性值“ >xxx</标签名>3. 添加多个属性：<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名> --><body bgcolor="green"><!-- body 网页内容 --><!-- 标题标签<h1></h1>…..<h6></h6> --><h1 >标题一</h1><h2>标题二</h1><h3>标题三</h1><!-- 换行标签<br/> -->5月25日消息，微博话题“中国人吃掉全世界70%的西瓜”冲上热搜榜。<br />据国内多家媒体报道，夏天马上就要到了，闷热的午间，就想吃上一口西瓜，一个下午都美滋滋。<!-- ● 段落标签<p></p> --><p>但需要注意的是，肾功能不全的人，如果吃过多西瓜，不但会使水肿加重，还易导致其体内的血容量增多。</p><p>感冒初期的病人不适宜吃西瓜，医学认为，西瓜有清里热的作用，所以感冒初期吃西瓜会导致感冒病情加重或病程延长。</p><!-- 列表无序列表<ul><li></li></ul>    有序列表<ol><li></li></ol> --><ul> <li>列表一</li><li>列表二</li></ul><ol><li>列表一</li></ol></body>
</html>

6.常用标签

1、HTML的标签的认识


 HTML 标签是由尖括号包围的关键词，比如 <html>

成对出现的标签就是双标签，单个出现的就是单标签

标签在页面上会显示成一个方块，分为两类：

块级标签：在布局中默认会独占一行，块元素后的元素需换行排列。
行级标签：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。

HTML 列表标签

  • 标题标签：<h> </h>

表示文档的标题，除了具有块元素的基本特性外，还含有默认的外边距和字体大小。

  • 段落标签：<p></p>

<p></p>表示一个文档中的文字段落

1）无序列表

在浏览网页时，会发现网页上有很多信息的列表，如新闻列表、图片列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法：

<ul>
  <li>...</li>
  <li>... </li>
   ......
</ul>
2）有序列表

如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法：
<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</o>

HTML表格

创建表格的四个元素：

table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数.

     语法：

<table>

    <tr>

        <td>…</td>

        <td>…</td>

        …

    </tr>

…

</table>

构建表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <table border="1" style="width:200px;height:100px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <!--align="center"表示将文本信息放在正中央-->
            <td align="center">张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

HTML超链接
使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a  href="http://www.baidu.com"  title="点击进入百度">click here!</a>

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

如下代码：

<a href="目标网址" target="_blank">click here!</a>

HTML 图片
在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

HTML表单
网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form   method="传送方式"   action="服务器文件">

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

<form    method="post"   action="save.php">

        <label for="username">用户名:</label>

        <input type="text" name="username" />

        <label for="pass">密码:</label>

        <input type="password" name="pass" />

</form>

语法：

<form>

   <input type="text/password" name="名称" value="文本" />

</form>

1、type：

   当type="text"时，输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

举例：

<form>

  姓名：

  <input type="text" name="myName">

  <br/>

  密码：

  <input type="password" name="pass">

</form>

相关文章：

前端HTML相关知识

1.什么是HTML HTML 指的是超文本标记语言 ( HyperText Markup Language )。 超文本:是指页面内可以包含图片、链接、声音,视频等内容 标记:标签(通过标记符号来告诉浏览器网页内容该如何显示) 浏览器根据不同的HTML标签&#xff0c;解析成我们看到的网页 2.HTML的特点 HTML不…...

编程日记 2024/6/16 21:16:26

集合面试题

目录 ①HashMap的理解&#xff1f;以及为什么要把链表转换为红黑树&#xff1f;②HashMap的put&#xff1f;③HashMap的扩容&#xff1f;④加载因子为什么是0.75&#xff1f;⑤modcount的作用&#xff1f;⑥HashMap与HashTable的区别&#xff1f;⑥HashMap中1.7和1.8的区别&am…...

编程日记 2024/6/16 21:14:24

集成学习概述

概述 集成学习(Ensemble learning)就是将多个机器学习模型组合起来&#xff0c;共同工作以达到优化算法的目的。具体来讲&#xff0c;集成学习可以通过多个学习器相结合&#xff0c;来获得比单一学习器更优越的泛化性能。集成学习的一般步骤为&#xff1a;1.生产一组“个体学习…...

编程日记 2024/6/16 21:08:16

记录一次root过程

设备: Redmi k40s 第一步&#xff0c; 解锁BL&#xff08;会重置手机系统&#xff01;&#xff01;&#xff01;所有数据都会没有&#xff01;&#xff01;&#xff01;&#xff09; 由于更新了澎湃OS系统, 解锁BL很麻烦, 需要社区5级以上还要答题。 但是&#xff0c;这个手机…...

编程日记 2024/6/16 21:07:15

函数(上)(C语言)

函数(上&#xff09; 一. 函数的概念二. 函数的使用1. 库函数和自定义函数(1) 库函数(2) 自定义函数的形式 2. 形参和实参3. return语句4. 数组做函数参数 一. 函数的概念 数学中我们其实就见过函数的概念&#xff0c;比如&#xff1a;一次函数ykxb&#xff0c;k和b都是常数&a…...

编程日记 2024/6/16 21:06:14

ARM-V9 RME(Realm Management Extension)系统架构之系统安全能力的侧信道抵御

安全之安全(security)博客目录导读 目录 一、系统PMU计数器 二、使用信号和功耗操作进行的故障攻击 一、系统PMU计数器 性能监测单元 (PMU) 计数器可能成为泄露机密信息的侧信道，如访问模式或受RME安全保障保护的安全状态下的执行控制流。以下规则补充了《Arm CoreSight™…...

编程日记 2024/6/16 21:04:12

Java高级技术探索：深入理解JVM内存分区与GC机制

文章目录 引言JVM内存分区概览垃圾回收机制&#xff08;GC&#xff09;GC算法基础常见垃圾回收器ParNew /Serial old 收集器运行示意图 优化实践结语 引言 Java作为一门广泛应用于企业级开发的编程语言&#xff0c;其背后的Java虚拟机&#xff08;JVM&#xff09;扮演着至关重…...

编程日记 2024/6/16 21:03:11

新视野大学英语2 词组 6.15

do you feel as confused and manipulated as i do with this question 你是否和我一样&#xff0c;对这个问题感到困惑和被操控 manipulated&#xff1a;被操控 defy common sense and contradict each other 违背常识且相互矛盾 defy&#xff1a;违背 contradict&#xf…...

编程日记 2024/6/16 21:00:07

【JavaScript】MDN

一、初识 1.1 基础 1.1.1 语言速成课 1.1.1.1 变量 ​ 变量是存储值的容器。首先用let关键字声明一个变量&#xff0c;后面跟着你给变量的名字 ​ 变量命名区分大小写 ​ 分号在JavaScript中是用来分隔语句的&#xff0c;但是如果语句后面有一个换行符(或者在{block}中只…...

编程日记 2024/6/16 20:59:06

Qt/C++中的异步编程

Qt/C++中的异步编程 1 介绍2 含义2.1 QtConcurrent2.2 std::future2.3 Qml中的Promise3 使用场景4 代码示例5 注意事项5.1异常处理5.2 线程安全5.3 性能优化5.4 线程间通信5.5 避免死锁1 介绍 异步编程是现代应用程序开发中不可或缺的一部分。它允许程序在执行耗时任务时保持响…...

编程日记 2024/6/16 20:58:04

解决javadoc一直找不到路径的问题

解决javadoc一直找不到路径的问题 出现以上问题就是我们在下载jdk的时候一些运行程序安装在C:\Program Files\Common Files\Oracle\Java\javapath下&#xff1a; 一开始是没有javadoc.exe文件的&#xff0c;我们只需要从jdk的bin目录下找到复制到这个里面&#xff0c;就可以使用…...

编程日记 2024/6/16 20:57:03

存储器的性能指标以及层次化存储器

存储器的性能指标 存储器有三个性能指标&#xff1a;速度、容量和位价&#xff08;每位价格&#xff09; 1.存储速度 &#xff08;1&#xff09;存取时间 想衡量存储速度&#xff0c;最直观的指标就是完成一次存储器读写操作所需要的时间&#xff0c;这叫做存取时间&#x…...

编程日记 2024/6/16 20:56:01

【C++】C++入门的杂碎知识点

思维导图大纲&#xff1a; namespac命名空间 什么是namespace命名空间namespace命名空间有什么用 什么是命名空间 namespace命名空间是一种域&#xff0c;它可以将内部的成员隔绝起来。举个例子&#xff0c;我们都知道有全局变量和局部变量&#xff0c;全局变量存在于全局域…...

编程日记 2024/6/16 20:51:57

springboot 整合redis问题,缓存击穿，穿透，雪崩，分布式锁

boot整合redis 压力测试出现失败 解决方案 排除lettuce 使用jedis <!-- 引入redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><exclusions><exclus…...

编程日记 2024/6/16 20:50:56

免费个人站 独立站 wordpress 自建网站

制作免费网站 | 免费网站构建器 | WordPress.com https://bioinformatics7.wordpress.com WordPress.com...

编程日记 2024/6/16 20:49:55

散列函数的基本概念

散列函数 算法不能设计太过复杂 太复杂的散列函数&#xff0c;势必会消耗很多计算时间 散列函数生成的值要尽可能随机并且均匀分布 这样才能避免或者最小化散列冲突而且即便出现来冲突&#xff0c;散列到每个槽里的数据也会比较平均&#xff0c;不会出现某个槽内数据特别多…...

编程日记 2024/6/16 20:48:54

【C++拷贝构造函数深浅拷贝】

拷贝构造函数 注意&#xff1a;访问权限是public 拷贝构造函数&#xff1a;类名&#xff08;const 类名& 对象名&#xff09;{} 可以有多个参数 。 没有常引用就是普通构造函数 如果不写&#xff0c;编译器自己会给一个&#xff08;作用仅仅是赋值&#xff0c;默认拷…...

编程日记 2024/6/16 20:47:51

快速编译安装tensorrt_yolo

快速编译安装 安装 tensorrt_yolo 通过 PyPI 安装 tensorrt_yolo 模块&#xff0c;您只需执行以下命令即可&#xff1a; pip install -U tensorrt_yolo 如果您希望获取最新的开发版本或者为项目做出贡献&#xff0c;可以按照以下步骤从 GitHub 克隆代码库并安装&#xff1a; …...

编程日记 2024/6/16 20:46:50

外盘黄金期货需要注意什么？

为大家整理了关于黄金做单的五大原则&#xff0c;相信对于新手投资者来说肯定会产生一定的帮助。　 1、看多空&#xff1a;主要有两种方法&#xff0c;基本面判断和技术面判断&#xff0c;基本面判断&#xff0c;主要是借助基本信息面&#xff0c;如政策。供需&#xff0c;产量…...

编程日记 2024/6/16 20:45:48

Allegro光绘Gerber文件、IPC网表、坐标文件、装配PDF文件导出打包

Allegro光绘Gerber文件、IPC网表、坐标文件、装配PDF文件导出打包 一、Gerber文件层叠与参数设置二、装配图文件设置导出三、光绘参数设置四、Gerber孔符图、钻孔表及钻孔文件输出五、输出Gerber文件六、输出IPC网表七、导出坐标文件八、文件打包 一、Gerber文件层叠与参数设置…...

编程日记 2024/6/16 20:44:47

别再拍脑袋立项了！手把手教你用华为IPD的Charter任务书，搞定产品从0到1的商业论证

从直觉到论证&#xff1a;中小企业如何用轻量级Charter打造产品商业闭环 深夜的创业咖啡馆里&#xff0c;几个技术出身的创始人正为下一个产品方向争论不休。"这个功能绝对能引爆市场&#xff01;"CTO激动地敲着桌子&#xff0c;"我见过三家竞品都没做好这个点。…...

编程新知 2026/3/26 12:04:04

OpenClaw+GLM-4.7-Flash：学术论文辅助写作全流程

OpenClawGLM-4.7-Flash&#xff1a;学术论文辅助写作全流程 1. 为什么需要AI辅助学术写作 作为一名经常需要撰写学术论文的研究者&#xff0c;我深刻体会到写作过程中的痛点。从海量文献中筛选关键信息、整理参考文献格式、反复修改论文结构&#xff0c;这些工作往往耗费大量…...

编程新知 2026/3/26 11:51:59

避坑指南：为什么你的神经网络总过拟合？Dropout层参数设置全解析

避坑指南&#xff1a;为什么你的神经网络总过拟合&#xff1f;Dropout层参数设置全解析 训练神经网络时&#xff0c;最令人沮丧的莫过于看到验证集准确率在某个点突然停滞不前&#xff0c;而训练集指标却持续攀升——典型的过拟合信号。作为从业者&#xff0c;我们常陷入两难&a…...

编程新知 2026/3/26 11:33:56

【笔试真题】- 阿里系列-2026.03.25-算法岗

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围在线刷题 bishipass.com 阿里系列-2026.03.25-算法岗 1. LYA 的同余构造 问题描述 说明：阿里系列近期多条业务线笔试题基本共用同一套公开机试，淘天、阿里云等方向都可参考本场。 …...

编程新知 2026/3/26 11:25:55

2K2000龙芯主板以科技创新为驱动力，赋能产业高质量发展

当前&#xff0c;新一轮科技革命和产业变革深入演进&#xff0c;科技创新已成为引领产业高质量发展的核心引擎&#xff0c;更是实现高水平科技自立自强、掌握产业发展主动权的关键支撑。科技创新作为新质生产力的核心驱动力&#xff0c;早已成为引领产业高质量发展的“第一引擎…...

编程新知 2026/3/26 10:19:15

从PHY芯片到TCP/IP协议栈：用Wireshark抓包分析lwIP的ethernetif_input全流程

从PHY芯片到TCP/IP协议栈&#xff1a;用Wireshark抓包分析lwIP的ethernetif_input全流程 在嵌入式网络开发中&#xff0c;理解数据从物理层到协议栈的完整传输路径至关重要。本文将结合STM32F7开发板实战&#xff0c;通过Wireshark抓包与示波器波形双重验证&#xff0c;深入解析…...

编程新知 2026/3/26 7:44:24

SDMatte透明PNG元数据规范：EXIF/IPTC嵌入、版权信息自动写入功能

SDMatte透明PNG元数据规范&#xff1a;EXIF/IPTC嵌入、版权信息自动写入功能 1. 产品概述 SDMatte 是一款面向高质量图像抠图场景的 AI 模型&#xff0c;特别适合处理主体分离、透明物体提取、边缘精修、商品图去背景等任务。该模型对玻璃、薄纱、羽毛、叶片等边缘细节复杂或…...

编程新知 2026/3/26 7:36:23

告别配对烦恼：用Auracast蓝牙广播，让手机、耳机和电视实现一拖多音频共享

告别配对烦恼&#xff1a;Auracast蓝牙广播重塑多设备音频共享体验 清晨七点的健身房&#xff0c;二十位健身爱好者同时戴上耳机&#xff0c;电视里的晨间新闻通过Auracast技术瞬间传入每个人的耳中&#xff1b;家庭影院里&#xff0c;父亲用电视播放电影&#xff0c;母亲通过降…...

编程新知 2026/3/26 7:28:21

工业自动化必备：Kepware+UaExpert实现OPC UA通信的5个关键步骤与常见问题解决

工业自动化实战&#xff1a;Kepware与UaExpert的OPC UA通信全流程解析 在工业4.0时代&#xff0c;设备间的无缝通信已成为智能制造的基础能力。作为工业自动化领域的黄金标准&#xff0c;OPC UA协议凭借其跨平台、高安全性等特性&#xff0c;正在取代传统OPC DA成为工厂数据交互…...

编程新知 2026/3/26 7:16:15

从零搭建硬件测试台：手把手教你用LabVIEW连接菊水PBZ40电源并读取数据

从零搭建硬件测试台&#xff1a;LabVIEW与菊水PBZ40电源的深度集成实战 在工业自动化和科研测试领域&#xff0c;可编程电源的系统集成一直是工程师面临的常见挑战。菊水PBZ40系列作为实验室常用高精度电源&#xff0c;其RS232C接口与LabVIEW图形化编程环境的结合&#xff0c;能…...

编程新知 2026/3/26 7:16:11