html简介

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

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

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

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 下拉菜单比较简单,其代码示范为:

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

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus