?哪里长得像 ?
(图一:左侧乐高小人来源于网络乐高图,右侧是为了便于理解的.html文件,实际样子略有差异,请继续往下看~图三:实际运作的.html文件及网页)
[小编画图感言:图做了很久,多看几眼哈~]
乐高小人的基础配件就是:
-头(head)
-手跟主要躯干(body)
-脚(foot)
而HTML的基础架构就是:
<header></header>
<body></body>
<footer></footer>
长得多像~~~
[Mr.🐷:哪里像.....]
[Ms.🐶:真的长得很像!反正我就是觉得这样很好记]
乐高小人就像是百变星君,只要有想法,你就可以添砖加瓦做出百百种不一样的乐高小人,HTML也一样,有许许多多种可能,等着你去尝试
你可以是温文儒雅的绅士派,也可以是古灵精怪的野兽派,基本架构在那里,看你想加什么就加什么,自己乐高自己做主,自己网页想干嘛就干嘛
[Ms.🐶:关于想对“网页”想干嘛就干嘛,下几篇的文章会提到:怎么样
提高效率去实作,有一大堆工具、框架、函式库可以用,请继续关注~]
[Mr.🐷:又是一个骗关注的梗,实际就是还没写,以后写完再说]
[Ms.🐶:这年头小编真不好做]
认真介绍HTML5
简单来说,浏览器是通过读取.html文件里面的资讯来“画”网页的
[Ms.🐶:我们暂时先简单了解概念,关于浏览器与后端服务器如何双向沟通,我们以后再说哈,我们先了解HTML的基本架构]
(图三:左侧是最简单版本的.html文件,右侧是在自家电脑用浏览器打开本地.html文件)
HTML是超文本标记语言,说人话解释就是,“我用标签来告诉大家我有哪些元素,它们是怎么排列的”,接下来小编就逐个逐个标签简单说说:
1. <!DOCTYPE html>
位置: 永远在.html文件的第一行,处于<html>标签之前
用途:
-告诉 Web 浏览器“我用了哪种 HTML 版本”
-本身并不是一个 HTML 标签
2. <html>....
</html>
位置:因为是所有其他 HTML 元素(除了<!DOCTYPE>标签)的容器。所以在最外层
用途:
-告诉浏览器“我是html文档”
3.<header>....
</header>
位置:在<html>里面,一般放在前面一点的位置
用途:
-是介绍内容或者导航链接栏的容器
-告诉浏览器“我是页眉,我的名字叫xxx,我有用xxxxx”,常用来放置一些关于网页描述的元数据<meta>,或是涉及到的<script>
4.<body>..
</body>
位置:在<html>里面,一般放在<header>后面,<footer>前面
用途:
-包含文档的所有内容
--标题: 从<h1></h1>到<h6></h6>
--文本段落: <p></p>
--超链接: <a href=....></a>
--图像<img>
<img>标签有两个必需的属性:来源src 和图片名 alt,没有结束标签</>
--表单<form></form>
[Ms.🐶:由于表单涉及众多内容,以后会进一步介绍]
--列表
<ol>指的是ordered list有序列表,列表排序以数字来显示
<ul>就是unordered list无序列表,
<li>就是list
5.<footer></footer>
位置:通常置于里面最尾部
用途:
-告诉浏览器“我是页脚”
-包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
以上就是HTML的基本架构,如果你想查看任何网页的HTML文件,你只需要在你自己的浏览器摁鼠标右键然后选择“查看网页原始码”,就会出现控制台,选择“元素/Element” ,你就可以随意点点看,网页就会出现对应内容