html标签表示!
html是什么?
HTML全称为超文本标记语言,是一种标记语言。包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
2.学习html可以做什么?
html作用是将网页使用代码实现,并且将网页的各个部分添加模块,需要的时候给模块添加颜色和大小等操作。
html是一种静态网页,很多网站都是动静结合的,当然html是网页的基础知识,学习前端一定要先学习html,把html基本知识学扎实,然后就可以写出各种静态网页,再去学习动态网页。
html基础内容
标签之间的关系?
标签之间的关系分为两种:
父子关系(嵌套关系):<head> 与<title>等
兄弟关系(并列关系):同级关系 <head> 与<body>
标签分为单标签和双标签
标题标签
标题标签从h1-h6 逐渐减小
标签的特点:
文字都有粗体
文字独占一行
文字都有变大,从h1-h6逐渐减小
其他标签
换行标签:br 解释:单标签 让文字或者图片强制换行
水平线标签:hr 解释:加上水平线 会随着网页的大小随之变化
文本标签
段落标签:p
文本标签:text
标签格式的介绍:
标签 | 说明 |
b/strong(强调语义) | 加粗 |
u/ins | 下划线 |
i/em | 倾斜 |
s/del | 删除线 |
图片标签
使用场景:在网页中显示图片 单标签
代码:<img src=" 图片的路径 " alt=" ">
src=“ ”标签属性 属性名=“属性值”
alt替换文本
当图片没有显示出来就,才会加载的alt文本
当图片加载处理啊,不会显示,会自动被图片遮盖
title 提示文本
当鼠标悬停的时候,才会显示文本;title不仅可以在图片中使用,也可以在其他标签中使用
width和height属性
图片的宽高
如果知识设置了其中一个属性 另一个属性会自动等比例缩放(图片不会)
如果同时设置了两个属性,若设置不当会造成图片变形
属性注意点:
标签属性写在开始标签中
标签上可以同时存在多个属性
属性之间空格隔开
标签与属性之间必须使用空格隔开
属性之间没有顺序
音频视频标签
场景:在页面中插入音频或者视频
音频标签
代码:<audio src="/音频的路径" controls></audio>
常见的属性:
src 音频的路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放
音频只支持:map3,wav,ogg格式
视频标签
代码:<audio src="/音频的路径" controls></audio>
常见的属性:
src 音频的路径
controls 显示播放的控件
autoplay 自动播放(谷歌浏览器需要配合muted实现静音效果)
loop 循环播放
视频支持:MP4,webm,ogg格式
路径
绝对路径:目录下的绝对路径位置,可以直接达到目标位置,通常从盘符开始的路径
相对路径:从当前文件开始寻找目标文件的过程
相对路径的分类:
同级目录
下级目录
上级目录
./”:表示当前的文件所在的目录。
“../”:表示当前的文件所在的上一层的目录。
“/”:表示当前的文件所在的根目录。
方法一:<img src="目标图片.gif>
方法二:<img src="./目标图片.gif>
图片的格式:常用的是.jpg或.jpeg gif是动图的格式
链接标签
场景:点击事件后跳转到另一个页面
a标签 ,超链接
代码:<a href="./跳转的页面.html">文本描述</a>
双标签,内部可以包裹使用,点击跳转指定的页面,需要设置a标签的href属性
target属性名:属性值(目标网页的打开形式)
属性值:
_self:默认值,在当前窗口中跳转(覆盖当前页面)
_blank:在新窗口中跳转(保留原来的页面)
例句:<a href="https://www.baidu.com/" target="_blank">百度</a>
列表标签
种类:无序列表,有序列表,自定义列表
特点:按照行的方式,整齐显示内容
无序列表:
场景:在网页中表示一组无顺序之分的列表,如:新闻列表
标签组成:
标签名 | 说明 |
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,包含每一行的内容 |
显示特点 | 列表的每一项前默认显示的圆点标识 |
特点 | ul标签中只允许包括li标签 li标签可以包含任意标签 |
有序列表:
在网页中表示一组由顺序之分的列表
标签组成:
标签名 | 说明 |
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序列表的每一项,包含每一行的内容 |
显示特点 | 列表中的每一项前默认显示序号标识 |
特点 | ol标签中只允许包括li标签 li标签可以包含任意标签 |
自定义标签
场景:在网页的底部导航中通常会使用自定义列表实现
标签组成:
标签名 | 说明 |
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义的针对主题的每一项内容 |
特点 | dd前会默认显示缩进效果 |
注意 | dl标签中只允许包括dt/dd标签 dt/dd标签可以包含任意内容 |
表格标签
表格标题和表头单元格标签
场景:在表格中表示整体大标题和一列小标题
其他标签:
标签名 | 名称 | 说明 |
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表格单元格 | 表示一列小标题,通常用于表格第一行,默认文字加粗并居中显示 |
caption标签写在table标签内部
th标签书写tr标签内部(用于替换td标签)