Study html
###Chapter 1
How to create a HTML file.
###Chapter 2
The basic knowledge:
结构化标记:描述标题和段落的元素 语义化标记:特定含义的标记,强调、缩写。。。 标题:
段落:
粗体:
斜体:
上标:
下标:
空白:增强代码阅读性,多个空格和换行,均为一个空格-------白色空间折叠
换行:
水平线:
加粗和强调:, 标记引用:
,缩写词和首字母缩写词: 引用和定义:, 设计者详细信息: 内容的修改:删除,插入,不准确或不相关却并不应当予以删除的内容###Chapter 3
Lists:
顺序列表:
,
- 无序列表:
,
- 自定义列表:
,
- ,
###Chapter 4
链接: 邮箱: 新窗口:
###Chapter 5
图片:<img src:"图片路径" alt:"文本说明" title:"停留信息"/> 高度宽度:height,weight 代码插入头像 水平对其方式:align: right,left,top,middle,bottom
###Chapter 6
表:
行:表格宽度,单元格内边距,单元格间距:width,cellpadding,cellspacing 边框宽度,背景色:border,bgcolor
###Chapter 7
表单结构: action method id size 单行文本框: type[text] name maxlength 密码框: type[password] name size maxlength 文本域;<textarea> 单选按钮: type[radio] name value checked 复选框: type[checkbox] name value checked 下拉列表框: name value selected 多选框: size multiple 文件上传域: type[file] 提交按钮: type[submit] name value 头像按钮: type[image] 按钮和隐藏控件: type[hidden] 标签表单控件: for id 组合表单元素: HTML5: 表单验证:required 日期控件: type[date] 电子邮件: type[email] URL: type[url] 搜索输入控件: type[search] placeholder
###Chapter 8
注释: id: 元素唯一标识 class: 设置多个元素特性 块级元素:
- 内联元素:
将文本和元素集中在一个块级元素中:
将文本和元素集中在一个内联元素中: 内联框架:<iframe> 页面信息: 转义字符:###Chapter 9
Flash 音视频 视频:
###Chapter 10
CSS 使用外部CSS: href type[text/css] rel[stylesheet] 使用内部CSS:<style> 选择器: 通用:*{} 类型:h1, h2 {} ID:#introduction {} 子元素:li>a{} 后代: p a {} 相邻兄弟:h1 + p {} 普通兄弟:h1~p {]
###Chapter 11
CSS Color
红绿蓝 色调 饱和度 亮度
RGB HSL 十六进制 颜色名
###Chapter 12
Font 字体选用:font-family 字体大小:font-size 像素 百分数 em 选用更多字体:@font-face font-family src format 字体格式:eot woff ttf/otf svg 粗体:font-weight bold normal 斜体:font-style normal italic oblique 大小写:text-transform uppercase lowercase capitalize 下划线和删除线:text-decoration none underline overline line-through blink 行间距:line-height 字母间距和单词间距:letter-spacing word-spacing 对齐方式:text-align left right center justify 垂直对齐:vertical-align baseline sub super top text-top middle bottom text-bottom 文本缩进:text-indent 投影:text-shadow 首字母、首行文本:first-letter first-line 链接样式::link :visitd :hover :active :focus
特性选择器: EXISTENCE(简单选择器):p[class] EQUALITY(精确选择器):p[class="dog"] SPACE(部分选择器):p[class~="dog"] PREFIX(开头选择器):p[attr^"d"] SUBSTRING(包含选择器):p[attr*"do"] SUFFIX(结尾选择器):p[attr$"g"]
###Chapter 13
Boxes 大小:width height 宽度限制:min-width max-width 高度限制:min-height max-height 内容溢出:overflow hidden scroll 边框:border 外边距:margin 内边距:padding 边框宽度:border-width thin medium thick 边框样式:border-style 实线:solid 方形点:dotted 虚线:dashed 两条线:double 雕入页面:groove 凸起:ridge 嵌入页面:inset 凸出屏幕:outset 不显示:hidden/none 边框颜色:border-color 快捷方式:px dotted #333 内容居中:1px auto 1px auto 边框图像:border-image 伸展:stretch 重复:repeat 铺满:round 盒子投影:box-shadow 水平[负值为阴影至于左侧] 垂直[负值为上方]
模糊距离
阴影扩展 inset:创建内部阴影 圆角:border-radius 椭圆:border-radius###Chapter 14
List Table Form
项目符号样式:list-style-type: 无序:none disc circle square 有序: decimal 1 2 3 decimal-leading-zero 01 02 03 lower-alpha a b c upper-alpha A B C lower-roman i ii iii. upper-roman 项目头像:list-style-image 标记定位:list-style-position outside inside 快捷方式:list-style: outside circle
表格属性: width
padding text-transform 大小写转换 letter-spacing 字间距 font-size border :hover 空单元格的边框:empty-cells show hide inherit 嵌套表格 遵循外部表格规则 单元格之间空隙:border-spacing, border-collapse collapse:尽可能合并单行文本框样式: font-size color background-color border border-radius :focus :hover background-image text-shadow 光标样式: cursor auto crosshair default pointer move text wait help url("image.gif")
标题: scope="col" scope="row" 跨列,跨行:colspan rowspan 长表格: