第一天 HTML简介及常用标签（文本标签）
- 一、 HTML简介
-
- 1. 什么是HTML
- 2. HTML的编写工具
- 3. HTML的文档结构
- 4. W3C标准
- 二、HTML中的常用标签
-
- （一）. head标签
-
- 1. head中的常用标签
-
- ①meat标签
- ② title标签
- ③link标签
- ④script标签（网页的行为）
- ⑤style标签（网页的表现）
- （二）. body标签
-
- 1. body中的常用标签（文本标签）
-
- ① 段落标签
- ② 标题标签
- ③ 格式化标签
- ④ 其它标签
- 三、源代码
- 四、运行效果
一、 HTML简介
1. 什么是HTML
HTML:超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 由浏览器负责解析执行
超文本： 指不仅仅可以表示文本，还超出了文本的范围，还可以显示图片，音频和视频，超链接等等。
2. HTML的编写工具
记事本（不推荐，开发效率低）
Notepad++
HBuilder（推荐，开发效率高）
3. HTML的文档结构
根标签
<html></html>
告诉浏览器从这里开始解析
头部标签
<head></head>
浏览器和搜索引擎需要的相关信息
主体标签
<body></body>
显示内容
根标签下有且仅有头部与主体两个标签
以下是符合**“W3C”标准**的HTML文档结构
4. W3C标准
万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）
结构的标准语言是HTML，XML
表现的标准语言是CSS
行为的标准语言是ECMAScript
二、HTML中的常用标签
（一）. head标签
head标签内的内容主要提供给浏览器和搜索引擎使用，不显示在浏览器中，用户无法看见！
1. head中的常用标签
①meat标签
<meat charset="utf-8" />编码格式标签，告诉浏览器网页的编码格式(不告诉浏览器编码格式，有可能导致乱码)
<meat name="keywords" content=“北京尚学堂，···”/> “keywords”关键字标签，搜索引擎检索网页时用到。各关键字以逗号分割。
<meta name="description" content="淘宝网- 亚洲较大的网上交易平台···"/>“description”网页描述标签。一般用来描述网页或者网站内容！
② title标签
显示网页标题
<title>我的第一个网页</title>网页标题标签 用于显示当前网页名称，显示在浏览器标签栏
③link标签
链接外部资源（包括网上资源和本地资源）
一般链接CSS文件和Script文件，以及项目中的其它资源
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon">
将百度网页标题的图标拿来作为自己网页标题图标（链接外部资源）
<link rel="shortcut icon" href="img/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon">
使用img文件夹下的favicon.ico文件作为自己网页标题图标（链接内部资源）
④script标签（网页的行为）
网页与人机交互或弹出效果等的实现
<script>
function test(){
alert("你好,世界")
}
</script>
弹窗效果
⑤style标签（网页的表现）
调控网页的显示样式，让网页更美观
<style>
body{background: blue;}
</style>
将网页背景设置为蓝色
（二）. body标签
body标签中的内容是浏览器显示给用户看的。
1. body中的常用标签（文本标签）
① 段落标签
常用于标记整段文字
<p>这是一个段落 </p> 特点是独占一行，一行放不下，自动换行 ,默认字体大小
② 标题标签
常用于文章标题
<h1></h1>·····<h6></h6>特点：独占一行，字体加粗，字体由h1最大到h6最小
③ 格式化标签
加粗、倾斜、上标、下标、预格式文本等等
<b>文字</b>加粗 （现推荐使用<strong>文字</strong>效果一样）
<i>文字</i>倾斜 （现推荐使用<em>文字</em>效果一样）
<sub>文字</sub>上标
<sup>文字</sup>下标
<del>文字</del>删除线
<ins>文字</ins>下划线（常与del标签一起使用，表示更正）
<pre>代码</pre>预格式文本（常用于显示计算机代码）
④ 其它标签
<br />换行
  空格
三、源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个网页</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon"/>
<link rel="shortcut icon" href="img/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon"/>
<meta name = "keywords" content = "谷歌一下"/>
</head>
<script>
function test(){
alert("你好,世界")
}
</script>
<style>
body{background: beige;}
</style>
<body onload="test()">
<h1><b>天道酬勤</b>(一级标签)</h1>
<h2>双氧水分解反应（二级标签）</h2>
<p>
2H<sub>2</sub>O<sub>2</sub>=2H<sub>2</sub>O+O<sub>2</sub>
</p>
<h3>平方差公式(三级标签)</h3>
<p>
<del>(a-b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></del><br />
<ins>(a-b)<sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup></ins>
</p>
<h4>无题<sub> 李商隐 </sub>(四级标签)</h4>
<p>
<b>相见时难别亦难，<i>东风无力百花残。</i></b> <br />
<strong>春蚕到死丝方尽，<em>蜡炬成灰泪始干。</em></strong> <br />
<b>晓镜但愁云鬓改，<em>夜吟应觉月光寒。</em></b> <br />
<strong>蓬山此去无多路，<i>青鸟殷勤为探看。</i></strong> <br />
</p>
<h5>Java Code(五级标题)</h5>
<p>
<pre>
public class HelloWorld{
public static void main(String[] args){
System.out.println("Hello World!");
}
}
</pre>
</p>
</body>
</html>
四、运行效果