HTML基础第一课（冲浪笔记1）
原创
常用的默认快捷键：ctrl+c复制、ctrl+v粘贴、ctrl+s保存、ctrl+F快速搜索、ctrl+/行注释、shift+alt+a块注释、alt+B快速访问网站（这个快捷键是安装的open in browser插件后用的）
我习惯把快捷键放在笔记最前面，每次新学的快捷键容易忘记，每次能最快找到🧐
一、HTML概念
1、概念
（1）HTML是一种超文本的标记语言
（2）区别于C语言、JAVA、Javascript是编程语言
2、超文本标记语言
（1）超文本：链接、音频、视频（HTML好比报纸，而超文本的作用就是做一些报纸做不到的操作）
（2）标记：用标签对内容进行标记
3、标签
①单标签：<>
双标签：<></>
②标题标签：<h1>内容</h1>（具体代码介绍在结尾总结了代码展示！🧐）
二、标签的属性
1、格式
<h1 属性1="值1" 属性2="值2">内容</h1>
2、作用
修饰标签、给标签提供更多信息，附加一些额外的功能
三、模板
1、快速生成方式：shift+!
2、 代码解析
<!DOCTYPE html> <!-- 声明是html文件 -->
<html lang="en"> <!--根标签：所有代码必须写在这里面 -->
<head> <!--头部标签：引入js代码、样式css、元信息meta（设置一些基础配置，初始宽高，缩放比例，国际编码【防止乱码】） -->
<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>
<h1>标题标签</h1> <!-- 页面显示的内容 -->
<h1 title="我是一个标签">标签</h1>
</body>
</html>四、注释
1、格式
<!-- 注释内容-->2、快捷键
（1）行：ctrl+/ （2）块：shift+alt+a
3、作用
提高代码可阅读性、可维护性、屏蔽暂时不需要的代码
五、常用标签
1、标题和段落
（1）标题标签
h1-h6：字体由大到小
<h1>标题</h1>
<h2></h2>
以此类推
（2）段落标签
①格式：<p>段落</p>
②作用：有换行的效果，<br>单标签也是换行的作用
2、文本修饰标签
（1）字体加粗：<strong>内容</strong>
（2）斜体：<em>内容</em>
（3）右上角（上标）：X<sup>2</sup>
（4）右下角（下标）：H<sub>2</sub>O
记忆技巧：（3）、（4）的标签<sup>、<sub>，p的o在上表示上标，p的o在下表示下标
又粗又斜：<strong><em></em></strong>（这里标签内、外顺序没有要求的）
3、图片标签
（1）格式：<img src="" alt=""> （单标签）
（2）属性：
src：图片地址
alt：无法显示图片时候，显示的文字
4、路径
（1）相对路径:
./ 当前文件夹
../ 上一级
../../ 上上一级
（2）绝对路径：网络地址，从盘符开始寻找（不管文件在哪里，都能正常显示）
（3）相对、绝对是对于当前的html
5、跳转链接（超链接）
（1）格式：<a href="" target=""></a>
（2）href：跳转地址
（3）target：
①_self：默认值，当前页面跳转
②_blank：新开一页跳转
（4）可以是网络地址，也可以是本地的html文件
6、锚点
编写步骤
（1）写一个a标签
（2）在需要锚点的地方加id属性 id="自定义英文名字"
（3）a标签的herf加上 #自定义英文名字（#不能忘）
7、列表标签
（1）有序
①容器：ol
②具体项：li li*10（可直接生成十个li标签）
③格式：
<ol type="a">
<li></li>
</ol>
④属性：type="a"
（2）无序
①容器：ul
②具体项：li
③格式
<ul>
<li></li>
</ul>
六、总结
1、代码例子
<!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>
<!-- 字体大小比较 -->
<h1>字体</h1>
<h2>字体</h2>
<p>段落</p> <!-- 有换行效果 -->
<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
<!-- 文本修饰 -->
<strong><em>加粗倾斜</em></strong>
X<sup>2</sup>
H<sub>2</sub>O
<!-- 绝对路径 -->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F20%2F20200320155809_lzhwy.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655481714&t=e3b4cd38b05b5953c16b9a0fa8d7c060" alt="图片无法打开">
<!-- 超链接 -->
<a href="https://www.baidu.com/" target="_blank">百度</a>
<!-- 锚点 -->
<a href="#info">简介</a>
<a href="#trait">特点</a>
<h1 id="info">简介</h1>
<p>HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。 [2]
自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。 [2]
万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 [3]
网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
</p>
<h1 id="trait">特点</h1>
<p>超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
<p>超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
<p>超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
<p>超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
</body>
</html>2、列表代码例子
<!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>
<h1>家常菜</h1>
<ul>
<li>凉菜</li>
<ul>
<li>海带丝</li>
<li>腐竹</li>
<li>黄瓜</li>
</ul>
<li>面类</li>
<ul>
<li>酸辣粉</li>
<li>炸酱面</li>
<li>肉丝面</li>
<li>肥肠面</li>
</ul>
<li>粥类</li>
<ul>
<li>皮蛋瘦肉粥</li>
<li>白粥</li>
</ul>
<li>汤类</li>
<ul>
<li>西红柿鸡蛋汤</li>
<li>紫菜蛋花汤</li>
</ul>
</ul>
<p><strong>地址：某某县某某镇</strong></p>
<p><strong>电话：12345678</strong></p>
</body>
</html>3、实现效果图
为完整体现效果，代码略为繁杂，小伙伴们可以直接复制代码到自己的文件中，运行查看效果🧐
完毕！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
