1、Web工作原理
Html、CSS和Javascript就是主要的客户端技术,其中Html负责网页结构、CSS负责网页样式、Javascrpt负责行为。
2、HTML介绍
2.1、Html是什么
英特网上的信息大多是按B/S架构以网页形式展示给用户的,网页文件是以标记语言为基础书写的,这种语言就是超文本标记语言(Hyper Text Markup Language,HTML)。HTML是一种描述语言,而不是编程语言,具体是通过标签负责网页的结构,由浏览器内核进行渲染,比如当浏览器遇到<p></p>标记(签)时,默认就会把该标记中的内容自动形成一个段落并前后折行。
2.2、Html的发展历程
版本 | 发布日期 | 说明 |
超文本标记语言(草案) | 1993年6月 | ISOC旗下IETF机构发布了超文本标记语言的草案(并非标准) |
HTML 2.0 | 1995年11月 | 作为第一个正式版本对外发布,不存在1.0版本 |
HTML 3.2 | 1996年1月14日 | 由W3C组织制定标准,对外发布 |
HTML 4.0 | 1997年12月18日 | 对外发布(此后都由W3C制定标准,对外发布) |
HTML 4.01 | 1999年12月24日 | 在4.01的基础上进行微小改进 |
XHTML 1.0 | 2000年1月26号 | XML风格的HTML,语法更多严格,意在取代HTML |
XHTML 1.1 | 2001年5月31日 | 在1.0基础上进行微小改进 |
XHTML 2.0草案 | 2002年8月5日 | 2009,此版本未完成就胎死腹中 |
XHTML 5.0草案 | 2008年1月 | 作为HTML5.0草案发布,但标准未制定完善 |
XHTML 5.0 | 2014年10月29日 | W3C宣布,HTML5.0标准规范最终制定完成 |
2.3、Html文档结构
3、文档类型声明
4、Html标签及属性
4.0、名词术语解释
a、标签
html文档都是由标签组织起来的,包括html注释标签<!--...-->、文档类型声明标签<!DOCTYPE>和页面结构标签......,标签有Block/Inline标签之分,有单/双/空表签之分,还有些特殊符号标签。html支持的标签有90个左右,但使用以下列举的就足够绝大部分网站开发工作了。(有些内联标签通过csss设置宽高有效如img/input,有些就无效如span)
b、元素
双标签包含的内容称之为该标签的元素,单标签没有结束标签也就不会有元素。因为双标签之间可以嵌套,所以把双标签称为元素,也是可以的。
c、属性
Html中除了注释标签和文档类型声明标签外,每个标签都支持一些属性,每个属性都有值,用来修改该标签的元素。有些属性是绝大多数标签都支持的,称之为通用属性,通用属性中常用的是style、id、class和title共四个。
注:html标签有调整样式的属性,但一般不用,而是使用CSS样式代替,如此才是做到结构与样式相分离。
4.1、页面结构标签
a、html
此标签可告知浏览器其自身是一个 HTML 文档。<html> 与 </html>限定了文档的开始点和结束点,在它们之间是文档的头部和主体。注:此标签虽然是文档的根标签,但它也不包含<!doctype> 标签,<!doctype>标签必须位于 html 标签之前。
此标签支持四个通用属性,也支持xmlns属性等,但实际开发中一般不会使用到。
b、head
<html>与 </html>之间的就是文档的头部和主体,文档头部由 <head> 标签定义。
此标签支持四个通用属性,也支持一些其他属性,但实际开发中一般不会使用到。
c、body
<html> 与 </html>之间的就是文档的头部和主体,文档主体由 <body> 标签定义。
此标签支持四个通用属性,也支持background、bgcolor、link/vlink、text等属性,但实际开发中除了style属性外一般不会使用到。
4.2、文档头部标签
a、title
此标签定义了文档在浏览器中的标题,是文档头部唯一要求必须包含的标签。
b、meta
此标签用以定义有关网页的元信息,比如针对搜索引擎和更新频度的描述和关键词。
c、style
此标签用于为 HTML 文档定义CSS样式信息,是html中使用CSS的第二种方式。
d、link
此标签用以定义文档与外部资源的关系,最常见的是外部的链接样式表,是html中使用CSS的第三种方式。
e、script
此标签用于在html文档中定义客户端脚本,常用的是JavaScript脚本;也可以通过 src 属性指向外部脚本文件,常用的JS脚本。
4.3、文本标签
4.3.1、标题字标签<h#>
Block元素/Double元素。
此标签用以定义标题,共六个级别。<h1> 定义最大的标题,<h6> 定义最小的标题。此元素确切的语义就是选择恰当的标签层级来构建文档的结构,所以每一级别的字号/字体/颜色/背景/间距等属性都是固定的,只能通过CSS样式或者其他html标签改变这些属性。
4.3.2、段落标签<p>
Block元素/Double元素。
此标签用以定义一个段落。段落中的字号/字体/颜色/背景/间距等属性都是固定的,只能通过CSS样式或者其他html标签改变这些属性。
4.3.3、分区标签
a、块分区标签<div>
Block元素/Double元素。
此标签可以把整个Web文档分割为独立的、不同的分区/部分(division/section),基本上已经取代了table布局,是Web布局中使用最普遍的一个标签,其他标签通过都作为此标签的元。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
b、行内分区标签<span>
Inline元素/Double元素。
此标签最常用的场景是嵌入在其他标签中,用来重组文档中的行内元素。如果不对 span 应用样式,那么 span 元素就仅仅是增加了额外的结构,但内部的文本与相邻文本不会有任何视觉上的差异。所以可以通过stye、id 或lass 属性为span内的元素应用css样式。
4.3.4、字体/字号/字色标签<font>
Inline元素/Double元素。
此标签最常用的场景是嵌入在其他文本标签中,重新定义文本的字体、字体尺寸、字体颜色等属性。使得在html文档中可以不依赖css仅仅依赖html标签就可以修改这些属性,但因为违背了网页设计中结构与样式相分离的原则,不赞成使用。
4.3.5、文本修饰标签<常用8个>
Inline元素/Double元素。
<b>和<strong>都是把文本加粗,但前者重样式后者中语义
<i>和<em>都使文本倾斜,但前者重样式后者中语义
<s>标签可为文本加删除线
<u>标签可为文本加下划线
<sub>和<sup>可分别为文本定义下标签和上标签
4.4、图像与链接
4.4.1、图像标签<img>
Inline元素/Single元素。
此标签用以在网页中嵌入一幅图像。从技术上讲,<img> 标签并不会在网页中插入图
像,而是从网页上链接图像,此标签所做的仅仅是创建被引用图像需要的占位空间。
4.4.2、链接<a>
Inline元素/Double元素。
此标签用以链接,具体有两个方面:定义超链接,用于从一张页面链接到另一张页面;定义一个锚点标记文档内的某一行,并能够链接到这一行。
4.5、列表
4.5.1、有序列表<ol>
Block元素/Double元素。
此标签最常用的场景就是嵌套多个<li>(B/D)标签,定义一个有序列表,列出每个<li>标签的的序号,并可以指定起始序号。
4.5.2、无序列表<ul>
Block元素/Double元素。
此标签最常用的场景就是嵌套多个<li>(B/D)标签,定义一个无序列表,每个<li>标签前只有项目符号并非序号。
4.6、表格布局系列标签
table、tr、td三标签已经能够完成表格的布局
第一行里的td可以用th代替,表示表头数据,用td后文本会自动水平居中
thead、tbody和tfoot三标签用以划分表头、正文和表注,内部包含tr,但基本不用
4.7、表单系列标签
4.7.1、表单标签<from>
Block元素/Double元素。
此标签用于为用户输入创建一个HTML表单。<from>标签内部通过input、textarea、select和 option 等控件元素组织数据,以提交给服务器。
4.7.2、表单控件元素一<input>
Inline元素/Single元素。
此标签最常用的场景是嵌入在<form>标签中(可以单用),用以组织数据提交给服务器。根据type属性的不同具有不同的功能,常用有以下9个功能:
4.7.3、表单控件元素二<textarea>
Inline元素/Double元素。
此标签最常用的场景是嵌入在<form>标签中(可以单用),提供一个多行文本框弥补<input>元素只能单行输入的缺陷。
4.7.4、表单控件元素三<select>和<option>
Inline元素/Double元素,这俩标签只能且必须和彼此搭配使用。
此标签最常用的场景是嵌入在<form>标签中(可以单用),提供下拉列表框以供用户选择。