H5学习笔记之语法篇
2018-08-08 本文已影响28人
醉叶惜秋
1.第一个 H5程序，hello world
<!DOCTYPE html>
<!--根标签-->
<html lang="en">
<head>
<!--设置编码-->
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
2.常见标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见 HTML 标签</title>
</head>
<body>
<!--标题标签-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h1标签</h6>
<!--表单标签-->
<input placeholder="我是占位文字">
<input value="我是默认文字">
<input type="date">
<input type="file">
<input type="color">
<input type="radio">
<input type="checkbox">
<!--段落标签-->
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<!--图像标签-->
<!--
相对路径和绝对路径
相对路径:资源在当前的项目中 ./ ../ ././
绝对路径:资源不在当前项目中,在网络上或者在本地 http:// https:// ftp:// file:///
-->
<!--绝对路径-->
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="这是一张图片" width="20%">
<!--相对路径-->
<img src="images/IMG_2931.JPG" width="150"><!--设置完宽,高度会自动等比缩放-->
<!--换行标签-->
<p>段落标签</p><br>
<p>段落标签</p><br>
<!--列表标签-->
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<ol type="A">
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
<!--超链接标签-->
<a href="#">我是超链接</a>
<a href="http://www.baidu.com" target="_top">百度一下</a>
<!--给图片添加超链接-->
<a href="http://www.baidu.com" target="_self">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="这是一张图片" width="20%">
<!--src 是引入,是必须的 href引用,不是必须的-->
</a>
<!--div标签, 只要收尾呼应的标签就能装进 div 标签-->
<!--类似于 OC 的 UIView-->
<div>我是 div 标签</div>
<div>我是 div 标签</div>
<div>我是 div 标签</div>
<div>我是 div 标签</div>
<div>
<div>
<p>我是段落</p>
</div>
</div>
</body>
</html>
3.H5中新增的标签
新增26个标签，废弃16个标签。
结构性标签
article 文章主题内容
header 标记头部区域内容
footer 标记脚步区域内容
section 区域张杰标书
nav 菜单导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown 语法整理大集合2017</title>
</head>
<body>
<article>
<!--头部-->
<header>
<h2>Markdown 语法整理大集合2017</h2>
<h4>欧薇娅
2017.07.17 16:52* 字数 1230 阅读 75195评论 14喜欢 169</h4>
<img src="images/IMG_2931.JPG" width="50%">
</header>
<!--主要章节-->
<section>
<h3>第一部分</h3>
<p>另起一段</p>
</section>
<section>
<h3>第二部分</h3>
<p>另起一段</p>
</section>
<!--尾部-->
<footer>
<h4>小礼物走一走，来简书关注我</h4>
</footer>
</article>
</body>
</html>
