本文介绍了HTML的基础知识，包括HTML的定义、作用、版本和扩展名。详细讲解了HTML文档的基本结构，如HTML标签的组成、分类，以及常见的基本标签如列表、表格、表单等。此外，还介绍了超链接、锚点和多媒体标签的使用，以及HTML5的新特性。
HTML ,
一、HTML 简介
1.HTML是什么
HTML : Hyper Text Markup Language超文本标记（标签）语言
各种标签组成 ，用来制作网页 ，告知浏览器该如何显示页面
2.作用
- 制作网页 ，控制网页和内容的显示
- 插入图片 、音乐 、视频 、动画等多媒体
- 通过链接检索信息
- 使用表单获取用户的数据 ，实现交互
3.版本
W3C : World Wide Web Consortium互联网联盟 ，制定web技术的相关标准和规范的组织 ，HTML就是由W3C制定的标准
有两个版本 ：HTML 4.0.1 和 HTML 5.0-----统称H5
官网 ：https://www.w3cschool.com.cn
4.扩展名
HTML 文件的扩展名是以.html 或 .htm结尾的
eg：hello.html
二、HTML文档的结构
1.基本结构
1.1 简介
- html标签是由尖括号括住的关键词，如，通常标签都是成对出现的。
- 以为根标签 ，包含头部和主题部分
- 头部提供关于网页的相关信息 ， 如标题 、文档类型 、字符编码 、关键词等摘要信息
- 主体部分提供网页要显示的内容 ，真正显示页面中的
- 合理的缩进
- 标签名不区分大小写 ，但一般用小写
1.2 开发工具
记事本 notepad，sublime，notepad++ ，Dreamweaver，VScode，Webstorm等
使用步骤：
1.新建文件（ctrl+N），然后保存（ctrl+N），指定扩展名 .html
2.编写html代码
3.在浏览器中打开文件进行验证效果
1.3 浏览器
- 常见的浏览器IE微软，chrome谷歌，Firefox火狐，safari苹果
- 浏览器的作用 ：读取html文件，并以网页的形式进行显示
- 浏览器不会直接显示html标签 ，而是使用标签来解释网页的内容
01.第一个html文件.html
<!DOCTYPE html>
<html>
<head>
<title>第一个HTML文件</title>
<meta charset="utf-8">
</head>
<body>
欢迎学习HTML
</body>
</html>
2.标签
2.1标签的组成
一个完整的html标签的组成：
<标签名 属性名="属性值">内容</标签名>属性值要使用引号引起来，一般使用双引号
2.2标签的分类
根据标签是否关闭，分为 ： 关闭型和非关闭型
- 关闭型：有开始标签，也有结束标签，一般是成对出现的
1 <title>标题</title>
2 <body>主体</body>
3 <h1>一级标题</h1>
- 非关闭型：只有开始标签，没有结束标签
1 <meta>
2 <br>
3 <hr>
根据标签是否独占一行，分为：块级标签和行级标签
- 块级标签：显示为块状，独占一行
1 <h1></h1>
2 <hr>
- 行级标签：
<span></span>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qlFpg3xd-1593398412055)(C:\Users\DELL\AppData\Local\Temp\1582247397065.png)]
02.标签.html
<html>
<head>
<title>标签的组成</title>
<meta charset="utf-8">
</head>
<body bgcolor = "yellow" text="red">
标签的组成
<hr>
HTML从入门到精通
<hr>
<h1>html,简介，观众：xxx</h1>
<hr>
<h2>二级标题</h2>
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
2.3注释
注释在浏览器中不会显示，是用来标注解释html语句，但通过查看源代码可以看到
1 <!--注释内容--->
03.注释.html
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--这是我们第一个html注释-->
图书:<<HTML从入门到精通>>
<hr>
北京 上海 广州
<hr>
在html中用&lt;表示<小于号
<hr>
"HTML语言" 或者 "HTML语言&quop;
<hr>
版权所有 © 2000-2020 高教培训
<hr>
®
<hr>
×关闭符号
<hr>
&aMp; 实体字符名称是区分大小写，大小写就敏感
</body>
</html>
04. hello.html
<!DOCTYPE html>
<html>
<body>
<title>html技术</title>
</body>
<body>
大家好，欢迎学习html网页技术！
</body>
</html
2.4实体字符
实体字符也称为特殊字符，用于显示一些特殊字符；如< > & 空格等
语法：
&实体字符的名称;
常用实体字符；
1 < < 小于号 less than
2 > > 大于号 great than
3 nbsp; 空格 space在html中对于连续的空白字符（空格、缩进、换行等），在浏览器中显示时只能显示为一 个空格
4 & & 与
5 " " 双撇号
6 © 版权符号 copyright
7 ® 注册符号 register
8 × 关闭符号
注意：实体字符是严格区分大小写，即大小写敏感
2.5文档类型
在HTML文档的第一行，使用声明html文档的类型
用来告诉浏览器页面的html文档类型，简单来说，用来指定使用的html版本规范
目前基本上都使用的是html5，
0.5 word.html
<html>
<head>
<title>HTML，学习</title>
<meta charset = "utf-8">
</head>
<body>
welcome to html ！
</body>
</html>
0.6 hello.html
<!DOCTYPE html>
<html>
<head>
<title>学习HTML从入门到精通</title>
</head>
<body>
welcome to hello word!
</body>
</html>
三、常用标签
1.基本标签
| 标签 | 含义 | 说明 |
|---|---|---|
| br | 换行标签 | 非关闭型标签 |
| p | 段落标签 | 关闭型标签，块级标签，前后段落 |
| h1、h2、h3…h6 | 标题标签 | 按照h1到h6逐渐变小，块级标签，并且文本会加粗显示 |
| pre | 预格式化标签 | 保留编码时的格式 |
| div | 分区标签 | 常用容器来使用，一般用于页面布局划分，块级标签 |
| span | 范围标签 | 默认情况下没有任何效果，一般用来设置行内的特殊格式 |
| ol、li | 有序列表 | 有顺序的项目列表 |
| ul、li | 无序列表 | 无顺序的项目列表 |
| dl、dt、dd | 定义列表 | 对术语、图片等进行描述和定义的列表 |
| hr | 水平线标签 | 非关闭性标签，块级标签 |
| lmg | 图像标签 | 非关闭型标签 |
1.1有序列表
ol：ordered list
li：list item
默认情况下使用阿拉伯数字，从1开始标记，可以通过属性进行修改
-
type属性：设置列表前的符号标记，取值，数字1（默认），字母a或A，罗马数字1或i
-
start属性：设置起始值，但必须是数字
1.2无序列表
ul：unodered list
li：list item
默认使用实心圆作为标记符号，可以通过属性进行修改
type属性：设置列表前的标记符号，取值；disc实心圆（默认）、circle空心圆、square正方形，none不显示符号
1.3定义列表
dl：definition list
dt：definition title
dd：definition description
1.4水平线标签
hr：horizontal
常用的属性：
-
color颜色
两种颜色
颜色名称：blue、green、white、orange、red、pink等
16进制的RGB：Red、Green、Blue 用法：#RRBGGBB 每种颜色是取值范围0-256，转换为16进制00-FF
eg：#FF0000红色、#00FF00绿色、#0000FF蓝色、#0000黑色、#CCCCCC灰色、#FF7300橙色
-
size：粗细、数值
-
width宽度
两种写法：
像素，绝对值（固定值）
百分比：相对值，相对于
-
align对齐
取值：默认center居中 left right
0.7 常用标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doctype</title>
</head>
<body>
hello wolde
<br>
welcome to html!
<p>
超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
</p>
<p>
超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
</p>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
</body>
</html>
h1~h6逐渐变小，块级标签
0.8 标签2.html
<!DOCTYPE html>
<html lang ="en">
<head>
<<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<pre>
html从入门到精通
主讲：hector
</pre>
<hr>
<div style="width:400px;height:100px;background:red">导航部分</div>
<div style="width:400px;height:500px;background:yellow">正文部分</div>
<div style="width:400px;height:100px;background:blue">版权部分</div>
<hr>
iphone XR,不要8888,不要1888，只要<span style="font-size:50px;color:red">98元</span>
</body>
</html>
要突出最后的价格
09. 常用标签1.html
<!DOCTYPE html>
<html>
<<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<li>吃鸡</li>
<li>王者荣耀</li>
<li>LOL</li>
<li>WOW</li>
<hr>
<h3>可爱的同学</h3>
<ul type="circle">
<li>张三</li>
</ul>
<hr>
<h3>术语的解释</h3>
<dl>
<dt>LOL</dt>
<dd>他是腾讯公司代理的一款网络游戏，中文名叫英雄联盟</dd>
<dd>她可以分为PC端和移动端</dd>
<dt>HTML</dt>
<dd>是一种用来制作网页的标记语言</dd>
<dt>JAVA</dt>
<dd>是一种跨平台的编程语言</dd>
</dl>
</body>
</html>
10. 常用标签2.html
<!DOCTYPE html>
<<!DOCTYPE html>
<html>
<head>
<meta zharset="UTF-8">
<title>D ocument</title>
</head>
<body>
<hr color="#FF7300">
<hr size="8px" color="green">
<hr color="red" widtn="400px">
<hr color="yellow" width="50%" size=10>
<div style="width:600px;height:300px;background:#CCCCCC">
<hr color="red" eidth="50%" align="right">
</div>
</body>
</html>
11.常用标签2.html
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UFT-8" >
<title>docutype</title>
</head>
<body>
<img src="../image/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物，它的名字叫企鹅">
<hr>
<img src="../imagr/mac.jpg" width="400px" height="100px">
<hr>
<img src="../image/mac.jpg" width="50%">
<hr>
<div sytle="width=800px;height:800px;background:red;">
<img src="../image/mac.jpg" width="50%">
</div>
</body>
</html>
12.其他标签1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <i>to</i> html!
<hr>
welcome <em>to</em> html!
<hr>
welcome to <address>上海市南京东路</address>
<hr>
HTML从<<b>入门</b>到精通！
<hr>
<hr>
原价：188元，优惠价 <span style="font-size: 40px;color:red">98元</span>
<br>
观众：<ins>学生</ins>
<hr>
水的分子表达式：H<sub>2</sub>O
<br>
2<sub>3</sub>=8
<hr>
<bdo dir="rtl">welcome to html</bdo>
<hr>
<bdo dir="rtl">上海自来水来自海上</bdo>
<br>
<abbr title="Hyoer Text Language">HTML</abbr>
<hr>
<span title="Hyoer Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通
<br>
HTML从<big>入门</big>到精通
</body>
</html>
welcome to html!
welcome to 上海市南京东路
HTML从< 入门到精通！
<hr>
原价：188元，优惠价 <span style="font-size: 40px;color:red">98元</span>
<br>
观众：<ins>学生</ins>
<hr>
水的分子表达式：H<sub>2</sub>O
<br>
2<sub>3</sub>=8
<hr>
<bdo dir="rtl">welcome to html</bdo>
<hr>
<bdo dir="rtl">上海自来水来自海上</bdo>
<br>
<abbr title="Hyoer Text Language">HTML</abbr>
<hr>
<span title="Hyoer Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通
<br>
HTML从<big>入门</big>到精通
-
2.其他标签
标签 含义 说明 i 斜体 italic em 强调的内容 在浏览器中显示一般为斜体 address 地址 在浏览器中显示一般为斜体，块级标签 b 加粗 bold strong 强调的内容 在浏览器中显示时一般为加粗 del 删除线 delete ins 下划线 sub 下标 sup 上标 bdo 设置文本的方向 通过属性 dir=“ltr”（left to right）“rtl”（right to left）从右到左 abbr 设置文字缩写 通过title属性设置当前鼠标停留在文字上时显示的提示信息 small 相对于当前其他文字的字号减小一号 big 相对于当前其他文字的字号增大一号
为了更好的语义化
3.头部标签
-
meta定义网页的摘要信息，如字符条码，关键字，描述，作者等信息
-
title定义网页的标题
-
style定义网页内部的css样式
-
link引用外部的css样式
-
script定义或引用脚本
-
base定义基础路径
默认以当前页面文件的所在位置为相对路径的参照
13.头部标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 seo网站优化 -->
<mata name="keywords" comtent="it教育，Java开发，web前端...">
<!--设置网页的描述-->
<mata name="description" comtent="">
<!--设置网站的作者-->
<mata name="author" content="hector">
<!-- 设置网站的跳转-->
<!-- <mata http-equiv="refresh" content="2;url-https://www.baidu.com"> -->
<title>Document</title>
<style>
body{
color:red;
}
</style>
<!-- 引用外部的css样式 -->
<link rel="stylesheet" href="CSS文件的路径">
<!-- 定义或引用脚本文件 -->
<!--script>
alert("哈哈");
</script-->
<!--定义基础路径 -->
<base href="../image/">
</head>
<body>
IT教育，全国计算机等级考试-heocer
<img src="../image/heihei.gif" alt="">
<hr>
<img src="qq.jpg" alt="">
</body>
</html>
4.标签嵌套
一个标签中嵌套另一个标签
标签不能乱嵌套，如以下标签的嵌套是错误的
浏览器渲染后显示的页面代码与编码时有所不同
chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的
如何打开：
- 在页面中右键单击–>检查/审查元素/查看元素
- 按F12
常用工具：
- Elements:从浏览器的角度来看页面，浏览器渲染页面时的结构
- console:控制台，显示各种警告和错误信息
- network:查看网络请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间
14.标签的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert("嘿嘿!")
</script>
</head>
<body>
<div style="width:200px;height:200px;background:red">
<p>
hello
</p>
</div>
<p style="width:300px;height:300px;background:green">
<div style="width:200px;height:200px;background:blue">
hello
</div>
</p>
</body>
</html>
四.超链接
1.简介
使用超链接可以从一个页面跳转到另一个页面，实现页面之间的跳转
当鼠标移动超链接文本上时，鼠标箭头会变成一只手
超链接有三种类型：
- 普通链接/页面间链接：跳转到另一个页面
- 锚链接：跳转到锚点（同一个页面的某个位置）
- 功能链接：实现特殊功能（发邮件，下载）
2.基本简介
使用标签创建超链接
语法模式:
1 <a href="链接地址" target="链接打开的位置">连接文本或图像</a>常见属性
hre链接地址或路径:链接地址
target链接打开的位置，取值：
1 _self自身，当前，默认值 _blank空白、新的页面 _parent父层框架 _top顶层框架 自定义路径分类：
- 相对路径
相对于当页面所在的路径为参照,不是以根开始的
./ 当前路径
…/ 表示上级路径
- 绝对路径:
以根开始的路径
file:///D:/software/b.html
https://www.baidu.com
15.超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.baidu.com" target="blank">百度</a>
<hr>
<a href="d:/各种东西/b.html">b</a>
<br>
<a href="./c.html">c</a>
<!-- ./表示当前路径 -->
<br>
<a href="../d.html">d</a>
<br>
<a href="../../f.html">f</a>
</body>
</html>
3.锚链接
3.1 简介
点击链接后跳转到页面的指定位置（锚点anchor）
锚链接的分类
- 页面内的锚链接
- 页面间的锚链接
16.锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="16锚链接.html#first">简介</a></li>
<li><a href="16锚链接.html#second">HTML版本</a></li>
<li><a href="16锚链接.html#three">特点</a></li>
<li><a href="16锚链接.html#four">编辑方式</a></li>
<li><a href="16锚链接.html#five">整体结构</a></li>
<li><a href="16锚链接.html#six">相关要求</a></li>
</ol>
<p>
<a href="first">简介</a>
</p >
<P>
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
</p >
<p>
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
</P>
<p><a name="second" >HTML版本</ a></p >
<p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
</p >
<p>HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br>
③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>
④HTML 4.0：1997年12月18日，W3C推荐标准。<br>
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br>
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等
最低0.47元/天 解锁文章
扫一扫
1090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
