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>

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