前端基础（html简介）

最新推荐文章于 2025-02-05 11:18:37 发布

渡柒玖

最新推荐文章于 2025-02-05 11:18:37 发布

阅读量68

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_65287312/article/details/132028080

版权

HTML简介

HTML5 文档简介

HTML5 文档简介

HTML是一种超文本标记语言"超文本”就是指页面内可以包含图片,链接甚至音乐程序等非文字的元素
HTML不是一种编程语言HTML5是最新版本

HTML的基本格式

!DOCRYPE htm1>
<html>
	<head>
	
	</head>
	<body>
	
	</body>
</htmI>

基本标签

加粗:
倾斜：
删除线:
下划线:
上标:
缩写：
标记：
文本：
标题： h1-h6; 从小到大的标题标签
换行

段落标签

常用标签

路径

相对路径: 相对于某一个文件进行引入的,那么就相当于是兄弟关系如果是在文件的内部引入中那么就是子文件绝对路径:就是从盘符开始，是文件的真正的一个所在位置Window 对斜线进行了处理，所以/和\都能够引入成功，但是网络地址只能写斜线

链接标签

< a href =“url” >
属性:
href 地址
target 目标位置

target 属性值:

blank:新窗口打开
new: 新窗口打开
top:顶级窗口打开
作用
链接 <a href="“http://www.baidu. com”>百度一下
打开内部文件
test1 文件
打开一张图片
打开一张图片
书写简单的 javascript
提示框

<a id =top></a>
<a href="https://www.baidu.com/?tn=15007414_8_dg">百度</a><br>
<a href="./222.mp4"   heigh="1680"width="1920">这里有个小姐姐</a><br>
<a href="#top">回到顶部</a> <br>

滚动标签

滚动字幕属性:
direction: 方向 (left、right)
behavior: 滚动方式(scroll、slide、 alternate)scrollamount: 速度，值是正数默认为 6
scrolldelay: 时间，值是正数默认为 0。单位毫秒
οnmοuseοver=“stop()”:鼠标悬浮停止移动οnmοuseοut=“start()”:鼠标离开开始移动

水平线

属性:
width:长度(pxl%)
align:水平位置(left 左|center 中|right 右)、color: 线的颜色
size 粗细

html多媒体的运用

我们可以使用和标签来显示视频和音频
多媒体格式
格式多媒体元素(比如视频和音频) 存储于媒体文件中。确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过·gif 或 .jpg 来识别。
多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

音频 audio

<span>歌曲/视频</span><br>
    <audio src="./王忻辰、苏星婕 - 去年花开.mp3" controls="controls"></audio><br>

视频 video

  <span>歌曲/视频</span><br>
  <video src="./222.mp4"  width="600" height="800"  controls="controls"></video>

分类

内联样式
display 决定了标签的块级或行级特点
块级标签：display:inline; 会自动换行，设置宽高 p div h1-h6
行级标签：display:block; 不会自动换行 ,不能设置宽高，他的宽高是自身大小 span b i mark
行内块标签： display:inline-block; 不会自动换行，可以设置宽高 img video