本文共 13183 字,大约阅读时间需要 43 分钟。
1. HTML 基本概念
1. 浏览器概念
- 概念:
- 浏览器是安装在电脑里面的一个软件, 能够将网页内容呈现给用户查看,并让用户与网页交互的一种软件
Internet
全球范围内网络的网络 World Wide Web(万维网)
Internet 的一部分,图形信息系统由包含各种信息的文档组成
- 主流浏览器:
- 浏览器内核:
- 不同的浏览器有不同的浏览器内核, 浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容,从而导致了浏览器兼容性问题出现
浏览器 | 内核 |
IE | Trident |
Google | WebKit / Blink |
FireFox | Gecko |
Safari | WebKit |
Opera | Presto |
2. 服务器概念
- 概念:
- 服务器是比我们的电脑配置更高的电脑,并且24小时不断电,不关机的计算机
- 服务器是专门用于存储数据电脑, 访问者可以访问服务器获得服务器上存储的资源
- 服务器一旦关机,访问者就无法访问
3. 访问网页原理
3.1 浏览器请求数据的原理
- 访问网站时是有
真实的、物理的
文件传输的 - 网站是一个资源的集合,包含各类
网页文件和资源文件
- 我们之所以平常感觉第二次访问比第一次访问快的原因就是,第一次访问时已经将所有文件缓存到了本地
3.2 浏览器请求数据的过程
- 浏览器根据输入的URL地址发送请求报文
- 服务器接收到请求报文,会对请求报文进行处理
- 服务器将处理完的结果通过响应报文返回给浏览器
- 浏览器解析服务器返回的结果,将结果显示出来
3.3 网页类型
| 静态网页 | 动态网页 |
内容 | 网页内容固定 | 网页内容动态生成 |
后缀名 | .htm, .html | .asp, .jsp, php等 |
优点 | 无需系统实时生成,网页风格灵活多样 | 日常维护简单, 更改结构方便,交互性强,自动更新,因时因人因地而异 |
缺点 | 交互性能较差,日常维护繁琐 | 需要大量的系统资源合成网页 |
数据库 | 不支持 | 支持 |
4. URL 概念
- 概念:
- 在浏览器的地址栏中输入的地址其实就是
URL
- URL全称
Uniform Resource Locator
(统一资源定位符
), 互联网上的每一个资源都有一个唯一
的URL
地址 - URL的基本构成
4.1 URL 格式
- 127.0.0.1/index.html (浏览器会自动补全http:和:80)
- http://127.0.0.1/index.html (浏览器会自动补全:80)
- http://127.0.0.1:80/index.html (完整格式)
协议类型://ip地址:端口号/资源路径/资源名称
4.2 URL 拆分
网络协议类型
http:// 服务器IP地址
127.0.0.1 服务器端口号
:80 资源路径
网页在服务器上的路径 资源名称
index.html
5. HTTP 协议
- 概念:
- HTTP是
Hypertext Transfer Protocol
的缩写, 超文本传输协议
- HTTP协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, 也就是
规范/约束
浏览器和服务器之间如何沟通
2. 初识 HTML
1. HTML 发展历史
2. HTML 作用
HTML 专门用来描述文本的语义的
- 用于描述其它文本语义的文本, 我们称之为标签
- 用于描述文本语义的标签将来在浏览器中是不会被显示出来的
- 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"
超文本标记语言
"
3. 第一个 HTML 网页
3.1 HTML标准结构
4. HTML 字符集问题
乱码问题
解决乱码现象
- 在
head
标签中添加<meta charset="UTF-8" />
, 指定字符集
- 什么是字符集
- 字符集就是
字符的集合
- 在网页中我们常见的字符集有两个
GBK/UTF-8
GBK(GB2312)
和UTF-8
区别 GBK(GB2312)
里面存储的字符比较少, 仅仅存储了汉字
和一些常用外文
UTF-8
里面存储的世界上所有的文字
- 注意点:
- 在HTML文件中指定的字符集必须和保存这个文件的字符集
一致
, 否则还是会出现乱码 - 仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的
保存格式
必须和指定的字符集一致
才能保证没有乱码问题
5. DTD 文档声明
- 概念:
- 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异
- 为了让浏览器能够正确的
编译/解析/渲染
我们的网页, 需要在HTML文件的第一行告诉浏览器, 当前这个网页是用哪一个版本的HTML规范来编写的 - 浏览器知道了用哪一个
版本的规范
来编写之后, 它就能够正确的编译/解析/渲染网页
DTD文档声明格式
:
6. HTML和XHTML、HTML5区别
- HTML语法非常宽松
容错性强
- XHTML更为
严格
,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号
引起等等; - HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多
新的特性
7. .htm 和 .html扩展名区别
DOS操作系统(win95或win98)
下只能支持长度为3
的后缀名,所以是htm - 但在windows后缀长度可以大于3位,所以windows下无所谓htm与html,html是为长文件的格式命名的
- 所以
htm是为了兼容过去的DOS命名格式存在的
3.HTML基础标签
1. html标签
- html 标签是HTML页面的
根元素
,其中的lang属性可用于标记网页或部分网页的语言
en
定义语言为英语
,zh-CN
定义语言为中文
- lang这个属性不仅仅可以用在html标签上
- 根据根据lang属性来设定
不同语言
的css样式,或者字体。 - 告诉
搜索引擎
做精确的识别 - 让
语法检查程序
做语言识别 - 帮助
翻译工具
做识别 - 帮助
网页阅读程序
做识别 - 当搜索引擎或者浏览器拿到语言标签后,有可能做一些针对指定语言的
辅助操作
等等
- dir是国际化属性中的一员,dir属性定义了
文字
在浏览器中的排列方向
- 如果定义整个HTML文档的排列方向应该在html标签中定义dir属性, 其它HTML标签也可以定义dir属性
- 默认值:
ltr
– 代表左到右
的排列方式 rtl
– 代表右到左
的排列方式
2. head标签
- head 标签用于定义文档的头部,它是所有头部元素的
容器
- head 中的元素可以
引用脚本、指示浏览器
在哪里找到样式表、提供元信息等等 - 文档的头部描述了文档的各种属性和信息,包括
文档的标题、在 Web 中的位置以及和其他文档的关系
等 - 绝大多数文档头部包含的数据都不会真正作为内容显示给读者
- 下面这些标签可用在 head 部分:
base, link , meta , script , style , 以及 title
title
定义文档的标题
,它是 head 部分中唯一必需
的元素
- 应该把
<head>
标签放在文档的开始处
,紧跟在<html>
后面, 并处于 <body>
标签或<frameset>
标签之前 - 请记住始终为文档规定标题!
3. 常用的meta标签
搜索引擎优化(seo)
- 定义页面使用语言
- 自动刷新并指向新的页面
- 实现网页转换时的动态效果
- 控制页面缓冲
- 网页定级评价
- 控制网页显示的窗口等
//(注意后面的引号,分别在秒数的前面和网址的后面)
4. link标签
- link 标签定义文档与
外部资源
的关系 - link 标签最常见的用途是
链接样式表
注意:link 元素是空元素
,它仅包含属性
注意:此元素
只能存在于 <head> 部分
,不过它可出现
任何
次数
属性
属性 | 值 | 描述 |
charset | char_encoding | HTML5 中不支持。 |
href | URL | 规定被链接文档的位置。 |
hreflang | language_code | 规定被链接文档中文本的语言 |
media | media_query | 规定被链接文档将被显示在什么设备上。 |
rel | alternate / author / help / icon / licence / next / pingback / prefetch / prev / search / sidebar / stylesheet / tag | 规定当前文档与被链接文档之间的关系。 |
rev | reversed relationship | HTML5 中不支持。 |
sizes | heightxwidth/any | 规定被链接资源的尺寸。仅适用于 rel=“icon”。 |
target | _blank /_self /_top / _parent /frame_name | HTML5 中不支持。 |
type | MIME_type | 规定被链接文档的 MIME 类型。 |
5. title标签
文档标题
<title>
元素可定义文档的标题
- 浏览器会以特殊方式来使用标题,并通常把它放置在
浏览器窗口的标题栏或状态栏
上 - 文档加入用户的链接列表或收藏夹或书签列表时,标题将成为该文档链接的
默认名称
6. body标签
文档内容
- body 元素定义文档的
主体
- body 元素包含文档的所有内容(比如
文本、超链接、图像、表格和列表
等等)
7. style标签
Header 1
A paragraph.
定义和用法
<style>
标签用于为HTML
文档定义样式信息
- 在 style 中,您可以规定在浏览器中如何呈现 HTML 文档
- type 属性是
必需的
,定义 style 元素的内容。唯一可能的值是 “text/css
” - 如需链接外部样式表,请使用
<link>
标签 - style 标签支持 HTML 中的
全局
属性和事件
属性
4. HTML 语法要求
4.1 HTML 标签问题
- 标签和换行、空格、Tab的关系
- 标签的显示
不受换行、Tab
影响 - 标签中的
空格
会出现折叠
现象
- 标签必须
正确闭合和嵌套
4.2 注释问题
4.3 HTML 文件路径
4.3.1 绝对路径
- 绝对文件路径是指向一个因特网文件的
完整 URL
- 例如:
https://www.w3school.com.cn/images/picture.jpg
4.3.2 相对路径
路径 | 描述 |
picture.jpg | 位于与当前网页相同的文件夹 |
images/picture.jpg | 位于当前文件夹的 images 文件夹中 |
/images/picture.jpg | 当前站点根目录的 images 文件夹中 |
…/picture.jpg | 位于当前文件夹的上一级文件夹中 |
5. HTML 标签基本类型
1. 文本类标签
1.1 标题标签
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
运行结果
- 定义和用法
- h1 - h6 标签可定义标题级别。 h1 定义级别最大的标题。 h6 定义级别最小的标题
- 由于 h 元素拥有确切的
语义
,因此慎重地选择恰当的标签层级
来构建文档的结构 - 因此,不能利用标题标签来改变同一行中的字体大小
- 相反,应当使用
层叠样式表
定义来达到漂亮的显示效果
1.2 HTML 段落标签
这是一个段落。
这是一个段落。
这是一个段落。
- p 标签定义
段落
- p 元素会
自动
在其前后创建一些空白。浏览器会自动添加这些空间,也可以在样式表中规定
1.3 HTML 文本标签
//文本换行 //文本加粗 加粗内容 加粗内容 //文本倾斜 //水平线
空标记 //删除线样式 内容
1.4 HTML 特殊符号标签
显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 |   ; |   ; |
< | 小于号 | < ; | < ; |
> | 大于号 | > ; | > ; |
& | 和号 | & ; | & ; |
" | 引号 | " ; | " ; |
’ | 撇号 | &apos ; (IE不支持) | ' ; |
¢ | 分(cent) | ¢ ; | ¢ ; |
£ | 镑(pound) | £ ; | £ ; |
¥ | 元(yen) | ¥ ; | ¥ ; |
€ | 欧元(euro) | &euro ; | € ; |
§ | 小节 | § ; | § ; |
© | 版权(copyright) | © ; | © ; |
® | 注册商标 | ® ; | ® ; |
™ | 商标 | &trade ; | ™ ; |
× | 乘号 | × ; | × ; |
÷ | 除号 | ÷ ; | ÷ ; |
2. 图片标签
2.1 常见的图像格式
- JPG
- GIF
- PNG
- base64
- webp
- …
2.2 HTML 图片标签
- 从技术上讲,img 标签并不会在网页中插入图像,而是从网页上
链接图像
- img 标签创建的是被引用图像的占位空间
- img 标签有两个
必需
的属性:src 属性
和 alt 属性
- img 标签支持 HTML 中的
全局属性和事件属性
属性 | 值 | 描述 |
alt | text | 规定图像的替代文本 |
src | URL | 规定显示图像的 URL |
属性 | 值 | 描述 |
title | text | 鼠标悬停提示文字 |
width | px / % | 设置图像的宽度 |
height | px / % | 定义图像的高度 |
crossorigin | anonymous/use-credentials | 设置图像的跨域属性 |
ismap | URL | 将图像定义为服务器端图像映射 |
usemap | URL | 将图像定义为客户器端图像映射 |
3. HTML 超链接标签
这是一个链接使用了 href 属性
- a 标签定义超链接,用于从一张页面链接到另一张页面
- a 元素最重要的属性是
href 属性
,它指示链接的目标
- 所有浏览器中,链接
默认
外观:下划线蓝色(未访问)--下划线紫色(已被访问)--下划线红色(活动链接)
- 可以使用
CSS 伪类
向文本超链接添加复杂而多样的样式
- 如果不使用
href
属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type
属性 - 被链接页面通常显示在当前浏览器窗口中,除非规定了另一个目标(
target 属性
) - 请使用
CSS
来设置链接的样式
属性 | 值 | 描述 |
download | filename | 指定下载链接 |
href | URL | 规定链接的目标 URL |
hreflang | language_code | 规定目标 URL 的基准语言。仅在 href 属性存在时使用 |
media | media_query | 规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用 |
rel | prev/search/tag… | 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用 |
target | _blank / _parent / _self / _top / framename | 规定在何处打开目标 URL。仅在 href 属性存在时使用 |
type | MIME type | 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用 |
注:MIME = Multipurpose Internet Mail Extensions
3.1 链接类型
3.2 锚链接
通过创建锚点链接,用户能够快速定位到目标内容
1. 创建跳转标记,利用name或者id属性 2. 使用相应的id名标注跳转目标的位置 3. 注意:如果要使用name名,只能用a标签 4. 页面间的锚链接 甲 乙
甲 乙
3.3 超链接功能性作用
联系我们
4. 框架标签
通过使用框架,可以在同一个浏览器窗口中显示不止一个页面
4.1 内联框架(iframe)
iframe 用于在网页内显示网页
- iframe 元素会创建包含另外一个文档的内联框架(即
行内框架
) - 可以把需要的文本放置在
<iframe> 和 </iframe>
之间,这样就可以应对无法理解 iframe 的浏览器 frame
可用作链接的目标(target
) frameborder
属性规定是否显示 iframe 周围的边框。设置属性值为 "0"
就可以移除边框
5. 容器标签
5.1 div 标签
5.2 span 标签
享受“预见式”教育服务
6. 钩子标签
没有语义的标签
,已经被废弃,但仍可以被用于当作CSS钩子
6. HTML 组合标签
1. HTML列表标签
标签 描述
定义无序列表 定义有序列表 - 定义列表的项目 定义目录列表。不赞成使用
定义定义列表 - 定义定义列表中的项目
- 定义定义列表中项目的描述
1. 有序列表的类型
取值 | 说明 |
disc | 项目符号显示为实体圆心,默认值 |
square | 项目符号显示为实体方心 |
circle | 项目符号显示为空心圆 |
- Coffee
- Tea
- Milk
2. 无序列表的类型
属性 | 值 | 描述 |
reversed | reversed | 指定列表倒序(9,8,7…) |
type | A/a | 规定列表的类型。不赞成使用。请使用样式代替 |
3. 定义列表
- Coffee
- Black hot drink
- Milk
- White cold drink
2. HTML表格标签
标签 描述
定义表格 定义表格标题。 定义表格中的表头单元格。 |
定义表格中的行。 定义表格中的单元。 |
定义表格中的表头内容。 定义表格中的主体内容。 定义表格中的表注内容(脚注)。 定义表格中一个或多个列的属性值。 定义表格中供格式化的列组。
2.1 语法结构
第一个单元格 | 第二个单元格 | ...
第一个单元格 | 第二个单元格 | ...
2.2 对齐属性
属性 | 值 | 说明 |
align | left/center/right | 左/居中/右对齐 |
valign | top/middle/bottom | 顶端/居中/底端对齐 |
2.3 表格合并
单元格内容
单元格内容
2.4 表格标签属性
属性 作用 横跨2列的单元格 横跨2行的单元格
3.HTML表单标签
标签 描述
3.1 HTML表单标签属性
3.2 HTML表单元素
元素及输入类型 --- 文本输入 定义密码字段 --- 定义单选按钮 --- 定义复选框 --- 提交按钮 --- 用于应该包含数字值的输入字段 --- 用于应该包含日期的输入字段 --- 用于应该包含颜色的输入字段 --- 用于应该包含一定范围内的值的输入字段 --- 允许用户选择月份和年份。 --- 允许用户选择周和年。 --- 允许用户选择时间(无时区)。 --- 允许用户选择日期和时间(有时区)。 --- 允许用户选择日期和时间(无时区)。 --- 用于应该包含电子邮件地址的输入字段。 --- 用于搜索字段(搜索字段的表现类似常规文本字段)。 --- 用于应该包含电话号码的输入字段。 --- 用于应该包含 URL 地址的输入字段。
3.3 输入属性
属性 | 描述 |
autocomplete | 规定表单或输入字段是否应该自动完成。 |
autofocus | 规定当页面加载时 input 元素应该自动获得焦点。 |
disabled | 规定输入字段应该被禁用。 |
formaction | 规定当提交表单时处理该输入控件的文件的 URL。 |
formenctype | 规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method=“post” 的表单)。 |
formmethod | 定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。 |
formnovalidate | 规定在提交表单时不对 input 元素进行验证。 |
formtarget | 规定的名称或关键词指示提交表单后在何处显示接收到的响应。 |
height | 规定 input 元素的高度。 |
list | 包含了 input 元素的预定义选项。 |
max | 规定输入字段的最大值。 |
maxlgth | 规定输入字段的最大字符数。 |
min | 规定输入字段的最小值。 |
multiple | 规定允许用户在 input 元素中输入一个以上的值。 |
novalidate | 规定在提交表单时不对表单数据进行验证。 |
pattern | 规定通过其检查输入值的正则表达式。 |
placeholder | 规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。 |
readonly | 规定输入字段为只读(无法修改)。 |
required | 规定输入字段是必需的(必需填写) |
size | 规定输入字段的宽度(以字符计)。 |
step | 规定输入字段的合法数字间隔。 |
value | 规定输入字段的默认值。 |
width | 规定 input 元素的宽度。 |
3.4 增强功能
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
3.5 智能表单
- HTML5为了方便排版,可以使Form中的表单元素脱离Form的嵌套
7. HTML5 基本概念
7.1 HTML5 概述
7.1.1 HTML5 是什么
- HTML5 是一个
新的网络标准
- 目标是取代现有的HTML 4.01和XHTML 1.0 标准
- HTML5 希望能够
减少互联网富应用
(RIA)对Flash、Silverlight、JavaFX等的依赖,并且提供更多能有效增强网络应用的API
7.1.2 HTML5 发展历史
7.1.3 HTML5 新功能
语义标签
多媒体
离线存储
三维、图形与特效
设备通用
性能与集成
CSS3
其他
8. HTML5 语义标签
8.1 语义标签的类型
区块标签 | article/section/nav/aside/header/footer |
内容分组标签 | figure/figcaption/main |
文本级别标签 | time |
8.2 语义标签
8.2.1 header 标签
header
标记一般放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或区块的标题、简介等信息 - 一篇文档中可以包含多个 header 标记
- 可以为 body、article、section、aside 标记增加 header 标记
- header 标记未必位于页面的顶部
8.2.2 footer 标签
footer
标记一般放置在页面的底部,或者页面中某个区块元素的底部
8.2.3 nav 标签
nav
标记表示页面的导航,可以通过导航连接到网站的其它页面,或当前页面的其它部分
8.2.4 aside 标签
aside
包含的内容不是页面的主要内容,具有独立性,是对页面内容的补充 - 页面的侧边栏
- 文章引语(内容摘要)
- 广告
- 友情链接
8.2.5 article 标签
article
标记表示包含于一个文档、页面、或网站中的一段独立的内容。它能够独立的被发布或重新使用 - 一篇博客
- 一个论坛帖子
- 一片新闻报道
- 一个用户论坛
8.2.6 section 标签
section
表示一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer) figure
表示页面中的插图,通常结合figcaption
一起使用
8.2.7 time 标签
time
表示一个日期、时间,或日期和时间值。可以被搜索引擎、屏幕阅读器等识别
8.2.8 域标签
fieldset
标签配合legend
标签,实现语义化表单
9. HTML5 多媒体标签
9.1 video 视频
9.1.1 视频标签
- HTML5 通过 video 标签实现视频功能,并提供多个视频操作方法
- 支持多种视频格式,但
视频编码必须符合要求
MP4
:使用 H264 视频编解码器和AAC音频编解码器 WebM
:使用 VP8 视频编解码器和 Vorbis 音频编解码器 Ogg
:使用 Theora 视频编解码器和 Vorbis音频编解码器
9.1.2 视频标签应用语法
格式一 格式二
第二种格式存在的意义
- 浏览器兼容
- 为了让过去的一些不兼容的浏览器也能够通过video标签来播放视频, 可以通过一个JS的框架叫做 html5media 来实现
- 解决浏览器适配问题
- video 元素支持三种视频格式, 可以把这三种格式都
通过source标签指定给video标签
- 那么以后当浏览器播放视频时它就会从这三种中
选择一种自己支持的格式
来播放 - 但是想让所有浏览器都通过video标签播放视频还有一个
前提条件
, 就是浏览器必须支持HTML5标签
, 否则同样无法播放
9.1.3 video 标签的属性和方法
属性方法 | 描述 |
width | 设置播放器宽度 |
height | 设置播放器高度 |
controls | 设置播放器的控制按钮是否出现 |
src | 设置播放的视频文件 url |
autoplay | 设置自动播放功能(muted) |
poster | 设置视频预览图片文件 url |
loop | 设置循环播放功能 |
currentTime | 当前播放时间位置 |
play() | 开始播放 |
pause() | 停止播放 |
preload | video 标签预加载视频,如果设置了 autoplay 属性, 那么 preload 属性就会失效 |
muted | 视频静音 |
volume | 设置或返回视频的音量 |
9.2 audio 音频
9.2.1 audio 音频标签
- HTML5 通过 audio 标签实现音频功能,并提供多个音频操作方法
- 支持多种音频格式
- 控制方法与视频相同
10. 总结
- html/html5 一些基本标签和作用,做个笔记总结一下
转载地址:http://jjqwi.baihongyu.com/