本帖最后由 鱼丸儿 于 2017-11-21 16:06 编辑
各位同学，大家好欢迎关注我们杭州黑马PHP课程，接下来的一段时间我们将一同学习PHP课程的基础篇，希望能给大家的编程学习带来帮助，当然在学习中遇到了问题也可以回帖进行提问，我们还会不定时的在公众平台派送一些意想不到的惊喜呦！！！
写在前面：有人说html是一张白纸，那么PHP就是白纸折出的飞机。无论飞机能有怎样的华丽飞行，他都需要借助当初的那张白纸。无疑PHP是一门颇具表现力的语言，但在我们学习他之前先要了解什么是HTML，话不多说接下来我们开启HTML的学习。
一、HTML简介
1.1什么是HTML
HTML（HyperText Mark-up Language）即超文本标记语言或超文本标签语言。
何为超文本：“超文本”可以实现页面内可以包含图片、链接，甚至音乐、程序等。
网页文件本身是一种文本文件，它通过标记符号来标记要显示的网页中的各个部分。
何为标记：当浏览器遇到对应的标签符号时 就实现对应的功能！
网页文件扩展名：.html 或 .htm
超文本标记语言包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 这里看不懂的不要着急，先熟悉一下这些概念，我们一会细细道来。
1.2 HTML的发展历程，各个版本更新的时间。
1993 HTML1
1995 HTML2
1995 HTML3
1997 HTML4
1999 HTML4.01
2000 XHTML1.0
2009 HTML5
2014 HTML5 Finalized
二、增强的文本编辑器
纯文本编辑器就是记事本！！！！。
任何的文本编辑器都能够编辑html。
但是除了记事本之外，现在我们常用的有很多文本编辑器，它们功能更强，用着更顺手。
不管用什么编辑器，你都要知道，做网页和编辑器无关，任何的纯文本编辑器都能够编码代码。我们学习的是代码，而不是所谓的编辑器。不过，不可否认，一个好的编辑器，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。
我们这里用的是一款叫做sublime的编辑器。
下载地址为 http://www.sublimetextcn.com/可以自行下载使用。
sublime的中文意思是“华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。
html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。
三、HTML文件结构
<html> HTML文件的声明开始 <head></head> HTML文件的头部部分 <body></body> HTML文件的主体部分 </html> HTML文件的声明结束
<html></html>这一对告诉浏览器这是一个HTML文件，在它们之间是文档的头部<head>和主体<body>。
<head></head>标签出现在文档的头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的标签有特殊重要的意义
<body></body>之间的文本是可见的网页主体内容，body中的标签包含网页中的所有内容（比如文本、超链接、图像、表格和列表等等。）
注意：网页文件的后缀名称为.html！
四、标签分类与书写规则
4.1标签分类
标签主要分为双边标签与单边标签
HTML标签通常是成对出现的（双边标签），比如 <div> 和 </div>
双边标签中的第一个标签是开始标签，第二个标签是结束标签；
[PHP] 纯文本查看 复制代码 <div>这里是一个简单的双边标签</div>
//“div”代表双标签中的开始标签。
// "/div"代表双标签中的结束标签。
也有单独呈现的标签（单边标签），如：<br />、<hr />
[PHP] 纯文本查看 复制代码 <img src="#" />
//单边标签只有标签开始部分如上的br,hr等。
//而结束标签部分由“/”完成，且“/”与标签开始部分写在一个“<>”内
小结
双边标签：
有开始有结束
如：<h1>内容</h1>
单边标签：
有开始但是没有结束 它一般都是用来起到一些特殊的作用
比如：<br /> 换行 <hr />水平线
4.2书写规则
HTML标签是由一对尖括号包围的关键词，比如 <html>
标签名不区分大小写 但是建议使用小写 <font> <FONT> <Font>
如果标签中有属性 属性与标签名之间要有一个空格 如果一个标签内有多个属性 属性与属性之间要有一个空格 属性要写在开始标签中 不能写在结束标签中
如果标签中有属性 属性的值是需要加引号的 单引号和双引号都可以
每一个标签都需要关闭，单边标签需要使用反斜线关闭！
ps:同学可能在以后的学习中观察到部分单边标签不书写结束符号“/”的情况，这样书写代码虽然正常运行但是不符合代码规范哦！！自己书写时应尽量避免这样的书写方式，养成良好的代码书写规范。
4.3标签的嵌套
标签与标签之间的嵌套只能使用顺序嵌套 不能交叉嵌套
错误实例：
[PHP] 纯文本查看 复制代码 <div><span></div></span>
正确写法为：
[PHP] 纯文本查看 复制代码 <div><span></span></div>
这一点大家应该不会出现类似的错误，以为标签都是在结构上处于对称的状态，嵌套的双标签打破了正常的对称结构。
各位看官老爷们，在对HTML超文本标记语言有了相应的了解后，接下来我们进入到对HTML标签的学习中，注重HTML超文本标记语言的难点就分布在各个HTML标签的学习中哦！！！大家一定要认真完成接下来的学习任务。
五、body标签的属性 ps:这里是重点哦
说明：标签、标记、元素、节点这四个名词它们指的是同一个东西！
属性名 功能
background 用于给网页设置背景图片
bgcolor 用于给网页设置背景颜色
六、文本修饰标签
标签名 功能
<b></b> 给文本设置加粗的效果
<i></i> 给文本设置斜体的效果
<u></u> 给文本设置下划线
<s></s> 给文本设置删除线
<sup></sup> 上标
<sub></sub> 下标
<font></font>
属性：
size：给文本设置大小 取值:1~7 1小7大
color：给文本设置颜色 比如：red
face：给文本设置字体 比如：宋体 给文本设置大小 颜色 字体
文本修饰实例：
![]()
七、排版标签
ps：学习后请思考PHP的注释种类有多少分别是什么？
八、HTML中的注释
为什么要写注释？
比如:方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等。
可以在HTML文档中加入自己的注释。注释不会显示在页面中，它可以用来提醒程序员回忆相关的程序信息。
注释的格式：
<!—注释的内容-->
################ps：接下来是重点且不容易辨析哦！！########################
九、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 src=”图片的地址” />
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 href=”链接的目标地址”>内容</a>
代码：
效果图：
a它是英文中“anchor”简写 中文意思“锚” 就好像是从一个网页上面往另外一个网页上面扔出一个“锚”！
href：它们是英文中“hypertext reference ” 中文意思“超级链接地址”。
13.3a标签另外的属性
title 标签 当把鼠标放上超级链接上面显示的文本信息
 这两个属性要好好记住哦，经常有人忘记！！！！！
target：链接的目标文件打开方式
_blank 在新窗口中打开链接的目标文件
13.4 空链接
13.5 锚点链接
前方高能！！！！锚点链接是<a>相对难理解的功能哦，小编感觉这并不能难住各位看官老爷。
可以通过锚点链接跳转到一个网页的不同的位置！
如何实现锚点链接？
第一步：定义一个锚点
<a name=”锚点名”></a>
或者
<a id=” 锚点名”></a>
第二步：找到锚点
在浏览器中的网址的最后面#锚点名
或者
<a href=”#锚点名”>内容</a>
注意：
在找锚点的时候 不要忘记了有一个#号
今天的课程就到这里喽。。。。。。。
希望同学对于html有了进一步的了解认识，编辑器安装完成后也能熟练使用哦，感兴趣的同学可以试着使用编辑器里面的功能按钮，了解一下他们都是做什么的
校区捷报
【黑马程序员杭州】PHP03期，平均薪水7636元，毕业35个工作日，就业率100%
阅读推荐
【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签
【黑马程序员杭州】PHP课程笔记day02-HTML组标签
【黑马程序员杭州】PHP课程笔记day03-HTML网页框架及表单标签
【黑马程序员杭州】PHP课程笔记day04表单控件
【黑马程序员杭州】PHP课程笔记day05-CSS基础
【黑马程序员杭州】PHP课程笔记day06-CSS样式 | 
收藏
淘帖
踩
