何为HTML
HTML称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言而非编程语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML是一套标记标签（Markup Tag），使用标记标签来描述网页。HTML 文档包含 HTML 标签和纯文本，而HTML 文档也被称为网页。Web 浏览器读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
HTML标签
- HTML标签是被尖括号包为的关键词，例如<p>,</p>。
- HTML标签通常成对出现，第一个标签为开始标签\开放标签，第二个标签为结束标签\闭合标签。
- 对于HTML标签，最好都使用小写。
HTML元素
- HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML文档由HTML元素定义。
- 某些HTML元素具有空内容。例如
<br \> - 大多数HTML元素拥有属性。
- HTML元素可以嵌套。例如对于下面的HTML文档
<html> //<html>元素 定义了整个HTML文档
<body> //<body>元素 定义HTML文档的主体
<p>This is my first paragraph.</p> //<p>元素 定义一个段落
</body> //<body>元素 结束标签
</html> //<html>元素 结束标签
HTML属性
- HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性总是以名称/值对的形式出现，比如：name="value"。
- 属性总是在 HTML 元素的开始标签中规定。
<h1 align="center">标题居中</h1>
<body bgcolor="yellow">
<h2>将背景改为黄色</h2>
</body>
<a href="http://www.baidu.com">超链接</a>
HTML文档相关标签
- 利用vscode自动生成html框架会有以下内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--必须写-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
- DOCTYPE标签放在html文档第一行，指明html文档的类型。
- lang属性指明文档使用语言，但是lang="en"不代表只能使用英文，只是说明该文档为英文文档。
- charset指明使用的字符集编码，最好使用UTF-8。
HTML标题
- 通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题，<h6> 定义最小的标题。
- 浏览器会自动地在标题的前后添加空行。
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
标题1
标题2
标题3
HTML段落
- HTML段落通过
<p>定义。 - 浏览器会自动地在段落的前后添加空行。
- 若想在不产生一个新段落的情况下进行换行（新行），可以利用<br />标签。
<p>这是段落1</p>
<p>这是段落2<br \>这是同一段落2的另一行</p>
这是段落1
这是段落2
这是同一段落2的另一行
HTML样式
- 在HTML元素中利用style来改变HTML元素的样式.style提供了一种改变所有HTML元素的样式的通用方法。
<html>
<body style="background-color:yellow"> //设置body背景为黄色
<h1 style="font-family:verdana">这是标题</h1> //设置标题字体
<p style="font-family:arial;color:red;font-size:20px;">这是段落</p> //设置段落颜色、字体及大小
</body>
</html>
实现效果
HTML注释
- 注释标签 <!-- 与 --> 用于在 HTML 插入注释。
<!-- 这是一段注释 -->
<p>这是一个段落。</p>
<!-- 这也是一段注释 -->
这是一个段落。
HTML引用
- HTML利用
<q>定义短的引用。 - HTML利用
<blockquote>定义长的引用。 - HTML利用
<abbr>定义缩写或首字母缩略语。 - HTML利用
<address>元素定义文档或文章的联系信息（作者/拥有者）。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
<p>短引用:<q>引用内容1</q></p>
<p>长引用:</p>
<blockquote >
引用内容2
</blockquote>
<p><abbr title="浮动字体">缩写</abbr> 成立于 1948 年。</p>
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
短引用:引用内容1
长引用:
引用内容2
缩写
Written by Donald Duck.Visit us at:
Example.com
Box 564, Disneyland
USA
HTML CSS
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
- 外部样式表:使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">//link定义资源引用
</head>
- 内部样式表:单个文件需要特别样式时，就可以使用内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 内联样式:当特殊的样式需要应用到个别元素时，就可以使用内联样式。上面的样式都是内联样式。
<p style="color: red; margin-left: 20px">
这是一个段落
</p>
HTML链接
- 通过使用
<a>来在HTML中创建链接，链接中必须有href属性，指明跳转的目标 - 使用target属性可以定义打开方式，_blank为在新窗口中打开页面,默认值_self为当前窗口打开页面
- href="#"为空链接
- 在网页中的各种网页元素，例如文本、图像、表格、音频、视频都可以添加超链接
<a href ="https://www.baidu.com/">点击我跳转页面</a>
<a href ="https://www.baidu.com/" target="_blank">点击我跳转页面</a>
<a href ="https://www.baidu.com/" target="_blank"><img src = 'https://external-30160.picsz.qpic.cn/8ba5a9d452103bb93333dd21a1f351a5' title="点击我跳转页面"/><a> //为图片添加超链接
- 可以利用name属性在HTML页面中创建书签，可以直接创建跳转该标签的链接，就不用滚动页面了。将 # + 标签名添加到URL的末端，就可以直接链接到这个标签上。
<a hrel ="#tips">Click me!</a>
<a name ="tips"> Jump here!</a>
HTML图像
- 利用
<img src="url" />添加图像 - 利用alt属性来定义可替换文本属性,即图像无法显示时的替换文本
- 利用title属性来定义提示文本属性，将鼠标移至图像上后会显示提示文本
- 利用width和height属性设定图像宽度和高度,若只选择其中一个属性进行修改则另一属性会等比例缩放
<img src = 'https://external-30160.picsz.qpic.cn/8ba5a9d452103bb93333dd21a1f351a5' title="提示文本"/>
<img src = '111' alt="可替换文本"/>
<img src = 'https://external-30160.picsz.qpic.cn/8ba5a9d452103bb93333dd21a1f351a5' width=200 height =100>
