toc

Intro

公司给实习生分享的html入门知识。
一 HTML简介
html是一种用于网页设计的语言，html文档包括标签（tag）和文本。标签通常成对出现，譬如

 。从起始标签到结束标签期间的内容称之为HTML元素（elements），html元素可以嵌套使用，元素拥有若干属性，用来表现元素。其元素的属性书写格式为在起始标签内以name=”value”的形式书写，按照网页设计结构和表现分离的原则，除去头部head区域和表单元素需要定义的属性之外，一般的内容呈现元素只需定义id属性和class属性即可（css可以通过id和class以及标签对想要格式化的元素进行样式更改）。

下面我先将现在通用的HTML4.01版本。
html骨架：

HTML头信息 HTML内容信息

二 HTML标签简介
下面我按照上面骨架图的顺序来简单介绍html标签。
1 单独出现，处于html文档的最前面，用来告知浏览器使用哪种html或xhtml规范。
注意：若htmll文档省略此标签会触发浏览器的怪异模式，将会严重影响页面的呈现和js的解析，而申明不同的规范和不同的DTD
类型也会导致浏览器的解析差异。
2 包含了文档一些信息，如标题，meta信息等，一般不会在浏览器中显示。
2.1 head一般包含的标签有：title，link，style，script，meta。
2.1.1 title标签代表了html文档的标题。
只能在head中出现。
title的内容体现了网页的内容，方便搜索引擎，一定要加上。
title的内容通常在浏览器的标题栏显示作为收藏夹内的标签的名称。
2.1.2 link标签单独出现，
其属性有
href——指定需要加载的资源（css文件）的地址
rel——指定链接的类型
media——媒体类型
title——指定元素的名称
type——包含内容的类型，一般使用type=”text/css”
实例：

 

2.1.3 style标签用来在文档中声明内部样式,标签内则是css代码。
属性
media——媒体类型
type——包含内容的类型，一般为 type=”text/css”
2.1.4 script标签用来在文档中使用脚本
属性
src——指定脚步文件的地址
type——指定媒体类型 （例如type=”text/javascript ）
实例：

 

2.1.5 meta标签，主要体统页面的一些元信息，譬如针对搜索引擎和更新频度的描述和关键词。其只能在head存在，并且总是以名称、值的形式进行传递。
属性主要分为两组
name属性和content属性，name属性用于描述网页，name属性的之所描述的内容（值）通过content属性标识，主要是用来便于搜索引擎的查找，分类，等其中比较重要的有description，kewords和robots。
http-equiv属性和content属性，http-equiv属性属于HTTP的响应头报文（MIME文档头），与上面的相似，http-equiv属性的值所描述的内容（值）通过conttent属性表示。主要页面加载前提供给浏览器等设备使用，其中比较重要的是：
content-type charset 提供编码信息，国内的网页主要使用中文的gb2312和独立于任何语言的utf-8.
refresh 刷新和跳转页面
no-cashe页面缓存
expires网页缓存过期时间
而对于公司网页中还是用了一种特殊的http-equiv属性，代码为：

X-UA-Compatible的值只有ie8+识别，上面的代码是强制ie8+的浏览器以ie7下的兼容模式渲染网页，这样的好处是，页面在ie一列都有基本相同的呈现，缺点是舍弃了ie9对css3的支持，因此有待改进，而需要特别注意的是此属性最好靠近起始的head标签。
3 body标签,其代表了html文档的主体，是浏览器中呈现给用户的部分。下面介绍下主要用到的标签。
3.1
h1,h2,h3,h4,h5,h6定义了html的标题，各个浏览器默认的大小均不同，所以需要在css中重置。
p定义了html的段落，浏览器会使段落换行。
a 定义了html中的链接，在href属性中可以定义链接地址，或者使用name定义锚的名称。
img定义了html中的图像，使用src属性定义图像的地址，使用alt属性定义图片的替换文本（有利于seo），最好将图像的实际尺寸添加到width和height属性。
hr定义了水平线，最好按

书写。
div一般用来作为一个容器布局使用，其包裹的元素会有换行。
span主要用来强调行内的元素，默认没有格式表现。
3.2 一些常用的可以格式化文本的标签
b strong会使文字加粗，em i 则会是文本变成斜体，而且对于语义化方面来说都有加强强调的意味。
3.3 表格，其基本的代码如下

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

 

其中tr定义了行，td定义了单元格，th定义了表头。
3.4列表，主要使用的是无序列表

• Coffee
• Milk

 

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
3.5 表单
form定义了网页的表单元素，而表单可以分为 单行文本域，单选框，复选框，下拉菜单和多行输入框等。
3.5.1 使用最广的是input标签，其type属性定义了不同的input类型：
text——单行文本输入框，默认为20个字符。
radio——单选框
checkbox——多选框
submit——确认提交按钮
3.5.2 而textarea定义了多行的文本输入框，可以通过cols和rows来定义宽度（最好用css的width和height）。
3.5.3 下拉菜单比较简单，其代码示范为：

Volvo Saab Opel Audi

select的下拉菜单在不同的浏览器有不同的呈现，且其样式更改有限制。