HTML基础第一课（冲浪笔记1）

常用的默认快捷键：ctrl+c复制、ctrl+v粘贴、ctrl+s保存、ctrl+F快速搜索、ctrl+/行注释、shift+alt+a块注释、alt+B快速访问网站（这个快捷键是安装的open in browser插件后用的）
我习惯把快捷键放在笔记最前面，每次新学的快捷键容易忘记，每次能最快找到

一、HTML概念

1、HTML是一种超文本的标记语言，而C语言、JAVA、Javascript是编程语言
（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、作用：提高代码可阅读性、可维护性、屏蔽暂时不需要的代码

五、常用标签：HTML 标签列表(字母排序) | 菜鸟教程 (runoob.com)

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标签
②在需要锚点的地方加id属性 id="自定义英文名字"
③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、实现效果图