HTML学习-----HTML开发代码构成

HTML开发代码构成

h5 开发，本质上就是编写一个 .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：超文本，是指写在html文档中，并在网络上传输的 文字、图片、视频、音频
• markup language：标记语言

1. 所谓标记：就是指由一对尖括号扩起来，当中具有特定英文单词的标识

             <b>abc</b> 给文字加粗显示

1. 标记的其他叫法：标签 元素 element

h5 开发，本质上就是编写一个 .html 格式的文档，最终通过浏览器执行该文档，那么一个 html 文档中都包含哪些代码。在线验证网址 validator.w3.org

html 文档中只有两种类型的标记

• 单标记 ：例如 <meta> 不能存放内容，多是一些功能性的标记
• 双标记 ：例如 <div> 超文本 </div> 有开始有结束，主要功能是存放内容，可以是超文本，也可以是其他标记

<font color="red">实际开发中，我是通过这些标记符号，在文档中表示图片、视频、音频、文字，
只有通过标记，才能帮助浏览器识别</font>

 代码示例

<!-- 双标记 -->
<div>超文本</div>
<!-- 单标记 -->
<img>

 

CSS部分

CSS ： cascading style sheet 层叠样式表，用来对文档中的标签设置样式，从而改变超文本在浏览器上的渲染效果

代码示例

<!-- code by lanou -->
<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html部分 -->
<div>大佬</div>

JS部分

JS ： javaScript ，运行在浏览器端的脚本语言。平时我们看到网页，除了可以看以外，还可以处理一些用户的交互行为，例如：鼠标的点击，键盘的控制等等。这些功能需要通过 JS 来完成

代码示例

<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html代码部分 -->
<div onclick="fun()">学习(超文本)</div>
<script>
// js代码
function fun(){
alert("学习");
}
</script>

小结

html5 开发就是，就是通过 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