标题# # HTML5 +CSS Note**
HTML5的简述
什么是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 元素包含了开始标签与结束标签，如下实例:
HTML 的基本组成元素：
<!DOCTYPE html> <!---声明为HTML5文档
<html> --->
<head>
<meta charset="UTF-8">
<title> <!---头部元素--->
页面标题</title>（ sth~~~ .com)
</head>
<body>
<h1>我的第一个标题</h1> <!---这是在页面可见的内容
<p>我的第一个段落。</p> --->
</body>
</html>
浅试一下：
这是一个段落。
扩充的一些知识：
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
什么是浏览器内核？
浏览器1内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
for exmple : Chrome使用的内核是Blink。
1.Web标准
（Web 标准是由W3C组织和其他标准化组织制定的一系列标准的集合。（万维网联盟）是国际最著名的标准化组织。）
1.1为什么要使用web标准？
浏览器不同，显示的页面或者排版就有差异。
1.2Web标准的构成：
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理分类，现阶段主打html |
| 表现 | 表现用于设计网页元素的版式，颜色等外观样式，主打css |
| 行为 | 行为指的是网页模型的定义以及交互的编写，现阶段为javascript |
HTML标签导读
1.HTML语法规范
1.1基本语法概述`
1.HTML标签是由尖括号包围的关键词，例如<p></p>
2.HTML标签通常成对出现，例如<html>和</html>称为双标签。
3.有一些标签比较特殊，只有一个标签，例如<br/> 我们称之为单标签。
1.2标签关系
1.包含关系
<head>
<title> </title>
</head>
2.并列关系
<head> </head>
<body> </body>
2.HTML基本结构标签
<html> <!---跟标签--->
<head> <!---文档头部--->
<title> </title> <!---让网页拥有一个属于自己的网页标题--->
<body> <!--- 文档的主题--->
</body>
</head>
</html>
3.DOCTYPE和lang以及字符集的作用
1. 文档类型声明
2.lang 语言种类的意思
<html lang="en" <!---英文--->
<html lang="zh-CN" <!---中文--->
3.字符集: 多个字符的集合，以便计算机可以识别和储存各种文字。
<meta charset="UTF8"/> <!---UTF-8 作用是：不易乱码--->
4.HTML常用标签
1.标题标签
<h1> 一级标题 </h1> <!---一共有六级，一级最大，单行显示--->
2.段落和换行标签
<p> 分段落 </p>
<br/> 换行
2.文本格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | 或者 | storng效果更明显 |
| 倾斜 | 或者 | em效果更明显 |
| 删除线 | del效果更明显 | |
| 下滑线 | 或者 | ins效果更明显 |
3.盒子、盒子（布局使用）
and
标签
div 和 span 是没有语义的，它们就是一个盒子用来装内容的。
<div> 这是头部 </div> <!---div 是 division的缩写，表示分割、分区。--->
<span> 内容 </span> <!---意为跨度、跨距。--->
div 的特点： 独占一行 （大盒子） span的特点：跨距，可以在同一行 （小盒子）
4.插入图片
- <img src-“ 图像”/> :scr 是的必须属性，它用于指定图像文件的路径和文件名。
- 所谓属性：简单理解就是这个图像标签的特性。
<img src="img.jpg" alt="***图片显示不出来时，用文字替代"/>
<img src="img.jpg" title="我是李皮皮"/> <!--- title 是把鼠标放在图片上会显示的文字说明--->
<img src="img.jpg" width="800" /> <!--- width 是设置图片宽度--->
<img src="img.jpg" hight="800" /> <!--- hight 是设置图片高度--->
<img src="img.jpg" border="15" /> <!--- border 是给图像设定边框粗细--->
5.注意事项：
- 在插入图片时，图片要放在源代码的同一个文件夹中才可以插入网页中，记得是 .jpg 文件哦~
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，属性与属性之间以空格分开
- 属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。
6.目录文件夹和根目录
1.目录文件：普通文件夹，文件夹里面可以放html文件，图片等等。
2.根目录：打开文件夹第一层就是根目录。（要会在不同的编辑软件上打开文件哦~）
7.图像标签和路径（重点）
路径：页面中的图片会很多，通常会建立一个文件夹来存放这些图像文件（images），这时再查找图像就要采用 ”路径“ 的方式来指定图像文件的位置。
1.绝对路径以引用文件所在位置为参考基础，而建立的目录路径。简而言之，图片相对于HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像位于HTML文件同一级 例  | |
| 下一级路径 | / | 图像位于HTML文件下一级 例  |
| 上一级路径 | …/ | 图像位于HTML文件上一级 例  |
2.绝对路径（比较少用啦）
就是文件在你哪个盘(位置比较详细）
8.超链接标签
<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
a 单词 anchor 的缩写，意为“：锚。
| 属性 | 作用 |
|---|---|
| herf | 用于指定链接目标的url地址，（必须属性）当标签应用herf属性时，它就有超链接的功能。 |
| target | 用于指定链接页面的打开方式，其中-self为默认值，_blank为在新窗口中的打开方式。 |
(源代码长这样~)
（网页长这样，传智播客即为超链接。）
2.内部链接：直接输入名字即可
3.空链接：
<a href="#" >这里写的文字可以在网页看得见哦</a> <!---空链接的源代码--->
4.下载链接
<a href="下载文件的名字，也可以是压缩包"> </a>
5.网页元素链接：
在网页中的各种元素如文本、图片、音频、视频等都可作为超链接。
<a href ="http://www.baidu.com"><img src="img1.jpeg"/> </a> <!---点击网页的图片会变成百度的超链接--->
6.锚点链接：（前提是你的网页内容要丰富哈）
点击链接，可以快速定位到页面中某个位置。
<h3 id="天">天</h3>
<a href="#">天</a> <br/>
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
