学习目标
- 能说出常用的五大浏览器
- 能说出WEB的三大组成部分
- 能够写出HTML的基本结构(骨架:html、head、title、body )
- 能够说出常见的单标签(hr、br、img)
- 能够写出4~5个常见的双标签(h系列6个、p标签、文本格式化标签8个、骨架的几个标签)
- 能够写出图片标签的使用及属性
- 能够说出相对路径的三种形式(同级目录、下级目录、上级目录)
。。。。。。
理解上课的知识点……
课前了解
课程安排
html : 3天
css : 6天
项目 : 5天
特点 : [ 慢、 细、 易 ]
目的:把基础打牢
打字速度
打字速度是程序员的基本技能
严禁
二指禅
: 必须养成正确的指法 ( 面试中可能会有机试 )打字速度,越快越好 120单词/min(可以通过金山打字练习英文打字)
安装词典
代码很多都是英文,词典可以帮助学习记忆代码
- 随时使用词典, 不会的单词就查出来
开发习惯设置
便于之后的开发
- 将文件后缀名显示出来 (必做)
- 将文件的排列方式改为详细信息,并且名称一定要能够全部显示出来
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:运行画图工具
学习要求
对于学习的一些要求
课堂互动:防走神,防瞌睡
课后代码:老师上课的代码至少敲3遍(重要的是通过上课的代码理解知识点!!),之后再做作业,然后还有余力的同学预习第二天的笔记(会与熟练两码事)。
学习模式:
- 精力放在重点,了解内容记住即·可(不要钻牛角尖)
- HTML和CSS比较灵活(不易报错),按照规范敲正确的代码
认识网页(了解)
你觉得前端是做什么的?
1 | 问题1 : 网页由哪些基本元素构成 ? (文字、图片、超链接、视频、音频等等) |
少了浏览器可以吗?
浏览器将代码解析成网页,供用户访问 ! 用户不会去看代码,所以浏览器很必要!
五大浏览器介绍(记忆)
浏览器是网页运行的平台。
五大浏览器:
- 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标准
浏览器内核不同有什么影响?
浏览器的内核不同,我们知道他们工作原理肯定不同,相同的代码显示就会有差别。这样就给我们的网页开发带来了困难……
所以我们需要制定一个标准,让相同的代码在不同浏览器中的显示的效果是一样的。
Web 标准构成
将页面分为三层:结构、样式、行为。
- 结构:HTML——页面骨架
- 样式:CSS——页面样式
- 行为:JS(JavaScript)——页面动态效果
图解Web标准
把一个页面看成一个人
结构标准:决定是否有一个好的身体。
样式标准:决定是否化妆的美丽漂亮。
行为标准:决定是否有吸引人的行为。
HTML初识(了解)
HTML的概念
概念:HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。(用HTML标签表示需要显示的效果)
ヾ(๑╹◡╹)ノ”变粗案例
在网页(.html后缀的文件)中显示一个加粗的文字
说白了HTML就是用尖括号包裹起来的英文单词(标签),浏览器看得懂标签,对不同的标签有对应的显示效果
其实:
学习HTML-》就是学习HTML标签-》就是学习标签中的英文单词-》所以HTML非常简单,只需要记住对应的英文单词即可
1 | 如:<strong>加粗</strong> <h1>大标题</h1> 等等 |
HTML骨架结构
写网页类似于写文章,文章有对应的格式,HTML也有规定的格式。
HTML的固定格式:
1 | <html> |
记忆:猪猪女孩记忆法
ヾ(๑╹◡╹)ノ”书写我们的第一个HTML页面
- 新建一个demo 的.txt文件
- 把后缀名改为 .HTML
- 里面写入刚才的HTML骨架
- 右击 —》谷歌浏览器打开
注意:结构不会在我们的页面上显示,但是却会让我们的代码结构更加清晰明确(规范)
开发工具的基本使用(操作)
使用记事本虽然可以敲代码,但是开发的效率实在太低,实际开发中,我们会通过使用开发工具来提高咱们的开发效率。
基础班使用sublime
使用 sublime 新建页面的过程
- 打开sublime,
ctrl + n
新建一个文件; - ctrl+S 保存,命名: “ 创建的文件.html “ (后缀名必加!)
ヾ(๑╹◡╹)ノ”用sublime写一个页面骨架
sublime 快捷键
新建文件:
ctrl + n
保存文件 :
ctrl + S
快速生成一个标签:英文+tab
打开文件夹:文件夹直接拖进来 / 文件 =>打开文件夹
生成结构代码:
html:5 + tab
或者! + tab
(前提:必须是后缀.html文件)快速复制一整行
ctrl + shift + d
或者把光标放在这一行,然后ctrl + c
再ctrl + v
删除一行:
Ctrl+X
注释 : ctrl + /
注释:在代码中展示,页面渲染时会忽略,用户看不到,给程序员看。
<!-- 需要注释的内容-->
ヾ(๑╹◡╹)ノ”偷偷夸老师
HTML的其他介绍(了解)
需要知道的几个小点
标签的关系
嵌套关系(父子关系)
1 | <head> |
并列关系(兄弟关系)
1 | <head></head> |
ヾ(๑╹◡╹)ノ”测试题
请问下列哪个标签是错误的?(父子关系可以通过缩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 | <h1>1级标题</h1> |
显示效果 :
- 文字都有变大,但是从h1~h6文字逐渐减小
- 文字都有加粗
- 独占一行
注意 : 一般网页中h1标签不能乱用,一般只会用在新闻的标题或者网页的logo上(h1标签对于seo:搜索引擎优化很重要)
p 标签 (Paragraph) : 段落标签
例如:网页中的段落,就是通过段落标签来完成效果的
作用: 给页面上的一段文字加上段落语义
代码: <p>这是段落</p>
特点:
- 段落与段落之间有间隙
- 独占一行
ヾ(๑╹◡╹)ノ”在新浪网页上查看元素
hr 标签 (Horizontal Rule):水平线标签
它就是在网页中显示一条水平线
作用: 在页面上显示一条横线
代码: <hr>
ヾ(๑╹◡╹)ノ”可以写一个新闻页面了
br 标签 (break row=行):换行标签
作用:强制换行(代码中换行无效)
代码:<br>
(4组)文本格式化标签
网页中有时候需要让文字有加粗、下划线、倾斜、删除线这样的效果,在没有学习css之前,咱们可以使用文本格式化标签来完成效果
作用:
- b: 加粗
- u: 下划线
- i: 倾斜
- s: 删除线
建议不要使用, 因为这些标签没有语义
语义就是标签的含义,比如:标题标签的语义就是标题的含义,段落标签的语义就是段落的含义
作用:
- strong: 加粗
- ins: 下划线
- em: 倾斜
- del: 删除线
可以使用
语义: 起强调加强语气作用
标签的属性(了解)
属性为 HTML 元素提供附加信息。(让同一种标签有不同的显示效果)
问题:如果想让两个水平线颜色不一样,可以怎么完成呢?
可以通过添加颜色属性的方式来完成。
代码:
1 | <hr color="red" width="400" /> |
格式:
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 | <img src="2.jpg"> |
下级目录
下级目录:如果图片在同级目录的image文件夹里面(类比于:我在大厅,你在房间里)
步骤:
- 写目标文件所在文件夹的名字
- 进入文件夹 /
- 直接写目标文件的名字即可
1 | <img src="image/1.jpg"> |
上级目录
上级目录:如果图片在页面的上一级目录(类比于:我在房间,你在大厅)
步骤:
- 去上一级目录 ../
- 直接写目标文件的名字即可
1 | <img src=”../2.jpg” > |