黑马程序员技术交流社区

标题: 【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签 [打印本页]

作者: 鱼丸儿 时间: 2017-10-17 16:12
标题: 【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签
本帖最后由鱼丸儿于 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:同学可能在以后的学习中观察到部分单边标签不书写结束符号“/”的情况，这样书写代码虽然正常运行但是不符合代码规范哦！！自己书写时应尽量避免这样的书写方式，养成良好的代码书写规范。

[attach]190719[/attach]
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：是英文中“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”简写中文意思“锚” 就好像是从一个网页上面往另外一个网页上面扔出一个“锚”！

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样式

作者: PHP老曹 时间: 2017-10-19 14:52
写的不错，简明易懂，期待下一篇。

作者: 孙晓威 时间: 2017-10-27 10:42
写的很细，小白必备攻略啊。期待后续更新

作者: gy_yt 时间: 2017-10-27 10:43
厉害了，期待更新

作者: 秋子菇凉 时间: 2017-10-27 10:43
666666，赞一个

作者: fangmifang618 时间: 2017-10-27 10:44
老曹厉害了，666666

作者: 杭州宋小妞 时间: 2017-10-27 10:45
写的好详细呀，跟着学习了，要是能让我把php基础班学会，老师请你吃棒棒糖哦

作者: 采姑娘的小蘑菇 时间: 2017-10-27 10:48
哇，期待可以一直更新啊

作者: 奔跑地小少女 时间: 2017-10-27 10:49
鱼丸儿，辛苦啦

作者: 刘华莎 时间: 2017-10-27 10:49
PHP杠杠哒

作者: patronli 时间: 2017-10-27 10:50
堪称完美

作者: 张艺凡老师 时间: 2017-10-27 10:50
这种好帖子越多越好，厉害

作者: 小核桃仁 时间: 2017-10-27 10:51
厉害{:8_474:}

作者: 猫先森 时间: 2017-10-27 10:52
很细啊，这下一看就通俗易懂咯，哈哈哈哈哈哈哈

作者: 人称最美教师 时间: 2017-10-27 11:06
厉害

作者: 咸鱼666 时间: 2017-10-27 11:07
真不错，6666

作者: 程代明 时间: 2017-10-27 12:17
不错简单明了 666

作者: jiahaoxiang 时间: 2017-10-27 12:30
静态网页内容不少，理解语义化，这是前端开发的基本功

作者: 慧-wh 时间: 2017-10-27 12:31
厉害

作者: xiaozhouzhou 时间: 2017-10-27 18:51
厉害哇~表示不懂！

作者: comebas 时间: 2017-10-28 14:58
不错不错写的很有趣看完了

作者: 播妞 时间: 2017-10-30 16:06

播妞推荐~~

作者: fanbuer 时间: 2017-10-30 16:13

作者: fanbuer 时间: 2017-10-30 16:15
赞一个^_^

作者: 从此学好 时间: 2017-10-30 16:29
牛牛牛

作者: L`EG 时间: 2017-10-30 17:34
我海厉害

作者: bug太上皇 时间: 2017-11-2 08:33
只看效果不bb吧

作者: 947844614 时间: 2017-11-2 10:13

作者: huangjinchao.ar 时间: 2017-11-6 19:59

牛牛牛。。。。

作者: L`EG 时间: 2017-11-8 10:28
厉害了，我的海！秒懂

作者: yuxiaoyi 时间: 2017-11-8 10:29
好期待出下一期哦～

作者: 小年青 时间: 2017-11-8 10:29
厉害厉害好棒好棒！

作者: zhangting198991 时间: 2017-11-8 10:29
厉害~~~~~~~

作者: gy_yt 时间: 2017-11-8 10:30
666，期待更新

作者: 从此学好 时间: 2017-11-8 10:32
赞赞赞，

作者: swallow25715902 时间: 2017-11-8 10:33
写的特别细致，期待后期作品。。

作者: 从此学好 时间: 2017-11-8 10:33
是时候展示真正的技术了

作者: yiriqueweichang 时间: 2017-11-8 10:38
厉害啊，很有内涵啊

作者: cj1234 时间: 2017-11-8 10:38
66666{:8_468:}

作者: 香蕉你个不呐呐 时间: 2017-11-8 10:44
可以的，厉害666666

作者: 鱼丸儿 时间: 2017-11-8 10:45
٩(๑❛ᴗ❛๑)۶小编表示开心，谢谢大家支持~~~~~ 小编会继续编辑后续帖子（づ￣3￣）づ╭❤～

作者: wxz_hm 时间: 2017-11-8 10:46
厉害了。加油

作者: PHP老曹 时间: 2017-11-8 10:47
又看了一遍，觉得不错，推荐给学员了

作者: PHP老曹 时间: 2017-11-8 10:49

fangmifang618 发表于 2017-10-27 10:44
老曹厉害了，666666

这是你们家文海写的

作者: ninaiwohe109 时间: 2017-11-8 10:50
棒棒哒，很喜欢这种技术文章，很有帮助

作者: 黑马6666 时间: 2017-11-8 10:51
收获很大！！

作者: hz_heima_m 时间: 2017-11-8 10:52
666，真的666

作者: 我想和你谈谈 时间: 2017-11-8 10:54
666.学习技术像看小说一样

作者: huangjinchao.ar 时间: 2017-11-8 10:58
好厉害啊，顶顶

作者: nhm 时间: 2017-11-8 11:25
6666666666666

作者: Rocket_冷风 时间: 2017-11-8 11:26
666，赞一个

作者: 陈君 时间: 2017-11-8 12:06
牛牛牛，

作者: 咸鱼666 时间: 2017-11-8 13:32
特别棒，牛气冲天

作者: 鱼丸儿 时间: 2017-11-10 14:36

PHP老曹发表于 2017-10-19 14:52
写的不错，简明易懂，期待下一篇。

将会出品一整套PHP知识分享，后续已经更新了哦(*/ω＼*)

作者: 鱼丸儿 时间: 2017-11-10 14:37

孙晓威发表于 2017-10-27 10:42
写的很细，小白必备攻略啊。期待后续更新

(｡･ω･｡)后续已更新，地址在文章下方

作者: 鱼丸儿 时间: 2017-11-10 14:38

jiahaoxiang 发表于 2017-10-27 12:30
静态网页内容不少，理解语义化，这是前端开发的基本功

(｡◕ˇ∀ˇ◕)一看就是明眼人

作者: 小浙姐姐 时间: 2017-11-10 14:39
鱼丸老师，辛苦啦

作者: 鱼丸儿 时间: 2017-11-10 14:40

猫先森发表于 2017-10-27 10:52
很细啊，这下一看就通俗易懂咯，哈哈哈哈哈哈哈

༺༺超༒神༻༻
      快
      学
      习
      后
      续
      课
      程
      哦
༺༺超༒神༻༻

作者: 鱼丸儿 时间: 2017-11-10 14:42

杭州宋小妞发表于 2017-10-27 10:45
写的好详细呀，跟着学习了，要是能让我把php基础班学会，老师请你吃棒棒糖哦 ...

后续更新完成了呢
小编现在很好奇到底是
(๑*◡*๑)什么味道的棒棒糖呢~~~~~~

作者: 鱼丸儿 时间: 2017-11-10 14:49

patronli 发表于 2017-10-27 10:50
堪称完美

精准而优雅(　 ´-ω ･)▄︻┻┳══━一

作者: Stefan_li 时间: 2017-11-13 17:47
Up.......Up......

作者: 似景 时间: 2017-11-15 11:13
厉害厉害

作者: 鱼丸儿 时间: 2017-11-16 15:24

PHP老曹发表于 2017-11-8 10:49
这是你们家文海写的

小编可不是谁家的，我是大家的~~~

作者: 返工好累 时间: 2017-11-18 13:27
我需要一点干货来真的

作者: 恍惚小猪 时间: 2017-12-25 09:36
写的不错简明易懂加油

作者: wheat 时间: 2018-1-15 16:38
给力啊！！！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2