前端三剑客之HTML

前端HTML

一、HTML简介

1.什么是html

  • HTML的全称为超文本标记语言(HTML How To Make Love HyperText Markup Language )，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
  • HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面 [12]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML定义网页的结构

CSS样式定义了网页的样式

js定义了网页动态样式，动态资源

2.HTML的开发工具

  • Adobe Dreamweaver

    • Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。Dreamweaver是集网页制作和管理网站于一身的所见即所得的网页代码编辑器，借助其经过简化的智能编码引擎，视觉辅助功能减少错误并提高网站开发速度，轻松创建、编码和管理动态网站。还能够通过访问代码提示，快速了解 HTML、CSS 以及其他 Web 标准。(注:根据自身需求选择版本)
      • 优点:
        • 制作效率。
        • 操控能力强。
        • 网站管理迅速简单。
        • 全面的 CSS 支持。
        • 学习资源多，如 DW 社区。
      • 缺点:
        • 效果难以精确达到与浏览器一致的显示效果。。
        • 不便监控生成干净准确的 HTML代码。

  • DevExtreme

  • DevExtreme 是高性能的HTML5,CSS和Java移动开发框架，可以直接在Visual studio集成开发环境，构建移动应用程序。从 Angular 和 React 到ASPNET MVC或 Vue，DevExtreme 包括一系列高性能和响应式 U| 小部件，用于传统的Web和下一代移动应用程序。目前，DevExtremeV19.1.6 全新发布，是Visual studio开发人员开发跨平台移动产品的首选工具。(注:根据自身需求选择版本)

  • JetBrains WebStorm

    • “最强大的HTML5编辑器”、"最Webstorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了Intelli IDEA强大的JS部分的功能。(注:根据自身需求选择版本)
      • 优点:
        • 智能的代码补全，支持不同浏览器的提示。
        • 代码格式化，规则自定义。
        • HTML 智能提示。
        • 联想查询，查找高亮。
        • 代码重构。
        • 代码检查，快速修复。
        • 代码调试。
        • 代码结构快速浏览和定位。
        • 代码折叠。
        • 自动提示代码包裹或去除包裹。
  • HBuilderX

  • HBuilderX 是由 DCloud 开发的一款轻量级但功能强大的前端集成开发环境（IDE），专为现代前端开发设计。它支持多种编程语言，包括 HTML、CSS、JavaScript、Vue.js、TypeScript 等，适合各种前端开发需求。HBuilderX 提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能，提高编码效率，并拥有丰富的插件市场，提供各种实用的插件，包括代码检查、版本控制、框架支持等。

    • 主要特点和优势

      • 多语言支持：HBuilderX 支持多种编程语言，适合各种前端开发需求。
      • 高效的代码编辑：提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能。
      • 丰富的插件生态：拥有丰富的插件市场，提供各种实用的插件。
      • UniApp 支持：作为 UniApp 的官方开发工具，HBuilderX 为 UniApp 项目提供一流的支持。
      • 跨平台开发：支持跨平台应用开发，可以一次编写，编译到 iOS、Android、Web 等多个平台。

二、HTML基础语法

1.认识HTML的基本结构

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body></body>
</html>
  • 注意：HTML语言不区分大小写
1.1 基本结构中各标签的作用
  • 声明此页面为HTML5页面，简称H5
<!DOCTYPE html>
  • 根标签，元素囊括了页面中所有其它元素，整个页面只需一个
<html>
  • 头标签，包含的是那些不用于展现内容的元素，如 title，link，meta 等
<head>
  • meta标签，存放的是与页面有关的元数据，不会显示到页面中，可以配置编码集
<meta charset="utf-8" />
  • 标题标签，定义页面的标题
<title>
  • 体标签，定义页面的内容
</body>

2.HTML常用标签

2.1标题标签
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
2.2段落标签
<p>段落标签</p>
2.3图片标签
//各属性含义：
//src：图片地址
//alt：当照片出错时，图片的替代文字
//title：鼠标悬停提示文字
<img src="img/a.jpg" alt="" title=""/>

注意：

图片资源的相对路径和绝对路径

​ 1.相对路径：以当前页面所在的位置为基准，而且不能以 / 开始。

  • ​ . / 代表当前目录
  • …/ 代表上一级目录

​ 2.绝对路径：以最原始位置为基准

  • 如果访问本机资源，以盘符开始
  • 如果访问非本机资源，以网络协议开始
2.4换行标签
<br/>
2.5超链接标签
//href：链接跳转的目标路径
//target属性：
//target=_blank，在新窗口打开。表示在新窗口中打开该链接。
//target=_self，在当前窗口打开。<a href="https://www.baidu.com" target="_self">跳转到百度</a>

使用超链接标签实现锚记效果，例如返回顶部等等功能

<h1 id="top">一级标题</h1><a href="#top">返回顶部</a>
2.6 无序列表
<ul> <li>张三</li><li>李四</li><li>王五</li>
</ul>
2.7有序列表
<ol> <li>喜羊羊</li><li>美羊羊</li><li>懒羊羊</li>
</ol>
2.8 表格标签
<table border="1"><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr><tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>

border：边框宽度

style="border-collapse: collapse;"相邻单元格共用一个边框

table：整个表格的最外层标签

tr：行标签

th：表格标题标签

td：列标签，一个td，就是一个单元格

表格合并

  • colspan：合并列
  • rowspan：合并行
<table border="1"><tr><th colspan="2">第一行第一列</td><th>第一行第三列</td></tr><tr><td rowspan="2">第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr><tr><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
2.9表单标签

表单标签属性

  • readonly： 不可编辑,但可以选择和复制;值可以传递到后台
  • disabled： 不能编辑,不能复制,不能选择;值不可以传递到后台
  • checked： 设置单选按钮和复选按钮的默认选中项
  • selected： 设置下拉列表option的默认选中项
    • 注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
      checked=“true”
      checked=“checked”
      checked
      这三种写法的效果都是一样的。
  • form标签

    • form是表单最外层标签。

    • action属性：提交服务器地址

    • method属性：提交方式：get、post

<form action="" method=""></form>
  • 文本框
    • placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息
<input type="text" placeholder="用户名" value="zhangsan" />
  • 密码框
<input type="password"/>
  • 单选按钮
<input type="radio" name="sex" value="1"/>女
<input type="radio" name="sex" value="0" checked="true"/>男
  • 复选框
<input type="checkbox" name="like" value="0" checked="true" />苹果
<input type="checkbox" name="like" value="1" />香蕉
<input type="checkbox" name="like" value="2" />梨
  • 下拉列表
<select name="country"><option value="0" selected="true">中国</option><option value="1">日本</option><option value="2">韩国</option>
</select>
  • 文件域
<input type="file" name="files" />
  • 文本域
<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>
  • 提交按钮
    • 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮
<input type="submit" value="提交" />
  • 重置按钮
<input type="reset" value="重置" />
  • 普通按钮
<input type="button" value="点击我">
<button>点击我</button>

3.容器标签

  • div标签
    • 可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。
<div><h1></h1>
</div>
  • span标签
    • 内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。
<span></span>

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

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

相关文章

网络安全-等级保护(等保) 2-0 等级保护制度现行技术标准

网络安全-等级保护(等保) 2-0 等级保护制度现行技术标准

################################################################################ 第二章&#xff1a;现行等保标准要求&#xff0c;通过表格方式详细拆分了等保的相关要求。 GB 17859-1999 计算机信息系统 安全保护等级划分准则【现行】 GB/T22240-2020 《信息安全技术 网…
阅读更多...
目标检测 LW-DETR（2024）详细解读

目标检测 LW-DETR（2024）详细解读

文章目录 整体架构 LW-DETR全称Light-Weight DETR&#xff0c;是百度团队提出的第二代面向实时检测算法&#xff0c;比yolo v8的速度和精度更好 整体架构 LW-DETR 由一个ViT编码器&#xff08;Vision Transformer Encoder&#xff09;、一个投影器&#xff08;Projector&#…
阅读更多...
DVWA-XSS

DVWA-XSS

DOM low 这是一个下拉框的形式&#xff0c;但是如果我们不让他等于English呢&#xff0c;换成js代码呢&#xff1f; <script>alert(xss);</script> Medium <script> 标签&#xff0c;但仅使用简单的字符串匹配进行替换&#xff08;比如移除 "<scr…
阅读更多...
想要建站但没有服务器？雨云RCA，免服务器即可搭建完整网站！！！

想要建站但没有服务器？雨云RCA，免服务器即可搭建完整网站！！！

大家好&#xff01;时隔几个星期没有发文章了。 最近&#xff0c;雨云发布了一个新的项目——雨云云应用&#xff08;RCA&#xff0c;Rainyun Cloud Application&#xff09;&#xff0c;在没有服务器的情况下&#xff0c;可以小白部署一个完整的网站&#xff0c;免去了繁琐的…
阅读更多...
智能事件分析边缘服务器：交通管理与安全监测的利器

智能事件分析边缘服务器：交通管理与安全监测的利器

在当今交通管理和安全监测的领域中&#xff0c;智能化、高效化的设备需求日益增长。智能事件分析边缘服务器凭借其卓越的性能和丰富的功能&#xff0c;成为了该领域的佼佼者。 一、产品概述 智能事件分析边缘服务器是一款采用嵌入式 Linux 操作系统的边缘事件分析终端。它具有…
阅读更多...
2025抓包工具Reqable手机抓包HTTPS亲测简单好用-快速跑通

2025抓包工具Reqable手机抓包HTTPS亲测简单好用-快速跑通

前言 自安卓7.0高版本系统不在信任用户证书&#xff0c;https抓包方式市面查找方法太过复杂手机要root等&#xff0c;前置条件要求太高太复杂&#xff0c;看的头痛&#xff0c;今天一台电脑按步骤操作完即可抓包https,给大家搞定抓包https问题。支持直接编辑修改请求参…
阅读更多...
Neon数据库：让Postgres更智能的选择！

Neon数据库：让Postgres更智能的选择！

Neon：革新的Serverless PostgreSQL解决方案 在当今快速发展的技术世界，数据库的效率和灵活性成为众多开发者关注的重中之重。Neon，以其独特的serverless架构，正引领着这一变革。本文将深入探讨Neon的独特构架、应用场景以及具体的使用方法，帮助您快速掌握这一开源项目的精…
阅读更多...
从开发者角度看数据库架构进化史：JDBC - 中间件 - TiDB

从开发者角度看数据库架构进化史：JDBC - 中间件 - TiDB

作者&#xff1a; Lucien-卢西恩 原文来源&#xff1a; https://tidb.net/blog/e7034d1b Java 应用开发技术发展历程 在业务开发早期&#xff0c;用 Java 借助 JDBC 进行数据库操作&#xff0c;虽能实现基本交互&#xff0c;但需手动管理连接、编写大量 SQL 及处理结果集&a…
阅读更多...
Vue 3.0 Transition 组件使用详解

Vue 3.0 Transition 组件使用详解

Vue 3.0 的 Transition 组件提供了一种简单的方式来为元素或组件的进入/离开添加动画效果。下面是使用<script setup>语法糖的实现方式。 1. 基本用法 使用场景&#xff1a;当需要为元素的显示/隐藏添加简单的淡入淡出效果时&#xff0c;这是最基础的过渡实现方式。 &…
阅读更多...
代码随想录打卡|Day45 图论（孤岛的总面积 、沉没孤岛、水流问题、建造最大岛屿）

代码随想录打卡|Day45 图论（孤岛的总面积 、沉没孤岛、水流问题、建造最大岛屿）

图论part03 孤岛的总面积 代码随想录链接 题目链接 视频讲解链接 思路&#xff1a;既然某个网格在边界上的岛屿不是孤岛&#xff0c;那么就把非 孤岛的所有岛屿变成海洋&#xff0c;最后再次统计还剩余的岛屿占据的网格总数即可。 dfs&#xff1a; import java.util.Scanner…
阅读更多...
C#自定义扩展方法 及 EventHandler＜TEventArgs＞ 委托

C#自定义扩展方法 及 EventHandler＜TEventArgs＞ 委托

有自定义官方示例链接&#xff1a; 如何实现和调用自定义扩展方法 - C# | Microsoft Learn 1.静态类 2.静态方法 3.第一参数固定为this 要修改的类型,后面才是自定的参数 AI给出的一个示例&#xff1a;没有自定义参数 、有自定义参数的 using System; using System.Colle…
阅读更多...
Zephyr OS 中的 FIFO 接口应用介绍

Zephyr OS 中的 FIFO 接口应用介绍

目录 概述 1 FIFO的接口函数 1.1 K_FIFO_DEFINE函数 1.2 k_fifo_init函数 1.3 k_fifo_put函数 1.4 k_fifo_get 函数 1.5 k_fifo_is_empty 函数 2 应用验证 2.1 UART中使用FIFO范例 2.2 生产-消费类型范例 3 注意事项 3.1 内存管理 3.2 线程安全边界 概述 Zephy…
阅读更多...
Spring Boot 集成 Elasticsearch【实战】

Spring Boot 集成 Elasticsearch【实战】

前言&#xff1a; 上一篇我们简单分享了 Elasticsearch 的一些概念性的知识&#xff0c;本篇我们来分享 Elasticsearch 的实际运用&#xff0c;也就是在 Spring Booot 项目中使用 Elasticsearch。 Elasticsearch 系列文章传送门 Elasticsearch 基础篇【ES】 Elasticsearch …
阅读更多...
Win11下轻松搭建wiki.js，Docker.desktop部署指南（mysql+elasticsearch+kibana+wiki.js）

Win11下轻松搭建wiki.js，Docker.desktop部署指南（mysql+elasticsearch+kibana+wiki.js）

Docker.desktop部署wiki.js指南 前言环境和要求介绍提前准备 1. elasticsearch1.1 部署容器1.2 参数说明1.3 验证容器是否部署成功 2. kibana2.1 部署容器2.2 验证是否部署成功2.3 安装IK分词器 3. MySql3.1 部署容器3.2 增加数据库和wiki.js所需要的账号 4. wiki.js4.1 部署容…
阅读更多...
PCB设计教程【入门篇】——电路分析基础-元件数据手册

PCB设计教程【入门篇】——电路分析基础-元件数据手册

前言 本教程基于B站Expert电子实验室的PCB设计教学的整理&#xff0c;为个人学习记录&#xff0c;旨在帮助PCB设计新手入门。所有内容仅作学习交流使用&#xff0c;无任何商业目的。若涉及侵权&#xff0c;请随时联系&#xff0c;将会立即处理 目录 前言 一、数据手册的重要…
阅读更多...
【论文阅读 | AAAI 2025 | FD2-Net：用于红外 - 可见光目标检测的频率驱动特征分解网络】

【论文阅读 | AAAI 2025 | FD2-Net：用于红外 - 可见光目标检测的频率驱动特征分解网络】

论文阅读 | AAAI 2025 | FD2-Net&#xff1a;用于红外 - 可见光目标检测的频率驱动特征分解网络 1.摘要&&引言2. 方法2.1总体架构2.2特征分解编码器2.3多模态重建机制2.4训练损失 3.实验3.1实验设置3.2主要结果3.3消融研究 4.结论 题目&#xff1a;FD2-Net: Frequency-…
阅读更多...
CAU人工智能class3 优化器

CAU人工智能class3 优化器

优化算法框架 优化思路 随机梯度下降 随机梯度下降到缺点&#xff1a; SGD 每一次迭代计算 mini-batch 的梯度&#xff0c;然后对参数进行更新&#xff0c;每次迭代更新使用的梯度都只与本次迭代的样本有关。 因为每个批次的数据含有抽样误差&#xff0c;每次更新可能并不会 …
阅读更多...
webpack 学习

webpack 学习

webpack打包流程及原理 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器&#xff08;module bundler&#xff09;。在 Web 开发中&#xff0c;它主要用于将各种资源&#xff08;如 JavaScript、CSS、图片等&#xff09;打包成浏览器可以直接运行的文件。Webpack 的核…
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理解析 一、Microdata结构化数据 核心属性 itemscope 声明数据范围itemtype 指定数据词汇表&#xff08;如http://schema.org/Product&#xff09;itemprop 定义数据属性 <div itemscope itemtype"http://schema.org/Book">…
阅读更多...
《算法笔记》11.7小节——动态规划专题-＞背包问题 问题 A: 装箱问题

《算法笔记》11.7小节——动态规划专题-＞背包问题 问题 A: 装箱问题

【问题描述】 有一个箱子的容量为V&#xff08;V为正整数&#xff0c;且满足0≤V≤20000&#xff09;&#xff0c;同时有n件物品&#xff08;0的体积值为正整数。 要求从n件物品中&#xff0c;选取若干装入箱内&#xff0c;使箱子的剩余空间最小。 输入&#xff1a; 1行整数&a…
阅读更多...
最新文章

Copyright @ 2022~2023