前端学习day01

周佳栋

已于 2023-05-29 16:09:30 修改

阅读量63

点赞数 3

文章标签：前端学习 html

于 2023-05-29 16:04:29 首次发布

本文链接：https://blog.csdn.net/zhoujiadong001/article/details/130929954

版权

HTML是一种超文本标记语言，用于构建网页结构。在VSCode中，利用HTMLCSSSupport和HTMLSnippets插件可提升开发效率。文章介绍了HTML的基本元素，如meta标签、字符编码和viewport设置，以及常用的块级和行内元素。同时，提供了VSCode编写HTML的示例代码。

摘要由CSDN通过智能技术生成

1.什么是html？

HTML是HyperText Markup Language(超文本标记语言)它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来

标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止。

2.使用工具：vscode

3.插件推荐：

HTML CSS Support - Html提示Css自动补全

HTML Snippets - 完整的HTML标签，包括HTML5片段

4.vscode使用：

<!DOCTYPE html>

<head>

<!--viewport 设备的屏幕width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

-->

<title>Hello HTML</title>

5.常用标签：

行内元素：div、dl dd dt、form、h、li、ol、ul、li、p、table、td、th、tr、thead

块级元素：a、br、em、i、img、input、label、span、strong、var、textarea

6.代码片段：

①初始

<!DOCTYPE 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>
    <!-- h5新增标签 -->
    <header></header>
    <footer></footer>
    <address></address>
    <nav></nav>
    <article></article>

    <span>行内元素</span>
    <i>斜体效果</i>
    <em>斜体效果</em>
    <cite>斜体效果</cite>
    <b>加粗效果</b>
    <strong>加粗效果</strong>
    <sub>下标</sub>
    <sup>上标</sup>
    <strike>删除线</strike>

</body>
</html>

②常见标签

<!DOCTYPE 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>
    <base target="_self">
    <style>
        div {
            height: 2000px;
        }
    </style>
</head>

<body>

    <!-- a img p br hr -->
    <!-- img src alt -->
    <!-- 相对路径 绝对路径 -->
    <img src="路径" alt="图片加载失败说明">

    <!-- 标题标签 -->
    <h1 id="box">一级</h1>
    <div></div>
    <h2>二级</h2>
    <h3>三级</h3>
    <h6>六级</h6>
    <!-- 超链接标签(进行页面跳转 本地 外部网址 锚点 指定跳转方式) -->
    <!-- base标签 指定a标签打开方式 写在head -->
    <a href="https://www.baidu.com" target="_blank">百度(新页面)</a>
    <a href="https://www.baidu.com" target="_self">百度（当前页面）</a>
    <!-- a标签打开电子邮箱 -->
    <a href="mailto:791046526@qq.com">打开邮箱</a>
    <!-- 设置锚点 -->
    <a href="#">回到顶部</a>
    <!-- 指定跳转 -->
    <a href="#box">跳转h1</a>
    <hr>
</body>

</html>

③音视频

<!DOCTYPE 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>音视频</title>
</head>

<body>
    <!-- 视频标签 -->
    <!-- controls进度条 、 autoplay自动播放 、 muted静音播放
        loop循环播放 、 poster设置封面 、  -->
    <video controls muted autoplay poster="../img/001pic.jpg" width="500px" src="../img/002视频.mkv"></video>
    <!-- 音频标签 -->
    <!--  -->
    <audio controls src="../img/001音频.mp3"></audio>
    <audio controls muted autoplay>
        <source src="../img/001音频.mp3" type="audio/mp3">
    </audio>
</body>

</html>

④h5新增标签

<!DOCTYPE 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>
    <!-- figure -->
    <figure>
        <figcaption>图片</figcaption>
        <img src="../img/001pic.jpg" alt="">
    </figure>
    <details>
        <summary>一线城市</summary>
        <div>北京</div>
        <div>上海</div>
        <div>广州</div>
    </details>
    <u>下划线</u>
    <mark>文字高亮</mark>
</body>
</html>