使用工具：Sublime text 编辑器
自学网站：http://edu.zzfriend.com/html/html5-browsers.html
1.固定格式:
<!doctype html> <!--必须要写的-->
<html><!--必须要写的-->
<head><!--声明html的头文件，关联css，java的文件。-->
<meta charset=”UTF-8”> <!--声明中文显示,以后关联文件也在这里面写-->
</head>
<body>
</body> <!--包含h5内容, 具体标签，段落在此设置。-->
</html><!--除了doctype外，其余所有<>开始，必须已<!>结束,固定格式-->
2.显示H5页面
了解了h5基础设置可以进行显示我们的第一次做的h5了。
试着输出一句hello word。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个标题，不会显示在页面上 </title>
</head>
<body>
<h1>hello word </h1>
<h2>再来一个标题 </h2>
<h3>哈哈，可以一直这样设置下去 </h3>
<p>再来一个段落显示一下</p>
</body>
</html>
h5通过h1---hn来设置标题 进行显示，<h1></h1>为标题显示，<p></p>为段落设置显示。这样就能显示一个h5页面了。
3.添加超链接
<a href="http://wwww.baidu.com">打开个百度看看</a>
<a></a>添加超链接
4.设置字体大小颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 style="background-color:red">在Mac文本编辑器上试试</h1>
<p style="font-family:arial;color:brown;font-size:10px;">看看好使不
<br>演示一下分行效果<br>
</p>
<p style="text-align:center">再来一段<p>
<p>哈哈哈<p>
<img src="image/fenlei.png" alt="分类" width="74" height="74">
<a href="http://wwww.baidu.com">打开个百度看看</a><!----- 写个注释看看-------->
</body>
</html>
style 为样式设置，固定格式记住就行。
</br>为分行设置，添加在标签中间。
<img src="image/fenlei.png" alt="分类" width="74" htight="74">
添加图片，fen lei.png为图片在工程目录中的名字。alt：当图片加载失败时显示的提示文字。width为图片宽度,height为图片高度。
网友评论