HTML
基础
概念
全写： HyperText Mark-up Language
译名： 超文本标记语言
超级文本标记语言是一种规范，一种标准，
超文本标记语言它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
1.功能是用于展示
2.HTML语言由浏览器解析
3.后缀名是html或htm
HTML文档结构
头部分:head
头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符
正文部分:body
网页中显示的实际内容均包含在这2个正文标记符之间。
标签(标记),属性
任何标记皆由"<"及">"所围住，如 <P>
标记名与小于号之间不能留有空白字符。
某些标记 要加上参数，某些则不必。如 <font size="+2">Hello</font>
参数只可加于起始标记中。
在起始标记之标记名前加上符号"/"便是其终结标记，如 </font>
标记字母大小写皆可。
标签分类
围堵标记
它以起始标记及终结标记将文字围住，令其达到预期显示效果。
空标记(自闭合)
是指标记单独出现，只有开始标记没有结束标记。
标签
文档标记
<HTML> ● 文件声明 让浏览器知道这是 HTML 文件
<HEAD> ● 开头 提供文件整体资讯
<TITLE> ● 标题 定义文件标题，将显示于浏览顶端
<BODY> ● 本文 设计文件格式及内文所在
排版标记
<!--注释--> ○ 说明标记 为文件加上说明，但不被显示
<P> ● 段落标记 为字、画、表格等之间留一空白行
<BR> ○ 换行标记 令字、画、表格等显示于下一行
<HR> ○ 水平线 插入一条水平线
<PRE> ● 预设格式 令文件按照原始码的排列方式显示 (了解)
字体标记(了解)
<STRONG> ● 加重语气 产生字体加粗 Bold 的效果
<B> ● 粗体标记 产生字体加粗的效果
<EM> ● 强调标记 字体出现斜体效果
<I> ● 斜体标记 字体出现斜体效果
<U> ● 加上底线 加上底线 反对
<H1> ● 一级标题标记 变粗变大加宽，程度与级数反比
<H2> ● 二级标题标记 将字体变粗变大加宽
<H3> ● 三级标题标记 将字体变粗变大加宽
<H4> ● 四级标题标记 将字体变粗变大加宽
<H5> ● 五级标题标记 将字体变粗变大加宽
<H6> ● 六级标题标记 将字体变粗变大加宽
<FONT> ● 字形标记 设定字形、大小、颜色
<BIG> ● 字体加大 令字体稍为加大
<SMALL> ● 字体缩细 令字体稍为缩细
<STRIKE> ● 画线删除 为字体加一删除线 反对
<SUB> ● 下标字 指数
<SUP> ● 下标字 下标字
转义字符(实体)
< < 小於号或显示标记
> > 大於号或显示标记
& & 可用於显示其它特殊字符
" " 引号
® ® 己注册
© © 版权
™ ™ 商标
空格
清单标记
<OL> ● 顺序清单 清单项目将以数字、字母顺序排列
start
type
<UL> ● 无序清单 清单项目将以圆点排列
type
<LI> ○ 清单项目 每一标记标示一项清单项目
<DL> ● 定义清单 清单分两层出现
<DT> ○ 定义条目 标示该项定义的标题
<DD> ○ 定义内容 标示定义内容
图形标记
<IMG> ○ 图形标记 用以插入图形及设定图形属性
alt text 规定图像的替代文本。 STF
src URL 规定显示图像的 URL。
border pixels 不推荐使用。定义图像周围的边框。
height 定义图像的高度。
width 设置图像的宽度。
usemap URL 将图像定义为客户器端图像映射。
title 设置鼠标悬浮时的提示信息
链接标记
<A> ● 链接标记 加入链接
href URL 链接的目标 URL。
name section_name 规定锚的名称。
target 在何处打开目标 URL。
_blank
_parent
_self
_top
framename
表格标记
<TABLE> ● 表格标记 设定该表格的各项参数
border pixels 规定表格边框的宽度。
cellpadding 规定单元边沿与其内容之间的空白。(外边据)
cellspacing 规定单元格之间的空白。
<TR> ● 表格列 设定该表格的列
<TD> ● 表格栏 设定该表格的栏
colspan number 规定单元格可横跨的列数。
rowspan number 规定单元格可横跨的行数。
align 规定单元格内容的水平对齐方式。
<TH> ● 表格标头 相等于<TD>，但其内之字体会变粗
colspan number 规定单元格可横跨的列数。
rowspan number 规定单元格可横跨的行数。
align 规定单元格内容的水平对齐方式。
框架标签(了解)
<FRAMESET> ● 框架设定 设定框架
cols 定义框架集中列的数目和尺寸。
rows 定义框架集中行的数目和尺寸。
<FRAME> ○ 框窗设定 设定框窗
frameborder 规定是否显示框架周围的边框。
noresize noresize 规定无法调整框架的大小。
scrolling 规定是否在框架中显示滚动条。
src URL 规定在框架中显示的文档的 URL。
name name 规定框架的名称。
<IFRAME> ○ 页内框架 于网页中间插入框架 IE
src URL 规定在 iframe 中显示的文档的 URL。
frameborder 规定是否显示框架周围的边框。
height 规定 iframe 的高度。
width 定义 iframe 的宽度。
表单标记
<FORM> ● 表单标记 决定单一表单的运作模式
action URL 规定当提交表单时，向何处发送表单数据。
method 规定如何发送表单数据。
POST
GET
1.GET提交的键值对会出现在URL上.POST不会
2.POST提交安全性相对较高
3.GET提交数据长度有限.POST理论上没有限制.
<TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字
cols number 规定文本区内的可见宽度。
rows number 规定文本区内的可见行数。
disabled disabled 规定禁用该文本区。
name name_of_textarea 规定文本区的名称。
readonly readonly 规定文本区为只读。
<INPUT> ○ 输入标记 决定输入形式
type
button (与js结合,本身无意义)
checkbox 多选框
file 文件上传
hidden 隐藏域
password 密码输入框
radio 单选框
reset 重置按钮
submit 提交按钮
text 文本输入框
name field_name 定义 input 元素的名称。
value value 规定 input 元素的值。 http://www.baidu.com?name=tom&age=18
readonly readonly 规定输入字段为只读。
disabled disabled 当 input 元素加载时禁用此元素。
checked checked 规定此 input 元素首次加载时应当被选中。
maxlength number 规定输入字段中的字符的最大长度。
size number_of_char 定义输入字段的宽度。
<SELECT> ● 选择标记 建立 pop-up 卷动清单
disabled disabled 规定禁用该下拉列表。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
size number 规定下拉列表中可见选项的数目。
<OPTION> ○ 选项 每一标记标示一个选项
disabled disabled 规定此选项应在首次加载时被禁用。
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。
value text 定义送往服务器的选项值。
样式(CSS)标记
<STYLE> ● 样式表 控制网页版面
<span> ● 自订标记 独立使用或与样式表同用
<DIV> ● 区隔标记 设定字、画、表格等的摆放位置
其他标记
<META> ○ 开头定义 让浏览器知道这是 HTML 文件
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name=“keywords” content=“传智播客，IT培训" />
<meta name="description" content="传智播客是国内最大的……" />
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" />
<LINK> ○ 关系定义 定义该文件与其他 URL 的关系
<link rel="stylesheet" type="text/css" href="hello.css">
CSS(了解)
概念
CSS(Cascading Style Sheet)层叠样式表
CSS能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
引入方式
链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<title>文档标题</title>
<link rel=stylesheet href="hello.css" type="text/css">
</head>
定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下：
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>
样式表语法 (CSS Syntax)
Selector { property: value }
参数说明：
Selector -- 选择符
property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开
选择器
元素选择器
语法：
E { sRules }
元素选择符。以文档元素作为选择符。
示例：
td { font-size:14px; 120px; }
a { text-decoration:none; }
CLASS选择器
语法：
E.className { sRules }
说明：
类选择符。
示例：
div.note { font-size:14px; }
/* 所有class属性值等于（包含）"note"的div对象字体尺寸为14px */
.dream { font-size:14px; }
/* 所有class属性值等于（包含）"note"的对象字体尺寸为14px */
ID选择器
语法：
#ID { sRules }
说明：
ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
示例：
#note { font-size:14px; 120px;}
伪类选择器
语法:
选择器:伪类{}
l : link 未点击过的连接
v : visited 点击过的连接
h : hover 悬浮时状态
a : active 点下鼠标没松手
选择器分组
语法：
E1 , E2 , E3 { sRules }
说明：
选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
示例：
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }
常见属性
字体属性 Font Properties
font-style
font-variant
font-weight
font-size
line-height
font-family
尺寸属性 Dimensions Properties
height
width
背景属性 Background Properties
background-color
background-image
background-repeat
background-attachment
background-position
边框属性 Borders Properties
border
border-color
border-style
border-width
内补丁属性 Paddings Properties
padding
padding-top
padding-right
padding-bottom
padding-left
外补丁属性 Margins Properties
margin
margin-top
margin-right
margin-bottom
margin-left
长度单位
px-绝对-像素(最常用)
pt-绝对-点
pc-绝对-派卡
in-绝对-英寸
cm-绝对-厘米
mm-绝对-毫米
1in = 2.54cm = 25.4 mm = 72pt = 6pc