【Web前端】HTML网页编程基础

news2025/5/24 10:10:46

HTML5简介与基础骨架

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾

HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如<html>

标签有两种表现形式：

  1. 双标签，例如：<html></html>
  2. 单标签，例如：<img>

HTML5的DOCTYPE声明

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE html >是H5的声明位于文档的最前面，处于标签之前。 他是网页必备的组成部分，避免浏览器的怪异模式。

     

 HTML5基本骨架

1.html标签：定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
</html>

2.head标签：head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

3.body标签：body 元素定义文档的主体。元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
     我会显示在浏览器中
  </body>
</html>

4.title标签：是定义文档的标题，显示在浏览器窗口的标题栏或状态栏上，<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title；

<!DOCTYPE html>
<html>
  <head>
    <title>第一个页面</title>
  </head>
  <body>
     我会显示在浏览器中
  </body>
</html>

5.meta标签：meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>itbaizhan</title>
  </head>
  <body>
  </body>
</html>

HTML标签之标题

标题（Heading）是通过 <h1> - <h6>标签进行定义的。<h1>定义最大的标题 <h6>定义最小的标题

<h1 align="left" >一级标题</h1>
<h2 align="center" >二级标题</h2>
<h3 align="right" >三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

 生成h1~h6快捷键：h$*6

正确使用标题

请确保将 HTML 标题标签只用于标题。

不要仅仅是为了生成粗体或大号的文本而使用标题。

正确使用标题有益于SEO

应该将< h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推

标签位置的摆放：在标签中添加属性：align="left | center | right" 默认居左

HTML标签之段落、换行、水平线 

段落：是通过<p>标签定义的 

<p>这是一个段落 </p> 
<p>这是另一个段落</p>

 换行：如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>

<p>这个<br>段落<br>演示了分行的效果</p>

水平线： <hr/>标签在 HTML 页面中创建水平线

<hr color="" width="" size="" align=""/>

属性：

  1. color：设置水平线的颜色
  2. width：设置水平线的宽度
  3. size：设置水平线的高度
  4. align：设置水平线的对齐方式（默认居中），可取值left|right

HTML标签之图片 

图片：<img> 标签定义 HTML 页面中的图像

<img src="" alt="" title="" width="" height="">

注意事项：<img>是单标签，不需要进行闭合操作

属性：

  1. src：路径（图片地址与名字）
  2. alt：规定图像的替代文本
  3. width：规定图像的宽度
  4. height：规定图像的高度
  5. title：鼠标悬停在图片上给予提示

图片路径：

绝对路径：是电脑的盘符存储与访问的具体地址

D:\html_resource\1.jpg // 盘符储存地址

<img src="D:\html_resource\1.jpg">

相对路径：两者相对关系，两者在同⼀路径下可以直接访问

  1. 子级关系: /

  2. 父级关系: ../

  3. 同级关系: ./（可以省略）

网络路径：指具体的网络地址：图片URL

HTML标签之超文本链接 

HTML使用标签 <a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档

<a href="url">链接文本</a>

超链接属性

在标签<a>中使用了href属性来描述链接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。

  2. 访问过的链接显示为紫色并带有下划线。

  3. 点击链接时，链接显示为红色并带有下划线。

HTML标签之文本 

常用文本标签

标签描述
<em>定义着重文字
<b>定义粗体文本
<i>定义斜体字
<strong>定义加重语气
<del>定义删除字
<span>元素没有特定的含义

特别提示：常用文本标签和段落是不同的，段落代表一段文本而文本标签一般表示文本词汇

HTML列表标签之有序列表 

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。

<ol type="">
  <li>HTML</li>
  <li>JSON</li>
  <li>JavaScript</li>
  <li>CSS</li>
</ol>

type属性:<ol>的属性type 拥有的选项

  1. 1 表示列表项目用数字标号（1,2,3...）
  2. a 表示列表项目用小写字母标号（a,b,c...）
  3. A 表示列表项目用大写字母标号（A,B,C...）
  4. i 表示列表项目用小写罗马数字标号（i,ii,iii...）
  5. I 表示列表项目用大写罗马数字标号（I,II,III...）

 列表是可以进行嵌套的

<ol>
  <li>HTML</li>
  <li>
    <ol>
      <li>JS</li>
      <li>jQuery</li>
    </ol>
  </li>
  <li>CSS</li>
</ol>

HTML列表标签之无序列表 

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记,无序列表始于 <ul> 标签。每个列表项始于<li> 标签。

<ul type="">
  <li>HTML</li>
  <li>JavaScript</li>
</ul>

type属性<ul>的属性type 拥有的选项

  • disc 默认实心圆
  • circle 空心圆
  • square 小方块
  • none 不显示

  无序列表也是可以进行嵌套的

<ul type="">
  <li>HTML</li>
  <li>
    <ol type="">
      <li>JS</li>
      <li>jQuery</li>
    </ol>
  </li>
  <li>CSS</li>
</ul>

HTML标签之表格

表格组成与特点

        行、列、单元格

        单元格特点：同行等高、同列等宽。

表格标签

        表格：<table>

        行：<tr>

        单元格(列)：<td>

表格属性

        border：设置表格的边框

         width：设置表格的宽度

        height：设置表格的高度

<table border="" height="" width="">
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
  <tr>
    <td>JSON</td>
    <td>JAVA</td>
  </tr>
</table>

 表格单元格合并

  • 水平合并：colspan
  • 垂直合并：rowspan
<table border="1" width="500px" height="200px">
  <tr>
    <td colspan="3">单元格1单元格2单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
  <tr>
    <td rowspan="2">单元格6-11</td>
    <td>单元格7</td>
    <td rowspan="3">单元格81318</td>
    <td colspan="2" rowspan="2">单元格9101415</td>
  </tr>
  <tr>
    <td>单元格12</td>
  </tr>
  <tr>
    <td>单元格16</td>
    <td>单元格17</td>
    <td>单元格19</td>
    <td>单元格20</td>
  </tr>
</table>

HTML标签之表单 

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

image-20211124143834115

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post" name="myform"></form>

属性说明:action服务器地址         name表单名称

method中Get和Post的区别

  1. 数据提交方式，get把提交的数据url可以看到，post看不到
  2. get一般用于提交少量数据，post用来提交大量数据

表单元素:一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

<form>
  <input type="text">
  <input type="submit">
</form>

文本框：文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
   First name: <input type="text" name="firstname">
  <br>
   Last name: <input type="text" name="lastname">
</form>

密码框：密码字段通过标签<input type="password"> 来定义

<form>
   Password: <input type="password" name="pwd">
</form>

提交按钮： 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

 块元素与行内元素(内联元素)

HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的

Content_categories_venn

详细参考地址：内容分类 - HTML（超文本标记语言） | MDN

虽然到了HTML5的版本，元素分类更细致了，但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用

内联元素和块级元素的区别

块级元素内联元素
块元素会在页面中独占一行（自上向下垂直排列）行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性行内元素设置width，height属性无效
⼀般块级元素可以包含行内元素和其他块级元素⼀般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1~h6、hr、p、table、ul、等

常见内联元素(行内元素)

a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）

button、img、input等

HTML5新增标签

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定

在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

扩展知识

div容器元素，也是页面中见到的最多的元素

div实现

image-20211126150749756

H5新标签实现

image-20211126150757403

H5新标签

  1. <header></header> 头部
  2. <nav></nav> 导航
  3. <section></section>定义文档中的节,比如章节、页眉、页脚
  4. <aside></aside> 侧边栏
  5. <footer></footer> 脚部
  6. <article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

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

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

    相关文章

    阿里开源 CosyVoice2：打造 TTS 文本转语音实战应用

    阿里开源 CosyVoice2：打造 TTS 文本转语音实战应用

    1、引言 1.1、CosyVoice2 简介 阿里通义实验室推出音频基座大模型 FunAudioLLM，包含 SenseVoice 和 CosyVoice 两大模型。 CosyVoice：模拟音色与提升情感表现力 多语言 支持的语言: 中文、英文、日文、韩文、中文方言（粤语、四川话、上海话、天津话、武汉话等）跨语言及…
    阅读更多...
    RabbitMQ可靠传输——持久性、发送方确认

    RabbitMQ可靠传输——持久性、发送方确认

    一、持久性 前面学习消息确认机制时&#xff0c;是为了保证Broker到消费者直接的可靠传输的&#xff0c;但是如果是Broker出现问题&#xff08;如停止服务&#xff09;&#xff0c;如何保证消息可靠性&#xff1f;对此&#xff0c;RabbitMQ提供了持久化功能&#xff1a; 持久…
    阅读更多...
    无人机开启未来配送新篇章

    无人机开启未来配送新篇章

    低空物流&#xff08;无人机物流&#xff09;是利用无人机等低空飞行器进行货物运输的物流方式&#xff0c;依托低空空域&#xff08;通常在120-300米&#xff09;实现快速、高效、灵活的配送服务。它是低空经济的重要组成部分&#xff0c;广泛应用于快递配送、医疗物资运输、农…
    阅读更多...
    Qt状态机QStateMachine

    Qt状态机QStateMachine

    QStateMachine QState 提供了一种强大且灵活的方式来表示状态机中的状态&#xff0c;通过与状态机类(QStateMachine)和转换类(QSignalTransition&#xff0c; QEventTransition)结合&#xff0c;可以实现复杂的状态逻辑和用户交互。合理使用嵌套状态机、信号转换、动作与动画、…
    阅读更多...
    Java详解LeetCode 热题 100(20):LeetCode 48. 旋转图像（Rotate Image）详解

    Java详解LeetCode 热题 100(20):LeetCode 48. 旋转图像（Rotate Image）详解

    文章目录 1. 题目描述2. 理解题目3. 解法一&#xff1a;转置 翻转3.1 思路3.2 Java代码实现3.3 代码详解3.4 复杂度分析3.5 适用场景 4. 解法二&#xff1a;四点旋转法4.1 思路4.2 Java代码实现4.3 代码详解4.4 复杂度分析4.5 适用场景 5. 详细步骤分析与示例跟踪5.1 解法一&a…
    阅读更多...
    CAU人工智能class4 批次归一化

    CAU人工智能class4 批次归一化

    归一化 在对输入数据进行预处理时会用到归一化&#xff0c;将输入数据的范围收缩到0到1之间&#xff0c;这有利于避免纲量对模型训练产生的影响。 但当模型过深时会产生下述问题&#xff1a; 当一个学习系统的输入分布发生变化时&#xff0c;这种现象称之为“内部协变量偏移”…
    阅读更多...
    Android11以上通过adb复制文件到内置存储让文件管理器可见

    Android11以上通过adb复制文件到内置存储让文件管理器可见

    之前Android版本如果需要将文件通过adb push放到内置存储&#xff0c;push到/data/media/10下的目录即可&#xff0c;直接放/sdcard/文件管理器是看不到的。 现在最新的Android版本直接将文件放在/sdcard或/data/media/10下文件管理器也看不到 可以将文件再复制一份到一下路径…
    阅读更多...
    篇章二 需求分析（一）

    篇章二 需求分析（一）

    目录 1.知名MQ 2.需求分析 2.1 核心概念 2.2 生产者消费者模型的类别 2.3 BrokerServer 内部的关键概念&#xff08;MQ&#xff09; 1.虚拟主机&#xff08;Virtual Host&#xff09; 2.交换机&#xff08;Exchange&#xff09; 3.队列&#xff08;Queue&#xff09; 4…
    阅读更多...
    图解深度学习 - 机器学习简史

    图解深度学习 - 机器学习简史

    前言 深度学习并非总是解决问题的最佳方案&#xff1a;缺乏足够数据时&#xff0c;深度学习难以施展&#xff1b;某些情况下&#xff0c;其他机器学习算法可能更为高效。 若初学者首次接触的是深度学习&#xff0c;可能会形成一种偏见&#xff0c;视所有机器学习问题为深度学…
    阅读更多...
    Gmsh 代码深度解析与应用实例

    Gmsh 代码深度解析与应用实例

    在科学计算与工程仿真领域&#xff0c;Gmsh 是一款广受欢迎的开源有限元网格生成器&#xff0c;它不仅支持复杂的几何建模&#xff0c;还能高效生成高质量的网格&#xff0c;并具备强大的后处理功能。本文将深入解析几段具有代表性的 Gmsh 代码&#xff0c;从基础几何创建到高级…
    阅读更多...
    49页 @《人工智能生命体 新启点》中國龍 原创连载

    49页 @《人工智能生命体 新启点》中國龍 原创连载

    《 人工智能生命体 新启点 》一书&#xff0c;以建立意识来建立起生命体&#xff0c;让其成为独立、自主的活动个体&#xff1b;也就可以理解为建立生命体的思想指导。 让我们能够赋予他灵魂&#xff01;
    阅读更多...
    量化研究---bigquant策略交易api研究

    量化研究---bigquant策略交易api研究

    api接口来平台的代码整理&#xff0c;原理是读取bigquant的模拟测试信号&#xff0c;下单&#xff0c;可以完美的对接qmt交易&#xff0c;我优化了交易api的部分内容 我开发对接qmt的交易系统 看api源代码 源代码 # 导入系统包 import os import json import requests from ty…
    阅读更多...
    编译原理 期末速成

    编译原理 期末速成

    一、基本概念 1. 翻译程序 vs 编译程序 翻译程序的三种方式 编译&#xff1a;将高级语言编写的源程序翻译成等价的机器语言或汇编语言。&#xff08;生成文件&#xff0c;等价&#xff09;解释&#xff1a;将高级语言编写的源程序翻译一句执行一句&#xff0c;不生成目标文件…
    阅读更多...
    echarts之漏斗图

    echarts之漏斗图

    vue3echarts实现漏斗图 echarts中文官网&#xff1a;https://echarts.apache.org/examples/zh/index.html 效果图如下&#xff1a; 整体代码如下&#xff1a; <template><div id"funnelChart" style"width:100%;height:400px;"></div&g…
    阅读更多...
    零基础设计模式——第二部分：创建型模式 - 原型模式

    零基础设计模式——第二部分：创建型模式 - 原型模式

    第二部分&#xff1a;创建型模式 - 5. 原型模式 (Prototype Pattern) 我们已经探讨了单例、工厂方法、抽象工厂和生成器模式。现在&#xff0c;我们来看创建型模式的最后一个主要成员——原型模式。这种模式关注的是通过复制现有对象来创建新对象&#xff0c;而不是通过传统的…
    阅读更多...
    java 进阶 1.0.3

    java 进阶 1.0.3

    Thread API说明 自己滚去看文档 CPU线程调度 每一个线程的优先使用权都是系统随机分配的&#xff0c;人人平等 谁先分配到就谁先用 也可以耍赖&#xff0c;就是赋予某一个线程拥有之高使用权&#xff1a;优先级 这样的操作就叫做线程调度 最基本的是系统轮流获得 java的做法是抢…
    阅读更多...
    从 Docker 到 runC

    从 Docker 到 runC

    从 Docker 到 runC：容器底层原理详解 目录 1. Docker 与 runC 的关系 2. Docker 的核心组件 3. runC 的核心功能 4. 实战示例：从 Docker 到 runC 4.1 示例场景：运行一个简单容器 4.2 Docker 底层调用 runC 的流程 4.3 查看 runC 的调用 4.4 直接调用 runC 创建容器 …
    阅读更多...
    PET,Prompt Tuning,P Tuning,Lora,Qlora 大模型微调的简介

    PET,Prompt Tuning,P Tuning,Lora,Qlora 大模型微调的简介

    概览 到2025年&#xff0c;虽然PET&#xff08;Pattern-Exploiting Training&#xff09;和Prompt Tuning在学术界仍有探讨&#xff0c;但在工业和生产环境中它们已基本被LoRA/QLoRA等参数高效微调&#xff08;PEFT&#xff09;方法取代 。LoRA因其实现简单、推理零开销&#…
    阅读更多...
    02-jenkins学习之旅-基础配置

    02-jenkins学习之旅-基础配置

    0 配置主路径 jenkins安装目录下找到jenkins.xml文件&#xff0c;C:\ProgramData\Jenkins\.jenkins目录下会存放jenkins相关的配置信息。 1 jdk配置 jenkins是java开发开源的项目&#xff0c;进而服务器需要jdk环境 1.1 服务器安装jdk 1.2 jenkins jdk配置 2 git配置 在je…
    阅读更多...
    Appium+python自动化（三）- SDK Manager

    Appium+python自动化（三）- SDK Manager

    简介 一开始打算用真机做的&#xff0c;所以在前边搭建环境时候就没有下载SDK&#xff0c;但是考虑到绝大多数人都没有真机&#xff0c;所以顺应民意整理一下模拟器。SDK顾名思义&#xff0c;Android SDK Manager就是一个Android软件开发工具包管理器&#xff0c;就像一个桥梁&…
    阅读更多...
    推荐文章
    最新文章

    Copyright @ 2022~2023