传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 鱼丸儿 于 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中的标签包含网页中的所有内容(比如文本、超链接、图像、表格和列表等等。)
image006.jpg
注意:网页文件的后缀名称为.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        用于给网页设置背景颜色
image009.png
image011.png


六、文本修饰标签
标签名        功能
<b></b>        给文本设置加粗的效果
<i></i>        给文本设置斜体的效果
<u></u>        给文本设置下划线
<s></s>        给文本设置删除线
<sup></sup>        上标
<sub></sub>        下标
<font></font>
属性:
size:给文本设置大小  取值:1~7  1小7大
color:给文本设置颜色  比如:red
face:给文本设置字体  比如:宋体        给文本设置大小 颜色 字体

文本修饰实例:
image013.png

image015.png



七、排版标签
QQ图片20171021060146.png
image018.png

image020.png

image022.png


ps:学习后请思考PHP的注释种类有多少分别是什么?

八、HTML中的注释
为什么要写注释?
       比如:方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等。
       可以在HTML文档中加入自己的注释。注释不会显示在页面中,它可以用来提醒程序员回忆相关的程序信息。
注释的格式:
        <!—注释的内容-->
image024.png




################ps:接下来是重点且不容易辨析哦!!########################
                                                                                                                                 
                                                                                               
                                                               
                                       
九、div与span标签
标签名        功能
<div></div>        <div>是一个块级标签,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>        <span>是一个行内标签,并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级标签与行内标签的区别
1) 块级元素
● 霸占一行,不能与其他任何元素并列
image026.png
● 能接受宽、高
image027.png
● 如果不设置宽度,那么宽度将默认变为其父元素的100%。
image029.png
2) 行内元素
● 与其他行内元素并排
image031.png
● 不能设置宽、高。默认的宽度,就是内容的宽度。
image033.png



块级元素:p、h1~h6   排版标签一般都是属于块级元素
行内元素:b、i、u、font、sup、sub   文本修饰标签一般都是属于行内元素

十、字符实体
为什么要有字符实体?
        在 HTML 中,某些字符是预留的。
        在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
        如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体
空格         
QQ图片20171021060306.png
十一、图片标签
11.1能够使用的图片类型
能够在HTML网页中使用的图片类型:jpg(jpeg)、png、gif、bmp
不能在HTML网页中使用的图片类型:psd、ai
11.2语法
<img src=”图片的地址”  />

img:是英文中“image”简写  图片
src:是英文中“source”简写   资源
image035.png
11.3 alt属性
alt它是英文“alternate”的简写 替代  如果当图片不存在了 就显示alt这个属性中的文字信息!
image037.png

注意:
        img是一个单边标签  单边标签也是需要关闭的!

11.4其它属性
属性名        功能
title        当把鼠标放在图片上面时 显示的文字信息
width        给图片设置宽度
height        给图片设置高度

注意:
        最好不要给图片同时设置宽度与高度!因为它会将图片给变形!
十二、文件地址
12.1什么叫文件地址?
        用于描述,一个文件在磁盘上的位置
    位置:相对路径和绝对路径

12.2绝对路径
一个文件在磁盘上面的真实位置!
以windows操作系统为例:绝对路径都是带盘符的位置!
C:\Users\windows\Desktop\01-HTML5\代码\baby.jpg  绝对路径
image039.png
12.3相对路径
相对于当前位置的某个文件的位置

平级关系  目标文件与当前文件是在同一个目录下面
        ./文件名  平级关系
直接写文件名  平级关系
image041.png
image043.png

上级关系  目标文件在当前文件的上一级目录下面
        ../   上级关系 上一级
../../     上二级
image053.png


小编插一嘴 :一定要理解相对路径中./      ../分别代表什么。
十三、超级链接
13.1什么是超级链接
一个网站,它是由很多个HTML网页组成的,HTML网页之间是可以通过超级链接来实现相互跳转的功能!从而就形成了“网”!

13.2基本用法
<a href=”链接的目标地址”>内容</a>

代码:
image055.png
效果图:
image049.png

a它是英文中“anchor”简写 中文意思“锚” 就好像是从一个网页上面往另外一个网页上面扔出一个“锚”!
image050.png

href:它们是英文中“hypertext  reference ” 中文意思“超级链接地址”。

13.3a标签另外的属性
title  标签  当把鼠标放上超级链接上面显示的文本信息
image051.png
这两个属性要好好记住哦,经常有人忘记!!!!!
target:链接的目标文件打开方式
_blank  在新窗口中打开链接的目标文件

image053.png
13.4 空链接
image055.png
13.5 锚点链接

前方高能!!!!锚点链接是<a>相对难理解的功能哦,小编感觉这并不能难住各位看官老爷。

可以通过锚点链接跳转到一个网页的不同的位置!
如何实现锚点链接?
第一步:定义一个锚点
        <a  name=”锚点名”></a>
        或者
        <a  id=” 锚点名”></a>
image057.png
第二步:找到锚点
        在浏览器中的网址的最后面#锚点名
        或者
        <a  href=”#锚点名”>内容</a>
image059.png
注意:
        在找锚点的时候 不要忘记了有一个#号

今天的课程就到这里喽。。。。。。。
希望同学对于html有了进一步的了解认识,编辑器安装完成后也能熟练使用哦,感兴趣的同学可以试着使用编辑器里面的功能按钮,了解一下他们都是做什么的

校区捷报

【黑马程序员杭州】PHP03期,平均薪水7636元,毕业35个工作日,就业率100%


阅读推荐

【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签
【黑马程序员杭州】PHP课程笔记day02-HTML组标签

【黑马程序员杭州】PHP课程笔记day03-HTML网页框架及表单标签
【黑马程序员杭州】PHP课程笔记day04表单控件
【黑马程序员杭州】PHP课程笔记day05-CSS基础
【黑马程序员杭州】PHP课程笔记day06-CSS样式

点评

好厉害  发表于 2017-11-8 10:36

评分

参与人数 1技术分 +6 黑马币 +2 收起 理由
小浙姐姐 + 6 + 2 很给力!

查看全部评分

分享至 : QQ空间
收藏

65 个回复

倒序浏览
写的不错,简明易懂,期待下一篇。
回复 使用道具 举报
孙晓威 来自手机 中级黑马 2017-10-27 10:42:14
藤椅
写的很细,小白必备攻略啊。期待后续更新
回复 使用道具 举报
gy_yt 来自手机 中级黑马 2017-10-27 10:43:27
板凳
厉害了,期待更新
回复 使用道具 举报
秋子菇凉 来自手机 中级黑马 2017-10-27 10:43:57
报纸
666666,赞一个
回复 使用道具 举报
老曹厉害了,666666
回复 使用道具 举报
杭州宋小妞 来自手机 初级黑马 2017-10-27 10:45:16
7#
写的好详细呀,跟着学习了,要是能让我把php基础班学会,老师请你吃棒棒糖哦
回复 使用道具 举报
采姑娘的小蘑菇 来自手机 中级黑马 2017-10-27 10:48:16
8#
哇,期待可以一直更新啊
回复 使用道具 举报
鱼丸儿,辛苦啦
回复 使用道具 举报
刘华莎 来自手机 中级黑马 2017-10-27 10:49:51
10#
PHP杠杠哒
回复 使用道具 举报
patronli 来自手机 初级黑马 2017-10-27 10:50:36
11#
堪称完美
回复 使用道具 举报
张艺凡老师 来自手机 中级黑马 2017-10-27 10:50:38
12#
这种好帖子越多越好,厉害
回复 使用道具 举报
厉害
回复 使用道具 举报
猫先森 来自手机 中级黑马 2017-10-27 10:52:33
14#
很细啊,这下一看就通俗易懂咯,哈哈哈哈哈哈哈
回复 使用道具 举报
人称最美教师 来自手机 初级黑马 2017-10-27 11:06:26
15#
厉害
回复 使用道具 举报
咸鱼666 来自手机 中级黑马 2017-10-27 11:07:37
16#
真不错,6666
回复 使用道具 举报
程代明 来自手机 中级黑马 2017-10-27 12:17:23
17#
不错 简单明了 666
回复 使用道具 举报
jiahaoxiang 来自手机 初级黑马 2017-10-27 12:30:02
18#
静态网页内容不少,理解语义化,这是前端开发的基本功
回复 使用道具 举报
慧-wh 来自手机 初级黑马 2017-10-27 12:31:28
19#
厉害
回复 使用道具 举报
厉害哇~表示不懂!
回复 使用道具 举报
1234下一页
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /4 下一条