HTML5中常见的列表标签包括,介绍几个常用的HTML5标签

一、Html的基本结构:

网页的文本、图片等信息;

二、Head部分:用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有:

1、title标签:浏览器标签页显示的标题

2、meta标签:其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:

常见的字符集编码格式:

a.GB-2312:国标码,简体中文

b.GBK:扩展的国标码

c.UTF-8:万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)

③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。

3、link标签:链接网页图标(title前的小logo),其常用属性有:

①rel属性:声明链接文件的类型,此处选icon

②type属性:可以省略

③href属性:表示图片的路径地址

三、body部分:网页的文本、图片等信息

标签的分类:

块级标签:显示为块,前后隔一行(自动换行)

行级标签:按行从左往右逐一显示。

1、 常见的块级标签:

......
:标题标签,自动加粗,h1最大,h6最小。


:水平线标签,添加一条水平线。


:换行标签,

:引用标签,cite属性,表明引用的来源,一般引用网址

浏览器默认首行缩进。

:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示:

2、 基于布局的块级标签

列表:无序列表、有序列表、定义列表

①有序列表:

列表项:

②无序列表:

③定义列表(实现图文混排):

列表标题:

一般只有一项

列表描述项:

可以有很多项

3、组合标签:

用于显示图片及图片标题

他有两个子标签:图片

图片的标题

例如:

探险家

探险家 伊泽瑞尔

4、分区标签:

5、常见的行级标签

<1>span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:

这是span中的文字

img(图片):其常用属性:①src:表示引用图片的地址。

路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址

a、与文件处于同一层的图片,直接写图片名

b、图片在当前文件下一层:文件名/图片名

c、图片在当前文件上一层:../图片名

绝对路径:file:///盘符:/文件夹/图片名,但 是严禁使用

图片网址:网络上的图片链接,但是一般不用

②height和width:图片的高度和宽度。可以用CSS样式代替

③title:图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候,显示的文字

<2>em(倾斜强调)

<3>strong(加粗强调)

<4>b(加粗)

<5>i(倾斜)

Strong、em、b、i的区别

1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高

2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。

<6>q(短引用)

<7>small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限

<8>a(超链接)

1、href:超链接的路径,可以是网络链接,也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面,_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:

rel="prev"被链接文档是当前文档的前一篇文 档,

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev(当前是被链接的前/后一篇)

锚链接:

①本页面锚链接:a、设置锚点:

b、跳转锚点:#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点:页面地址.html#name名

页面间锚链接

功能性链接: mailto用于给指定邮箱发送邮件

file:///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220 给指定QQ发送息

<9>s标签,有误文本:删除线

这是S标签中的文字

<10>cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用

这是cite中的文本

<11>code:计算机代码,不保留代码格式

<12>bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左

1234567

kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体

请输入“Esc”推迟系统

<13>sup:上标文本,sub:下标文本

x6

© © 空格

© © 空格  

<14>u:下划线

这是下划线

mark:高亮或标记文本,浏览器显示为黄色背景

mark

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

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

相关文章

正弦波 程序 角度传感器_激光位移传感器的原理及应用领域

激光位移传感器是利用激光技术进行测量的传感器&#xff0c;由激光器、激光检测器和测量电路组成。作为新型测量设备&#xff0c;激光位移传感器能够精确非接触测量被测物体的位置、位移等变化&#xff0c;还可测量位移、厚度、振动、距离、直径等精密的几何测量。目前&#xf…

Dapr牵手.NET学习笔记:状态管理之docker-compose发布

Dapr牵手.NET学习笔记&#xff1a;想入非非的服务调用Dapr牵手.NET学习笔记&#xff1a;跨物理机负载均衡服务调用Dapr牵手.NET学习笔记&#xff1a;用docker-compose部署服务说明&#xff1a;为了给出demo的全貌&#xff0c;这篇有点长&#xff0c;如果有上一篇的基础&#xf…

linux tomcat 启动权限不足解决办法

2019独角兽企业重金招聘Python工程师标准>>> 用命令 chmod 755 文件名 即可 转载于:https://my.oschina.net/pioneeer/blog/10374

她在哭,但我没资格安慰她......​

1 我没资格安慰她......▼2 妈妈的关心总是突如其来▼3 突然就热得离谱了▼4 当贾玲和沈腾开始演起韩剧▼5 有些菜一旦错过就不在▼6 这要不是德高望重的长老还真带不了这样的帽子▼7 连狗都比你会放风筝▼你点的每个赞&#xff0c;我都认真当成了喜欢

指定的文件不是虚拟磁盘 没有快照_vmware workstaiton 15 虚拟机克隆(4)

安装客户机操作系统和应用程序可能要耗费很多时间。通过使用克隆&#xff0c;您可以通过一次安装及配置过程制作很多虚拟机副本。克隆虚拟机比复制虚拟机更简单、更快速。当您需要将多个相同的虚拟机部署到一个组时&#xff0c;克隆功能会非常有用。例如&#xff0c;MIS 部门可…

源码免杀处理的技巧与tips

2019独角兽企业重金招聘Python工程师标准>>> 首先,要了解编译中MAP的利用: 第一步设置VC编译环境生成Map文件。在 VC 中&#xff0c;点击菜单“Project -> Settings”选项页&#xff08;或按下 AltF7&#xff09;&#xff0c;选择 C/C 选项卡&#xff0c;并在…

广东计算机专业软件排名前十大学,2017年全国计算机专业大学排名一览表

2017年全国计算机专业大学排名一览表计算机科学是一门包含各种各样与计算和信息处理相关主题的系统学科&#xff0c;从抽象的.算法分析、形式化语法等等&#xff0c;到更具体的主题如编程语言、程序设计、软件和硬件等。下面是小编收集的全国计算机专业大学排名一览表&#xff…

C# 通过正则表达式来限制控件输入有效性

&#xff0c;界面上允许用户输入的控件&#xff0c;大多是有一定限定的&#xff0c;比如电话号码&#xff0c;只允许11的数字&#xff0c;比如一些算法参数有取值范围限定&#xff0c;比如只允许[1,255]等&#xff0c;这种情况如果等用户输入运行后再在后台验证数据的有效性&am…

C# Winform编程之Button

参考了这篇文章&#xff1a; http://www.cnblogs.com/qianlifeng/archive/2010/04/13/1710869.html 我的代码&#xff1a; JButton.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Data; using System.…

电热水器和插座之间的相亲故事

2019独角兽企业重金招聘Python工程师标准>>> 回到武汉&#xff0c;租房&#xff0c;然后发现原来的热水器不出水。让房产公司派师傅过来修理&#xff0c;终究还是放弃治疗了。不久&#xff0c;安装了一个新的电热水器。 我喜出望外&#xff0c;等了两个周&#xff0…

mysql in优化_MySQL 探秘: 1 整体架构

新开坑&#xff0c;计划做一系列专辑。由于 MySQL 源码太庞大&#xff0c;不可能面面俱到&#xff0c;先从丁奇《MySQL 实战 45 讲》[1] 案例开始入手&#xff0c;case by case 来做分享。同时强烈推荐丁奇的课&#xff0c;真的是受益匪浅&#xff0c;感谢感谢~~最新版本己经是…

清华姚班/智班2020级新生来了!中国奥数新晋“一姐”在列,湖南、湖北人数最多...

全世界只有3.14 % 的人关注了爆炸吧知识乾明 金磊 发自 凹非寺量子位 报道 | 公众号 QbitAI清华姚班/智班&#xff0c;又双叒叕纳一批英才。根据教育部公示的保送生拟录取名单的信息&#xff0c;清华大学姚班/智班2020年已拟定录取31名应届生&#xff0c;他们都是来自各省的顶级…

成长 | 《大厂晋升指南》学习总结(下)

【学习总结】| Edison Zhou上一篇总结了面评技巧和学习方法部分&#xff0c;本篇总结做事方法和转向提升部分。温馨提示&#xff1a;文中的贴图均来自极客时间《大厂晋升指南》课程。1做事方法概要关于做事能力&#xff0c;有三条业界达成共识的判断标准&#xff0c;分别是闭环…

在SD/MMC卡中可读写的FAT文件系统

2019独角兽企业重金招聘Python工程师标准>>> FAT文件系统 关于eLua中FAT文件系统的实现是使用了来自Elm Chan的一个很好的FatFS文件包。它可以在读写模式中处理FAT12,FAT16和FAT32文件系统。而且它打包了很多功能通过封装的形式。跟ROM文件系统一样它也与C库集成在一…

hql取满足条件最新一条记录_MySql 之一条查询sql的执行过程

每当我把一条查询sql语句写完了&#xff0c;并且执行完得到想要的结果。这时我就在想为什么我写这样的一条sql语句&#xff0c;就能给我查询出我想要的结果&#xff0c;为什么我写了update就能更新一条语句&#xff1f;它们的执行过程是什么样的&#xff1f;它们的原理是什么&a…

高糊马赛克秒变高清,表情帝:这还是我吗?

全世界有3.14 % 的人已经关注了爆炸吧知识来源&#xff1a;机器之心参与&#xff1a;魔王、杜伟有了这个工具&#xff0c;我们终于能够看到马赛克下的那张脸了。给出一张高糊人脸照片&#xff0c;你能用它做什么&#xff1f;杜克大学近期的一项研究可以将高糊人脸照片转换成清晰…

diy计算机组装注意事项,自己组装电脑要注意什么?DIY老司机教你装机注意事项...

相比品牌机&#xff0c;组装电脑的优势在于个性化的DIY硬件定制&#xff0c;让玩家可以自由选择适合自己的配置&#xff0c;可以说可玩度非常高。如今&#xff0c;电脑硬件设计已经十分人性化&#xff0c;网上还有很多直播教程&#xff0c;用视频的方式直观地教大家装机&#x…

Dapr + .NET Core实战(三)状态管理

状态管理解决了什么分布式应用程序中的状态可能很有挑战性。例如&#xff1a;应用程序可能需要不同类型的数据存储。访问和更新数据可能需要不同的一致性级别。多个用户可以同时更新数据&#xff0c;这需要解决冲突。服务必须重试 与数据存储交互 时发生的任何短期暂时性错误。…

Building JavaScript Games for Phones Tablets and Desktop(3)-创造一个游戏世界

2019独角兽企业重金招聘Python工程师标准>>> 创造一个游戏世界 这章教会你如何通过内存中储存的信息创造一个游戏世界。介绍了基本类型和变量并且这些变量是如何储存和改变信息的。接下来&#xff0c;你会看到如何用对象储存更复杂的信息&#xff0c;里面包含成员变…

我女朋友让我删前任,我明明删了她还是要分手...

1 人家都已经删了你还有什么不满意&#xff1f;&#xff1f;&#xff1f;▼2 高跟鞋翻车现场▼3 渣男总能渣出新花样▼4 现在的小朋友懂得也太多了吧&#xff01;▼5 耍帅不可怕&#xff0c;谁失败谁尴尬▼6 朋友&#xff0c;你清醒一点&#xff01;那个小手是鼠标&#…