网页由html,css,js构成.
html是结构层,css是表现层,js是行为层.
- 打个比方:形容一个人,人的身体就是html,不管人的外表或内在怎么样,都是挂载在这个人上的,人没了就什么都没了,对于网页来说,没有html就什么都没有了.
- css表示着这个人的外貌,衣着等等.网页好不好看取决于css.
- js表示这个人的内在美或者这个人的学识,技巧等等. 网页里的各种功能都是js决定的.
html经历过许多版本,目前基本已经普及了html5就是我们说的h5页面.
html4或者之前的版本基本的开头都是如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
而在我开始学习的时候已经是h5了,所以我们只需要在开头写下
<!doctype html>
这样就表示这个页面是html5页面了,方便了许多
网页里的标签除了上面这个声明,都是层层嵌套的,head里写各种网页的设置,引入的样式,插件等等(这个之后css,js里会讲)
网页最最基本组成
标签必须闭合
<html></html> <body></body>
会有单标签 比如
<input type="text" /> <br />
这样的标签 只要在后面加一个/即可,这个不是强制性的,但是最好加上,养成好习惯.
标签分为行内标签,块标签
举个例子: div是块标签,span是行内标签
写在页面里div会独占一行,span会在一行排下去
Paste_Image.png
Paste_Image.png
块标签对应css样式里的 display:block;
行内标签对应 display:inline;
css里可以覆盖这个设置
Paste_Image.png
Paste_Image.png
虽然我们可以修改这个,但是尽量如果没有特殊需求,还是尽量用适合的标签
html5带来了许多新的标签,主要目的是使标签用的尽量语义化
比如之前任何一个块标签我们都可以用div,新增的 header,footer,section可以使页面更加语义化,
Paste_Image.png
Paste_Image.png
把header,footer改成div标签也不会错,只是这样写会更好,这样会便于搜索引擎的抓取(我也是听说的,具体真不知道什么原理),这里涉及一个seo这个名词,我是不懂的...
讲一下盒子模型,这个是前端面试基本都会考的,理解一下就好了
Paste_Image.png
Paste_Image.png
padding和margin都属于这个div但是padding的颜色是div的背景颜色,margin是一个透明的东西,代表这个div与其他标签的距离
(后面css会将一个box-sizing属性,会修改这个标签的所属地盘,到时候具体讲吧,这么讲讲不通)
盒子模型再举一个例子吧: 你淘宝买东西收到快递,基本上都是一个盒子,纸壳箱子就是border,你买的东西就是这个内容,为了防止东西碎掉会填充一些泡沫什么的,泡沫所填充的空间就是padding,你把快递盒子放到房间角落,但是快递盒子不想家里的小孩碰,距离小孩的距离就是margin.
常用块标签有:div,p,h1,h2...h6,li
常用内联标签有:span,input,strong
h5标签列表
一时只能想起来这么多了...内联标签没有高度,内容有多少,它就占多少,padding会让它占更多位置,就是它的内增高.有一个例外就是img标签,他虽然是内联标签但是他有高度,他就是行内块标签,display:inline-block;行内块标签虽然会在一行排下去,但是他有高度
==================================
Paste_Image.png
如何创建一个html,很简单 新建一个文本文档,把后缀改为html,这个文件就是html,
这真的是太基础了,但是万一你没基础就可能懵逼了..
