前端学习之道|2万字HTML基础知识详解（大量代码实例，包教包会）
大家好，我是花无缺，一个风一样的男子，热爱各种开发技术，感谢各位大佬的阅读 !
欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 huawuque404 原创
每一个不曾起舞的日子都是对生命的辜负✨
我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情
欢迎来到前端学习之道！这里是第一关HTML，我相信看了这篇文章，大家都可以顺利通关哦！
前言
互联网技术的学习是一条看不到头的路，需要用一生去热爱，持之以恒的学习。
而目前互联网公司的两大招聘岗位则有前端工程师和后端工程师，前端便是在浏览器中人们所能看到的网页，网页的内容就是使用前端技术构建的，而网页背后的数据与网页的逻辑运行则是依靠后端技术的支撑。这就是对前端与后端最基本的认知。无论是前端还是后端的学习都是不容易的，甚至可以说是特别困难，因为两门技术栈涉及的知识面广，技术体系大，技术内容繁多，导致他们的学习都是很困难的。当然了，不管有多么困难，只要有一颗勇敢的心，热爱技术的心，再加上持之以恒的心就一定会慢慢攻克。接下来，我将会持续给大家呈现上自己的技术笔记和大家一起交流学习！
一、前端三大核心技术简介
HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
CSS
层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
JavaScript
简称JS
JavaScript（通常缩写为JS）是一门基于原型和头等函数的多范式高级解释型编程语言，它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化[8]。目前，它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、Firefox、Safari和Opera）所支持。
JavaScript与Java在名字和语法上都很相似，但这两门编程语言从设计之初就有很大不同。JavaScript在语言设计上主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响，在语法结构上它和C语言很相似（如if条件语句、switch语句、while循环和do-while循环等）。
对于客户端来说，JavaScript通常被实现为一门解释语言，但如今它已经可以被即时编译（JIT）。随着HTML5和CSS3语言标准的推行，它还可以用于游戏、桌面和移动应用程序的开发，以及在服务器端网络环境运行（如Node.js）。
一个完美的网页效果需要这三个技术相互配合，相辅相成
二、HTML是什么？
Hyper Text Markup Language 超文本标记语言
HTML是用来描述网页的语言，它是网页的结构，一个网页必须要有HTML作为结构支撑，这样浏览器才可以呈现出具有结构的标准的网页结构
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用一套标准化的标记标签来描述网页
- HTML很容易学习
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML标签通常也称为HTML元素
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 <b>
- 也有单独的标签,比如<br>，这个标签的作用是换行
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML属性
属性是HTML元素提供的附加信息
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性放在开始标签中
- 属性总是以名称/值对的形式出现，比如：name="value"
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404</title>
</head>
<body>
<!-- HTML超链接使用<a>标签定义，而链接的地址在href属性中规定 -->
<a href="https://blog.csdn.net/huawuque404">我的博客</a>
</body>
</html>
浏览器显示效果：
HTML版本
从1991年第一版HTML发布后HTML不断在更新，现在主流的HTML的版本是HTML5，HTML5不仅新增了很多特性，同时也兼容历史版本
| 版本 | 发行时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
HTML编辑器
1.记事本
大神用的，普通人看看就好😂
2.VS code
官网：code.visualstudio.com/ 是一个由微软开发的，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器可以安装拓展程序，提高了开发和工作的效率，结合拓展程序几乎支持所有主流的编程语言， 它免费且体积小，深受开发者的喜爱
3.Sublime Text
官网：www.sublimetext.com/ Sublime Text 是一个文本编辑器（收费软件，可以无限期试用），同时也是一个先进的代码编辑器。
4.Adobe Dreamweaver
官网：www.adobe.com/cn/products… Adobe Dreamweaver，简称“DW”。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。
5.JetBrains WebStorm
官网：www.jetbrains.com/zh-cn/webst… WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
使用VS code构建HTML页面
vscode安装及配置教程：juejin.cn/post/685669… 按照上面的教程根据自己的需要对vscode进行配置即可使用vscode尽情的写前端了
三、HTML实例
实例1
下面是一段HTML代码
<!DOCTYPE html> <!-- 声明为HTML5文档 -->
<html>
<!-- 头部元素 -->
<head>
<meta charset="utf-8"> <!-- 网页编码格式为utf-8 -->
<title>花无缺</title> <!-- 网页标题 -->
</head>
<!-- 可见的网页内容 -->
<body>
<h1>我的第一个标题</h1>
<h2>我的第二个标题</h2>
<p>我的第一个段落。</p>
</body>
</html>
在浏览器的显示效果：
<!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键进入开发者模式，就可以看到组成标签。
HTML、CSS以及JavaScript的代码要在web浏览器中运行，才可以看到效果
常用的web浏览器：谷歌浏览器Google Chrome、微软浏览器Microsoft Edge（原IE浏览器）、火狐浏览器Firefox、欧朋浏览器Opera、苹果safari浏览器
作者用的是谷歌和Edge，这里我推荐谷歌浏览器，响应速度很快，但是谷歌浏览器也有个小毛病就是国内用户不可以登录谷歌账户，就无法随时同步浏览器的浏览记录和书签等个人信息，换设备使用会有一定麻烦
实例2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>实例2</title>
</head>
<body>
<h4>下面是html实例演示</h4>
<p>
这是一个段落。<br>
学习 HTML 最好的方式就是边学边做实验。<br>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<a href="https://blog.csdn.net/huawuque404" target="_blank">这是一个超链接,点击就可以跳转到目标网页</a>
<!--这是一张图片-->
<img src="https://img-blog.csdnimg.cn/920771cb50e842dd89d0f181f30c0e9a.png">
</p>
</body>
</html>
浏览器显示效果：
如果大家有什么疑问或者想查看更多HTML实例可以给我留言或者后台私信我哦，我会私发一个前端实战项目给大家。也欢迎大家加入QQ交流群589523153
四、HTML具体知识
SEO
SEO(Search Engine Optimization):搜索引擎优化 作用:让网站在搜索引擎上的排名靠前 提示SEO的常见方法:
- 竞价排名
- 将网页制作成html后缀
- 标签语义化(在合适的地方使用合适的标签)
- ......
SEO三大标签
title：网页标题标签
例如：
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
description：网页描述标签
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
keywords：网页关键词标签
例如：
<meta name="Keywords" content="网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，食品，生鲜，京东">
ico网页图标设置
ico图标即浏览器标签栏上显示的图像：
例如：
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
HTML注释
注释的格式：<!--注释内容-->
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404</title>
</head>
<body>
<p>这是一个帅哥</p>
<!-- 这是一段注释，将帅哥和美女隔开了，但是浏览器会忽视注释内的任何信息，不会影响HTML代码 -->
<p>这是一个美女</p>
</body>
</html>
浏览器显示效果：
注释的作用：
为代码添加的具有理解性、描述性的信息，主要用来帮助前端开发人员理解代码
浏览器执行代码时会忽略所有的注释
标签组成和关系
组成
HTML标签的结构图
结构说明：
- 标签由< > / 英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见的标签由两部分组成，即双标签，前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容，如<strong></strong>
- 少数标签只由一个部分组成，即单标签，自成一体，无法包裹内容，如<br>
标签关系
- 父子关系(嵌套关系)
<head>
<title></title>
</head>
- 兄弟关系(并列关系)
<head></head>
<body></body>
标题和段落
标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
浏览器显示效果：
特点：
- 文字都有加粗
- 文字都有变大，并且从h1到h6文字逐渐减小
- 独占一行，自动换行
注意： 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 搜索引擎使用标题为您的网页的结构和内容编制索引。 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
段落
HTML段落可以把HTML文档分割成若干段落
<p>段落内容</p>
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404</title>
</head>
<body>
<p>这是第一段，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</p>
<p>这是第二段，前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
</p>
<p>这是第三段，前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
</body>
</html>
浏览器显示效果：
特点：
- 不同段落之间存在间隙
- 浏览器会自动地在段落的前后添加空行
- 段落最后一行独占一行
换行和水平线
换行标签
如果希望在不产生一个新段落的情况下进行换行（新行），可以使用 <br>标签，换行标签是单标签
<br>
让文字强制换行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404</title>
</head>
<body>
<p>
这是一句话
这是一句话
<!-- 下一句会换行 -->
这句话之后会换行<br>
这是一句话
这是一句话
这是一句话
</p>
</body>
</html>
浏览器显示效果：
注：为使页面更加简洁，下面内容的代码举例我会只保留<body>里面的内容,省略<html>等标签
水平线标签
水平线标签是单标签
<hr>
在网页上显示一条水平线
例如：
<body>
<p>这是第一个段落</p>
<hr>
<p>这是第二个段落</p>
<hr>
</body>
浏览器显示效果：
文本格式化标签
HTML可定义很多供格式化输出的元素，比如粗体和斜体，文本格式化标签可以使标签内的文本产生不同的文字效果
| 标签 | 作用 |
|---|---|
<b></b> | 加粗 |
<u></u> | 下划线 |
<i></i> | 倾斜 |
<s></s> | 删除线 |
<strong></strong> | 加粗 |
<ins></ins> | 下划线 |
<em></em> | 倾斜 |
<del></del> | 删除 |
推荐使用后四个文本格式化标签，因为它们更具有语义性
术语解释： “语义” 语言所蕴含的意义就是语义(semantic)。简单的说，符号是语言的载体。符号本身没有任何意义，只有被赋予含义的符号才能够被使用，这时候语言就转化为了信息，而语言的含义就是语义。语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。
例如：
<body>
<p>
<!-- <br>表示换行 -->
<b>定义粗体文本</b><br>
<em>定义斜体文字</em><br>
<i>定义斜体字</i><br>
<small>定义小号字</small><br>
<big>定义大号字</big><br>
<strong>定义加重语气</strong><br><br>
花无缺<sub>定义下标字</sub><br><br>
花无缺<sup>定义上标字</sup><br><br>
<ins>定义下划线</ins><br>
<del>定义删除字</del><br>
<s>与del同效果</s><br>
<strike>与del同效果</strike><br>
<u>下划线</u>
</p>
</body>
浏览器显示效果：
此外HTML中还提供了计算机输出标签 和 引用标签
计算机输出标签：
| 标签 | 作用 |
|---|---|
<code></code> | 定义计算机代码 |
<samp></samp> | 定义键盘码 |
<tt></tt> | 定义打字机代码 |
<var></var> | 定义变量 |
<pre></pre> | 定义预格式文本 |
例如：
<body>
<p>
<code>
Hello World!
</code><br>
<samp>shift</samp><br>
<tt>打字机代码</tt><br>
<var>定义变量</var><br>
<pre>
pre标签内的格式不会改变
花无缺
花无缺
花无缺
</pre>
</p>
</body>
浏览器显示效果：
引用标签：
<abbr></abbr> | 定义缩写 |
<acronym></acronym> | 定义首字母缩写 |
<address></address> | 定义地址 |
<bdo></bdo> | 定义文字方向 |
<blockqute></blockqute> | 定义长的引用 |
<q></q> | 定义短的引用 |
<cite></cite> | 定义引用、印证 |
<dfn></dfn> | 定义一个定义项目 |
例如：
<body>
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.<br>
<address>
Written by <a href="huawuque404@163.com">huawuque404</a>.<br>
Visit us at:<br>
Example.com<br>
fand 564, jack<br>
CHINA
</address>
<p>
如果你的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
<br>
<blockquote>长的引用</blockquote>
<q>短引用</q><br>
<cite>引用,印证</cite><br>
<dfn>定义一个定义项目</dfn>
</body>
浏览器显示效果：
图像
图像的基本使用
<img src = "图片路径" alt = "无法加载图片时显示的文字信息">
代码中src和alt为标签属性，src和alt为属性名，“”中的内容为属性值 img标签如果要展示图片效果，则利用标签属性进行设置
例如：
<body>
<img src="https://wx1.sinaimg.cn/mw2000/006xNq9cgy1h66kfz733aj30j609i3yz.jpg" alt="这是帅气的作者本人">
</body>
浏览器显示效果：
如果图片由于网络不稳定等原因无法加载出图片，则就会在对应位置显示alt属性中的文字 例如以上例子，当无法加载图片时浏览器的显示效果为：
注意：
- 标签的属性在开始标签的内部
- 标签上可以同时存在多个标签
- 属性之间用空格隔开
- 属性没有顺序要求
图像地图
HTML图像地图<map>标签和<area> <map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<map>中的 usemap 属性可引用 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
<area> 元素始终嵌套在 <map> 标签内部。
注释： <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。
例如：
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
图片属性
src属性
属性值：图片的文件路径
alt属性
属性值：图片的替换文本 作用：当图片无法正常加载显示时，替代图片显示出文字
title属性
属性值：提示文本 作用：当鼠标悬停在图片上时，显示出文字 注意：title属性不仅仅用于图片标签，还可以用于其他标签
width和height属性
属性值：图片的宽度和高度（数字） 注意：
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，则图片可能会根据设置产生变形
路径
路径就是文件的位置
比如某个本地计算机的D盘的哪个文件的路径
C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg
或者在某个网络服务器的某个文件的路径
https://img-blog.csdnimg.cn/803b27ae38ed495d8d28859c68b4c3e5.png
而路径又分为绝对路径和相对路径
绝对路径
目录下的绝对位置，可直接到达目标位置，通常从根目录开始的路径 例如：
1.根目录开头：C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg
2.完整的网络地址：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
相对路径
从当前文件出发的文件路径，可分为同级、下级，上级目录来理解和区分 我们以一个图片文件为例
同级目录
当前文件和目标文件在同一目录(文件夹)中 使用路径的代码：
<img src = "目标图片.jpg">
或
<img src = "./目标图片.jpg">
./ 表示当前目录(文件)
下级目录
目标文件在当前目录的下一级目录(子文件)中，则要进入到下一级目录中 使用路径的代码：
<img src = "目标图片所在的文件夹/目标图片.jpg">
上级目录
目标文件在当前目录的上一级目录(父文件)中，则要返回到上一级目录 使用路径的代码：
<img src = "../目标图片所在的文件夹/目标图片.jpg">
返回一次上层目录使用一次 ../
例入目标文件在当前文件的上三层目录，则要在使用路径前加三个../
../../../目标文件所在的文件夹/目标文件
音频标签
<audio src = "音频文件路径" controls></audio>
属性：
| 属性 | 功能 |
|---|---|
| src | 音频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(部分浏览器不支持) |
| loop | 循环播放 |
注意：目前HTML只支持三种音频格式：mp3、wav、ogg
例如：
<body>
<audio
src="http://m701.music.126.net/20220915004706/ddd5d1e6f42f43cbb095d307e3ea971b/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14096503516/68d0/e4dd/0407/77ef28fb12e677f5b79754c73f73cbd7.mp3"
controls>
</audio>
</body>
浏览器显示效果：
视频标签
<video src = "视频文件路径" controls></video>
属性：
| 属性 | 功能 |
|---|---|
| src | 视频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
| loop | 循环播放 |
注意：HTML目前只支持三种视频格式：mp4、webm、ogg
例如：
<body>
<video
src="https://f.video.weibocdn.com/u0/PMKZle78gx07Z4EAHw3S010412046cfg0E020.mp4?label=mp4_1080p&template=1920x1080.25.0&media_id=4811757949222933&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=2&ot=h&ps=3lckmu&uid=3ZoTIp&ab=,8143-g0,8013-g0,3601-g29,7598-g0&Expires=1663178348&ssig=gopQw3ve0G&KID=unistore,video"
controls>
</video>
</body>
浏览器显示效果：
超链接
又称a标签、锚链接 点击之后，从当前页面跳转到另一个页面
<a href = "跳转的网页地址">超链接</a>
例如：
<a href="https://www.baidu.com">跳转到百度</a>
如果不设置跳转，则可以把链接路径设置为#(空链接) 属性：target
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转(覆盖原网页) |
| _blank | 在新窗口中跳转(保留原网页) |
例如：
<body>
<a href="https://blog.csdn.net/huawuque404" target="_blank">一个超链接</a>
</body>
浏览器显示效果：
列表
无序列表
在网页中表示一组无顺序之分的列表 标签组成：
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序标签的每一项，用于包含每一行的内容 |
列表的每一项前默认显示圆点标识 注意：
- ul标签中只允许包含li标签
- li标签可以包含任何内容
有序列表
在网页中表示一组有顺序之分的列表 标签组成：
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序标签的每一项，用于包含每一行的内容 |
列表的每一项前默认显示序号标识 注意：
- ol标签中只允许包含li标签
- li标签可以包含任何内容
自定义列表
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
dd前会默认显示缩进效果 注意：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
例如：
<body>
<ul>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ul>
<ol>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ol>
<dl>自定义列表的整体
<dt>自定义列表的主题1
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
</dt>
<dt>自定义列表的主题2
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
</dt>
</dl>
</body>
浏览器显示效果：
表格
使用
在网页中以行+列的单元格的方式整齐展示数据 标签：
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
标签的嵌套关系：table>tr>td 属性：
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意：实际开发时针对于样式效果推荐使用CSS设置
术语解释: “CSS” 级联样式表 Cascading Style Sheet
例如：
<body>
<table border="5">
<!-- 第一行 -->
<tr>
<td>第一行</td>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<!-- 第二行 -->
<tr>
<td>第二行</td>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
浏览器显示效果：
表格标题和表头单元
在表格中表示整体大标题和一列小标题 标签：
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意：
- caption标签书写在table标签内部
- th标签书写在tr标签内部(用于替换td标签)
例如：
<body>
<table border="2">
<caption>工资表</caption>
<tr>
<th>员工</th>
<th>工资</th>
</tr>
<tr>
<td>花无缺</td>
<td>花有缺</td>
</tr>
<tr>
<td>50k</td>
<td>60k</td>
</tr>
</table>
</body>
浏览器显示效果：
结构标签
让表格的内容结构分组，突出表格的不同部分，使语义更清晰，利于浏览器的解析与开发人员的维护
| 标签 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意：
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略
例如：
<body>
<table border="1">
<thead>
<tr>
<th>月份</th>
<th>入账</th>
</tr>
</thead>
<tbody>
<tr>
<td>一月</td>
<td>200</td>
</tr>
<tr>
<td>五月</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>三月</td>
<td>180</td>
</tr>
</tfoot>
</table>
</body>
浏览器显示效果：
合并单元格
将水平或垂直的多个单元格合并成一个单元格 合并单元格步骤：
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁，删除谁
- 上下合并->只保留最上的，删除其他
- 左右合并->只保留最左的，删除其他
- 给保留的单元格进行设置：跨行合并或跨列合并
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意： 同一个结构标签中的单元格才能合并，部门跨结构合并(不能跨thead，tbody，tfoot) 例如：
<body>
<table border="1">
<thead>
<tr>
<th colspan="3">嘿嘿</th>
</tr>
</thead>
<tbody>
<tr>
<td>一月</td>
<td>200</td>
<td>14点</td>
</tr>
<tr>
<td>五月</td>
<td>80</td>
<td>4点</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>三月</td>
<td>180</td>
<td>5点</td>
</tr>
</tfoot>
</table>
<br>
<table border="1">
<thead>
<tr>
<th>月份</th>
<th>入账</th>
<th>时间</th>
<th rowspan="3">性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>一月</td>
<td>200</td>
<td>14点</td>
</tr>
<tr>
<td>五月</td>
<td>80</td>
<td>4点</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>三月</td>
<td>180</td>
<td>5点</td>
</tr>
</tfoot>
</table>
</body>
浏览器显示效果：
表单
HTML表单用于搜集不同类型的用户输入 HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
应用场景
登录、注册、搜索、评论
from标签
from标签用来定义HTML表单 例如：
<body>
<form action="">
用户名: <input type="text" name="用户名"><br>
密码: <input type="text" name="密码">
</form
</body>
浏览器显示效果：
input标签
input标签可以根据 type 属性值的不同，展示不同的效果 type属性
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
| input | placeholder | 占位符，提示用户输入内容 |
| input | name | 分组，有相同属性的单选框为一组，一组同时只能有一个被选中 |
| input | checked | 默认选中 |
| input | multiple | 多文件选择 |
按钮-input
在网页中显示不同功能的按钮表单控件 属性：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意：
- 如果需要实现以上按钮功能，需要配合form标签使用
- form使用方法：用form标签把表单标签一起包裹起来即可
- 按钮更改字体使用value属性
按钮-button
在网页中显示用户点击的按钮 type属性值
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意：
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容：文字、图片等
例如：
<body>
<form action="">
用户名: <input type="text" name="用户名" placeholder="请输入你的用户名"><br>
密码: <input type="password" name="密码" placeholder="请输入你的密码">
</form>
<!-- 上传文件 -->
<form action="">
上传文件:<input type="file" name="file"><br>
文件多选：<input type="file" name="file" multiple><br>
<input type="reset">
</form>
<!-- 单选框 -->
<form action="">
<input type="radio" checked>男
<input type="radio">女
</form>
<!-- 多选框 -->
<form action="">
<input type="checkbox">初中
<input type="checkbox">高中
<input type="checkbox" checked>大学<br>
<input type="submit">
</form>
<form action="">
<input type="button">按钮
<button>按钮</button>
</form>
</body>
浏览器显示效果：
Action 属性 action 属性定义在提交表单时执行的动作
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。
Name 属性 如果要正确地被提交，每个输入字段必须设置一个 name 属性。
select下拉菜单标签
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性： selected：下拉菜单的默认选中
例如：
<body>
<form action="">
<select name="" id="">
<option value="hh">贵阳</option>
<option value="hh">昆明</option>
<option value="hh">深圳</option>
</select>
</form>
</body>
浏览器显示效果：
textarea文本域标签
在网页中提供可输入多行文本的表单控件 常见属性：
- cols：规定了文本域可见的宽度
- rows：规定了文本域可见的行数
注意：
- 右下角可以拖拽改变大小
- 实际开发时针对样式效果使用CSS设置
例如：
<body>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
</body>
浏览器显示效果：
datalist标签
datalist 元素为 input 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
input 元素的 list 属性必须引用 datalist 元素的 id 属性。
例如：
<body>
<form action="">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<body>
浏览器显示效果：
label标签
<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 常用于绑定内容与表单标签的关系 使用方法1：
- 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法2：
- 直接使用label标签把内容（如文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
例如：
<body>
<p>点击其中一个文本标签选中选项：</p>
<form action="">
<label for="male">花无缺是帅哥</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">花无缺是大帅哥</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
</body>
浏览器显示效果：
语义化标签
没有语义的布局标签
div标签：一行只显示一个（独占一行） span标签：一行可以显示多个
有语义的布局标签
在HTML5中，推出的一些有语义的局部标签供开发者使用 标签：
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| artcie | 网页文章 |
注意： 以上标签显示特点和div一致，但是比div多了不同的语义
字符实体
在 HTML 中，某些字符是预留的。 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities） 结构：&英文 常用字符实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| 大于号 | > | |
| & | 和号 | & |
| " | 引号 | " |
| ' | 撇号 | ' |
| ¢ | 分(cent) | ¢ |
| ￡ | 镑(pound) | £ |
| € | 欧元(euro) | € |
| ￥ | 元(yen) | ¥ |
| § | 小节 | § |
| © | 版权 | © |
总结
点赞👍
收藏⭐
留言📝
加关注✅
！！！
咱们下次见！我会继续更新好文分享给大家！
转载自:https://juejin.cn/post/7146781297589878797