【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 常用HTML标签(1)

news2024/10/23 0:30:30

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

HTML中的双标记和单标记

双标签也叫围堵标记:需要关闭标记如:<head></head>
单标签也叫空标记 不需要关闭标记如:<meta/>

HTML标记的的写法

标记的基本结构
任何标记皆由<>所包围住,如 <P> <td> </td>
注意 标记名与小于号之间不能留有空白字符。
标记属性
某些标记 要加上参数(属性),某些则不必。如 <font size="2">Hello</font>
参数(属性)只可加于起始标记中。
结尾标记
在起始标记之标记名前加上符号"/"便是其终结标记,如 </font>
标记字母大小写皆可。

HTML常见排版标签

1.注释标签
 <!--注解-->

像很多电脑语言一样,HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字(可以 是很多行)而不作显示!
使用注释的目的是给不同的HTML部份加上说明,方便日后修改, 这对较复杂或非私人网页尤其重要,它不单是提醒自已,亦提醒你的同事这部分 做什么、那部分做什么。

举个栗子

<!—从这里开始是产品介绍的一些部分--> 

用作版权声明。
假如你不希望别人使用或复制你的网页,可加上警告字眼。

举个栗子

<!--本文版权为 1998, Creation of Webpage 所拥有,未经许,请勿抄摘-->
段落标记
p标签

<P>称为段落标记。作用:为字、画、表格等之间留一空白行。
本来<P>是一围堵标记,标于一段落的头尾,但从 HTML 2.0 开始己不需要</P>作结尾。
<P>的常用参数:
例如

<p align="center"> 

align的可选值:right, left, center

br标签

<br>称为换行标记。作用:让文字、图片、表格等显示于下一行

由于浏览器会自动忽略原始码中空白和换行的部分,这让<br>成为最常用的标记之 一。

因为无论你在原始码中编好了多漂亮的文章,若不适当地加上换行标记或段落标记, 浏览器只会将它显示成一大段。

hr水平线标签

<hr>称为水平线。作用:插入一条水平线。

center居中标签

<center></center>
居中标记的作用:让文字、图片、表格等显示于中间。
这标记原先是 Netscape 所定义,后来其它浏览器都支持它,但你会发现很多标记已有 align="CENTER" 的参数,<center>似乎多于了,事实上它还是常用的标记之一,其简单 易用,常用于文字上,对于己加有 align="center" 参数的 <table> 标记亦要不厌其烦 地加上居中标记,因有很多浏览器不支持<table> 标记中的 align="center" 参数

pre格式化标记

<pre>
<pre>称为预设格式标记。作用:是让文件按照原始码的排列方式显示
空格的代码&nbsp,快捷键ctrl+shift+space

div标签

<div>称为区块标记。作用:让文字、图片、表格等的摆放位置, 是我们最常用的一个排版标签!
<div>应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织能力,这些我将会在后面详述,这处只介绍 一个属性设定。
基本使用
<div align="center"> 为例:
align="center" 可选值:center ; left ; right文字、图片、表格等居中、靠左或靠右!
<div align="center"> 的作用和居中标记 <center >一样
前者是由 HTML3.0 开始 的标准,后者是通用己久的标示法!

以后所有的元素(文字,图片,视频等)必须放在表格或div中!

字体标签

我们最最常见和常用的的几个字体标签如下:

<strong>文字1</strong> 
<em>文字2</em> 
<span>文字3</span>

含义解释:

strong加粗强调标记
em 斜体标记
span 普通行内元素标记 关于什么是行内元素 我会在后面详细说到!

h1 ~ h6标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

这些是标题标记,由 <H1> 至 <H6> 变粗变大加宽的程度逐渐
减小,每个标题标记所标示 的字句将独占一行且上下留一空白行!

<font>标签与<basefont>标签

负责设定文字的大小和文字颜色,但各有用处,且看以下比较
<basefont> 可以用于文件的开头部分,即 <head> 与 </head> 之间的位置,将 影响全文字句,是一个空标记,用以改变字体显示的内定值。 <font> 是应用于文件的内文部分,即 <body></body> 之间的位置,只影响 所标示的字句,是一个围堵标记。
两标记可同时存在,唯没被 <font> 所标示的字句才直接受 <basefont> 所影 响,而 <font> 本身亦受 <basefont> 的影响
但是目前在HTML标签中 以上这两个标签都很少被使用了!

无序列表和有序列表标签ul与ol

<ol> 称为顺序清单标记, 内部使用<li>表示清单项目, 所谓顺序清单就是在每一项前面加上 1,2,3… 等数目,又称编号清单。
举个栗子

 	<ol type="i" start="4">
 	  <li>内容</li>
 	  <li>内容</li>
 	  <li>内容</li>
 	</ol> 

type="i" 设定数目款式,其值有五种,请参考 下图,内定为 type=“1”

start="4" 设定开始数目,不论设定了哪一数 目款式,其值只能是 1,2,3… 等整 数,内定为 start=“1”。

<ul>称为无序清单标记, 所谓无序清单就是在每一项前面没有序列等的符号,故又称符号清单
它 的参数设定例如: <ul type="square">
type="square" 设定符号款式,其值有三种,如下:
默认为为 type="disc也可以是 type="circle 也可以是 type="square

图片标记img

定义和用法
img 元素可定义一副图像。
必需的属性
alt:规定图像的替代文本。
src:规定显示图像的 URL。

例如

 <img src="图片路径.jpg"  alt="上海鲜花港 - 郁金香" />

可选的属性

align:规定如何根据周围的文本来排列图像。
border:定义图像周围的边框。
height:定义图像的高度。
hspace:定义图像左侧和右侧的空白。
vspace:定义图像顶部和底部的空白。
width:设置图像的宽度。
表格标签table

<table> 标签定义 HTML 表格
简单的 HTML 表格由 table 元素以及一个或多个 tr td 元素组成。
tr 元素定义表格行, td 元素定义表格单元
更复杂的 HTML 表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。
例如

<table border="1"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> <td>January</td> <td>$100</td> </tr> 
</table> 

<table>可选的常用属性如下:

align:规定表格相对周围元素的对齐方式。
bgcolor:规定表格的背景颜色。
border:规定表格边框的宽度。
cellpadding:规定单元边沿与其内容之间的空白。
cellspacing:规定单元格之间的空白。
frame:规定外侧边框的哪个部分是可见的。
rules:规定内侧边框的哪个部分是可见的。
width:规定表格的宽度。

表格标签中的其他标记
<thead>、<tbody>、<tfoot>
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody> 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
如使用 thead、tfoot 以及tbody元素,就必须使用全部的元素。
它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签, 大家可以自己去尝试一下!

表格中的<tr>标签

<tr> 标签定义 HTML 表格中的行。
tr 元素包含一个或多个 thtd元素。
例如:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

tr标签的可选属性

align:定义表格行的内容对齐方式。
bgcolor:规定表格行的背景颜色。
valign:规定表格行中内容的垂直对齐方式。

表格中的<th>标签
<th>定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。
可选的属性

align :规定单元格内容的水平排列方式。
bgcolor:规定表格单元格的背景颜色。不赞成使用,请使用样式替代它。
heicolspan:指明此单元格可横跨的列数
ght:规定表格单元格的高度。
rowspan:指明此单元格可横跨的行数。
valign:规定单元格内容的垂直排列
width:规定表格单元格的宽度。

表格中的<td>标签

<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格:
表头单元 - 包含头部信息(由 th 元素创建)
标准单元 - 包含数据(由 td 元素创建)
td 元素中的文本一般显示为正常字体且左对齐。

可选的属性如下:

align :规定单元格内容的水平排列方式。
bgcolor:规定表格单元格的背景颜色。
colspan:指明此单元格可横跨的列数
height:规定表格单元格的高度。
rowspan:指明此单元格可横跨的行数。
valign:规定单元格内容的垂直排列
width:规定表格单元格的宽度。

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

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

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

相关文章

数据结构 - 堆

这篇博客将介绍堆的概念以及堆的实现。 1. 堆的定义&#xff1a; 首先堆的元素按照是完全二叉树的顺序存储的。 且堆中的某个节点总是不大于或不小于其父节点的值。 根节点最大的堆叫做大堆&#xff0c;根节点最小的堆叫小堆。逻辑结构如下图所示&#xff1a; 大堆和小堆的…

Spring揭秘:ApplicationContextAware应用场景及实现原理!

内容概要 ApplicationContextAware接口能够轻松感知并在Spring中获取应用上下文&#xff0c;进而访问容器中的其他Bean和资源&#xff0c;这增强了组件间的解耦&#xff0c;了代码的灵活性和可扩展性&#xff0c;是Spring框架中实现高级功能的关键接口之一。 核心概念 它能用…

腾讯云学生服务器详细介绍_学生服务器价格_学生机申请流程

2024年腾讯云学生服务器优惠活动「云校园」&#xff0c;学生服务器优惠价格&#xff1a;轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年&#xff0c;轻量应用服务器4核8G配置191.1元3个月、352.8元6个月、646.8元一年&#xff0c;CVM云服务器2核4G配置842.4元一年&…

Java开发从入门到精通(一):Java的基础语法高阶

Java大数据开发和安全开发 &#xff08;一)Java的流程控制1.1 分支语句1.1.1 IF分支语句第一种IF语句第二种IF-ELSE语句第三种IF-ELSE IF-ELSE语句if语句使用的几个常见问题 1.1.2 switch分支语句switch分支的执行流程switch分支的导学案例:电子备忘录if、switch的比较&#xf…

关于JavaScript你该知道的(错误)和不知道的(技巧)

关于JS你该知道的(错误)和不知道的(技巧) 你该知道的(容易犯的错误) 忽略异步函数// Incorrect: Ignoring the asynchronous nature of setTimeout console.log("Start"); setTimeout(() => console.log("Timeout"), 0); console.log("End&q…

【实验】学习实验debug,以及经验感悟

记录两次独立解决问题的过程&#xff1a; 目前来看&#xff0c;问题分为几种&#xff1a; 抄代码的时候抄错了&#xff0c;比如dim1写成dim0这种 逻辑错误&#xff0c;如果两份代码没什么差别的话&#xff0c;那么肯定是逻辑错误。 下面的两个问题都是逻辑错误&#xff0c;因为…

【C++精简版回顾】21.迭代器(未完成)

1.什么是迭代器&#xff1f; 用来遍历容器&#xff0c;访问容器数据。 2.迭代器使用 1.初始化 //初始化 list<int> mylist;//list的整数对象 list<int>::iterator iter;//list内部类&#xff0c;迭代器对象(正向输出) list<int>::reverse_iterator riter;//…

Android使用WebView打开网页链接(内嵌H5网页)的两种方式之一

发布Android应用&#xff0c;除了用原生开发外&#xff0c;更多是采用内嵌H5网页的方式来做&#xff0c;便于更新以及多平台使用。 一、第一种方式是直接通过WebView打开外部H5链接。 新建Android工程 直接创建一个工程&#xff0c;点击运行就可以了&#xff0c;打开是个空页…

PaddlePaddle----基于paddlehub的OCR识别

Paddlehub介绍 PaddleHub是一个基于PaddlePaddle深度学习框架开发的预训练模型库和工具集&#xff0c;提供了丰富的功能和模型&#xff0c;包括但不限于以下几种&#xff1a; 1.文本相关功能&#xff1a;包括文本分类、情感分析、文本生成、文本相似度计算等预训练模型和工具。…

基于springboot精品在线试题库系统论文

摘 要 使用旧方法对作业管理信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在作业管理信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的精品在线试题库系…

022—pandas 根据时间段转换为各小时的秒数

前言 本例中&#xff0c;有一些时间段数据&#xff0c;需要将这些时间段里的时间以小时为分组&#xff0c;将24个小时段中每个小时所占用的秒数计算出来。 需求&#xff1a; 以第一条数据为例&#xff0c;它所在两个小时&#xff0c;7点段占用24分钟15秒&#xff0c;8点段54…

【一起学习Arcade】(5):属性规则实例_计算规则

属性规则可改善地理数据库数据集的编辑体验并提高数据完整性。 这些规则均为用户定义的规则&#xff0c;可用于自动填充属性、在编辑操作期间限制无效编辑&#xff0c;以及对现有要素执行质量保证检查。 属性规则分为3类&#xff1a;计算、约束和验证。 这一篇介绍计算规则&…

光谱整形1

华为张德江&#xff1a;下一代光传送网将走向400G80波WDM系统_通信世界网 (cww.net.cn) 张德江指出&#xff0c;400G WDM系统具有三大基本特征&#xff1a;支持400G80波&#xff0c;单纤32T超大容量&#xff0c;传输距离与100G相当&#xff1b;支持32维以上的光交叉&#xff1…

为什么不从独立服务器中转向云或其他方案呢?

传统的专用服务器&#xff0c;如香港服务器租赁、重庆服务器租赁等&#xff0c;是最强大、最稳定的业务托管类型之一。您将获得比任何其他托管计划更多的管理权限和卓越的性能&#xff0c;并且您可以控制整个服务器上的几乎所有内容。 当然&#xff0c;专用服务器也是在线业务…

昏暗场景增强-低照度增强-弱光增强(附代码)

引言 随着现代科技的发展&#xff0c;图像采集设备已经渗透到生活的方方面面&#xff0c;然而在昏暗场景、低照度或弱光条件下&#xff0c;图像的质量往往受到严重影响&#xff0c;表现为亮度不足、对比度低下、色彩失真以及细节丢失等问题。这类图像对于人眼识别和计算机视觉…

大数据冷热分离方案

数据冷热分离方案 1、背景 ​ 随着业务的发展&#xff0c;在线表中的数据会逐渐增加。常规业务都有冷热数据现象明显的特性&#xff08;需要访问的都是近期产生的热数据&#xff1b;时间久远的冷数据出于备份、备案溯源等诉求会进行在线保留&#xff09;。在业务表数据 量可控…

自动化测试之web自动化(Selenium)

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

基础小白快速入门并行计算------>我们为什么要学习并行计算

什么是并行计算&#xff1f; 随着计算机的不断发展&#xff0c;我们处理的数据不断变多&#xff0c;需要更大得到处理能力、我们希望计算机有着更大更强壮的计算能力&#xff0c;由于cpu的运行能力有限&#xff0c;我们便想到了将多个cpu进行串联计算问题&#xff0c;这也就是我…

第五十二回 戴宗二取公孙胜 李逵独劈罗真人-飞桨AI框架安装和使用示例

吴用说只有公孙胜可以破法术&#xff0c;于是宋江请戴宗和李逵去蓟州。两人听说公孙胜的师傅罗真人在九宫县二仙山讲经&#xff0c;于是到了二仙山&#xff0c;并在山下找到了公孙胜的家。 两人请公孙胜去帮助打高唐州&#xff0c;公孙胜说听师傅的。罗真人说出家人不管闲事&a…

接口测试,后端接口还没开发完,如何测?解决看这一篇就够了......

前言 在测试的时候经常会碰到后端开发工程师的接口还没有开发完成&#xff0c;但是测试任务已经分配过来。没有接口怎么测试呢&#xff1f; 测试人员可以通过 mock server 自己去造一个接口来访问。mock server 可用于模拟真实的接口。收到请求时&#xff0c;它会根据配置返回…