html概述
HTML
是用来描述网页的一种语言
是用来描述网页的一种语言
- HTML指的是超文本标记语言Hyper Text Markup Language,是一种用于创建网页的标准标记语言
- 标记语言是一套标记标签markup tag
- HTML使用标记标签来描述网页
- HTML文档的后缀名:.html或者.htm,两种后缀名没有区别,都可以使用
- HTML5是HTML最新的修订版本,2014年10月由万维网联盟W3C完成标准制定
- HTML5的设计目的是为了在移动设备上支持多媒体
http
协议:超文本传输协议
—tcp
协议:超文本传输协议
—tcp
什么是html开发
HTML
开发就是编写以
.html
结尾的文档,交给浏览器运行
开发就是编写以
.html
结尾的文档,交给浏览器运行
- Html文件就是【普通文本+Html标签】,不同的html标记可以表示不同的效果
- 目前主要使用html文档传递数据和数据的结构,具体显示依赖于css实现
浏览器本质:特殊的文件查看器,能够对
.html
文档中的特殊字符进行识别,自动渲染
.html
文档中的特殊字符进行识别,自动渲染
HTML5
并不是革命性的改变,而只是发展性的。而且对于之前
HTML4
的很多标准都是兼容的,所有通过最新
HTML5
标准制作的
Web
应用也可以轻松的跑在老版本的浏览器上。
HTML5
标准中的确是集成了很
多实用的功能比如:音视频、本地存储、
Socket
通信、动画等都是之前应用开发中确实感觉到
Web
端的
鸡肋才得到重视和升级的,相信如果你有相关的经验的话也会很有感触。
并不是革命性的改变,而只是发展性的。而且对于之前
HTML4
的很多标准都是兼容的,所有通过最新
HTML5
标准制作的
Web
应用也可以轻松的跑在老版本的浏览器上。
HTML5
标准中的确是集成了很
多实用的功能比如:音视频、本地存储、
Socket
通信、动画等都是之前应用开发中确实感觉到
Web
端的
鸡肋才得到重视和升级的,相信如果你有相关的经验的话也会很有感触。
HTML5
的目标是:它通过一些新标签,新功能为开发更加简、独立、标准的通用
Web
应用提供了标准。新的标准解决了三大问题:浏览器兼容问题,解决了文档结构不明确的问题,解决了
Web
应用程序功能
受限等问题。
的目标是:它通过一些新标签,新功能为开发更加简、独立、标准的通用
Web
应用提供了标准。新的标准解决了三大问题:浏览器兼容问题,解决了文档结构不明确的问题,解决了
Web
应用程序功能
受限等问题。
常见的浏览器
实际使用过程中,浏览器的种类繁多,并且统一浏览器还拥有不同的软件版本,因此在开发学习过程
中,如何适配不同浏览器也是我们着重注意的点。
中,如何适配不同浏览器也是我们着重注意的点。
常见编辑器
为了提高开发效率,提供不同的编写工具
前端开发:本质就是编写一个
.html
的文档,通过浏览器执行这个文档。
.html
的文档,通过浏览器执行这个文档。
编写
.html
文档时采用以下的编写工具
.html
文档时采用以下的编写工具
- windows写字板 2. webStrom 3. HBuilderX
- vscode 5. Atom 6. Sublime Text
HTML开发代码构成
h5
开发,本质上就是编写一个
.html
格式的文档,最终通过浏览器执行该文档,那么一个
html
文档中都包含哪些代码
开发,本质上就是编写一个
.html
格式的文档,最终通过浏览器执行该文档,那么一个
html
文档中都包含哪些代码
- 标签不区分大小写 <标签名 属性="值"></标签名>
- 元素可以省略结束标签
- 元素的属性可以省略属性值,例如disabled、readonly
- 允许属性值不使用引号
浏览器验证
<canvas id="ca1" width="200" height="100" style="border:2px solid #ccc;background-color:#eee">当前浏览器不支持全新的画布标记</canvas>
可以判定当前浏览器是否支持Html5的新特性,如果执行后显示一个矩形效果,则是支持;否则在页面显示对应不支持的提示信息
HTML部分
HTML
:
hyper text markup language
:
hyper text markup language
hyper text
:超文本,是指写在
html
文档中,并在网络上传输的 文字、图片、视频、音频
:超文本,是指写在
html
文档中,并在网络上传输的 文字、图片、视频、音频
markup language
:标记语言
:标记语言
- 所谓标记:就是指由一对尖括号扩起来,当中具有特定英文单词的标识 ,<b>abc</b> 给文字加粗显示
- 标记的其他叫法:标签 元素 element
h5
开发,本质上就是编写一个
.html
格式的文档,最终通过浏览器执行该文档,那么一个
html
文档中都包含哪些代码。在线验证网址
validator.w3.org
开发,本质上就是编写一个
.html
格式的文档,最终通过浏览器执行该文档,那么一个
html
文档中都包含哪些代码。在线验证网址
validator.w3.org
html
文档中只有两种类型的标记
文档中只有两种类型的标记
- 单标记 :例如 <meta> 不能存放内容,多是一些功能性的标记
- 双标记 :例如 <div> 超文本 </div> 有开始有结束,主要功能是存放内容,可以是超文本,也可以是其他标记
<font color="red">实际开发中,我是通过这些标记符号,在文档中表示图片、视频、音频、文字,只有通过标记,才能帮助浏览器识别</font>
代码示例
<!-- 双标记 -->
<div>超文本</div>
<!-- 单标记 -->
<img>
CSS部分
CSS
:
cascading style sheet
层叠样式表,用来对文档中的标签设置样式,从而改变超文本在浏览器上的渲染效果
:
cascading style sheet
层叠样式表,用来对文档中的标签设置样式,从而改变超文本在浏览器上的渲染效果
代码示例
<!-- code by lanou -->
<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html部分 -->
<div>红色字体</div>
JS
部分
部分
JS
:
javaScript
,运行在浏览器端的脚本语言。平时我们看到网页,除了可以看以外,还可以处理一些用户的交互行为,例如:鼠标的点击,键盘的控制等等。这些功能需要通过
JS
来完成
:
javaScript
,运行在浏览器端的脚本语言。平时我们看到网页,除了可以看以外,还可以处理一些用户的交互行为,例如:鼠标的点击,键盘的控制等等。这些功能需要通过
JS
来完成
代码示例
<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html代码部分 -->
<div onclick="fun()">js展示(超文本)</div>
<script>
// js代码
function fun(){
alert("js展示成功");
}
</script>
小结
html5
开发就是,就是通过
HTML“
标签
”
将
“
超文本
”
写入文档,再通过
CSS
给标签设置样式,完成超文本在浏览器上的
“
排版
”
,通过
JS
代码来为标签编写交互脚本,完成
“
超文本
”
在浏览器上的人机交互功能。
开发就是,就是通过
HTML“
标签
”
将
“
超文本
”
写入文档,再通过
CSS
给标签设置样式,完成超文本在浏览器上的
“
排版
”
,通过
JS
代码来为标签编写交互脚本,完成
“
超文本
”
在浏览器上的人机交互功能。
- HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准
- HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5
中的一些有趣的新特性:
中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒体播放的video和audio元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search