html 初学者 第一篇

这次从头开始梳理一些自认为比较重要的点和易忘点

文档类型

!DOCTYPE html, 记得第一次面试的时候,人就问我知道html文档第一行要写什么吗?有什么作用.乖乖的还好我认识这么个英文单词,那会才刚开始接触前端这些东西,我就跑去面试了.言归正传: !DOCTYPE html 字面意思Document type: html 5. 声明文风当类型html 5页面.

meta 单标签

meta 被称为网页的元数据, 通过meta向浏览器传递一些该网页的基本数据(初学者先从基本学起,所以只叙述一些简单的)
这里面有些常规的数据, <meta charset="utf-8", charset 理解为:character(字符) set(串), 一般我们都会书写utf-8, 这是个支持中文的"万国码", 支持200多个国家的语言显示.
可能刚开始编写的时候,大家开头都用的是快捷键输入,因此往往会漏掉keywords 和decription的书写, 这个可以从字面意思理解, key words 主要的词语(搜索浏览器的关键词).description:描述,对于该网页的一些描述. 这个是为了方便客户了解和搜索网页的.

list 列表

因为列表也是块, 所以很多时候ul>li 用来取代div的块状布局
这里有3个不同的列表:

unorder list

无序列表用于一些内容相似,结构相仿,布局接近的内容.比如说:淘宝上面商品的成排显示,就是用的ul>li方便程序员写代码,只要设置一个ul>li格式就可以给所有的内容用.

order list

有序列表除了和ul一样的适用范围,和每个区域的内容是由先后关系的.(这里和seo优化有关, 可以看看另一篇文章)
order list 里面有 type属性,用来更改不同的排序字母(罗马字:I,i 大小写字母A,a eg: type="A"),还有start(开始) start="3", 那么这个有序列表就开始从3数起

definition list

一般用于网页最下面的布局的信息填写等.

特殊符号的使用

记得后面加上;, 很多同学会发现即使不加分号也可以显示,这是由于浏览器的 fail silence, 即使错误浏览器也会去猜你要表达的意思.

掌握好每个元素的类型也很重要

html元素分为块元素和行内元素(行内元素分为可替换行内联元素和不可替换内联元素)
这里具体说说块元素和行内元素
块元素:
div h ol ul li dl dt dd p blockquote pre
行内元素:
a b strong em i span video audio img

行内元素并列成一行,块元素独占一整行.
这里有两个特殊的P元素(不能放任何块级元素)和a元素(可以放块元素)
那么有些人就是试了试,说:我放了还是显示出来了.你会发现因为fail silence这个机制, 原本的代码是:

<p>
    <div></div>
</p>

变成了

<p></p>
<div></div>
<p></p>

浏览器说不让你做,就是不让你做. 再怎么花里胡哨,浏览器都给你改了去.