html:HTML4.01 指的就是网页技术
HTML5:HTML4.01 的升级版本
1.web 的基础知识
Web 与 Internet
1.Internet: 全球性的计算机互联网络, 因特网, 互联网, 交互网
2. 提供服务
前端学习圈: 767273102 , 从最基础的 HTML+CSS+JavaScript.jQuery,Ajax,node,angular 等到移动端 HTML5 的项目实战的资料都有整理
访问网站: www(world wide Web)服务
Email: 电子邮件服务
BBS: 电子公告板, 俗称论坛
FTP: 文件的上传下载
telenet: 远程登录
3.Internet 上的应用程序
1.C/S 程序
C:Client 客户端
S:Server 服务器端
代表: QQ, 微信, 网络游戏
2.B/S 程序
B:Browser 浏览器
S:server 服务器
代表: 网站
4.Web
Web: 运行在 Internet 之上的一种 B/S 结构的应用程序, 俗称网站.
w3c:(万维网联盟)
w3c: 制定 Web 技术规范
Web 的工作原理:
基于浏览器和服务器还有通信协议来实现信息的传输和展示.
1. 通信协议
HTTP/HTTPS
规范了数据是如何传递和打包
2. 服务器
1. 功能
1. 存储 Web 信息, 并提供程序运行环境
2. 接收用户请求并给出响应
3. 具备一定的安全功能
2. 服务器产品
- TOMCAT
- APACHE
- IIS
3. 服务器技术
1.PHP
2.java
3..NET
3. 浏览器
功能:
1. 代理用户 (UA:user agent) 提交请求
2. 以图形化的方式显示网页
3. 作为 HTML 和 JS 的解释器
浏览器产品:
- IE
- Chrome
- Firefox
- opera
- Safari
浏览器技术:
1.HTML
2.CSS
3.JavaScript
2.HTML 快速入门
1. 什么是 HTML?
HTML:Hyper Text Markup Language
超文本标记语言
ex:
普通文本 a: 英文首字符
超级文本 a: 超链接
普通文本 b: 英文第二个字符
超级文本 b: 加粗
language: 语言, 有自己的语法结构
特点:
1. 以. HTML 或. htm 为后缀
2. 由浏览器解析执行
3. 可以嵌套脚本语言(JavaScript)
4. 用带有尖括号的标记来标识
2.HTML 的基础语法
1. 标记
标记又称为 "元素", 或 "标签", 在网页中, 主要表示一些功能.
标记在使用时, 必须用 <> 括起来
标记分类:
1. 封闭类型
又称为双标记
语法:
<标记>内容</ 标记>
ex:<a > 百度</a>
<b > 加粗</b>
注意: 必须有开始就有结束.
2. 非封闭类型
又称为单标记
语法:<标记>或<标记 />
ex:<img > 或 < img/>
<br > 或 < br/>
2. 标记嵌套
1. 什么是嵌套?
在一对标记中出现另外一对 (个) 标记, 从而形成功能的层叠.
2. 语法
- <标记>
- <标记>
- <标记 />
- </ 标记>
- </ 标记>
- ex:
- <a>
- <b > 这是演示文本</b>
- </a>
- ex:
- <a><b > 这是演示文本</b></a> 正确, 不推荐
- ex:
- <a><b>dfdsfsdfs</a></b> 错误
注意:
1. 换行缩进, 如果是双标记必须成对出现
3. 元素 (标记) 属性
作用: 修饰元素
语法:
1. 必须声明在开始标记中
<标记 属性名></ 标记>
2. 属性名与值之间用 "=" 连接
<标记 属性名 = 值></ 标记>
3. 元素允许有多个属性, 每个属性之间用空格隔开
- <标记 属性名 1 = 值 1 属性名 2 = 值 2 ...></ 标记>
- ex:
p 标记的 align 属性的值为 center,title 属性的值为 "这是段落"
<p align=center title="这是段落"></p>
标准属性(通有属性):
id: 定义元素的唯一标识(名称)
title: 定义鼠标悬停在元素上时所提示的文本
style:CSS 中, 定义行内样式
class:CSS 中, 引用类选择器
4. 注释
语法:<!-- 注释内容 -->
注意:
1. 注释本身不能嵌套
2. 不能嵌套在标记中
3.HTML 文档结构
1.HTML 文档结构
1. 文档类型声明
作用: 告诉浏览器 HTML 的版本类型
语法:<!doctype HTML>
在网页的最顶端编写
2.HTML 页面
在文档类型声明的下面写上一对根标记
<HTML></HTML>
在根标记中包含两部分:
文件头:<head></head>
定义网页的全局信息
文件主体:<body></body>
定义网页中显示的内容
2. 搭建网页结构
1. 文档类型的声明
2.HTML 页面结构
在主体内容 (body) 位置处显示 "我的第一个网页"
3.head 元素
head 是其它头元素的容器
1.<meta> 定义基本信息: 编码格式, 关键词, 描述内容等
- <meta charset="utf-8">
- <meta name="keywords" content="关键词">
- <meta name="description" content="描述内容">
2.<title></title> 定义网页的标题
3.<style></style> 定义内部样式
4.<script></script > 定义或引用 JavaScript 文件
5.<link> 引入外部样式
4.body 元素
显示网页的主要内容
1. 特殊字符
表示空格
< 表示一个<> 表示一个>
© 版权
¥ ¥
2. 文本标记
1. 文本样式
- <b></b>: 加粗
- <i></i>: 斜体
- <u></u>: 下划线
- <s></s>: 删除线
- <sup></sup>: 上标
- <sub></sub>: 下标
2. 标题元素
语法: 在网页中以醒目的方式来显示文字
语法:
- <hn > 内容</hn> n:1-6
- <h1 > 内容</h1> 一级标题
- ...
- <h6 > 内容</h6> 六级标题
特点:
1. 字体大小可变
2. 加粗
3. 上下文之间有垂直空白间距
属性: align
作用: 标记内容的水平对齐方式
取值: left/center/right
3. 段落元素
作用: 以突出的形式表示一段文本
语法:<p></p>
属性: align
取值: left/center/right
4. 换行元素
语法:<br > 或 < br/>
5. 分隔线元素
语法:<hr > 或 < hr/>
属性:
1.size 表示水平线的尺寸(高度), 取值为 px 或 % 的数字
2.width 宽度, 取值为 px 或 % 的数字
3.align 水平对齐方式 left/center/right
4.color 水平线的颜色, 取值为合法颜色值
6. 预格式化
作用: 保留 HTML 代码中的回车和空格
语法:<pre > 内容</pre>
7. 分区元素
1. 块分区元素
作用: 用于页面中元素的布局
语法:<div></div>
2. 行分区元素
作用: 处理同一行文本中的不同样式
语法:<span></span>
8. 行内元素和块级元素
1. 块级元素
在网页页中独占一行的元素就是块级元素
常见的块级元素:
1. 标题元素 h1-h6
2. 段落元素 p
3.div
4. 结构标记(header...)
2. 行内元素
多个元素位于同一行显示, 从左往右排列
常见的行内:
span,b,i,u,s,sup,sub,a,img
3. 行内块
显示方式如同行内元素, 但具备块级元素的特征
4.table ...
4. 图像和链接
1.URL
1. 目录结构
文件目录: 文件夹嵌套结构
2.URL
URL:Uniform Resource Locator 统一资源定位器, 俗称路径.
作用: 用于表示网络中任意一个资源的位置.
3. 路径的表现形式
1. 绝对路径
绝对路径就是完整路径, 一定可以找到你想找的资源.
1. 网络资源
通信协议 + 服务器主机 + 文件目录结构 + 文件名称
ex:http://www.jd.com/index/logo.png
2. 本地资源
从最高盘符处开始查找
C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt
2. 相对路径
1. 什么是相对路径
从当前文件所在的位置处开始查找资源文件所经过的路径, 就是相对路径.
1. 同级目录
直接引用
ex:Koala.jpg
2. 子级目录
先进入, 再引用
ex:img/Koala2.jpg
3. 父级目录
先返回, 再引用
ex:../Koala1.jpg
3. 根相对路径
从服务器所在的根目录位置处开始查找
表现:/
/codeboy/img/logo.PNG
5. 图像
1. 图像格式
1.jpg 压缩比率较大
2.PNG 背景透明
3.gif 动图
2. 图像标记
标记:<img > 或 < img/>
属性:
1.src 源, 要显示的图像的 url
2.width 宽度, 取值以 px 或 % 为单位的数字
3.height 高度, 取值以 px 或 % 为单位的数字
4.alt 图片出错时显示的提示文本
6. 链接
1. 语法
<a > 内容</a>
2. 属性
1.href 链接的 url
2.target 目标, 指定打开网页的方式
取值:
_blank 在新的标签页中打开
_self 默认值, 在当前页面中打开新的网页
2. 给一张图片设置超级链接, 打开 Tmooc 网站(www.tmooc.cn)
3. 其它表现形式
1. 资源下载
让链接的 URL, 链接到 rar/zip 文件即可
href="*.zip/*.rar"
2. 电子邮件链接
href="mailto: 合法的邮箱地址"
3. 返回页面的顶部
href="#"
4. 链接到 JavaScript
href="javascript:js 脚本"
7. 锚点
1. 什么是锚点?
就是网页中的一个记号, 可以通过超级连接调整到记号的位置处.
2. 使用锚点
1. 定义锚点
1. 使用 a 标记的 name 属性定义锚点
<a name="锚点名称"></a>
2. 使用任意标记的 id 属性定义锚点
<ANY id="锚点名称"></ANY>
2. 链接到锚点
- <a href="# 锚点名称"></a>
- <a href="url# 锚点名称"></a>
8. 表格
1. 表格的语法
1. 表格
<table></table>
2. 行
<tr></tr> --->table row
3. 单元格 / 列
<td></td> --->table data
2. 表格的属性
1.table 属性
width: 宽度
height: 高度
border: 设置表格边框
align: 设置表格的水平对齐方式
取值: left/center/right
cellpadding: 设置单元格的内边距(内容与 td 之间的间距)
cellspacing: 设置单元格的外边距(td 边框外的距离)
bgcolor: 背景颜色
2.tr 属性
align 设置当前行的水平对齐方式
取值: left/center/right
valign 设置当前行的垂直对齐方式
取值: top/middle/bottom
bgcolor 设置当前行的背景颜色
3.td 属性
width: 宽度
height: 高度
align: 水平对齐
valign: 垂直对齐
bgcolor: 列的背景颜色
colspan: 跨列
rowspan: 跨行
3. 可选标记
1. 表格标题
标记:<caption></caption>
如果设置表格标题, 则必须位于 < table > 下的第一个子元素位置处
2. 行 / 列标题
标记:<th></th>
所有的 td 都可以用 < th > 取代
4. 表格复杂应用
可以将连续的几个行, 划分到一组中, 进行统一管理.
1. 行分组
1. 表头行
<thead></thead>
表格中最上面的一行进行分组的话, 可以放在表头行中
2. 表主体行
<tbody></tbody>
允许将若干行放在 tbody 中进行统一管理
3. 表尾行
<tfoot></tfoot>
表格中最后一行进行分组的话, 可以放在表尾行中
2. 不规则表格
1. 跨行
rowspan
从指定单元格的位置处开始, 纵向向下合并几个单元格(包含自己), 被合并的单元格要删除.
2. 跨列
colspan
从指定单元格的位置处开始, 横向向右合并几个单元格(包含自己), 被合并的单元格要删除.
9. 列表
1. 列表的作用
按照从上到下 (从左往右) 的方式来显示所有的数据, 并且可以在数据前增加显示的标识.
2. 列表的组成
列表都是由 "列表类型" 和 "列表项" 来组成
1. 列表类型
有序列表:<ol></ol> order list
无序列表:<ul></ul> unorder list
2. 列表项
用于表示列表中的数据(嵌套在列表中)
<li></li> list item
3. 有序列表
1.type 作用: 指定列表的排序类型
取值:
1 默认值, 以数字排序
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字
2.start 作用: 指定起始编号是从第 几 开始
取值: 数字
4. 无序列表
1.type 作用: 指定列表的标识类型
取值:
disc: 实心圆
circle: 空心圆
square: 实心方块
none: 不显示标识
5. 列表嵌套
在一个列表中又出现另一个列表
被嵌套的列表只能出现在 li 中
- ex:
- <ol>
- <li>
这是有序列表内容
- <ul>
- <li > 内容</li>
- </ul>
- </li>
- </ol>
10. 定义列表
1. 什么是定义列表
定义列表常用于给出一类事物或对名词的解释说明等.
2. 语法
1.<dl></dl> 表示一个定义列表
2.<dt></dt> 表示定义列表中要解释说明的名词
3.<dd></dd> 表示定义列表中对名词解释的内容
- ex:
- <dl>
- <dt > 名词</dt>
- <dd > 解释具体内容</dd>
- </dl>
使用场合: 图文混排时使用
11. 结构标记
1. 结构的作用
用于描述整个网页的结构(取代 div 做布局)
提升标记的语义性
2. 常用的结构标记
1.<header></header>
作用: 定义网页或某区域的头部
2.<nav></nav>
作用: 定义网页的导航链接
3.<section></section>
作用: 主体内容
4.<aside></aside>
作用: 定义页面中的侧边栏信息, 靠近边缘.
5.<footer></footer>
作用: 定义网页偏底部信息, 比如: 网站的备案号, 解释说明, 版权.
6.<article></article>
作用: 定义与文字描述相关的内容, 比如: 论坛帖子, 微博条目, 用户评论等
12. 表单(重点 & 难点)
1. 表单的作用
提供可以与用户交互的可视化界面
收集用户信息并提交给服务器
2. 表单的组成部分
1. 前端部分
表单控件, 与用户交互的可视化控件
2. 服务器端部分
对提交的数据的处理,***.PHP
3. 表单标记
<form></form>
属性:
1.action
作用: 定义表单提交时发生的动作, 通常定义的是服务器上处理程序的 url 地址,
- ex:action="login.php"
- 2.method
作用: 指定表单数据的提交方式
取值:
1.get(默认值)
1. 明文提交, 待提交的数据会显示在地址栏中
2. 安全性较低
3. 提交数据有大小限制, 限制为 2KB
4. 向服务器要数据时, 使用 get 方式
2.post
1. 隐式提交, 提交的数据不会显示
2. 安全性较高
3. 提交数据大小无限制
4. 要传递数据给服务器时, 使用 post 方式
- 3.delete
- 4.put
- 3.enctype
作用: 指定表单数据的编码方式, 允许将什么样的数据提交给服务器
1.application/x-www-form-urlencoded
默认值, 允许将任意字符提交给服务器(文件无法提交)
2.multipart/form-data
允许将文件提交给服务器
3.text/plain
只能将普通字符提交给服务器
4. 表单控件
能够与用户进行交互的可视化元素
1. 分类:
1.input 元素
2.textarea 多行文本域元素
3.select 和 option 选项框元素
4. 其它元素
2.input 元素
1. 作用: 在页面中提供各种各样的输入控件, 如: 文本框, 密码框, 单选按钮, 复选框等.
2. 语法
标记:<input > 或 < input/>
属性:
1.type 指定创建输入控件的类型
2.name 为控件定义名称, 提交给服务器端使用(必须)
3.value 控件的值, 提交给服务器端使用
4.disabled 禁用控件, 不能操作并不能提交给服务器使用
该属性无值, 只要出现在标记中, 就是禁用.
3.input 元素详解
1. 文本框和密码框
- 文本框:<input type="text">
- 密码框:<input type="password">
属性:
1.maxlength 指定限制输入的字符数
2.readonly 只读, 只能看, 不能改, 但允许提交.
3.placeholder 占位符, 即默认显示在控件上的文本.
13. 按钮
1. 提交按钮
type="submit"
作用: 将表单的数据提交给服务器上指定的程序
2. 重置按钮
type="reset"
作用: 将表单的内容恢复到初始化的状态
3. 普通按钮
type="button"
没有功能
属性:
value: 显示在按钮上的文本
3. 单选按钮和复选框
单选按钮: type="radio"
复选框: type="checkbox"
属性:
name 除定义控件名称之外, 还能起到分组的作用
checked 设置默认选中项, 无值属性
4. 隐藏域和文件选择框
1. 隐藏域
type="hidden"
想要提交给服务器, 但不想展示给用户的数据可以放在隐藏域中.
2. 文件选择框
type="file"
注意:
1.method 的值必须为 post
2.enctype 的值必须为 multipart/form-data
3.textarea 元素
1. 作用
允许录入多行文本
2. 语法
标记:<textarea></textarea>
属性:
1.name 定义控件名称, 提供给服务器使用
2.readonly 只读
3.cols 指定文本域的列数, 即一行能显示多少个英文字符(中文减半)
4.rows 指定文本域的行数, 即默认显示多少行的数据, 超出 rows 的话会出现滚动条.
14. 选项框
1. 语法
1.<select></select>
作用: 在页面中表示一个选项框
2.<option></option>
作用: 显示选项框中的内容项
2. 属性
1.select 属性
1.name 定义选项框的名称
2.size 定义显示选项的数量, 默认值为 1
3.multiple 设置多选, 无值的属性
注意: 只有滚动列表支持多选
2.option 属性
1.value 定义选项的值
2.selected 设置默认选中项, 无值属性
5. 其它元素
1.label 元素
作用: 关联文本域表单控件
语法:<label></label>
属性: for 要与表单控件关联的 id 值
2. 为控件分组
- <fieldset>
- </fieldset>
- 为控件定义分组
- <legend>
- </legend>
- 为分组指定标题
3. 浮动框架
作用: 允许在一个网页中, 再引入另外一个网页.
语法:<iframe></iframe>
属性:
1.src 要引入页面的 url 路径
2.width 宽度
3.height 高度
4.frameborder 浮动框架的边框, 默认值 1
15. 单位转换
1px=0.025rem;
来源: http://www.bubuko.com/infodetail-3096643.html