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

前端三剑客之HTML

news 来源：原创 2025/5/19 6:55:48

前端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>

相关文章：

  • LLM大语言模型系列1-token
  • 【AWS入门】Amazon SageMaker简介
  • [原创工具] 小说写作软件
  • spark-配置yarn模式
  • 吴恩达机器学习（1）——机器学习算法分类
  • SpringBoot项目里面发起http请求的几种方法
  • 【Spring】Spring中的适配器模式
  • 【PRB】深度解析GaN中最浅的受主缺陷
  • go语言协程调度器 GPM 模型
  • Vue-监听属性
  • 理想AI Talk第二季-重点信息总结
  • 【ROS2】RViz2源码分析（九）：RosClientAbstraction和RosNodeAbstraction的关系
  • ngx_http_realip_module 模块概述
  • 【DeepSeek论文精读】11. 洞察 DeepSeek-V3：扩展挑战和对 AI 架构硬件的思考
  • c++多线程debug
  • 符合Python风格的对象(再谈向量类)
  • Spring Web MVC————入门(3)
  • Go语言--语法基础5--基本数据类型--类型转换
  • Vue 3 中使用 md-editor-v3 的完整实例markdown文本
  • 网络编程套接字（二）
  • 中国田径巡回赛西安站完赛：男子跳远石雨豪夺冠，女子跳高刘肼毅折桂
  • 打造信息消费新场景、新体验，上海信息消费节开幕
  • 俄外长与美国务卿通电话，讨论俄美接触等问题
  • 俄乌谈判开始
  • 降水较常年同期少五成，安徽四大水利工程调水超11亿方应对旱情
  • 商务部：今年前3月自贸试验区进出口总额达2万亿元