body框架
一般有条理的程序猿会在body里面再分三个区域<header>、<main>、<footer>，比如header里放导航栏，main里放主要内容，footer里放公司信息或赞助商。
<!DOCTYPE HTML> <!--声明是html文档-->
<html>
<head> <!--头部-->
<meta charset="UTF-8"/>
<title>第一个网页</title>
</head>
<body> <!--内容-->
<header>
。。。
</header>
<main>
<h1>hello world</h1>
<p>hello</p>
</main>
<footer>
。。。
</footer>
</body>
</html>
Style
我们试一下把上面例程的body标签变为
<body style="background-color:lightblue;">
你会发现背景变成天蓝色了！
再试试把
标签变为
<p style="color:blue; background-color:red;">
你会发现hello变成了蓝色，而整个段的背景变成了红色！
用在标签里直接用style可以直接定义网页框架的颜色等，但我们很少这么做，这里只是入门让大家尝一尝美化的味道，美化页面的部分就是CSS的工作了，感兴趣可以康康我的css3文章。
链接
<a>这个双标签可以实现链接网站、图片、视频…
<a href="https://www.baidu.com" target="_blank">链接的名称</a>
href里是链接的目标地址，如https://www.baidu.com；
target="_blank"实现了点击链接后在新页面打开链接。
图片
插入图片到网页是整个互联网的一大进步，
<img scr="..." alt="..."/>
image这个单标签就可以实现！一般放在body里。
scr里面放的是图片的url，就是地址，地址有下面几种表示形式。
绝对地址：
网络绝对地址，如https://pic.ntimg.cn/20140320/2531170_090552933000_2.jpg
本地绝对地址，如C:\Users\86188\Desktop\html5.jpg
相对地址：
相对于所在位置的地址，比如在.html文件所在目录引入一个本地图片hello.jpg，则在src里输入./hello.jpg，就可以引用这张图，如在.html文件上一层目录引入一个本地图片hello.jpg，则在src里输入…/hello.jpg.（./表示当前目录 …/表示上一层目录）
alt里面放的是如果图片加载不出来，则显示的文本，用于说明图片的含义，这样别人即使加载不出图片也能知道你想表达什么。
后面还可以加width改变图片宽度，高度会自动改变：
<img scr="..." alt="..." width="..."/>
img可以放在链接中，<a …><img …/></a>完全可以。
视频
用到<video>双标签，
<video src="..."></video>
scr里面输入视频地址就可以引入视频啦！同图片，地址有绝对地址和相对地址，哪个方便用哪个。
加入control可以给视频引入进度条、音量控制，加入poster=“…”可以给视频加封面，加入autoplay可以实现自动播放，加入loop可以循环播放，加入width="…"可以调视频的尺寸。
<video src="..." poster="..." width="..." controls autoplay loop></video>
buff叠满哈哈哈
我们还可以用iframe标签嵌入youtube、b站、网页上的视频。
下一章见！
扫一扫
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
