web-入门*
PC端 - web开发_HTML
1. 目的 : 精通网页布局 为后面学习 Javascirpt 打基础
基础学习路线。
- HTML5基础
- CSS3基础
- H5C3提高
- 项目实战
1.1. HTML导读
- 能够说出网页的基本组成
- 能够说出什么是HTML
- 能够说出常用的浏览器
- 能够说出 Web 标准的三大组成部分
1.1.1 网页 : 网页的相关概念
- 什么是网页 ?
- 网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合
- 网页是网站中的一"页",通常是 HTML 格式的文件, 他要通过浏览器来阅读
- 网页是构成网站的基本元素, 他通常是由图片,链接,文字,声音,视频等元素组成. 通常我们看到的网页,常以 .htm 或 .html 后缀结尾的文件, 因此将其俗称为 HTML 文件.
1.1.2 网页 : 网页的相关概念
-
HTML 指的是 超文本标记语言 ,
-
他是用来描述网页的一种语言.
-
HTML 不是一种编程语言 而是一种标记语言
-
标记语言是一套标记标签
-
网页的形成
网页是由网页元素组成的 这些元素是利用HTML 标签描述出来的 然后通过浏览器解析出来显示给用户
前端人员开发代码 ==> 浏览器显示代码(解析, 渲染) ==> 生成最后的 Web 页面
小结:
- 网页是图片 , 链接 , 文字 , 声音 , 视频等元素组成 , 其实就是一个 HTML 文件(后缀名为html)
- 网页生成制作 : 前端人员书写 HTML 文件 , 然后浏览器打开 , 就可以看到网页
- HTML : 超文本标记语言 , 用来制作网页的一门语言 , 有标签组成的 例如: 图片标签 链接标签 视频标签等…
1.1.3 常用浏览器
网页是通过浏览器来展示的 , 关于浏览器我们要介绍以下两点:
-
常用浏览器
浏览器是网页显示 , 运行的平台 . 常用的浏览器有 IE 、火狐 、谷歌 、Safari和Opera等
平时我们统称为 五大 浏览器
-
浏览器内核
Trident–(IE内核)
国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”
Gecko–(火狐)
Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁。
webkit–(苹果Safari)
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。
Chromium/Blink–(谷歌)
在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
大部分国产浏览器最新版都采用Blink内核。
Presto–(Opera)
Presto 是挪威产浏览器 opera 的 “前任” 内核，最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了
2.web标准
由于浏览器内核不同;导致不同浏览器解析出来的效果可能不一致,开发者常常需要为多版本的开发而艰苦工作,这时候我们应该有一个标准
2.1 web标准的好处
A 让 web 的发展前景更加广阔 （前景广阔）
B 内容能被更广泛的设备访问 （广泛访问）
C 更容易被搜索引擎搜索 （易于搜索）
D 降低网站流量费用 （降低费用）
E 使网站更易于维护 （易于维护）
F 提高页面浏览速度 （提高速度）
2.2 web标准构成
Web标准不是某一个标准,而是有W3C和其他标准化组织制定的一系列的集合. 主要包括结构(Structure). 表现(Presentation) 和行为 (Behavior) 三个方面
结构标准: 结构用于对网页元素进行整理和分类 , 主要包括 XML 和 XHTML 两个部分
样式标准: 表现用于设置网页元素的版本 , 颜色 , 大小等外观样式 , 主要指的是CSS
行为标准: 行为是指网页模型的定义以及交互的编写 , 主要包括 DOM 和ECMAScript 两个部分
理想状态下我们的源码 : HTML CSS JS
直观感受 : 人的骨骼就好比是 结构 ( 结构 : 是内容更加清晰 , 更具有逻辑性 ) , 衣服鞋子就相当于 表现 ( 表现 : 用于修饰内容的样式 ) , 行走 , 奔跑 , 跳跃就是行为 ( 行为 : 内容的交互以及操作效果 )
3.初识HTML
一般先学习 HTML + CSS 这里我们先定一个小目标, 先学 HTML 后学CSS
HTML (Hyper Text Markup Language 的缩写) 中文译为"超文本标签语言" , 主要通过 HTML 标签对网页的文本 图片 声音 等内容进行描述
我是加粗的字体
注意 : 体会 文本 标签 语言 几个词语
3.1 HTML 骨架格式
日常生活中的书信 我们要遵循一个共同的约定
同理 : HTML 有自己的语言语法骨架格式 :
课堂练习 : 书写我们的第一个 HTML 页面
1. 新建一个 demo 的 TXT 文件
2. 里面写入刚才的 HTML 骨架
3. 把后缀名称改为 .html
4. 右击 -- 谷歌浏览器打开
1.html 标签 : 作用所有的html中标签的一个根节点
2.head 标签作用 : 存放 title meta base style scirpt link 注意在 head 中我们必须要设置的标签是 title
3.title 标签 : 让页面拥有一个属于自己的标题
4.body标签作用 : 页面的主体部分 , 用于存放所有的 HTML 标签 如 p,h,a,u,i,s,em,del,ins,strong,img
3.2 HTML 标签分类
在 HTML 页面中, 带有"<>“符号的元素 被称为 HTML 标签, 如上面提到的 都是HTML标签 . 所谓标签就是放在”<>"标签符中 表示某个功能的编码命令 , 也称为 HTML标签 或 HTML 元素
-
双标签
<标签名> 内容
该语法中"<标签名>" 表示改标签的作用开始 , 一般称为 “开始标签 (start tag)” , “” 表示该标签的作用结束 , 一般称为 “结束标签 (end tag)”. 和开始标签相比 结束标签只是在前面加了一个关闭符"/"
比如 我是文字呀 -
单标签
<标签名 />
单标签也称空标签 , 是指用一个标签符号即可完整地描述某个功能的标签
比如
3.3 HTML 标签关系
标签的相互关系就分为两种 :
-
嵌套关系
父子关系: -
并列关系
文档类型
这句话就是告诉我们使用哪个版本的 HTML HTML 有很多的版本 那我们应该告诉浏览器我们使用的版本号
标签位于文档最前面 , 用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范 必须在开头处使用标签为所有的XHTML文档指定XHTML版本和类型, 只有这样浏览器才能够按照指定的文档类型进行解析注意 : 一些老的网站可能用的还是来老版本的文档类型比如 XHTML 之类的 , 但是我们学的是 HTML5 的文档类型 兼容性很好(向下兼容的原则),所以大家放心使用HTML5的文档类型就OK
字符集
UTF-8是目前最常用的字符集编码方式, 常使用的字符集编码还有 gbk 和 gb2312
gb2312 简单中文 包括 6763个汉字
BIG5 繁体中文 港澳台等地使用
GBK 包含全部中文字符 是GB2312的扩展 加入对繁体字的支持 兼容 GB2312
UTF-8 包含全世界所有国家需要用到的字符
记住一点 , 以后我们统统使用 UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了
HTML 标签的语义化
白话: 所谓的标签语义化 , 就是指标签的含义
为什么要有语义化标签
- 方便代码的阅读和维护
- 同时让浏览器或网络爬虫可以很好的解析 , 从而更好的分析其中的内容
- 使用语义化标签会具有更好的搜索引擎优化
核心: 合适的地方给一个最为合理的标签
语义是否良好 : 当我们去掉CSS之后,网页结构依然组织有序 并有良好的可读性
不管是谁 都能看懂这块内容
遵循的原则 : 先确定语义的 HTML 在选合适的 CSS
HTML 标签
首先 HTML 和CSS 是两种完全不同的语言 , 我们学的是结构 , 就只写HTML 标签, 认识标签就OK了 不会在给结构标签指定样式
HTML标签有很多 这里我们学习最为常用的 后面有些较少用的 我们可以查一下手册就OK 了
排版标签
排版标签主要和CSS搭配使用 , 显示网页结构的标签 , 是网页布局最常用的标签
标题标签(熟记)
单词缩写: head 头部. 标题
为了使页面更具有语义化, 我们经常会在页面中用到标题标签 HTML 提供了6个等级的标题, 即
和
标题标签语义 : 作为标题使用 , 并且依据重要性递减
基本语法格式如下
标题文本
注意 : h1 标签因为重要 尽量少用 不要动不动就向你扔了一个h1 一般h1都是给logo使用
段落标签(熟记)
单词缩写 : paragraph 段落
在网页中要把文字有条理的显示出来 离不开段落标签 如同我们平时写文章一样 整个网页也可以分为若干个段落
文本内容
而段落标签就是 HTML 文档中最常见的标签 默认情况下 文本在一个段落中 会根据浏览器窗口的大小自动换行
水平线标签(认识)
单词缩写 : horizontal 横线
在网页中经常 看到一些水平线将段落与段落之间隔开 , 使得文档结构清晰 , 层次分明 . 这些水平线可以通过插入图片实现,也可以简单地通过标记来完成 ,
就是创建横跨网页的水平线标记 基本语法如下 :
是单标记
在网页中显示默认样式的水平线
换行标签(熟记)
单词缩写 : break 打断, 换行
在HTML中 , 一个段落中的文字会从左到右依次排列, 知道浏览器窗口的右端, 然后自动换行. 如果希望某段文字强制换行显示, 就需要使用换行标签
这时如果还像在 word 中直接敲回车换行就不起作用了
div span 标签(重点)
div span 是没有语义的 是我们网页布局主要的2个盒子
div 就是 divison 的缩写 分割,区分的意思 其实有很多的div来组合网页
span 跨度 跨距 范围
语法格式:
这是头部 今日价格
文本格式化标签(熟记)
在网页中, 又是需要文字设置粗体 , 斜体 或下划线效果 , 这是就需要用到 HTML 中的文本格式化标记 是文字以特殊的方式显示
标签 : 文字以 粗体 显示 (XHTML推荐使用 strong)
标签 : 文字以斜体方式显示 (XHTML推荐使用em)
标签 : 文字以加删除线方式显示(XHTML 推荐使用del)
标签 : 文字以加下划线方式显示 (XHTML不赞成使用u)
b i s u 只有使用 没有强调的意思 strong em del ins 语义更加强烈
标签属性
属性就是特性 比如 手机的颜色 手机的尺寸 , 总结就是手机的…
使用HTML制作网页时, 如想让HTML标签提供更多的信息 可以使用HTML标签的属性加以设置 其基本语法格式如下 :
<标签名 属性1 = "属性值1" 属性2 = "属性值2" ...> 内容
在上面的语法中 ,
- 标签可以拥有多个属性, 必须写在开始标签中 位于标签后面
- 属性之间不分先后 标签名与属性 属性与属性之间均以空格分开
- 任何标签的属性都有默认值 省略该属性则取默认值
- 采取 键值对 的格式 key = " value " 的格式
比如 :
属性 : 宽度
值 : 400
提倡 : 尽量不使用 样式属性
图像标签 img (重点)
单词缩写 : image 图像
HTML网页中任何元素的实现都要依靠HTML标签 , 要想在网页中显示图像就需要使用图像标签 , 接下来将详细介绍图像标签以及和他相关的属性 其基本语法格式如下 :
该语法中 src 属性用于指定图像文件的路径和文件名,他是 img 标签的必须属性
标记属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素(XHTML不支持%页面百分比) 设置图像的宽度
height 像素(XHTML不支持%页面百分比) 设置图像的高度
border 数字 设置图像边框的宽度
链接标签(重点)
单词缩写 : anchor 的缩写 基本解释 锚, 铁锚 的
在HTML 中创建超链接非常简单 只需要标签环绕需要被链接的对象即可 其基本语法格式如下 :
文本或图像
href : 用不指定链接目标的 url 地址, 当为标签应用 href 属性时 , 它就有了超链接的功能. Hypertext Reference 的缩写 意思是超文本引用
target : 用于指定链接页面的打开方式 其取值有 self 和 blank 两种 , 其中self为默认值, blank为在新窗口中打开方式
注意 :
- 外部链接 需要添加 http://www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如 首页
- 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为"#"(即href="#"),表示该链接暂时为一个空连接
- 不仅可以创建文本超链接,在网页中各种元素 如图像 表格 音频 视频等 都可以添加超链接
锚点定位(难点)
通过创建锚点链接 用户能够快速定位到目标内容
创建锚点链接分为两步 :
1. 使用"a href="#id名"链接文本/a"创建链接文本. a href="#nb"
2. 使用相应的id名标注跳转目标的位置 id = "nb"
3. 例如 文字 文字
base标签
base可以设置整体链接的打开状态 可以设置所有的都在新窗口打开 写在 标签中
特殊字符标签(理解)
HTML为这些特殊的字符准备了专门的替代
注释标签
在HTML中还有一种特殊的标签----注释标签 如果需要在HTML文档中添加一些便于阅读和理解 但又不需要显示在页面中的注释文字 就需要使用注释标签 基本语法如下:
注释内容不会显示在浏览器窗口中 但是作为HTML文档内容的一部分 也会被下载到用户的计算机上 查看源代码时就可以看到
注释的重要性 :
##### 路径(重点 难点)
在实际工作中 通常新建一个文件夹专门用于存放图像文件 这时在插入图像 就需要采用"路径"的方式来指定图像文件的位置 路径可以分为 : 相对路径和绝对路径
相对路径
- 图像文件和HTML文件位于同一文件夹 : 只需输入图像文件的名称即可, 如
- 图像文件位于HTML文件的下一级文件夹: 输入文件夹名称和文件名 之间用"/"隔开 如
- 图像文件位于HTML 文件的上一级文件夹: 在文件名之前加入"…/",如果是上两级,则需要使用"…/…/"以此类推, 如
- 比如桌面有个存图片的文件夹 ，那么把他拉进CSCOD配合使用
绝对路径
“D:\web\img\logo.gif”, 或完整的网络地址 如"http://www.itcast.cn/images/logo.gif".
列表标签
什么是列表
把…制成表 以表来显示
容器里面装载着文字或图表的一种形式 叫列表
列表最大的特点就是 整齐 整洁 有序
无序列表 ul (重点)
无序列表的各个列表项之间没有顺序级别之分 是并列的 其基本语法格式如下:
- 列表
- 列表
- 列表
- 列表
........
比如 新闻就是没有顺序的 不用排队 先到先得 后发布 先显示
脚下留心:
1.
中只能嵌套,直接在
标签中输入其他标签或者文字的做法是不被允许的
2.与 之间相当于一个容器 可以容纳所有元素
3.无序列表会带有自己样式属性 放下那个样式 一会让CSS来
有序列表ol (了解)
比如我们常见的奥运会的奖牌排名等
有序列表即为有排列顺序的列表 其各个列表项按照一定的顺序排列定义 有序列表的基本语法格式如下:
- 第一
- 第二
- 第三
- 第四
......
自定义列表(理解)
自定义列表常用语对术语或名词进行解释和描述 定义列表的列表项钱没有任何项目符号 基本语法如下:
- 名词一
- 名词一解释一
- 名词一解释二
...
- 名词二
- 名词二解释一
- 名词二解释二
...
表格(理解会用)
存在即合理 表格现在还是比较常用的一种标签, 但不是用来布局的 常见处理, 显示表格式数据
创建表格
在HTML网页中 要想创建表格 就需要使用表格相关的标签 创建表格的基本语法如下:
单元格内的文字
......
......
在上面的语法中包含三队HTML 标签 分别为
1. table 用于定义一个表格
2. tr用于定义表格中的一行 必须嵌套在 table标签中 在table中包含几对 tr 就有几行表格
3. td /td: 用于定义表格中的单元格 必须嵌套在 注意:
表格属性
##### 表头标签
表头一般位于表格的第一行或第一列 其中文本加粗居中 设置表头非常简单 只需要用表头标签替代相应的单元格标签即可
表格结构(了解)
在使用表格进行布局时,可以将表格划分为头部 主题 和页脚(页脚因为有兼容性问题,我们不在赘述),具体 表示如下
: 用于定义表格的头部
必须位于
标签中,一般包含网页的 Logo 和导航等头部信息
: 用于定义表格的主体
位于
标签中 一般包含网页中除头部和底部之外的其他内容
表格标题
表格的标题: caption
定义和用法: caption 元素定义表格标题
我是表格标题
caption 标签必须紧随 table 标签之后 您只能对每个表格定义一个标题 通常这个标题会被居中于表格之上
合并单元格
跨行合并: rowspan 跨列合并 : colspan
合并单元格的思想:
将多个内容合并的时候, 就会有多余的东西, 把它删除 例如 把3个 td 合并成一个 那就多余了2个 需要删除
公式 : 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
总结表格
-
表格提供了HTML中定义表格式数据的方法
-
表格中由行中的单元格组成
-
表格中没有元素 列的个数取决于行的单元格个数
-
表格不要纠结于外观, 那是CSS的作用
表格的学习要求: 能手写表格结构, 并且能合并单元格
表单标签(掌握)
现实中的表单 类似我们去银行办理信用卡填写的单子
目的是为了收集用户信息
在我们的网页中 我们需要跟用户进行交互 收集用户资料 此时也需要填写表单
在HTML中 一个完整的表单通常有表单控件(也称为表单元素) 提示信息和表单域3个部分构成
表单控件: 包含了具体的表单功能项,如单行文本输入框 密码输入框 复选框 提交按钮 重置按钮等
提示信息: 一个表单中通常还需要包含一些文字说明 提示用户进行填写
表单域: 相当于一个容器 用来容纳所有表单控件赫尔提示信息,可以通过他定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法,如果不定义表单域,表单中的数据就无法传送到后台服务器
input控件(重点)
在上面的语法中, 标签为单标签 type 属性为其最基本的属性 其取值有多重 用于指定不同控件类型 除了 type 属性之外 标签还可以定义很多其他属性 其常用属性如下图所示 :
注意 : 单选框 如果是一组 我们通过相同的 name 值 来实现
性别: 女 男
注意 : 复选框 可以同时选择多个
爱好: 篮球 足球
注意 : 默认选中项 只需要在属性中添加 checked=“checked” 默认选中性别女 代码如下 :
性别: 女
input 按钮组
搜索:
最多字符数和文本值 maxlength = " 6 " 最多字符数为 6 value = “789” 在input框中的显示为789
lable标签(理解)
label 标签为 input 元素定义标注 (标签)
作用: 用于绑定一个表单元素 当点击 label 标签的时候 被绑定的表单元素就会获得输入焦点
那么 我们如何绑定元素呢?
for 属性规定 label 与哪个表单元素绑定
1. 用label直接进行包裹input标签
2. 如果label里面有多个表单 想定位到某个地方 可以通过for id 的格式来进行
textarea控件(文本域)
如果需要输入大量的信息, 就需要用到标签 通过textarea控件可以轻松的创建多行文本输入框 其基本语法格式如下 :
下拉菜单
使用 select 控件定义下拉菜单的基本语法格式如下
注意 :
1. 中至少应包含一对
2. 在option中定义 selected="selected" 时, 当前项即为默认选中项
表单域
在 HTML 中 form标签被用于定义表单域 即创建一个表单 以实现用户信息的收集和传递 form 中的所有内容都会被提交给服务器 创建表单的基本语法格式如下 :
常用属性 :
-
Action
在表单收集到信息后, 需要将信息传递给服务器进行处理 action 属性用于指定接收并处理表单数据的服务器程序的 url 地址
-
method
用于设置表单数据的提交方式 其取值为 get 或 post
-
name
用于指定表单的名称 以区分同一个页面中的多个表单
注意 : 每个表单都应该有自己的表单域
HTML5新标签与特性
文档类型设定
document
HTML : 输入html:4s
XHTML : 输入html:xt
HTML5 : 输入html:5
字符设定
:HTML与XHTML中建议这样去写
: HTML5中建议这样去写
常用新标签
W3C 手册中文官网 : http://w3school.com.cn/
header : 定义文档的页眉 头部
nav : 定义导航链接的部分
footer : 定义文档或节的页脚 底部
article : 定义文章
section : 定义文档中的节 ( section, 区段 )
aside : 定义其所处内容之外的内容 侧边
datalist : 标签定义选项列表 请与 input 元素配合使用该元素
fieldset : 元素可将表单内的相关元素分组 打包 与 legend 搭配使用
新增的 input type 属性值:
常用新属性
自动记录完成
1. autocomplete 首先需要提交按钮
2. 这个表单 您必须给他名字
课堂案例
多媒体标签
embed: 标签定义嵌入的内容
audio : 播放音频
video : 播放视频
多媒体 embed(会使用)
embed可以用来插入各种多媒体 格式可以是 Midi Wav AIFF AU MP3等等 url为音频或视频文件及其路径 可以是相对路径或者绝对路径
因为兼容性问题 我们只讲解插入网络视频 后面会讲解 audio 和 video 视频多媒体
多媒体 audio
HTML5 通过标签来解决音频播放的问题
我们可以通过附加属性 更加友好的控制音频的播放, 如 :
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 loop=“2” 就是循环2次 loop或者loop="-1" 无限循环
由于版权等原因 不同浏览器可以支持播放的格式是不一样的 如下图
多浏览器支持的方案
多媒体 video
HTML5通过标签来解决音频播放的问题
同音频播放一样 使用也相当简单
同样 通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版本等原因 不同浏览器可以支持播放的格式是不一样的 如图
多浏览器适配方案如下:
