目录
-
一.网页
1.1什么是网页
网站是指在因特网上根据一定规则,使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一‘页’,通常是HTML格式的文件,他需要通过浏览器来阅读。
网页是构成网站的基本元素,它通过由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以.htm或.html后缀结尾的文件,因此俗称其为HTML文件。
1.2什么是HTML
HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。
HTML不是一种编程语言,而是一种标记语言(markup language)。标记语言是一套标记标签。
所谓超文本,有两层含义:
①它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)
②它还可以从一个文件跳到另一个文件,与世界各地主机的文件连接(超级链接文本)
1.3网页的形成
网页是由网页元素组成的,这些元素是利用html标签描述出来的,然后通过浏览器解析来显示给用户的。
前端人员开发代码------>浏览器显示代码(解析、渲染)------>生成最后的Web网页
二.Web标准(重点)
1.为什么需要Web标准?
浏览器不同,他们显示页面或者排版就有些许差异。
2.Web标准的构成
主要包括结构(structure)、表现(Presentation)和行为(Behavior)三个方面
- 结构:结构用于对网页元素进行整理和分类,现阶段主要学的是HTML(鸟的身体)
- 表现:表现用于设置网页元素的排版、颜色、大小等外观样式,主要指的是CSS(鸟的羽毛)
- 行为:行为指的是网页模型的定义以及交互的编写,现阶段学的是Javascript(鸟的行为)
三.HTML标签(上)
- 说出标签的书写注意规范
- 写出HTML骨架标签
- 写出超链接标签
- 写出图片标签并说出alt和title的区别
- 说出相对路径的三种形式
- HTML语法规范
1.1 基本语法规范
1. HTML 标签是由尖括号包围的关键词,例如<html>。
2. HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个是结束标签。
3. 有些特殊的标签必须是单个标签(极少情况),例如<br />,我们称为单标签。
1.2标签关系
双标签关系可以分两类:包含关系和并列关系。
包含关系:
<head>
<title></title>
</head>
并列关系:
<head></head>
<body></body>
2.1HTML基本结构标签
2.1第一个HTML网页
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基础标签上书写。
HTML页面也称为HTML文档。
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中最大的标签,我们称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主题 | 元素包括文档的所有内容,页面内容基本都是放到body里面的 |
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
学习HTML第一天
</body>
</html>
HTML文档的后缀名必须是.html或.htm,浏览器的作用是读取HTML文档,并以网页的形式显示出它们。
2.2基本结构标签总结
3.网页开发工具
有webstorm、Dreamweaver CS6、sublime、pycharm、vscode等等
vscode骨架标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3.1文档类型声明标签
<!DOCTYPE> 文档类型声明,作用是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE.html>
这句代码的意思是:当前页面采取的是HTML5版本来显示网页
注意:
1.<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。
2.<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签
3.2 lang语言种类
用来定义当前文档显示的语言
<html lang="en">
1.en定义为英文
2.zh-CN定义语言为中文
简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页
其实对于文档显示来说,定义成en的文档也可以显示中文,定义为zh-CN也可以显示英文
实际上是为了给浏览器一个警示。
3.3字符集
字符集(Characterset)是多个字符的集合,以便计算机能识别和储存各种文字。
在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种文字编码。
<meta charset="UTF-8"/>
charset常用的有:GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。(上面语法是必须要写的,否则可能引起乱码的情况)
4.HTML常用标签
4.1标签语义
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是值标签的含义。
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
4.2标题标签<h1>-<h6>(重要)
HTML提供6个等级的网页标签即<h1>-<h6>
<h1>我是一级标签</h1>
单词head的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。
特点:
1.加了标题的文字会变得更粗,字号也会依次变大。
2.一个标题独占一行
4.3段落和换行标签(重要)
在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph的缩写,意为段落。
标签语义:可以把HTML文档分割为若干段落。
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。
在HTML中,一个段落中的文字从左到右排序,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br/>。
<br />
单词break的缩写,意为打断、换行。
标签语义:强制换行。
特点:
1.<br />是个单标签。
2.<b2 />标签只是一个简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
课题案例:
<body>
<h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
<h2>数据统计:水花兄弟合砍61分</h2>
<p>库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。</p>
<h2>兄弟对决升级:小库里给哥哥造成压力</h2>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
<p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。</p>
作者: pink老师<br />
2019-8-8
</body>
</html>