HTML那些可爱的“表情包”

news/2024/10/31 2:20:35/

今天和大家一起来分享一下新学的HTML标签,有人会问那什么是HTML呢?HyperText MarkupLanguage,是不是觉得太高大上了。它是超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

 

 大家平常在各个浏览器所看到的网站就是通过这些最基础的html标签组成的,但是很多人说这些标签太多太杂不好记,接下来我会以可爱的方式让大家记住这些”表情包”。

 

说明:

1>HTML标记符不区分大小写,表达的意思都是一样的。

 

一.HTML基本结构

<html>

  <head>

     <title>页面的标题</title>

  <head>

  <body>

网页的正文{各种标签}

      </body>

</html>

 

不知道聪明的人发现了问题没有,他们都是成对出现的,大家可以这样记,成对出现的标签就好像是一对情侣,男生在前面也就是主管外面,而女生就是后面的那一个标签和他同对出现,只不过她主管内。相比男生会多一个</..>,但是他们原本是一对啊,大家可以这样记。这是我自己觉得的,你把他们放在一起在看一看,这和我说的可爱的表情包像不像,下面的也是这样。先让大家体会一下,发挥一下想象力。

<html>…</html>   <head>…</head>  <body>…</body>  <title>…</title>

哈哈,有没有觉得他们很可爱,看他们都对你笑呢。不闹了,接下来就整理一下那些可爱的表情包都属于哪个家族,以及专属于它们的name.

 

二、HTML标签之BASIC家族

  <html>…</html>——他的名字是定义html文档 <head>…</head>——他的名字是标记文档的信息

  <body>...</body>——他的名字是显示可见的页面内容    <title>…</title>——他的名字是书写页面的标题

  <style>…</style>——他的名字是百变文档样式信息        <!--…-->这个最可爱了,他只是注释所以有点不开心

 

三、HTML标签之文本(text)家族

<h1>...</h1>这个是标题字大小(h1~h6),用来显示字的大小,他有六个兄弟你懂的

<center>…</center>看名字就知道这孩儿有强迫症,非要把文本内容居中,哈哈。

 

格式小家族(像警察一样,规范着国家的文本格式)

<b>…</b>他的力气很大,能把字体变粗。

<i>…</i>今天他没睡醒,走路都是歪的,看把字都弄成斜体。 

<u>…</u>他很细心,在文字的下面画了一条线。

 

<strike>...</strike>or<del>...</del>她是警察,让那些不规范的文字消失,是删除线。

 

<strong>…</strong>她是老师,不同样的方法加粗字体用于强调

 

<sub>...</sub>淘气下标

 

<sup>...</sup>淘气上标

 

<ul>…</ul>任性的萌妹纸,表示一个无序列表 


<ol>…</ol>
蠢蠢的书呆子,表示一个有序列表


<li>…</li> 
爱哭的人,表示一个列表项目


<a href=”…”>…</a> 
这个厉害了,我的哥,他是超人表示 超链接.

 

<span>..</sapan>她是班长,用来组合行内元素,span 的前后不会换行.

 

<font>..</font>他是一个魔法师,可以定义文本字体尺寸、颜色、大小.

 

<br/>他是孤独的行者,表示换行。 

 

<palign="center/left/right">…</p>表示段落

 

<div>..</div>他是一个律师,表示块级元素,div 的前后会换行。

 

四、HTML标签之picture家族

 

一个爱美丽的人

<imgsrc="url" width="宽度值"  height="高度值"alt="说明">用来定义图像,变幻出各种图片。

 

五HTML标签之table家族

 

<table>…</table> 他是一个主管,用来定义表格


<th>…</th> 
他是愿意冲锋的小伙子,用来定义表头行单元格


<tr>…</tr> 
他有点内敛,用来定义表格中的行one、two、three


<td>…</td> 
他是学习委员,用来定义表格中数据行单元

 

<ul>

   <li>苹果</li>

   <li>香蕉</li>

   <li>柠檬</li>

   <li>桔子</li>

</ul> 他们是多胞胎,显示的是他们一个种类,用来定义一个同类的列表以水果为例

 

六.HTML标签之special家族

特殊符号       说明

 &nbsp;       空格

  &quot;          "

  &lt;               <

&gt;           >    

  &amp;          &

 分割线:<hr>

 

<form>…</form>    定义供用户输入的 HTML 表单
<frame>                 
定义框架集的窗口或框架

 

 

好了,这就是发挥我的想象力来给他们起的名字,其实有时候换一种角度就可以让它变得很有趣,HTML那些可爱的表情包,大家一定舍不得忘记他们。当然这是他们的表面,以后跟我一起了解他们的内在吧也就是属性咯。

   

 


http://www.ppmy.cn/news/595577.html

相关文章

CSDN 博文写作小技巧 (标题超链接、跳转指定博客的指定位置、图片居中、动图制作、可爱文字、定时博客发布、快速博客写作)

CSDN 博文写作小技巧 (标题超链接、跳转指定博客的指定位置、图片居中、动图制作、可爱文字、定时博客发布、快速博客写作) &#x1f916; 作者简介&#xff1a;努力的clz &#xff0c;一个努力编程的菜鸟 &#x1f423;&#x1f424;&#x1f425; &#x1f440; 文章专栏&a…

6 中断概览

目录 中断概览 STM32异常和中断介绍 STM32的异常一览 STM32的中断表一览 中断的优先级 中断的优先级分组 优先级分组 嵌套向量中断控制器(NVIC)功能 中断概览 什么是中断&#xff1f; 中断是指计算机运行过程中&#xff0c;出现某些意外情况需主机干预时&#xff0c;机器…

idea打的包字符集为GBK

1.最近对接一个打印机厂家的机器&#xff0c;他们对与打印数据要求字符集是UTF-8的&#xff0c;做完程序在自己idea上运行是是能够打印的&#xff0c;但是打包后&#xff0c;就不能够打印了。然后问了设备方是否是他们机器的原因&#xff0c;后面他们问了我这报错码&#xff0c…

项目bug--汇集

1、 2、 原因&#xff1a;页面选择后 没有调init方法 刷新页面 解决&#xff1a;在保存方法最后 &#xff0c;加上init方法 3、 原因&#xff1a;select中 v-model绑定的id、select选项中 :value 绑定的id &#xff0c;和编辑时触发的方法里 的id 没有一致&#xff0c;可能的…

关于DMS批量导入的注意事项

前言 当你注意了列命和数据库对应关系&#xff0c;批量后报错&#xff0c;常见的是无列名都好找问题&#xff0c;说一条不好找的 SQL解析失败:解析文件失败::读取字段定义异常&#xff0c;字段定义存在非法的空字段&#xff0c;请检查提交的Excel文件首行中的字段定义1、列名…

Docker安装ES

记录一下docker安装ES 查看max_map_count的值。 cat /proc/sys/vm/max_map_count我的是65530&#xff0c;需要将它改为262144 sysctl -w vm.max_map_count262144这里安装7.7.0版本拉取镜像 docker pull elasticsearch:7.7.0创建挂载地址 mkdir -p /opt/myDocker/es/config…

固态硬盘要长命绝招:千万别点磁盘碎片!

现如今&#xff0c;固态硬盘行业因闪存颗粒的原料供应问题&#xff0c;陷入了涨价风波&#xff0c;甚至在第三方市场研究机构Gartner发布的最新报告中显示&#xff0c;固态硬盘行业的涨价风波将会一直持续到今年年末。 正所谓&#xff0c;开源节流&#xff0c;在当下固态硬盘行…

记录一下,基于jsoup的爬虫(入门级)

最近爬虫比较火,空闲之余学习一下,第一个爬虫实验. 爬取影驰世界杯主题里面的影驰币排行榜. 原始网页如下 主要用到两个包:jsoup(用于解析html)和fast-json(用于解析json数据) <!-- HTML解析工具 jsoup begin --><dependency><groupId>org.jsoup</grou…