My Blog

我的第一篇博客

字体样式效果 1234567890 abcdefghijklmn 你好 Hello World

hello world

int main()
{
    printf("Hello world!\n");
}

ss dj dfa dad

dad

HTML 初学笔记

参考：入门了解 HTML 视频 | 一个非常好的学习 Web 网站

  • 简介： HTML 的作用以及编写时的结构和语法

🚗 定义

超文本标记语言 (Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。用来 构建网页的结构 ，是网页的一砖一瓦。

网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 ==H^T^ML== 及其功能做一个基本介绍。

 

🛺 元素、标签与属性

元素

元素是开始标签、结束标签和内容构成的整体

属性

属性写在开始标签中，用来修饰内容的。而这些修饰的属性也可以被引入到 CSS 中

 

🚓 网页结构

网页结构

<html> 元素: 根元素

<head> 元素：网页的基本信息，如网页标题、字符编码等

<body> 元素：用户所见内容，如文本、图片、视频、游戏等

 

🚕 常见的初级标签

  1. head 中的：

    • <title> : 设置网页的标题

    • <meta charset=""> : 设置网页的字符编码

  2. body 中的：

    • <h1> ~ <h6> : 一至六级文本标题

    • <p> : 所包裹的文本为一段

    • <ul> : 无序列表

    • <ol> : 有序列表

    • <li> : 列表项目

    • <a href="web site"> : 所包裹的文本变为超文本链接，点击跳转至指定的网页 (href: Hypertext reference, 超文本引用)

    • <img src="path" alt="caption"> : 引用图片，src 为图片的地址；alt 是当图片无法显示时的说明性文字

    • <strong> : 包裹的文本为粗体

    • <em> : 包裹的文本为斜体

    • <div> : 包裹的内容为一整块，便于 CSS 修饰渲染

通过这些基本的标签元素就可以构建出一些简单的网页了，参考下面的示例：

<!DOCTYPE html>
<html>
    <head>
        <title>Testing Page</title>
        <meta charset="utf8">
    </head>

    <body>
        <h1>Mozilla 酷毙啦！</h1>

        <img src="web site"
         alt="firefox icon" width="300px">

        <p>Mozilla 是一个全球社区，这里汇集着来自五湖四海的</p>

        <!--这是一个注释-->
        <!--Lists-->
        <ul>
            <li>技术人员</li>
            <li>思考者</li>
            <li>建造者</li>
        </ul>

        <p>我们致力于让 <em>Internet</em> 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。
        </p>

        <p>为了达成我们共同的理想，我们遵循一些列的价值观和理念，请参阅
            <a href="web site">
                Mozilla 宣言。
            </a>
        </p>
    </body>
</html>

下面是上述代码的显示效果：

example

 

🚙 高级标签

除了上述的一些常用的标签外，下面还会记录一些我学习时觉得有意思的标签，都是在 body 中使用。

  • <u> : 对包裹文本加下划线

  • <a href="web site"><img src="path"></a> : 用超链接包裹图片，即点击图片跳转到指定网址

  • <abbr title="explanation"> : 当鼠标悬浮到所包裹内容时，会显示对改文字的解释，常用于对缩写解释说明

  • <sup>, <sub> : 将包裹内容变为上标和下标，可以写化学、数学方程式

  • <img title="explanation"> : 在图片中使用 title 属性，鼠标悬浮到图片上，显示说明

🎥 视频

HTML 中使用 <video> 标签来嵌入视频，示例如下：

<video src="video_path" controls>
<p>当视频不能显示时， 显示其所包裹的文本内容。还可以添加超链接，让用户点击<a href="link">此链接</a>观看</p>
</video>

其中，src 属性来添加视频路径，一般视频的路径与该 HTML 文件在同一目录下，便于链接和管理。controls 属性是给用户提供视频的控制界面，以便暂停、开放、回放等，若没有它就无法播放视频，相当于图片了。当然还可以用

  • width, height : 来控制视频界面的大小

  • autoplay : 自动播放

  • loop : 循环播放

  • muted : 默认静音

下面是截图示例，看看两个属性在浏览器的反应。

video_example

🎵 音频

audio 的用法跟视频的类似，也是要有 src 和 controls，但由于音频没有画面，所以就没有 width, height 属性。

我们经常会在 B 站、Youtube 等在线网站上看到带有 CC 字幕的视频，这是因为他们使用了 <track> 标签，从而添加字幕。示例如下：

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

<track> 嵌套在 <video> 中

  • kind 为字幕的种类，其中有：

    • subtitle : 添加文本字幕

    • caption : 同步翻译字幕

  • src 当然就是字幕文件的路径

  • srclang 字幕的语言

当然这是比较基本的部分，要想美化、添加其他功能还要用 CSS 和 JS 来完成。