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

html标签表示!

  1. html是什么?

HTML全称为超文本标记语言,是一种标记语言。包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。

2.学习html可以做什么?

html作用是将网页使用代码实现,并且将网页的各个部分添加模块,需要的时候给模块添加颜色和大小等操作。

  html是一种静态网页,很多网站都是动静结合的,当然html是网页的基础知识,学习前端一定要先学习html,把html基本知识学扎实,然后就可以写出各种静态网页,再去学习动态网页。

html基础内容

  1. 标签之间的关系?

标签之间的关系分为两种:

父子关系(嵌套关系):<head> 与<title>等

兄弟关系(并列关系):同级关系 <head> 与<body>

标签分为单标签和双标签

  1. 标题标签

标题标签从h1-h6 逐渐减小

标签的特点:

文字都有粗体

文字独占一行

文字都有变大,从h1-h6逐渐减小

  1. 其他标签

换行标签:br 解释:单标签 让文字或者图片强制换行

水平线标签:hr 解释:加上水平线 会随着网页的大小随之变化

  1. 文本标签

段落标签:p

文本标签:text

标签格式的介绍:

标签

说明

b/strong(强调语义)

加粗

u/ins

下划线

i/em

倾斜

s/del

删除线

  1. 图片标签

使用场景:在网页中显示图片 单标签

代码:<img src=" 图片的路径 " alt=" ">

src=“ ”标签属性 属性名=“属性值”

alt替换文本

当图片没有显示出来就,才会加载的alt文本

当图片加载处理啊,不会显示,会自动被图片遮盖

title 提示文本

当鼠标悬停的时候,才会显示文本;title不仅可以在图片中使用,也可以在其他标签中使用

width和height属性

图片的宽高

如果知识设置了其中一个属性 另一个属性会自动等比例缩放(图片不会)

如果同时设置了两个属性,若设置不当会造成图片变形

属性注意点:

  1. 标签属性写在开始标签中

  1. 标签上可以同时存在多个属性

  1. 属性之间空格隔开

  1. 标签与属性之间必须使用空格隔开

  1. 属性之间没有顺序

  1. 音频视频标签

场景:在页面中插入音频或者视频

音频标签

代码:<audio src="/音频的路径" controls></audio>

常见的属性:

src 音频的路径

controls 显示播放的控件

autoplay 自动播放(部分浏览器不支持)

loop 循环播放

音频只支持:map3,wav,ogg格式

视频标签

代码:<audio src="/音频的路径" controls></audio>

常见的属性:

src 音频的路径

controls 显示播放的控件

autoplay 自动播放(谷歌浏览器需要配合muted实现静音效果)

loop 循环播放

视频支持:MP4,webm,ogg格式

  1. 路径

绝对路径:目录下的绝对路径位置,可以直接达到目标位置,通常从盘符开始的路径

相对路径:从当前文件开始寻找目标文件的过程

相对路径的分类:

  • 同级目录

  • 下级目录

  • 上级目录

./”:表示当前的文件所在的目录。

“../”:表示当前的文件所在的上一层的目录。

“/”:表示当前的文件所在的根目录。

方法一:<img src="目标图片.gif>

方法二:<img src="./目标图片.gif>

图片的格式:常用的是.jpg或.jpeg gif是动图的格式

  1. 链接标签

场景:点击事件后跳转到另一个页面

a标签 ,超链接

代码:<a href="./跳转的页面.html">文本描述</a>

双标签,内部可以包裹使用,点击跳转指定的页面,需要设置a标签的href属性

target属性名:属性值(目标网页的打开形式)

属性值:

_self:默认值,在当前窗口中跳转(覆盖当前页面)

_blank:在新窗口中跳转(保留原来的页面)

例句:<a href="https://www.baidu.com/" target="_blank">百度</a>

  1. 列表标签

种类:无序列表,有序列表,自定义列表

特点:按照行的方式,整齐显示内容

无序列表:

场景:在网页中表示一组无顺序之分的列表,如:新闻列表

标签组成:

标签名

说明

ul

表示无序列表的整体,用于包裹li标签

li

表示无序列表的每一项,包含每一行的内容

显示特点

列表的每一项前默认显示的圆点标识

特点

ul标签中只允许包括li标签

li标签可以包含任意标签

有序列表:

在网页中表示一组由顺序之分的列表

标签组成:

标签名

说明

ol

表示有序列表的整体,用于包裹li标签

li

表示有序列表的每一项,包含每一行的内容

显示特点

列表中的每一项前默认显示序号标识

特点

ol标签中只允许包括li标签

li标签可以包含任意标签

自定义标签

场景:在网页的底部导航中通常会使用自定义列表实现

标签组成:

标签名

说明

dl

表示自定义列表的整体,用于包裹dt/dd标签

dt

表示自定义列表的主题

dd

表示自定义的针对主题的每一项内容

特点

dd前会默认显示缩进效果

注意

dl标签中只允许包括dt/dd标签

dt/dd标签可以包含任意内容

  1. 表格标签

表格标题和表头单元格标签

场景:在表格中表示整体大标题和一列小标题

其他标签:

标签名

名称

说明

caption

表格大标题

表示表格整体大标题,默认在表格整体顶部居中位置显示

th

表格单元格

表示一列小标题,通常用于表格第一行,默认文字加粗并居中显示

caption标签写在table标签内部

th标签书写tr标签内部(用于替换td标签)

http://www.lryc.cn/news/36337.html

相关文章:

  • 前端优化,webpack打包删除无用文件,并附上批量删除文件脚本!非常好用
  • SpringCloud之 LoadBalancer负载均衡
  • idm如何下载种子文件和磁力链接 idm如何下载torrent
  • UE4 安卓AR 识别图片
  • 数字化服务环境下高校成人教育图书馆服务工作的发展方向
  • 以创作之名致敬女性开发者
  • 【ArcGIS学习记录03】--利用DEM数据提取河网溪流--加入大型河流数据及裁剪美化
  • VOC2012数据集取需要的几个类别
  • 主成分分析(PCA)原理
  • Git:合并一个仓库的某个分支到另一个仓库的某个分支
  • 工作记录:bi重构
  • java明文数据加密、脱敏方法总结
  • 4N65-ASEMI高压MOS管4N65
  • 天梯赛训练L1-018 (大笨钟)
  • GCC编译器编译C/C++程序(一步完成、分步完成)
  • Java8中那些方便又实用的Map函数
  • 如何修复dxgi.dll文件错误?修复方法推荐
  • 数字化时代,你应该知道的BI
  • 前端jQuery ajax请求,后端node.js使用cors跨域
  • 【最重要的 G 代码命令列表】
  • 好用的公共DNS地址共享
  • C#:Krypton控件使用方法详解(第十三讲) ——kryptonDomainUpDown
  • Git设置SSH Key
  • WireShark如何抓包,各种协议(HTTP、ARP、ICMP)的过滤或分析,用WireShark实现TCP三次握手和四次挥手
  • 熬夜30天吃透这九大Java核心专题,我收割了3个大厂offer
  • DMHS搭建DMDSC 2节点集群同步到单库
  • 一条sql执行很慢可能的原因,如何优化
  • 【设计模式】适配器模式和桥接模式
  • 被隐藏的过程——预处理
  • strace 用法介绍