一、HTML简介
1.1什么是HTML
l HTML（HyperTextMark-up Language）即超文本标记语言或超文本标签语言。
l 何为超文本：“超文本”可以实现页面内可以包含图片、链接，甚至音乐、程序等。
l 网页文件本身是一种文本文件，它通过标记符号来标记要显示的网页中的各个部分。
l 何为标记：当浏览器遇到对应的标签符号时就实现对应的功能！
l 网页文件扩展名：.html 或 .htm
l 超文本标记语言包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
浏览器运行后的效果:
1.2 HTML的发展历程
l 1993 HTML1
l 1995 HTML2
l 1995 HTML3
l 1997 HTML4
l 1999 HTML4.01
l 2000 XHTML1.0
l 2009 HTML5
l 2014 HTML5 Finalized
二、增强的文本编辑器
l 任何的纯文本编辑器都能够编辑html，比如记事本、editplus、notepad++。
l 比较有名的编码器有：
Ø DreamWeaver (Adobe公司的产品，这个东西过时了)
Ø Sublime （高效率的程序书写编辑器）
Ø WebStorm （更高级的项目级别编辑器）
l 不管用什么编辑器，你都要知道，做网页和编辑器无关，任何的纯文本编辑器都能够编码代码。我们学习的是代码，而不是所谓的编辑器。不过，不可否认，一个好的编辑器，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。
l sublime的中文意思是“华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。
l html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。
使用sublime导入项目的步骤：
选择【项目】选项卡---à【添加文件夹到项目】-------à选择我们的项目文件夹
sublime编辑器的快捷键
快捷键 | 功能 |
ctrl+滚动鼠标的滚轮 | 调整文字的大小 |
ctrl+shift+D | 复制当前行 |
ctrl+shift+k | 删除当前行 |
ctrl+shift+上箭头 | 将当前行上移 |
ctrl+shift+下箭头 | 将当前行下移 |
标签名+tab键 | 标签代码自动补全 |
注意：
我们在使用sublime编辑器的 书写HTML标签的时候 只需要写标签名就可以 然后按一下键盘上面的tab键那么就会进行自动的补全！
学习目标：
1、了解HTML语言和其发展历程
2、能够使用sublime编辑器！
|
l <html></html>这一对标签，是告诉浏览器这是一个HTML文件，在它们之间是文档的头部<head>和文档的主体<body>。
l <head></head>标签出现在文档的头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示（<title>标签除外），但是其间的标签有特殊重要的意义
l <body></body>之间的文本是可见的网页主体内容，body中的标签包含网页中的所有内容（比如文本、超链接、图像、表格和列表等等。）
四、标签分类与书写规则
4.1标签分类
Ø 标签主要分为双边标签与单边标签
Ø HTML标签通常是成对出现的（双边标签），比如 <div> 和 </div>
Ø 双边标签中的第一个标签是开始标签，第二个标签是结束标签；
Ø 也有单独呈现的标签（单边标签），如：<br />、<hr />和<img src=“images/1.jpg” />
Ø 双边标签，其内容在两个标签中间。如<h1>标题</h1>
Ø 单边标签，其内容在标签属性中赋值。<input type=“text” value=“按钮” />。
什么是属性？
一个人有什么属性？有姓名、有性别、有身高、有体重！
<人 姓名=“张三” 性别=“男” 身高=“183”体重=“140”>
双边标签：
有开始标签，也有结束标签
如：<h1>内容</h1>
单边标签：
有开始标签但是没有结束标签
它一般都是用来起到一些特殊的作用
比如：<br /> 换行标签 <hr/>水平线标签
4.2书写规则
Ø HTML标签是由一对尖括号包围的关键词，比如 <html>
Ø 标签名不区分大小写 但是建议使用小写 <font> <FONT> <Font>
Ø 如果标签中有属性 属性与标签名之间要有一个空格 如果一个标签内有多个属性属性与属性之间要有一个空格 属性要写在开始标签中 不能写在结束标签中
Ø 如果标签中有属性 属性的值是需要加引号的 单引号和双引号都可以
Ø 每一个标签都需要关闭，单边标签需要使用反斜线关闭！如：<hr/>水平线标签
Ø
l 标签与标签之间的嵌套只能使用顺序嵌套 不能交叉嵌套
l 标签可以有若干个属性，也可以不带属性。如<head>标签就不带任何属性
五、body标签的属性
说明：标签、标记、元素、节点这四个名词它们指的是同一个东西！
属性名 | 功能 |
background | 用于给网页设置背景图片 |
bgcolor | 用于给网页设置背景颜色 |
六、文本修饰标签
标签名 | 功能 |
<b></b> | 给文本设置加粗的效果 |
<i></i> | 给文本设置斜体的效果 |
<u></u> | 给文本设置下划线 |
<s></s> | 给文本设置删除线 |
<sup></sup> | 上标 |
<sub></sub> | 下标 |
<font></font> 属性： size：给文本设置大小 取值:1~7 1小7大 color：给文本设置颜色 比如：red face：给文本设置字体 比如：宋体 | 给文本设置大小 颜色 字体 |
文本修饰实例：
七、排版标签
标签名 | 功能 |
<p></p> 属性： align：用于控制段落里面的内容的水平方向的对齐，默认左对齐 取值：left 居左对齐 默认值 center 居中对齐 right 居右对齐 | 段落标签 |
<h1></h1>~<h6></h6> 1大6小 h1最大 h6最小 align：用于控制标题里面的内容的水平方向的对齐，默认左对齐 取值：left 居左对齐 默认值 center 居中对齐 right 居右对齐 | 标题标签 |
<br /> | 换行标签 这个标签是我们学的第一个单边标签 |
<hr /> l color：用于设置水平线的颜色 l width：用于设置水平线的宽度 取值：固定值和百分比 n 固定值的单位像素 n 百分比它一定是有一个参照物 它会参照当前hr标签的父元素 l size：用于设置水平线的粗细 l noshade：用于去除水平线的阴影 这个属性它没有值 它的属性值就等于其自身 noshade l align：用于控制水平线的水平对齐方式 取值： n left 居左对齐 n center 居中对齐 默认值 n right 居右对齐 | 水平线标签 |
<pre></pre> | 预格式化处理标签 在这一对标签里面的空格与换行会保留 |
八、注释
为什么要写注释？
l 比如:方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等。
l 可以在HTML文档中加入自己的注释。注释不会显示在页面中，它可以用来提醒程序员回忆相关的程序信息。
注释的格式：
<!--注释的内容-->
九、div与span标签
标签名 | 功能 |
<div></div> | <div>是一个块级标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现. |
<span></span> | <span>是一个行内标签,并无实际的意义,主要通过CSS样式为其赋予不同的表现. |
块级标签与行内标签的区别
1） 块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为其父元素的100%。
2） 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是内容的宽度。
块级元素：p、h1~h6 排版标签一般都是属于块级元素
行内元素：b、i、u、font、sup、sub 文本修饰标签一般都是属于行内元素
十、字符实体
为什么要有字符实体？
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | © |
注册 | ® |
× | × |
÷ | ÷ |
十一、图片标签
11.1能够使用的图片类型
能够在HTML网页中使用的图片类型：jpg(jpeg)、png、gif、bmp
不能在HTML网页中使用的图片类型：psd、ai
11.2语法
|
img：是英文中“image”简写 图片
src：是英文中“source”简写 资源
11.3 alt属性
alt它是英文“alternate”的简写替代 如果当图片不存在了 就显示alt这个属性中的文字信息！
注意：
img是一个单边标签 单边标签也是需要关闭的！
11.4其它属性
属性名 | 功能 |
title | 当把鼠标放在图片上面时 显示的文字信息 |
width | 给图片设置宽度 |
height | 给图片设置高度 |
注意：
最好不要给图片同时设置宽度与高度！因为它会将图片给变形！
十二、文件地址
12.1什么叫文件地址？
用于描述，一个文件在磁盘上的位置
位置：相对路径和绝对路径
12.2绝对路径
一个文件在磁盘上面的真实位置！
以windows操作系统为例：绝对路径都是带盘符的位置！
C:\Users\windows\Desktop\01-HTML5\代码\baby.jpg 绝对路径
12.3相对路径
相对于当前位置的某个文件的位置
平级关系 目标文件与当前文件是在同一个目录下面
① ./文件名 平级关系
② 直接写文件名 平级关系
上级关系 目标文件在当前文件的上一级目录下面
../ 上级关系 上一级
../../ 上二级
十三、超级链接
13.1什么是超级链接
一个网站，它是由很多个HTML网页组成的，HTML网页之间是可以通过超级链接来实现相互跳转的功能！从而就形成了“网”！
13.2基本用法
|
代码：
效果图：
a它是英文中“anchor”简写 中文意思“锚” 就好像是从一个网页上面往另外一个网页上面扔出一个“锚”！
l href属性：后面跟绝对路径或相对路径
英文中“hypertext reference ” 中文意思“超级链接地址”。
13.3a标签另外的属性
l title 标题 当把鼠标放上超级链接上面显示的文本信息
l target：链接的目标文件打开方式
n _blank 在新窗口中打开链接的目标文件
n _self默认的打开方式，在原来的窗口中打开目标文件（原来的窗口被覆盖）
13.4 空链接
13.5 锚点链接
可以通过锚点链接跳转到一个网页的不同的位置！
如何实现锚点链接？
第一步：定义一个锚点
<a name=”锚点名”></a>
或者
<a id=” 锚点名”></a>
第二步：找到锚点
在浏览器中的网址的最后面#锚点名
或者
<a href=”#锚点名”>内容</a>
注意：
在找锚点的时候不要忘记了有一个#号
十四、列表标签
列表标签总共有三种：无序列表、有序列表、定义列表
1.1无序列表
无序列表是用来表示一种没有先后顺序之分的列表项！
语法：
|
ul：是英文中“unordered list”简写 无序列表的意思
li：是英文中“list item”简写 列表项的意思
注意：
l 我们会发现，这是我们学习的第一个“组标签”就是要么不写，要么就写一组！
l li标签它不能单独的存在，必须是包裹在ul标签的里面 反过来说，ul的子元素必须是li标签，而不能是其它的任何标签！
l li标签里面可以存放任何内容！
无序列表在整个HTML网页制作是使用的最多的！
无序列表前面 默认会有一个实心的小圆点。
ul或者li标签有一个属性：
type：表示列表前面的符号的类型
取值：disc(默认值 实心的小圆点)、circle(空心园)、square(实心小方块)
列表其实也是可以嵌套 如果要进行列表嵌套 将ul再放置在li标签里面
1.2有序列表
有序列表是用表示一种有顺序之分的列表项
语法格式：
|
ol：是英文中“ordered list”的简写 有序列表的意思
li：是英文中“list item”的简写 列表项的意思
效果图：
代码：
ol与li的属性：
type：用来设置列表前面的序号
取值：1(默认值)、a、A、i(小罗马)、I(大罗马)
start：用于表示序号从哪里开始 取值：数值
其实有序列表使用的非常少 ，因为能够使用有序实现的其实也可以使用无序列表来实现！
1.3定义列表
定义列表是一个组标签，不过比较复杂，因为它出现了三对标签！
dl：它是英文中“defintion list”简写 表示定义列表的意思
dt：它是英文中“defintion title”简写 表示定义标题
dd：它是英文中“definition description ”简写 表示对定义标题的描述
注意：
dt、dd这两对标签它只能出现在dl标签里面 反过来说dl里面只能有dt与dd
上图中的代码表示了两层含义：
1. 是一个定义列表，列出了北京，上海，广州三个列表顶
2. 每一个列表项都有对应的描述信息
定义列表使用非常灵活，每一个dt是可以配多个dd的
jd首页使用定义列表来实现：
1313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
