基础班day01笔记

学习目标

  • 能说出常用的五大浏览器
  • 能说出WEB的三大组成部分
  • 能够写出HTML的基本结构(骨架:html、head、title、body )
  • 能够说出常见的单标签(hr、br、img)
  • 能够写出4~5个常见的双标签(h系列6个、p标签、文本格式化标签8个、骨架的几个标签)
  • 能够写出图片标签的使用及属性
  • 能够说出相对路径的三种形式(同级目录、下级目录、上级目录)

。。。。。。

理解上课的知识点……

课前了解

  1. 课程安排

    html : 3天

    css : 6天

    项目 : 5天

    特点 : [ 慢、 细、 易 ]

    目的:把基础打牢

  1. 打字速度

    打字速度是程序员的基本技能

    • 严禁 二指禅 : 必须养成正确的指法 ( 面试中可能会有机试 )

    • 打字速度,越快越好 120单词/min(可以通过金山打字练习英文打字

  1. 安装词典

    代码很多都是英文,词典可以帮助学习记忆代码

    • 随时使用词典, 不会的单词就查出来
  1. 开发习惯设置

    便于之后的开发

    • 将文件后缀名显示出来 (必做)
    • 将文件的排列方式改为详细信息,并且名称一定要能够全部显示出来
  1. win快键键

    开发中使用快捷键可以提高效率

    • Ctrl + C:复制
    • Ctrl + V:粘贴
    • Ctrl + X:剪切
    • Ctrl + S:保存
    • Ctrl + N:新建
    • Ctrl + A:全选
    • Ctrl + Z:撤销上一个操作
    • win + E:打开资源管理器
    • Alt + tab:切换程序(注意Alt键不松手)
    • Win + D:切换到桌面
    • Win + R:快速运行(演示打开软件)
      • cmd:命令行
      • calc:运行计算器
      • mspaint:运行画图工具
  1. 学习要求

    对于学习的一些要求

    • 课堂互动:防走神,防瞌睡

    • 课后代码:老师上课的代码至少敲3遍(重要的是通过上课的代码理解知识点!!),之后再做作业,然后还有余力的同学预习第二天的笔记(会与熟练两码事)。

    • 学习模式:

      • 精力放在重点,了解内容记住即·可(不要钻牛角尖)
      • HTML和CSS比较灵活(不易报错),按照规范敲正确的代码

认识网页(了解)

你觉得前端是做什么的?

1
2
3
4
5
问题1 : 网页由哪些基本元素构成 ? (文字、图片、超链接、视频、音频等等) 

问题2 : 那我们看到的网页 , 光鲜的背后又是什么呢? (代码组合)

问题3 : 浏览器的作用? (将代码解析成网页,供用户访问)

少了浏览器可以吗?

浏览器将代码解析成网页,供用户访问 ! 用户不会去看代码,所以浏览器很必要!

五大浏览器介绍(记忆)

浏览器是网页运行的平台。

五大浏览器:

  • IE(Edge)浏览器
  • Firefox(火狐)浏览器
  • Chrome(谷歌)浏览器
  • Safari浏览器
  • Opera(欧朋)浏览器

各浏览器的市场份额

查看网站: http://tongji.baidu.com/data/browser

浏览器市场份额

谷歌浏览器:访问速度快、用户体验好、开发调试功能齐全,之后的学习过程中,统一使用谷歌

浏览器内核

浏览器的内核(渲染引擎:render 渲染 engine 引擎)相当于汽车的发动机,是最核心的存在。

作用:将网页代码解析(转换)并渲染(显示)成用户眼中的界面

内核的种类:

  • Trident(IE、猎豹安全浏览器、360极速浏览器)

  • Gecko(Firefox)

  • Webkit(Safari、傲游浏览器3、Symbian手机浏览器、Android 默认浏览器)

  • Blink(Webkit的升级版)(Chrome, Opera)

总结:

  • IE浏览器(Trident)
  • Firefox(火狐)浏览器(Gecko)
  • Chrome(谷歌)浏览器(blink)
  • Safari浏览器(webkit)
  • Opera(欧朋)浏览器(blink 早期:presto )

Web标准(记忆)

为什么会有web标准

浏览器内核不同有什么影响?

浏览器的内核不同,我们知道他们工作原理肯定不同,相同的代码显示就会有差别。这样就给我们的网页开发带来了困难……

bz

所以我们需要制定一个标准,让相同的代码在不同浏览器中的显示的效果是一样的。

Web 标准构成

将页面分为三层:结构、样式、行为。

  • 结构:HTML——页面骨架
  • 样式:CSS——页面样式
  • 行为:JS(JavaScript)——页面动态效果

图解Web标准

把一个页面看成一个人

结构标准:决定是否有一个好的身体。

hb1

样式标准:决定是否化妆的美丽漂亮。

hb2

行为标准:决定是否有吸引人的行为。

hb3

HTML初识(了解)

HTML的概念

概念:HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。(用HTML标签表示需要显示的效果)

ヾ(๑╹◡╹)ノ”变粗案例

在网页(.html后缀的文件)中显示一个加粗的文字

说白了HTML就是用尖括号包裹起来的英文单词(标签),浏览器看得懂标签,对不同的标签有对应的显示效果

其实:

学习HTML-》就是学习HTML标签-》就是学习标签中的英文单词-》所以HTML非常简单,只需要记住对应的英文单词即可

1
如:<strong>加粗</strong>  <h1>大标题</h1>  等等

HTML骨架结构

写网页类似于写文章,文章有对应的格式,HTML也有规定的格式。

mess

HTML的固定格式:

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>页面的标题</title>
</head>
<body>
写自己的代码
</body>
</html>

为了便于阅读:包含关系的标签使用用缩进

记忆:猪猪女孩记忆法

timg

ヾ(๑╹◡╹)ノ”书写我们的第一个HTML页面
  1. 新建一个demo 的.txt文件
  2. 把后缀名改为 .HTML
  3. 里面写入刚才的HTML骨架
  4. 右击 —》谷歌浏览器打开

注意:结构不会在我们的页面上显示,但是却会让我们的代码结构更加清晰明确(规范

开发工具的基本使用(操作)

使用记事本虽然可以敲代码,但是开发的效率实在太低,实际开发中,我们会通过使用开发工具来提高咱们的开发效率。

基础班使用sublime

使用 sublime 新建页面的过程

  1. 打开sublime,ctrl + n 新建一个文件;
  2. ctrl+S 保存,命名: “ 创建的文件.html “ (后缀名必加!
ヾ(๑╹◡╹)ノ”用sublime写一个页面骨架

sublime 快捷键

  • 新建文件: ctrl + n

  • 保存文件 : ctrl + S

  • 快速生成一个标签:英文+tab

  • 打开文件夹:文件夹直接拖进来 / 文件 =>打开文件夹

  • 生成结构代码: html:5 + tab 或者 ! + tab (前提:必须是后缀.html文件)

  • 快速复制一整行 ctrl + shift + d 或者把光标放在这一行,然后ctrl + cctrl + v

  • 删除一行: Ctrl+X

  • 注释 : ctrl + /

    注释:在代码中展示,页面渲染时会忽略,用户看不到,给程序员看。<!-- 需要注释的内容-->

    zs

ヾ(๑╹◡╹)ノ”偷偷夸老师

HTML的其他介绍(了解)

需要知道的几个小点

标签的关系

嵌套关系(父子关系)

1
2
3
<head>  
<title></title>
</head>

father

并列关系(兄弟关系)

1
2
<head></head>
<body></body>

xiong

ヾ(๑╹◡╹)ノ”测试题

请问下列哪个标签是错误的?(父子关系可以通过缩tab进表示)

  • [ ]

    1
    <head></head><body></body>

  • [ ]

    1
    <div><p></p></div>

  • [ ]

    1
    <head><title></head></title>

  • [ ]

    1
    <body><div></div></body>

HTML的标签分类

双标签:

如:<strong>标签的内容</strong>

语法:<开始标签> 标签内容 </结束标签>

例:<strong>我要变粗</strong> <head></head>……

单标签:

如:<br> 或者 <br/> (两种写法都可以,HTML5使用的是<br>

语法:<标签名>

例:<br> <hr> ……

HTML中的标签(熟练)

标签其实就是用<>包裹的英文单词,所以同学们把对应的英文单词记住会使用即可

h 系列的标签 (Header) : 标题标签

例如:新闻网页的都会有一个新闻标题,效果就是用标题标签完成的

作用 : 给页面上的文字加上标题的语义

代码 :

1
2
3
4
5
6
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

显示效果 :

  • 文字都有变大,但是从h1~h6文字逐渐减小
  • 文字都有加粗
  • 独占一行

注意 : 一般网页中h1标签不能乱用,一般只会用在新闻的标题或者网页的logo上(h1标签对于seo:搜索引擎优化很重要)

p 标签 (Paragraph) : 段落标签

例如:网页中的段落,就是通过段落标签来完成效果的

作用: 给页面上的一段文字加上段落语义

代码: <p>这是段落</p>

特点

  • 段落与段落之间有间隙
  • 独占一行
ヾ(๑╹◡╹)ノ”在新浪网页上查看元素

hr 标签 (Horizontal Rule):水平线标签

它就是在网页中显示一条水平线

作用: 在页面上显示一条横线

代码: <hr>

ヾ(๑╹◡╹)ノ”可以写一个新闻页面了

sh

br 标签 (break row=行):换行标签

作用:强制换行(代码中换行无效)

代码<br>

(4组)文本格式化标签

网页中有时候需要让文字有加粗、下划线、倾斜、删除线这样的效果,在没有学习css之前,咱们可以使用文本格式化标签来完成效果

作用:

  • b: 加粗
  • u: 下划线
  • i: 倾斜
  • s: 删除线

建议不要使用, 因为这些标签没有语义

语义就是标签的含义,比如:标题标签的语义就是标题的含义,段落标签的语义就是段落的含义

作用:

  • strong: 加粗
  • ins: 下划线
  • em: 倾斜
  • del: 删除线

可以使用

语义: 起强调加强语气作用

标签的属性(了解)

标签的属性

属性为 HTML 元素提供附加信息。(让同一种标签有不同的显示效果)

问题:如果想让两个水平线颜色不一样,可以怎么完成呢?

可以通过添加颜色属性的方式来完成。

代码:

1
2
<hr color="red" width="400" />
<img src="images/1.jpg">

格式:

1
<标签名 属性名1="属性值1" 属性名2="属性值2" …> 内容 </标签名>

注意:

  • 标签可以同时有多个属性,并且属性之间以空格隔开(可读性、规范)
  • 标签名与属性名之间,必须以空格隔开!
  • 属性与属性之间没有顺序关系!
  • 每个标签上的属性并不是完全相同

提倡:尽量不使用样式属性。

图片标签(重点)

经常需要在网页中显示一张图片,此时可以通过图片标签来显示。

img 标签 (image的简写) :图片标签

作用: 在页面中显示一张图片

代码: <img src="图像URL" />

属性:

  • src:图片的路径(必须

    告诉浏览器要显示的图片是哪一张

  • alt:替换文本

    如果图片加载不出来,会显示这个属性中的文字

  • title:图片的标题

    当鼠标悬停在图片上时,才会显示的文字

  • width:图片的宽度

    如果只设置了图片的宽度,此时图片的高度会等比例缩放

  • height:图片的高度

    如果只设置的图片的高度,此时图片的宽度会等比例缩放

注意点:一般只会设置width或者height中的一个,如果同时设置了宽度和高度,图片有可能拉伸变形!!

路径问题(难点)

当前文件找目标文件的过程

地图

当前文件:当前html页面

目标文件:要显示的图片

文件路径

绝对路径

用的较少,可移植性差

比如:在个人电脑中,带有盘符的路径: C:\Users\ziyue\Desktop\代码\01.jpg

相对路径

用的较多,可移植性很好

同级目录

同级目录:页面与图片同一级目录(类比于:我们俩都在大厅)

步骤:

  1. 直接写目标文件的名字即可

path-01

1
2
3
<img src="2.jpg">
或者
<img src="./2.jpg">

下级目录

下级目录:如果图片在同级目录的image文件夹里面(类比于:我在大厅,你在房间里)

步骤:

  1. 写目标文件所在文件夹的名字
  2. 进入文件夹 /
  3. 直接写目标文件的名字即可

path-02

1
<img src="image/1.jpg">

上级目录

上级目录:如果图片在页面的上一级目录(类比于:我在房间,你在大厅)

步骤:

  1. 去上一级目录 ../
  2. 直接写目标文件的名字即可

path-03

1
<img src=”../2.jpg” >
ヾ(๑╹◡╹)ノ”路径例子