HTML入门
学习网站：https://www.runoob.com/html/html-tutorial.html
整理知识
文章目录
一 html简介
HTML(HyperText Markup Language,超文本标记语言)是用来描述网页的一种语言。
- HTML不是一种编程语言，而是一种标记语言。
- 标记语言是一套标记标签(markup tag),html使用标记标签来描述网页。
- html文档包含了html标签及文本内容，html文档也叫做web页面。
html标签
html标记标签通常被称为html标签(html tag).
- html标签是由尖括号包围的关键词，比如
- html标签通常是成对出现的，比如
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
使用格式
<标签>内容</标签>
html元素
html标签和html元素通常是同样的意思。但是严格来讲，一个html元素包含了开始标签与结束标签。比如
<p></p>
Web浏览器
Web浏览器(如Google Chrome，Safari，Firefox)是用于读取html文件，并将其作为网页显示。浏览器并不直接显示html的标签，但是可以根据使用的标签决定如何展现html页面的内容。
<!DOCTYPE>声明
声明有助于浏览器正确显示页面。doctype声明不区分大小写，以下方式均可<!DOCTYPE HTML>
<!DOCTYPE html>
<!doctype html>
<!Doctype Html>
中文编码
在浏览器中防止中文乱码，需要在头部将字符声明为 UTF-8 或 GBK。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lsz的网页</title>
</head>
</html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>
解析
<DOCTYPE html>声明为html5文档
<html>元素是html页面的根元素
<head>元素包含了文档的元（meta）数据，如定义网页编码格式为utf-8
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容
<h1>元素定义了一个大标题
<p>元素定义了一个段落
二 html基础
三 html元素
html文档由html元素定义。
html元素语法
- html元素以开始标签起始
- html元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些html元素由于空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数html元素可拥有属性
嵌套的html元素
大多数html元素可以嵌套(html元素可以包含其他html元素)，html文档由相互嵌套的html元素构成。
需要记住的是：尽管有下面的情况：忘记使用结束标签，多数浏览器仍然可以正确地显示html，因为关闭标签是可选的。但是最好写上结束标签，忘记使用结束标签会产生不可预料的结果或错误。
html空元素
没有内容的html元素被称为空元素。空元素是在开始标签中关闭的。< br>就是没有关闭标签的空元素，< br>的作用是换行。在xhmml、xml以及未来版本的html中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如< br />是关闭空元素的正确写法。即使 < br> 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。
html提示：使用小写标签
html标签对大小写不敏感：< br> 等同于 < BR> ，但是W3C在 html4中推荐使用小写。
四 html属性
属性是html元素提供的附加信息。
html属性
- html元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name=" hello"
属性实例
html链接由< a>标签定义。链接的地址在href属性中指定
<a href="www.lishizheng.com"> 说明性文字写在这里</a>
html属性常用引用属性值
属性值始终被包含在引号内。双信号最常用，单引号有时可以使用，在属性值本身就含有双引号时，必须使用单引号。比如
name=' hello "rock" rockman'
html提示：使用小写属性
属性和属性值对大小写不敏感。W3C推荐使用小写的属性/属性值
html属性参考手册
完整的html属性列表请参考菜鸟教程：https://www.runoob.com/tags/html-reference.html
下面给出几个常用的属性
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名(类名从样式文件导入)，用法：class=" 此处可填多个class属性" |
| style | 规定元素的行内样式(inline style) |
| id | 定义元素的唯一id |
五 html标题
标题(heading)是通过< h1> ~< h6>标签进行定义的。其中< h1>定义最大的标题， < h6>定义最小的标题。1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。
<h1>最大的标题</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h6>最小的标题</h6>
显示结果
标题很重要
不要仅仅是为了生成加粗或者大号的文字而使用标题，确保html标题 标签只用于标题。搜索引擎使用标题为网页的结构和内容编制索引。
html水平线
< hr>标签在html页面中创建水平线。hr元素可用于分割内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<p>你说我在干嘛</p>
<hr />
<p>这是一个例子</p>
<hr />
<p>这是没有分割线的例子</p>
<p>这是没有分割线的例子</p>
</body>
</html>
测试结果
html注释
注释的写法如下，左边的尖括号紧跟一个感叹号
<!-- 这里填写注释内容-->
html提示：如何查看源代码
打开一个网页，右键，选择查看源文件(有的浏览器是查看页面源代码)，就会打开一个html代码的页面。
六 html段落
html可以将文档分割为若干段落。使用标签< p>,浏览器会自动地在段落的前后添加空行。（</ p> 是块级元素）
html拆行
在不产生新段落的情况下进行换行使用< br> 标签
html输出
对于html，无法通过在html代码中添加额外的空格或换行改变输出的结果。在显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被当做一个空格。
七 html文本格式化
html格式化标签
html使用标签< b>（加粗bold）与< i>（斜体italic）等对输出的文本进行格式化，这些html标签被称为格式化标签。
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.lishizheng.com</title>
</head>
<body>
<b>这个文本是加粗的</b>
<b> this is bold </b>
<br />
<strong>这个文本是加粗的，着重号strong</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的，符号em</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>
文本格式化测试结果
html计算机输出标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
预格式文本测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.lishizheng.com</title>
</head>
<body>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
请注意：
当使用标签pre的时候，在起始标签和关闭标签之间的格式都被被保留，包括空格和空行
</pre>
</body>
</html>
测试结果
html引文、引用及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目 |
计算机输出标签测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<code>计算机输出：使用标签code</code>
<br />
<kbd>键盘输入：使用标签kbd</kbd>
<br />
<tt>打字机文本：使用标签tt</tt>
<br />
<samp>计算机代码样本：使用标签samp</samp>
<br />
<var>计算机变量：使用标签bar</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
</body>
</html>
测试结果
地址测试代码
标签< address>< /address>的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<address>
Written by <a href="mailto:[email protected]">Shi zheng</a>.<br>
Visit us at:<br/>
@gmail.com<br/>
jungong road YangpuDistrict<br>
Shanghai
</address>
</body>
</html>
测试结果
文字方向测试代码
标签< bdo>< /bdo>的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>
<p><bdo dir="rtl">这是一句神奇的话</bdo></p>
</body>
</html>
测试结果
块引用测试代码
标签< q> < /q>的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>WWF's goal is to: <br/>
<q>Build a future where people live in harmony with nature.</q><br/>
We hope they succeed.</p>
<p>下面是lishizheng的话：</p><br/>
<q>专心做好每一件事，善始善终。</q>
<p>标签q的作用是引用，也就是添加引号</p>
</body>
</html>
测试结果
删除字效果和插入字效果测试代码
标签< del> 和标签< ins>的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<b>这句话的<del>你好</del>效果是</b>
</body>
</html>
测试结果
八 html链接
html使用超链接与网络上的另一个文档相连。点击链接可以从一张页面跳转到另一张页面。
html超链接
html使用标签< a>来设置超链接。超链接可以是一个字，一幅图像，您可以点击这些内容跳转到新的文档或跳转到当前文档中的一部分。当把鼠标指针移动到网页上的某个链接时，箭头会变为一只小手。
在标签< a>中使用href属性来描述链接的地址，默认情况下，链接将以下面的形式出现在浏览器中(在没有设置CSS样式时，如果设置CSS样式会改变)
- 一个未访问过的链接：显示蓝色字体并带有下划线
- 访问过的链接：显示为紫色并带有下划线
- 点击链接时：链接显示为红色并带有下划线
使用图片作为超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>
测试结果
html链接语法
<a href="url">链接文本</a>
其中href属性描述了链接的目标，链接文本不一定是文本，图片或者其他html元素都可以成为链接。
实例
<a href="https://www.lishizheng.com">访问不存在的网页</a>
html链接-target属性
使用target属性，可以定义被链接的文档在何处显示。属性设置为_blank表示在新窗口打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="https://blog.csdn.net/shizheng_li?t=1" target="_blank">访问笔者cdsn博客!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>
测试结果
html-id属性
id属性可用于创建一个在html文档书签标记，书签是不以任何特殊的方式显示，在html文档中是不显示的。
九 html<head>
html<head>元素
<head>元素包含了所有头部标签元素，在<head>元素中可以插入脚本(scripts)、样式文件(CSS)各种meta信息。可以添加在头部区域的元素标签为
<title>,<style>,<meta>,<link>,<script>,<noscript>,<base>
html<title>元素
<title>标签定义了不同文档的标题，<title>在html/xhtml文档中是必须的。
| <title> |
|---|
| 定义了浏览器工具栏的标题 |
| 当网页添加到收藏夹时，显示在收藏夹中的标题 |
| 显示在搜索引擎结果页面的标题 |
html<link>元素
<link>标签定义了文档与外部资源之间的关系，<link>标签通常用于链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
html<style>元素
<style>标签定义了html文档的样式文件的引用文件，在<style>元素中可以直接添加样式来渲染html文档
<head>
<style type="text/css">
body{background-color:yellow}
p{color:blue}
</style>
</head>
html<meta>元素
<meta>标签描述了一些基本的元数据。 元数据不显示在页面上，但会被浏览器解析，meta元素通常用于指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据。元数据也可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。<meta>一般用于<head>区域
<meta>标签使用实例
为搜索引擎定义关键词
<meta name="keywords" content=" html,css,xml, xhtml, javascript,">
为网页定义描述内容
<meta name="description" content="免费 web & 编程">
定义网页作者
<meta name="author" content="lishizheng">
每30s刷新当前页面
<meta http-equiv="refresh" content="30">
html <script>元素
<script>标签用于加载脚本文件，如javascript，将在后面介绍
十 html样式-css
CSS(Cascading Style Sheets)用于渲染html元素标签的样式。
如何使用css
css是在html4开始使用的，是为了更好地渲染html元素。css可以通过以下元素添加到html中
- 内联样式：在html元素中使用style属性
- 内部样式表：在html文档头部head区域使用style元素来包含css
- 外部引用：使用外部css文件
最好的方式是通过外部引用css文件。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关标签中使用样式属性。样式属性可以包含任何css属性。
<p style="color: blue; margin-left: 20px;">这是一个段落</p>
html样式实例-背景颜色
背景色属性（background-color）定义一个元素的背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shizheng</title>
</head>
<body style="background-color:blue;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
<div style="background-color: yellow;">你好</div>
</body>
</html>
测试结果
html样式实例-字体
可以使用字体（font-family），字体颜色（color）和字体大小（font-size）属性来定义字体的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shizheng</title>
</head>
<body>
<h1 style="font-family:verdana; font-size: 40px;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>
</html>
测试结果
html样式实例-文本对齐方式
使用文本对齐（text-align）属性指定文本的水平于垂直对齐方式，文本对齐属性 text-align取代了旧标签 <center> 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shizheng</title>
</head>
<body>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p style="text-align:right;">作者的位置。</p>
<div style="text-align:center; color:green;font-size: 20px;">听说这是一个好位置</div>
</body>
</html>
测试结果
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。可以在head部分通过style标签定义内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p{color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表可以提供帮助。使用外部样式表，可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
已弃用的标签和属性
在html4，原来支持定义html元素样式的标签和属性已被弃用。不建议使用的标签有：<font>,<center>,<strike>，不建议使用的属性有：color和bgcolor
十一 html图像
图像标签和源属性
在html中，图像由<img>标签定义。<img>是空标签，只包含属性，没有闭合标签，要在页面上显示图像，需要使用源属性src，该值是图像的URL地址。
定义图像的语法是
<img src="url" alt="some_text">
浏览器将图像显示在文档中图像标签出现的地方。
alt属性
alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，此时浏览器将显示替代文本，替换文本属性告诉读者此处失去的信息。
设置图像的高度与宽度
高度（height）与宽度（width）属性用于设置图像的高度与宽度。属性默认单位是像素。指定图像的高度和宽度是一个好习惯，如果没有指定图片的大小，加载页面时有可能会破坏html页面的整体布局。
<img src="url" alt="content of picture" ,width="300" ,height="200">
设置图像链接实例
先使用/标签，然后使用<img>标签即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>
测试结果
自己写的测试
<doctype html>
<html>
<meta charset="utf-8">
<head>
<title>lishizheng的页面</title>
</head>
<body>
<a href="https://blog.csdn.net/shizheng_Li">
<img id="img2" src="D:\\user\\下载\\java-logo.jpg" width="200" height="200"> </a>
<img id="img3" src="D:\\user\\下载\\OpenCV_Logo_with_text.png" width="200" height="200">
<img id="img4" src="D:\\user\\下载\\MySQL-Logo.png" width="200" height="200">
<img id="img5" src="D:\\user\\下载\\ml-图片.jpg" width="200" height="200">
</body>
</html>
点击Java的logo实现跳转
创建图像映射实例
<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>
该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
十二 html表格
表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
表格使用
<doctype html>
<html>
<meta charset="utf-8">
<head>
<title>lishizheng的页面</title>
</head>
<body>
<!--
<a href="https://blog.csdn.net/shizheng_Li">
<img id="img2" src="D:\\user\\下载\\java-logo.jpg" width="200" height="200"> </a>
<img id="img3" src="D:\\user\\下载\\OpenCV_Logo_with_text.png" width="200" height="200">
<img id="img4" src="D:\\user\\下载\\MySQL-Logo.png" width="200" height="200">
<img id="img5" src="D:\\user\\下载\\ml-图片.jpg" width="200" height="200">
-->
<table border="1">
<tr>
<td> <img id="img2" src="D:\\user\\下载\\java-logo.jpg" width="200" height="200"></td>
<td>这是第二列</td>
<td> <img id="img3" src="D:\\user\\下载\\OpenCV_Logo_with_text.png" width="200" height="200"></td>
</tr>
<tr>
<td>这是第一列</td><td>这是第二列</td><td>这是第三列</td>
</tr>
<tr>
<td>这是第一列</td><td>这是第二列</td><td>这是第三列</td>
</tr>
<tr>
<td> <img id="img2" src="D:\\user\\下载\\java-logo.jpg" width="200" height="200"></td>
<td>这是第二列</td>
<td> <img id="img3" src="D:\\user\\下载\\OpenCV_Logo_with_text.png" width="200" height="200"></td>
</tr>
</table>
</body>
</html>
测试结果
十三 html列表
html支持有序、无序和自定义列表
列表标签
| 标签 | 解释 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 自定义列表 |
| <dt> | 自定义列表项 |
| <dd> | 自定义列表项的描述 |
无序列表
使用<ul>标签，每个列表项使用<li>标签
<ul>
<li>coffee</li>
<li>milk</li>
<li>juice</li>
</ul>
有序列表
使用标签<ol>,每个列表项使用<li>标签
<ol>
<li>english</li>
<li>math</li>
<li>cs</li>
<li>politics</li>
</ol>
两个测试用例
自定义列表
自定义列表以<dl>开始，每个列表项以<dt>开始，列表项的定义以<dd>开始
<dl>
<dt>what</dt>
<dd> -running</dd>
<dt>how</dt>
<dd>-jogging</dd>
<dt>where</dt>
<dd>-park</dd>
<dt>when</dt>
<dd>-evening</dd>
<dt>who</dt>
<dd>-lishizheng</dd>
</dl>
测试结果
不同类型的无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
测试结果
十四 html区块
html通过<div>和<span>将元素组合起来。 大多数html元素被定义为块级元素或内联元素。
块级元素在浏览器中显示时，通常会以新行开始（和结束）。举例：<h1>,<p>,<ul>,<table>
内联元素在显示时通常不会以新行开始。举 例：<b>,<td>,<a>,<img>
html<div>元素
<div>元素是块级元素，它可用于组合其他html元素的容器，它没有特定的含义。如果与css一同使用，<div>元素可用于对大的内容块设置样式属性，同时它可以用来进行文档布局。
html<span>元素
<span>元素是内联元素，可用作文本的容器，也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。