前端基础-HTML-CSDN博客

本文链接：https://blog.csdn.net/qq_46687420/article/details/124980279

文章目录

一、HTML基础知识

一、HTML基础知识

1.html基础概念

网页是由哪些元素组成的？网页由结构（html）样式（css）行为（js）构成。我们写的代码文件用浏览器内核（渲染引擎）渲染转换为网页。但是，由于浏览器的种类不同，渲染引擎的不同，相同的代码经过渲染引擎渲染后网页会有所改变，因此world wide web consortium(万维网联盟/协会)制定了w3c标准，让不同浏览器按照相同的标准显示结果，使展示效果统一。

五大浏览器及其渲染引擎

html骨架：！ + tab键快速生成。

<!DOCTYPE html>  <!--定义html类型？-->
<html lang="en">  <!--文件语言-->
<head>       <!--网页的头部-->
    <meta charset="UTF-8">   
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   <!--网页的大标题-->
</head>
<body>   <!--网页的身体-->
    
</body>
</html>

2.排版系列标签

（1）标题标签
标题标签重要程度逐级递减，字体由大到小。特点：独占一行；
代码：

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

标题标签
（2）段落标签
特点：和上下文有间距；独占一行。
代码：

<p>我是一个段落</p>

(3)换行标签
特点：单标签；强制换行。
代码：

<br> 或者<br />

(4)水平线标签
特点：单标签；显示一条水平线。
代码：

<hr> 或者 <hr />

3.文本格式化标签

（1）加粗
代码：

<strong>加粗</strong> 或者 <b>加粗</b>

（2）下划线
代码：

<ins>下划线</ins> 或者 <u>下划线</u>

（3）倾斜
代码：

<em>倾斜</em> 或者 <i>倾斜</i>

（4）删除线
代码：

<del>删除线</del> 或者 <s>删除线</s>

4.媒体标签

（1）图片标签
特点：单标签；
代码：

<img src="路径" alt="替换文本" title="提示文本" width="" height="">

alt属性：当图片加载失败，显示alt文字。
title属性：当鼠标悬停时，才显示的文字。
width和height：一般设置一个，如果设置2个，可能改变图片大小比例。

（2）音频标签
特点：双标签；
代码：

<audio src="路径" controls autoplay loop></audio>

control:显示播放的控件。
播放控件
autoplay：自动播放。
loop：循环播放。
（3）视频标签
双标签
代码：

<video src="路径" controls autoplay muted loop></video>

和音频标签的属性一样，但是多了一个muted属性：静音播放。
（4）路径
绝对路径：带盘符；网络地址（要联网）
相对路径：同级目录./或者直接写文件；
下级目录：images/image/或者./images;
上级目录：…/file

5.链接标签

为了赚取流量（target）

<a  href=""  target="_self(当前窗口跳转) / _blank(在新窗口跳转)">内容</a>

（1）外部链接

<a  href="https://www.cctv.cn" >内容</a>

（2）内部链接
内部文件可以是html文件或者其它文件。

<a  href="./01-标题标签.html" >内容</a>

（3）空链接
点击链接后：网址后面加“#”；若网页有滚动，点击后直接返回顶部。

<a  href="#" >内容</a>

（4）死链接
点击没有任何反应。

<a  href="javascript:;" >内容</a>

（5）锚点链接

跳转到的位置 <p  id="two"></p>
<a href="#two"></a>

（6）下载链接**

<a  href="xxx.zip / xxx.exe / xxx.dmg" >内容</a>