第一章:初识H5

使用工具: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为图片高度。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,963评论 1 45
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,194评论 4 61
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,423评论 2 66
  • 图/文丨扬起笑脸泛起甜笑 下面我们玩几个问题的小游戏,请对自己如实回答: 【1.你知道你最好朋友的出生年份和生日...
    Amy青梅阅读 2,994评论 0 0
  • 一、设置协议税务银行 1、在开发者账号设置协议、打开itunes Connect,选择协议,税务和银行业务。 2、...
    萧修阅读 16,975评论 1 9