html-秋风落叶

HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器

标签：body

说明：用来定义HTML网页文档的主体区域

标签：meta

说明：用来描述HTML网页文档的属性

标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码

注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

head标签

title标签

双标签，定义网页的标题

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

meta标签

是单标签，用来描述HTML网页文档的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

http-equiv属性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>

link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>

base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

body

文本标签H

标题标签

是双标签，h是header的缩写

<h1>h1标签：一级标题</h1>
<h2>h2标签：二级标题</h2>
<h3>h3标签：三级标题</h3>
<h4>h4标签：四级标题</h4>
<h5>h5标签：五级标题</h5>
<h6>h6标签：六级标题</h6>

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题

5、<h1>在一个页面最多只能有一个，不要用多个

段落标签P

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

特点：

1、独占一行

2、段落与段落之间，存在间隙

换行标签

是单标签，br是break的缩写

<p>这是一段<br>文字</p>

特点：

1、强制换行

2、单标签

水平线标签

特点：

1、在页面中显示一条水平线

2、单标签

文本格式化标签

<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

上标标签

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

下标标签

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

媒体标签

图片标签

<img src="./001.jpg" >

img标签常见属性：

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要’px’

<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">

音频标签

<audio src="music.mp3" controls autoplay loop></audio>

audio标签常见属性：

支持mp3、wav、ogg三种音频格式

视频标签

<video src="video.mp4" controls loop autoplay></video>

超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

<a href="链接地址">文本或图片</a>

站外跳转，采用绝对路径

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

站内跳转，采用相对路径

<!-- a页面 -->
<a href="b.html">跳去b页面</a>


<!-- b页面 -->
<p>b页面</p>

页面内跳转

<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>

列表标签

无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

有序列表

文字颜色

文字颜色
<p  style="color:#C0C0C0">工作</p>
背景颜色
<p style="background-color:#C0C0C0">工作</p>

滚动字体

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文字滚动条示例</title>
</head>
<body>
    <marquee direction="left" scrollamount="5" behavior="scroll" loop="infinite">
        这是一段需要滚动的文字。
    </marquee>
</body>
</html>

代码解释：

<marquee>标签：用于创建滚动文字效果。

direction="left"：设置文字从右向左滚动。其他可选值包括up（向上）、down（向下）、right（向右）。

scrollamount="5"：设置文字滚动的速度，数值越大，滚动速度越快。

behavior="scroll"：设置滚动方式，scroll表示循环滚动，alternate表示来回滚动，slide表示只滚动一次。

loop="infinite"：设置滚动的次数，infinite表示无限循环。

其他属性：

width和height：可以设置滚动区域的宽度和高度。

bgcolor：设置滚动区域的背景颜色。

hspace和vspace：设置滚动区域的水平和垂直间距。

通过这些属性，你可以根据需要自定义文字滚动的效果。

空格符号

  半角的不断行的空白格（推荐使用）
&ensp; 半角的空格
&emsp; 全角的空格

详细的含义：

 ：这是我们使用最多的空格，也就是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏，在两端对齐布局中又是不可少的元素。

&ensp;：此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

&emsp; ：此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

内容来源：https://www.toutiao.com/article/7222937027686318631/?log_from=8a01f4e62fd61_1684135581581

音乐播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
	<!-- 
	autoplay：布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。
	controls：如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
	loop：布尔属性；如果声明该属性，将循环播放音频。
	src：嵌入的音频的URL。你可以在 audio 元素中使用 <source> 元素来替代该属性指定嵌入的音频。
	muted：表示是否静音的布尔值。默认值为 false，表示有声音。
	目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg
	-->
    <audio controls loop>
	<source src="https://wangjian.run/wp-content/uploads/2023/03/1679640798-guyongzhe.mp3" type="audio/mp3">
	<source src="https://wangjian.run/wp-content/uploads/2023/03/1679640798-guyongzhe.mp3" type="audio/mp3">
	您的浏览器不支持音频元素。
	</audio>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END