励志
摘自电影《初恋那点事》
一、什么是 HTML？
HTML 是用来==描述网页的==一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种==标记语言== (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
二、常见的浏览器
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器、QQ浏览器、搜狗浏览器 |
| Firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
| Safari | webkit | 从Safari推出之时起，它的渲染引擎就是Webkit，一提到webkit，首先想到的便是 chrome，可以说，chrome 将Webkit内核 深入人心，殊不知，Webkit 的鼻祖其实是 Safari。 |
| Chrome、Edge | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Opera | blink | 现在跟随chrome用blink内核。 |
三、HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由==尖括号包围==的关键词，比如
- HTML 标签通常是==成对出现==的
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
1、HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是==读取 HTML 文档==，并以网页的形式==显示==出它们。浏览器不会显示 HTML 标签，而是==使用标签来解释==页面的内容
小试牛刀：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>2、HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>3、HTML头部
< head > 元素包含了所有的头部标签元素。在
元素中你可以插入==脚本==（scripts）, ==样式==文件（CSS），及各种==meta信息==。可以添加在头部区域的元素标签为: < title >, < style >, < meta >, < link >, < script >, 和 < base >。
4、HTML < title > 元素
< title > 标签定义了不同文档的标题。
< title > 在 HTML/XHTML 文档中是==必须==的。
< title > 元素:
- 定义了==浏览器工具栏==的标题
- 当网页添加到==收藏夹==时，显示在收藏夹中的标题
- 显示在==搜索引擎结果页面==的标题
5、HTML < base > 元素
< base > 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的==链接标签的默认链接==
6、HTML < link > 元素
< link > 标签定义了==文档与外部资源==之间的关系。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>7、HTML < style > 元素
< style > 标签定义了HTML文档的==样式文件引用地址==
当然也可以直接添加样式来渲染文档，就像这样：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>8、HTML < meta > 元素
meta标签描述了一些基本的==元数据==。
< meta > 标签提供了元数据.元数据也==不显示==在页面上，但会被==浏览器解析==。
META 元素通常用于指定==网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。==
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
< meta > 一般放置于 < head > 区域
为搜索引擎定义关键词:
<meta name="keywords" content="小航，文艺倾年，琴体书卦，就是不会敲代码">为网页定义描述内容:
<meta name="description" content="文艺倾年的博客">定义网页作者:
<meta name="author" content="小航">每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">其他
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
说明：http-equiv传送HTTP通信协议的标头9、HTML < script > 元素
后期JS入门具体讲解
10、基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->11、文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）12、链接（Links）
普通的链接：<a href="http://www.com/">链接文本</a>
图像链接： <a href="http://www.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:111@aa.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>13、图片（Images）
<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">14、样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>15、无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>16、有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>17、定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>18、表格（Tables）
<table border="1">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</tbody>
</table>19、框架（Iframe）
frameLabelStart--frameLabelEnd 20、表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset"> <input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>21、实体（Entities）
< 等同于 <
> 等同于 >
等同于空格四、HTML5 新元素
https://www.runoob.com/html/html-tutorial.html
复习链接
五、小试牛刀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文艺倾年</title>
</head>
<body>
<div>
<div style="background-color:#4DD0E1;">
<h1 style="margin-bottom:0;text-align:center;">文艺倾年</h1>
</div>
<div style="background-color:#1DE9B6;height:200px;width:20%;float:left;">
左边<br/>
</div>
<div style="background-color:#FFFF00;height:200px;width:60%;float:left;">
中间内容
</div>
<div id="right" style="background-color:#1DE9B6;height:200px;width:20%;float:right;">
右边
</div>
<div style="background-color:#F0F8FF;clear:both;text-align:center;">
作者：文艺倾年
</div>
</div>
</body>
</html>
