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

五秒法则

已于 2023-12-03 14:31:38 修改

阅读量345

点赞数 3

分类专栏：前端开发文章标签：前端学习笔记 html

于 2022-05-19 00:26:34 首次发布

本文链接：https://blog.csdn.net/qq_51478745/article/details/124852638

版权

前端开发专栏收录该内容

20 篇文章 6 订阅

订阅专栏

本文介绍了HTML的基本概念，如超文本和标记，列举了常用的HTML标签，包括标题、段落、文本修饰、多媒体和列表等，并详细阐述了标签的属性和用途。同时，分享了常用的快捷键，如Ctrl+C、Ctrl+V等，以及代码注释的方法，帮助读者更好地理解和记忆HTML语法。

摘要由CSDN通过智能技术生成

常用的默认快捷键：ctrl+c复制、ctrl+v粘贴、ctrl+s保存、ctrl+F快速搜索、ctrl+/行注释、shift+alt+a块注释、alt+B快速访问网站（这个快捷键是安装的open in browser插件后用的）

我习惯把快捷键放在笔记最前面，每次新学的快捷键容易忘记，每次能最快找到

一、HTML基本认识

HTML是一种超文本的标记语言，而C语言、JAVA、Javascript是编程语言

1、超文本

链接、音频、视频（HTML好比报纸，而超文本的作用就是做一些报纸做不到的操作）

2、标记

用标签对内容进行标记

3、标签

（1）单标签：<>
（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 标签列表(字母排序) | 菜鸟教程HTML 参考手册- (HTML5 标准) 按字母顺序排列 New : HTML5新标签标签描述  定义注释 <!DOCTYPE> 定义文档类型 <a> 定义超文本链接 <abbr> 定义缩写 <acronym> 定义只取首字母的缩写，不支持H..https://www.runoob.com/tags/html-reference.html

1、标题标签、段落标签

（1）标题标签

①h1~h6：字体由大到小

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
...

②代码示例

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印刷品之一，使用的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

（2）段落标签

①格式

<p>段落</p>

②作用

有换行的效果，<br>单标签也是换行的作用

2、文本修饰标签

（1）字体加粗

（2）斜体

（3）右上角（上标）

（4）右下角（下标）

<strong>内容</strong>
<em>内容</em>
X<sup>2</sup>
H<sub>2</sub>O

记忆技巧：p的o在上表示上标，p的o在下表示下标

又粗又斜：<strong><em></em></strong>（这里标签内、外顺序没有要求的）

3、多媒体标签

（1）图片标签

①格式

<!-- 单标签 -->
<img src="" alt="">

②属性
src：图片地址
alt：无法显示图片时候，显示的文字

（2）音频标签

①格式

<audio src="" controls></audio>

②属性

controls：显示默认控件

src：音频地址

（3）视频标签

①格式

<video src="" controls></video>

②属性

controls：显示默认控件

src：视频地址

4、路径

（1）相对路径

        ./   当前文件夹
        ../   上一级
        ../../   上上一级

（2）绝对路径：网络地址，从盘符开始寻找（不管文件在哪里，都能正常显示）

（3）相对、绝对是对于当前的html

5、跳转链接（超链接）

（1）格式

<a href="" target=""></a>

（2）href：跳转地址

（3）target：
①_self：默认值，当前页面跳转
②_blank：新开一页跳转

<a href="https://blog.csdn.net/qq_51478745?type=blog">个人主页</a>
<a href="https://blog.csdn.net/qq_51478745?type=blog" target="_blank">个人主页</a>

（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>

（3）其它

①定义列表dl

②列表标题dt

③列表内容dd

④格式

<dl>
    <dt></dt>
    <dd></dd>
</dl>

（4）代码示例

<h2>世界电影票房排行榜</h2>
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>
<h2>购物清单</h2>
<ul>
    <li>🍇</li>
    <li>🍉</li>
    <li>🍎</li>
</ul>
<h2>霸王别姬</h2>
<dl>
    <dt>导演: </dt>
    <dd>陈凯歌</dd>
    <dt>主演: </dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
    <dt>上映日期: </dt>
    <dd>1993-01-01</dd>
</dl>

六、总结

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>