HTML 入门
1 HTML 入门
1.1 初识 HTML
1.1.1 概述
网络世界已经跟我们息息相关,当我们打开一个网站,首先映入眼帘的就是一个个华丽多彩的网页。这些网页,不仅呈现着基本的内容,还具备优雅的布局和丰富的动态效果,这一切都是如何做到的呢?前端入门课程,为您一层层的揭开网页的面纱。
网页的构成
HTML:通常用来定义网页内容的含义和基本结构。
CSS:通常用来描述网页的表现与展示效果。
JavaScript:通常用来执行网页的功能与行为。
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。
所谓超文本Hypertext
,是指连接单个或者多个网站间的网页的链接。我们通过链接,就能访问互联网中的内容。
所谓标记Markup
,是用来注明文本,图片等内容,以便于在浏览器中显示,例如<head>
,<body>
等。
HTML 发展简史【了解】
HTML 1.0 在 1993 年 6 月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
HTML 2.0——1995 年 11 月作为 RFC 1866 发布,在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
HTML 3.2——1997 年 1 月 14 日,W3C 推荐标准
HTML 4.0——1997 年 12 月 18 日,W3C 推荐标准
HTML 4.01(微小改进)——1999 年 12 月 24 日,W3C 推荐标准
HTML5 —— 2014 年 10 月 29 日,万维网联盟宣布,经过接近 8 年的艰苦努力,该标准规范终于制定完成。是目前最为流行的版本,提供了很多标签新特性,现代大多数浏览器已经具备了 HTML5 的支持。
扩展资料:
w3c 是万维网联盟(World Wide Web Consortium,W3C),又称 W3C 理事会。1994 年 10 月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李,负责制定 web 相关标准的制定。
1.1.2 HTML 的组成
HTML 页面由一系列的元素(elements) 组成,而元素是使用标签创建的。
1)标签
一对标签( tags)可以设置一段文字样式,添加一张图片或者添加超链接等等。 例如:
在 HTML 中,<h1>
标签表示标题,那么,我们可以使用开始标签和结束标签包围文本内容,这样其中的内容就以标题的形式显示了。
2)属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中,加入属性。通常以名称=值
成对的形式出现,比如:name='value'。例如:
在 HTML 标签中,align
属性表示水平对齐方式,我们可以赋值为 center
表示 居中 。
1.2 入门案例
1.2.1 初始页面
1)创建一个标准的初始化页面
右键点击创建新页面
自定义文件名字,比如 index
点击 ok,页面创建成功。
2)页面说明
<!DOCTYPE html>
: 声明文档类型。规定了 HTML 页面必须遵从的良好规则,从 HTML5 后,<!DOCTYPE html>
是最短的有效的文档声明。文字作为了解资料
很久以前,早期的 HTML(大约 1991 年 2 月),文档类型声明类似于链接,能自动检测错误和其他有用的东西。使用如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
然而现在没有人再这样写,需要保证每一个东西都正常工作已成为历史。
<html>
:这个标签包裹了整个完整的页面,是一个根元素(顶级元素)。其他所有元素必须是此元素的后代,每篇 HTML 文档只有一个根元素。<head>
:这个标签是一个容器,它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。以后的章节能学到更多关于<head>
元素的内容。目前主要了解两个标签:<meta charset="utf-8">
:这个标签是页面的元数据信息,设置文档使用 utf-8 字符集编码,utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容,能够避免页面乱码问题。<title>
:这个标签定义文档标题,位置出现在浏览器标签上,而不是页面正文中。在收藏页面时,它可用来描述页面。<body>
:包含了文档内容,你访问页面时所有显示在页面上的文本,图片,音频,游戏等等。
1.2.2 案例实现
在初始化页面的
<body>
标签中,加入一对<p>
标签。<p>
标签表示文本的一个段落,具有整段文本之间相分离的效果。
在一对
<p>
标签中,编写文本内容。
打开浏览器查看,效果如下:
1.3 总结
HTML 是一种标记语言,用来组织页面,使用元素和属性。
这个元素的主要部分有:
元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
内容(Content):元素的内容,本例中就是所输入的文本本身。
属性(Attribute):标签的附加信息。
在学习 HTML 时,要抓住两个方面:
掌握标签所代表的含义。
掌握在标签中加入的属性的含义。
2 基本语法
2.1 关于注释
如同大部分的编程语言一样,在 HTML 中有一种可用的机制来在代码中书写注释。
2.2 关于标签
2.2.1 空元素
不是所有元素都拥有开始标签,内容和结束标记。一些元素只有一个标签,叫做空元素。它是在开始标签中进行关闭的。例子如下:
2.2.2 嵌套元素
你也可以把元素放到其它元素之中——这被称作嵌套。比如,我们想要强调第一个
,可以将<b>
标签包围第一个,这样b标签
就是嵌套在了p标签
中:
2.2.3 块级和行内
1)概念
在 HTML 中有两种重要元素类别,块级元素和内联元素。
块级元素:
独占一行。块级元素(block)在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。比如
<p>
,<hr>
,<li>
,<div>
等。行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。比如
<b>
,<a>
,<i>
,<span>
等。注意:一个块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
2)div 和 span
<div>
是一个通用的内容容器,并没有任何特殊语义。它可以被用来对其它元素进行分组,一般用于样式化相关的需求。它是一个块级元素。<span>
是短语内容的通用行内容器,并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。注意:div 和 span 在页面布局中有重要作用。
2.3 关于属性
【重点讲解】
属性作为 HTML 的重要部分,这里强调属性的格式和作用。
标签属性,主要用于拓展标签。属性包含元素的额外信息,这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据,属性总是以name = value
的格式展现。
属性名:同一个标签中,属性名不得重复。
大小写:属性和属性值对大小写不敏感。不过 W3C 标准中,推荐使用小写的属性/属性值。
引号:双引号是最常用的,不过使用单引号也没有问题。
常用属性:
2.4 特殊字符
了解讲解:
内容简单,迅速带过。
在 HTML 中,字符 <
, >
,"
,'
和 &
是特殊字符. 它们是 HTML 语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢
2.5 总结
HTML 的基本语法比较简单,在使用的过程中注意写法即可。
3 HTML 案例-新闻文本
重点讲解:
div 布局的基本方式
文本标签的基本使用
文本结构的页面基本是由标题和段落构成的,内容结构化会使读者的阅读体验更轻松。
3.1 案例效果
显示新闻文本。
3.2 案例分析
3.2.1 div 样式布局
文本由几部分构成,我们可以使用 div 将页面分割布局。先来了解一下,使用 div 如何进行简单的布局。
在 head 标签中,通过 style 标签加入样式。
基本格式:
多个属性名格式:
效果如下:
div 的多样式:
一个属性名可以含有多个值,同时设置多样式。
格式:
【提示】
为了布局方便,我们通常可以先设置边框的样式,进行布局。结束后,再去掉边框,直观展示完整界面。
3.2.2 文本标签
使用文本内容标签设置文字基本样式。
【建议】
文本标签,建议视频老师根据 PPT,准备材料,简单演示即可。
重点演示 li 的不换行效果:
3.3 使用标签
简单布局,使用 div 标签。
文本样式,使用基本文本标签。
3.4 实现步骤
创建初始页面。
使用 div 标签划分区域(标题,作者,副标题,正文),设置 div 样式。
编辑正文。
使用 h1 标签加入标题。
使用 em 标签加入作者信息。
使用 hr 标签加入分割线。
使用 h3 标签加入副标题。
使用 p 标签加入正文。
使用 ol 标签,li 标签加入列表信息。
使用 strong 标签,加入文字强调效果。
4 HTML 案例-头条页面
4.1 案例效果
4.2 案例分析
4.2.1 div 布局的进阶
想要将 div 布局成案例效果,首先需要对多个 div 进行区分,再分别设置每一个 div 自身的效果。
1)div 的 class 值
首先编写三个 div,设置边框样式
发现通过 div 设置的样式都是一致的,无法个性化布局。如何区分不同的 div 呢?
使用 class 的值,格式:
所以,使用 class 属性值,可以帮助我们区分 div,更加精确的设置标签的样式。
2)浮动布局和清除
主体部分分为三列,而 div 是独占一行的,所以想要使用 div 布局,就还需要加入浮动
属性。
概念
float:指定一个元素应沿其容器的左侧或右侧放置,允许文本或者内联元素环绕它,该元素从网页的正常流动中移除,其他部分保持正常文档流顺序。
格式:
加入三部分 div
浮动布局
至此完成左中右三部分的布局。
加入
footer
部分
发现蓝色footer
的 div,延续正常文档流布局,摆放在navbar
的下方,与浮动元素重叠。想要清除浮动影响,所以要设置清除浮动属性clear
。
设置
center
增加center
高度,完成基本的布局效果。
4.2.2 设置背景
设置背景的格式:
请设置如下布局,效果如下
代码实现
4.2.3 图片标签
其他属性:
4.2.4 超链接
去掉下划线
根据某些样式的布局需求,去除下划线更为美观。
4.3 使用标签
使用 div 标签,设置布局,背景和浮动等。
基本文本标签
图片标签
超链接标签
4.4 实现步骤
创建初始页面,拷贝图片等素材。
整体布局。
实现顶部条(图片)。
实现导航条(图片)。
实现左侧分享区域(图片)。
实现中间正文区域(文本+图片)。
实现右侧广告区域(图片)。
实现底部页脚(链接)。
4.5.2 实现顶部条
HTML 代码
样式代码
效果如下:
4.5.3 实现导航条
HTML 代码
样式代码
效果如下:
###4.5.4 实现左部分享
HTML 代码
效果如下:
4.5.5 实现中部正文
HTML 代码
样式代码
4.5.6 实现右侧广告
HTML 代码
效果如下:
4.5.7 实现底部页脚
HTML 代码
样式代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NG0tUYpB-1661662606699)(assets/1573525055143.png)]
5 HTML 案例-登录页面
5.1 案例效果
5.2 案例分析
5.2.1 表单标签
举例:
表单的属性
举例:
GET 与 POST 说明:
post
:指的是 HTTP POST 方法;表单数据会包含在表单体内然后发送给服务器。
get
:指的是 HTTP GET 方法;表单数据会附加在 action
属性的 URI 中,并以 '?' 作为分隔符,然后这样得到的 URI 再发送给服务器。
GET 方式举例:
GET 与 POST 对比:
5.2.2 表单元素入门
表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
1)简单的文本输入框
label 标签:表单的说明。
for 属性值:匹配 input 标签的 id 属性值
input 标签:输入控件。
type 属性:表示输入类型,text 值为普通文本框
id 属性:表示标签唯一标识
name 属性:表示标签名称
value 属性:表示标签数据值
代码实现:
效果如图:
2)提交用户名的表单
button 标签:表示按钮。
type 属性:表示按钮类型,submit 值为提交按钮。
5.2.3 关于属性值
1)NAME 和 VALUE 属性
使用方式:
以 name 属性值作为键,value 属性值作为值,构成键值对提交到服务器,多个键值对浏览器使用&
进行分隔。
举例:
2)TYPE 属性
input 标签的 type 属性
【建议】
这是今天的重点讲解内容,type 的值决定输入的类型
基本的文本属性
举例:
单选多选属性
举例:
按钮属性
HTML5 新增的 type 值
button 标签的 type 属性
3)HTML5 新增属性
5.2.4 更多表单元素
select 举例:
textarea 举例:
fieldset 举例:
5.3 使用标签
简单布局,使用 div 标签
基本文本标签
表单标签
图片标签
5.4 实现步骤
设置背景图。
基本上下两部分布局。
实现上部(图片)
实现下部(表单)
实现页面跳转,从案例 2 跳转到案例 3。
评论