HTML基础教程(一)

news2026/3/15 0:35:14
目录一、HTML基本概念二、基础HTML Tag三、Html常用格式一、HTML基本概念什么是HTML文件HTML的英文全称是Hypertext Marked Language中文叫做“超文本标记语言”。和一般文本的不同的是一个HTML文件不仅包含文本内容还包含一些Tag中文称“标记”。一个HTML文件的后缀名是.htm或者是.html。用文本编辑器就可以编写HTML文件。这就试写一个HTML文件吧打开你的Notepad新建一个文件然后拷贝以下代码到这个新文件然后将这个文件存成first.html。html head titleTitle of page/title /head body This is my first homepage. bThis text is bold/b /body /html要浏览这个first.html文件双击它。或者打开浏览器在File菜单选择Open然后选择这个文件就行了。示例解释这个文件的第一个Tag是html这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是/html表示HTML文件到此结束。在head和/head之间的内容是Head信息。Head信息是不显示出来的你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词有助于搜索引擎能够搜索到你的网页。在title和/title之间的内容是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。在body和/body之间的信息是正文。在b和/b之间的文字用粗体表示。b顾名思义就是bold的意思。HTML文件看上去和一般文本类似但是它比一般文本多了Tag比如htmlb等通过这些Tag可以告诉浏览器如何显示这个文件。HTML元素(HTML Elements)HTML元素(HTML Element)用来标记文本表示文本的内容。比如body, p, title就是HTML元素。HTML元素用Tag表示Tag以开始以结束。Tag通常是成对出现的比如body/body。起始的叫做Opening Tag结尾的就叫做Closing Tag。目前HTML的Tag不区分大小写的。比如HTML和html其实是相同的。HTML元素(HTML Elements)的属性HTML元素可以拥有属性。属性可以扩展HTML元素的能力。比如你可以使用一个bgcolor属性使得页面的背景色成为红色就像这样body bgcolorred再比如你可以使用border这个属性将一个表格设成一个无边框的表格。如下table border0属性通常由属性名和值成对出现就像这样namevalue。上面例子中的bgcolor, border就是namered和0就是value。属性值一般用双引号标记起来。属性通常是附加给HTML的Opening Tag而不是Closing Tag。二、基础HTML TagHTML里比较基础的Tag主要用于标题段落和分行。学习HTML最好的方法就是跟着示例学。正文标题这个示例告诉你如何在HTML文件里定义正文标题。HTML用h1到h6这几个Tag来定义正文标题从大到小。每个正文标题自成一段。h1This is a heading/h1 h2This is a heading/h2 h3This is a heading/h3 h4This is a heading/h4 h5This is a heading/h5 h6This is a heading/h6段落划分在HTML里用p和/p划分段落。pThis is a paragraph/p pThis is another paragraph/p换行通过使用br这个Tag可以在不新建段落的情况下换行。br没有Closing Tag。用p换行是个坏习惯正确的是使用br。pThis br is a parabrgraph with line breaks/pHTML注释在HTML文件里你可以写代码注释解释说明你的代码这样有助于你和他人日后能够更好地理解你的代码。注释可以写在!--和--之间。浏览器是忽略注释的你不会在HTML正文中看到你的注释。!-- This is a comment --一些小建议HTML文件会自动截去多余的空格。不管你加多少空格都被看做一个空格。 一个空行也被看做一个空格。有些Tag能够将文本自成一段而不需要使用p/p来分段。比如h1/h1之类的标题Tag。更多示例这个示例显示了段落的特性。html body p 这一段 在源代码里 包含很多分行 但是浏览器忽略 这些分行。 /p p 这一段 在浏览器里 包含 很多 空格 但是 浏览器忽略多余空格。 /p p 你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小段落的行数会因此改变。 /p /body /html换行这个示例告诉你如何在HTML文件里换行。html body p 要br在一段br里br换行br请使用brbr这个Tag。 /p /body /html正文标题这个示例教会你如何在HTML文件里显示正文标题。html body h1这是1号标题/h1 h2这是2号标题/h2 h3这是3号标题/h3 h4这是4号标题/h4 h5这是5号标题/h5 h6这是6号标题/h6 /body /html居中的正文标题这个示例告诉你如何将正文标题居中显示。html body h1 aligncenter这是标题/h1 p上面的标题是居中显示的。/p /body /html加条横线这个示例演示了如何在HTML文中加条横线。html body p用hr这个Tag可以在HTML文件里加一条横线。/p hr p村妇想像皇宫的生活皇后得用金扁担挑水吧。/p hr p问谁是世界上最可怜的人答炮兵连炊事班战士问为什么答戴绿帽背黑锅看别人打炮。/p hr p初中某数学老师讲方程式变换在讲台上袖子一挽大声喝道同学们注意我要变形了……/p /body /html代码注释这个示例演示如何在HTML代码中加上代码注释这些注释只显示在HTML源代码中而源代码最终形成的网页里是看不到这些注释的。html body !--这是代码注释-- p代码注释是不会显示在网页里的。/p /body /html背景颜色这个示例演示如何改变HTML文件的背景色。html body bgcoloryellow h2看这个页面是黄色的。/h2 /body /html三、Html常用格式HTML定义了一些文本格式的Tag比如利用Tag可以将字体变成粗体或者斜体。从下面的示例你可以了解各种文本格式Tag如何改变HTML文本的显示。常用文本格式TagTagTag说明b粗体boldi斜体italicdel文字当中划线表示删除ins文字下划线表示插入sub下标sup上标blockquote缩进表示引用pre保留空格和换行code表示计算机代码等宽字体示例HTML常用的格式Tag这个示例用了上述Tag你可以对比一下HTML的显示结果。html body pb粗体用b表示。/b/p pi斜体用i表示。/i/p pdel芙蓉姐姐/del这个词当中划线表示删除。/p pins想唱就唱/ins这个词下划线插入。/p pXsub2/sub其中的2是下标/p pXsup2/sup其中的2是上标/p pblockquote好好学习天天向上。这句话缩进表示引用/blockquote/p pre 这是 预设(preformatted)文本. 在pre这个tag里的文本 保留 空格和 分行。 /pre codecall getOrders/code p用code显示计算机代码code里显示的字符是等宽字符。/p /body /html如何看HTML的源代码在浏览器看到的HTML网页是浏览器解释HTML源代码后产生的结果。要查看这个HTML的源代码有两种方法。一是点击鼠标右键点击View Source(查看源文件)命令二是选择浏览器菜单View(查看)中的Source(源文件)命令。利用View Source得到网页的源代码你可以由此借鉴一下别人写得好的地方。不过在你对HTML知识尚少的情况下看别人复杂的HTML源代码只会让你头晕。建议你还是再等等先掌握一些基础再说。

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

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

相关文章

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…

网络编程(Modbus进阶)

思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…