vito的Web前端学习 Day1（HTML）

最新推荐文章于 2025-12-30 00:06:52 发布

原创最新推荐文章于 2025-12-30 00:06:52 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

本文介绍了HTML的基础知识，包括文档结构、常用标签及其属性等。通过本文，读者可以了解到如何创建基本的网页结构，掌握文本格式化、图像插入及链接设置的方法。

2022年1月10日，开始学习web前端开发。

今日主要学习内容：

1 <html></html>

页面中最大的标签，称为根标签。

2 <head></head>

文档的头部。含了文档的元（meta）数据。

3 <title></title>

文档的标题。

4 <body></body>

文档的主体。

5.<!DOCTYPE html>

当前页面采用HTML5版本来显示网页。

5.1 <!DOCTYPE>位于文档中的最前面的位置

5.2 <!DOCTPYE>不是HTML标签，它就是文档类型声明标签

6 lang语言种类

<html lang="en"></html>

定义当前文档显示的语言。en为英语，zh为中文

7 charset字符集

<head>
	<meta charset="UTF-8">
</head>

charset属性来规定HTML文档应该使用哪种字符编码。必须写！

8 标题标签<h1> - <h6>

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

9 段落标签<p></p>

<p>第一段</p>
<p>第二段</p>

用于定义段路，将整个网页分成若干个段落。

9.1 文本在一个段落中回根据浏览器窗口大小自动换行

9.2 段落之间保有空隙

10 换行标签<br/>

<p>换<br/>行</p>

行之间空隙较小，段之间空隙较大。

11 粗体、斜体、删除线、下划线

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

12 <div></div>

盒子，用来装内容。单独占一行，大盒子。

13 <span>

盒子，用来装内容。一行可有多个，小盒子。

14 图像标签<img/>

<img src="01.png" alt="可替换的文本" title="鼠标放在图像上显示的文字" width="100" height="100" border="100">

src 指存储图像的位置。

alt 属性用来为图像定义一串预备的可替换的文本。

title 显示鼠标放在图像上显示的文字。

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

border 用于设置图像的边框。

14.1 属性必须写在标签名的后面

14.2 属性之间不分先后顺序，用空格分开

14.3 属性格式为key="value"

15 相对路径

<img src="01.png" />同一级路径
<img src="images/01.png" />下一级路径
<img src="../01.png" />上一级路径

16 绝对路径

<img src="E:\01.png" />绝对路径

17 超链接标签

<a href="https://www.youkuaiyun.com" target="_blank">文本或图像</a>
<a href="index.html">内部链接</a>
<a href="01.zip">下载链接</a>
<a href="https://www.youkuaiyun.com"><img src="01.png" alt="网页元素的链接"></a>

target 窗口打开方式，默认值是_self 在当前窗口打开页面，_blank 新窗口打开页面

<h1 id="title">锚点连接</h1>
<a href="#title">锚点链接</a>

herf 属性设置 #名字 的形式。

在目标位置标签添加 id=“名字”。

18 注释标签

<!-- 注释标签 快捷键 ctrl + / -->

19 特殊字符

空格 &nbsp;
小于号 &lt;
大于号 &gt;
和号 &amp;
人民币 &yen;
版权 &copy;
注册商标 &reg;
摄氏度 &deg;
正负号 &plusmn;
乘号 &times;
除号 &divide;
平方2 &sup2;
立方3 &sup3;

20 总结

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 id="title">一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>

	<p>第一段</p>
	<p>第二段</p>

	<p>换<br/>行</p>

	<strong>加粗</strong>
	<b>加粗</b>
	<em>倾斜</em>
	<i>倾斜</i>
	<del>删除线</del>
	<s>删除线</s>
	<ins>下划线</ins>
	<u>下划线</u>

	<img src="01.png" alt="可替换的文本" title="鼠标放在图像上显示的文字" width="100" height="100" border="100">

	<img src="01.png" />同一级路径
    <img src="images/01.png" />下一级路径
    <img src="../01.png" />上一级路径
    <img src="E:\01.png" />绝对路径

    <a href="https://www.youkuaiyun.com" target="_blank">文本或图像</a>
    <a href="index.html">内部链接</a>
    <a href="01.zip">下载链接</a>
    <a href="https://www.youkuaiyun.com"><img src="01.png" alt="网页元素的链接"></a>

    <p></p>
    <a href="#title">锚点链接</a>

    <!-- 注释标签 快捷键 ctrl + / -->

    空格 &nbsp;
    小于号 &lt;
    大于号 &gt;
    和号 &amp;
    人民币 &yen;
    版权 &copy;
    注册商标 &reg;
    摄氏度 &deg;
    正负号 &plusmn;
    乘号 &times;
    除号 &divide;
    平方2 &sup2;
    立方3 &sup3;
    
</body>
</html>