HTML学习笔记 | 云雀笔记

type

Post

status

Published

date

Oct 26, 2022

slug

html

summary

个人HTML的学习笔记记录

一、创建项目文件夹

在本地创建一个新文件夹并命名为html，然后使用VSCode打开

显示如下

在VSCode里面新建index.html文件

二、HTML基本架构

基本架构如下：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
    </head>
    <body>
        hello 云雀
    </body>
</html>

保存文件（Windows用快捷键ctrl+s，macOS用command+s）

使用浏览器打开html文件显示如下

三、注释和基本标签的使用

1、注释的使用

注释用于对代码的解释不会被浏览器识别，其表达方式如下：


<!-- 注释 -->

我们试着对上面的html的基础架构进行注释


<!-- 向浏览器表述文件的类型 -->
<!DOCTYPE html>
<html>
    <!-- head用于表示网页上面的标签信息 -->
    <head>
        <!-- meta用于表述网页的编码方式，否则中文会出现乱码 -->
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
    </head>
    <!-- body来表示网页的主体 -->
    <body>
        hello 云雀
    </body>
</html>

显示的网页结构如下，也可以看出注释的内容并没有被浏览器展示出来

2、基本标签的使用

标题标签

标题用h1-h6来表示，分别表示一级标题到六级标题，通常一个网页里面只有一个h1即一级标题一篇文章只有一个


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

文字标签

基本的文字及段落用p来表示，粗体用b表示，斜体用i表示


<!-- 段落标签的使用 -->
<p>这是一段文字</p>
<!-- 粗体标签的使用 -->
<p>这是一段文字，<b>这是粗体</b></p>
<!-- 斜体标签的使用 -->
<p>这是一段文字，<i>这是斜体</i></p>
<!-- 粗斜体标签的使用 -->
<p>这是一段文字，<b><i>这是粗斜体</i></b></p>

换行、分割线标签

换行用br表示，因为br换行标签中间没有任何内容，所以将<br></br>省略成<br/>，分割线用hr表示，同换行标签使用方法一样可以省略为<hr/>，


<!-- 正常行距 -->
<p>第一行</p>
<p>第二行</p>
<!-- 使用换行标签之后的行距 -->
<p>第三行</p>
<br/>
<p>第四行</p>
<!-- 使用分割线 -->
<p>第五行</p>
<hr/>
<p>第六行</p>

通过换行以及分割线的用法，之前基础架构里面的<meta charset="UTF-8"></meta>中间也没有内容，因此也可以简化为<meta charset="UTF-8"/>

3、链接和图片

外部网站链接

链接可以用a标签来表示，链接到外部网址需要给a标签一个href的属性，值为外部网站网址。两个a标签之前的文字用于对网址进行描述，即显示出来的文字


<a href="https://baidu.com">百度</a>

内部网页的链接

本文件为index.html，本目录下还有page2.html文件，同时本文件下还有一个名为dir的子文件夹，文件中有一个page3.html文件。文件树如图

要链接到和本html文件同目录下的其他html文件，只需将href属性所对应的值修改为文件路径


<a href="page2.html">第二页</a>
<a href="dir/page3.html">第三页</a>

同理page2.html要跳转index.html也只需要按上面的方法添加链接


<a href="index.html">主页</a>

但是page3.html要跳转到index.html需要在路径前方加上../，因为page3在index所在文件夹的下级文件夹，../代表上级文件夹路径


<a href="../index.html">主页</a>

内部图片及文件链接（点击会打开图片或者文件，不会直接在网页上展示）

和上面的内部网站链接一样，输入路径就可以了。


<a href="logo.png">logo</a>
<a href="video.mp4">video</a>

点击效果分别为

插入内部和外部图片

插入图片标签为img，需要给img标签一个src的属性，值为外部图片网址或内部图片路径


<!-- 插入外部图片 -->
<img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png"/>
<!-- 插入内部图片 -->
<img src="logo.png"/>

固定图片的高度和宽度

高度用height属性来表示，宽度用width属性来表示，值为像素

只固定宽度或者高度一个值图片会等比例放大或者缩小，两个值都固定时可能会造成图片的变形


<!-- 固定宽度 -->
<img src="logo.png" width="300"/>
<!-- 固定高度 -->
<img src="logo.png" height="200"/>
<!-- 固定宽度和高度 -->
<img src="logo.png" width="300" height="200"/>

4、视频和嵌入其他网站视频

插入本地视频和视频直链

插入本地视频和视频直链和插图图片方法类似，其标签为video，属性src的值为文件路径或者视频直链，两个video标签中间可以输入文字作为无法加载视频时显示的文字提示。同时需要给视频一个controls属性，否则视频只会展示缩略图无法播放和控制。也可以用width和height属性来控制视频的宽度和高


<!-- 插入本地视频 -->
<video src="video.mp4" controls width="400">视频无法载入</video>
<!-- 插入视频直链 -->
<video src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/82d5f914-4943-4b25-ac1d-abfd2208e09d/%E9%A6%96%E6%AC%A1%E7%99%BB%E9%99%86%E5%B9%B6%E4%BF%AE%E6%94%B9Office%E8%B4%A6%E5%8F%B7%E5%AF%86%E7%A0%81.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221021%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221021T084321Z&X-Amz-Expires=86400&X-Amz-Signature=1ad9c562e1b2931afd3ad8932f5084bd8daf8b8b71ad29198308d82b745ae936&X-Amz-SignedHeaders=host&x-id=GetObject" controls width="400">视频无法载入</video>

嵌入其他网站视频

嵌入B站视频

在B站找到你想要嵌入的视频，点击视频下方的分享按钮并选择嵌入代码就会得到如下代码，直接复制到html文件中即可


<iframe src="//player.bilibili.com/player.html?aid=816657556&bvid=BV1BG4y1n7hL&cid=864858488&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

嵌入油管视频

与B站同理，分享得到嵌入代码


<iframe width="560" height="315" src="https://www.youtube.com/embed/QoGrvTC1uPg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

显示效果，可能是网络原因，我嵌入的视频没办法使用，方法应该就是这样可能是网络环境的问题，下次使用遇到问题再具体分析吧。

5、列表和表格

无序列表

无序列表用标签ul来表示，里面的标签用li表示


<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>

有序列表

有序列表用标签ol来表示，里面的标签用li表示，有序列表默认使用阿拉伯数字来表示顺序。可以在给ol标签一个type属性，属性值可以为1、A、a、I、i来分别代表阿拉伯数字、大写英文字母、小写英文字母、大写罗马数字、小写罗马数字排序。


<!-- 有序列表 -->
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>
<!-- 有序列表-小写罗马数字 -->
<ol type="i">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>

表格

表格用table标签来表示，每一行用tr标签表示，单元格用td标签标识，可以给表格加上width和weight属性控制表格的宽度和高度。


<table width="400">
    <tr>
        <td>姓名</td>
        <td>数学</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>87</td>
        <td>96</td>
        <td>95</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>76</td>
        <td>100</td>
        <td>95</td>
    </tr>
    <tr>
        <td>小华</td>
        <td>90</td>
        <td>99</td>
        <td>59</td>
    </tr>
</table>

6、容器（方便排版和css的使用）

容器标签有两种div和span。

容器命令的用法


<div>
    <ol type="i">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
    <table width="400">
        <tr>
            <td>姓名</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>87</td>
            <td>96</td>
            <td>95</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>76</td>
            <td>100</td>
            <td>95</td>
        </tr>
        <tr>
            <td>小华</td>
            <td>90</td>
            <td>99</td>
            <td>59</td>
        </tr>
    </table>
</div>

两种容器标签的区别，span标签表示实际内容的宽度是多少就占用多少的空间，div标签表示不管实际内容的宽度是多少均占用整行空间，与a标签和p标签的区别相似。

7、html的输入标签

输入框

html的输入标签为input，需要用属性type来确定其可以输入的内容，基础的type值有text、password、date、checkbox、range、file分别代表纯文本，密码、日期、确认框、进度条、上传文件。用属性placeholder加特定的值可以创建输入提醒文字。


<!-- 输入框 -->
<input type="text" placeholder="请输入账号"/>
<br/>
<br/>
<input type="password" placeholder="请输入密码"/>
<br/>
<br/>
<input type="date"/>
<br/>
<br/>
<input type="range"/>
<br/>
<br/>
<input type="file"/>
<br/>
<br/>
<input type="checkbox">请确认</input>

文本框

文本框用textarea标签表示，两个textarea之间可以输入默认文字，文本框可以拖动右下角进行缩放。


<textarea>请输入您的评论</textarea>

8、meta标签

meta标签主要用于告诉浏览器、搜索引擎关于本网站的信息。

常见的meta标签

属性charset表示编码格式，中文一般用UTF-8


<meta charset="UTF-8"/>

属性name=”description”表示网站描述，name=”author”表示网站作者，name=”keywords”表示网站关键字，name=”viewport”表示网站窗口。值用content来表示。如：


<!-- meta用于表述网页的编码方式，否则中文会出现乱码 -->
<meta charset="UTF-8"/>
<meta name="description" content="这是一段网站简介"/>
<meta name="author" content="云雀"/>
<meta name="keywords" content="云雀,html,新手,学习"/>
<!-- width=device-width表示网站初始宽带为设备宽度 -->
<!-- initial-scale=1.0表示网站初始缩放比为1 -->
<meta name="viweport" content="width=device-width,initial-scale=1.0"/>

以网站it之家为例

网站描述


<meta name="description" content="IT之家，百度指数排名第一的前沿科技门户网站，青岛软媒旗下。快速播报科技行业新闻头条快讯和手机数码产品评测，关注智能车电动车、AR/VR虚拟现实、苹果iOS/iPadOS、鸿蒙OS、谷歌Android、微软Win11/Win10/Win7，紧盯iPhone/iPad、安卓智能设备手机等数码潮流。">

在百度搜索中展示的位置

四、html更多标签

更多标签的用法请参考

HTML 标签参考手册 (w3school.com.cn)

五、教学视频

视频如下：

HTML基础教学视频

如果视频看不了，请看油管原视频

六、附件

本文的附件请通过下面的链接点击下载

html.zip

5741.2KB