Web 开发学习笔记(6) --- 前端开发之 HTML5

前言

通过之前的文章, 我们已经搭好了 webapp 的雏形, 不过到目前为止, 我们的前端界面比较简单, 为此, 我们要学习前端的知识, 然后对界面进行改进.

前端的内容可以分为 HTML CSS JavaScript 三部分, 我们首先学习 HTML

HTML5简介

什么是 HTML5 ———— 第五代 HTML 语言
为什么学 H5
- 所有主流浏览器都支持 h5, chrome, firefox, safari, IE10+
- H5 改变了用户与文档的交互方式, 尤其是多媒体, 替代了传统的 flash, 多媒体标签 video, audio, canvas
- 增加了其他新特性
  语义特性、本地存储、网页多媒体(音视频), 二位三维变换, 特效(过渡, 动画)
- 相比于 h4, 抛弃了不合理不常用的标签和属性, 增加了一些标签和属性, h5代码更加简洁(<!doctype html>, <meta charset="UTF-8")

HTML5 语义化标签

header, nav, main, article, aside, footer. 更多标签可以查看这里 HTML Tags

语义化标签的例子

html

<!doctype html>
<html><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="index.css">
</head><body><!-- 语义化标签 --><header>This is header</header><nav>This is nav</nav><main><article>article</article><aside>aside</aside></main><footer>footer</footer>
</body></html>

css

*{/*padding: 0px;margin: 0px;*/
}
header{width: 100%;height: 100px;background-color: red;
}
nav{width: 100%;height: 36px;background-color: green;
}
main{width: 100%;height: 240px;background-color: #ccc;
}
main > article{width: 80%;height: 100%;background-color: purple;float: left;
}
main > aside{width: 20%;height: 100%;background-color: pink;float: right;
}
footer{width: 100%;height: 80px;background-color: skyblue;
}

兼容性(IE)

IE9 将新的语义标签理解为行级元素, 在设置高度的时候是无效的, 需要在样式中转换为块级元素(block), 如
```
main{display: block;
}
```

`input` 标签新增的 `type` 属性

参考资料

w3schools, HTML
黑马程序员 2018版Html5+Css3由浅入深教程
HTML Input Types

Web 开发学习笔记(6) --- 前端开发之 HTML5相关推荐

【web开发学习笔记】Structs2 Result学习笔记（三）带參数的结果集
Result学习笔记(三)带參数的结果集第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content= ...
Web 开发学习笔记(1) --- 搭建你的第一个 Web Server
简介 Flask 是一个轻量级的 Web 框架, 如果要学习 Web 开发, Flask 非常适合作为我们学习的起点. 通过接下来的这一些列的博客, 我们将学习如何利用 Flask 以及其他工具, 搭 ...
Web 开发学习笔记——关于互联网和互联网应用
作为一名前端开发者,了解互联网和浏览器的相关知识是极其有必要的,因为我们所有开发出来的网站全部以互联网和浏览器为基础的. 关于互联网互联网到底是什么?对于网站普通用户来说,它可能就是宽带.购物网站. ...
Django Web开发学习笔记（4）
第四章模板篇上一章的内容,我们将HTML的代码和Python代码都混合在了在view.py的文件下.但是这样做的坏处无疑是明显的,引用DjangoBook的说法: 对页面设计进行的任何改变都必须对 ...
【web开发学习笔记】Structs2 Action学习笔记（一个）
1.org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter准备和运行 2. <filter-mapping&g ...
移动Web开发--学习笔记三响应式项目实战（微金所）
响应式项目实战(微金所) 响应式项目开发流程选择一种屏幕格式进行开发相应功能模块完成后,测试是否响应式效果确保响应式效果满足要求进行下一个功能模块开发使用自定义字体图标创建自己的字体图标h ...
flask web如何加载html,Flask Web开发学习笔记（三）
本文主要整理下几个Flask扩展: 0.Flask-Bootstrap:集成Twitter开发的一个开源框架Bootstrap. 1.Flask-Script:为Flask程序添加一个命令行解析器 2 ...
web开发学习什么，前端开发+培训
元素特点: 块状元素: 在页面中以矩形区域显示. 自上而下排列,独占一行可以直接添加宽高一般情况下,作为其他元素或内容的容器行内元素: 在页面中最小单位也是矩形. 在一行内逐个排列. 不可以直接 ...
Web开发学习笔记:ngIf中使用方法判断字符串中是否包含子字符串
<p *ngFor="let item of UseTypes"><ion-select-option *ngIf="globalVariable.is ...

Web 开发学习笔记(6) --- 前端开发之 HTML5

前言

HTML5简介

HTML5 语义化标签

兼容性(IE)

`input` 标签新增的 `type` 属性

参考资料

Web 开发学习笔记(6) --- 前端开发之 HTML5相关推荐

最新文章

热门文章

Web 开发学习笔记(6) --- 前端开发之 HTML5

前言

HTML5简介

HTML5 语义化标签

兼容性(IE)

input 标签新增的 type 属性

参考资料

Web 开发学习笔记(6) --- 前端开发之 HTML5相关推荐

最新文章

热门文章

`input` 标签新增的 `type` 属性