11月14日

学习笔记 #2016年11月14日

主要内容

• block(块)级元素的特点

  
  
  1.总是在新行上开始
  
  2.高度，行高以及外边距和内边距都可以控制
  
  3.宽度缺省是它的容器的100%，除非设定一个宽度
  
  4.它可以容纳内敛元素和其他块元素

• inline（内联、内嵌、行内、直进式）元素的特点
  
  1.和其他元素都在一行上
  
  2.高，行高及内外边距都不可改变
  
  3.宽度就是它的文字或图片的宽度，不可改变
  
  4.内联元素只能容纳文本或者其他内联元素
  

（块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让他也有每次都从新行开始的属性即成为块元素,同样我们可以把块元素加上display:inline这样的属性，让他也在一行上排列）

• 常用块元素

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易，也是css layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）

noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表（无序列表）

• 常用内联元素

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

dfn - 定义字段

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线(不推荐)

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

• html5新增表单元素

  
  

  <datalist>–规定输入区域的选项列表，列表是通过datalist内的option元素创建的（option元素永远都要设置value属性）

<keygen>–密钥对生成器，提供一种验证用户的可靠方法

<output>–定义不同类型的输出，比如脚本的输出

• html5新增表单属性

• 新的form属性：

  autocomplete：规定 form 或 input 域应该拥有自动完成功能（autocomplete 适用于<form>标签，以及以下类型的<input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color）

  novalidate:规定在提交表单时不应该验证 form 或 input 域

• 新的input属性：

autocomplete：同上

autofocus：规定在页面加载时，域自动地获得焦点

form：规定输入域所属的一个或多个表单（form 属性必须引用所属表单的 id：）

form overrides (formaction,formenctype,formmethod,formnovalidate,formtarget)：

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

height 和 width:用于 image 类型的 input 标签的图像高度和宽度(height 和 width 属性只适用于 image 类型的 <input> 标签)

list:规定输入域的 datalist

min, max 和 step:用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等）

注（min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range）

multiple：规定输入域中可选择多个值(multiple 属性适用于以下类型的 <input> 标签：email 和 file)

pattern (regexp):用于验证 input 域的模式(pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password)

placeholder:提供一种提示（hint），描述输入域所期待的值(placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password)

required:规定必须在提交之前填写输入域（不能为空）

• 语义化含义

  语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解

  
  

• section:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

• aside:定义其所处内容之外的内容。(aside 的内容应该与附近的内容相关)

• header:标签定义文档的页眉（介绍信息）

• footer:定义文档或节的页脚(页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等)

• article:规定独立的自包含内容(<article> 元素的潜在来源：
  论坛帖子,报纸文章,博客条目,用户评论)

• nav:定义导航链接的部分
  
  

• font的样式

font-style:规定字体样式

font-variant：规定字体异体

font-weight：规定字体异体

font-size/line-height：规定字体尺寸和行高

font-family:规定字体系列

-

• text的样式

  
  

text-indent:首行缩进

text-align：文本对齐方式

letter-spacing：字符间距

word-spacing：单词间距

text-transform：控制文本大小写

text-decoration：文本修饰（上下划线）

line-height：行高

text-shadow：向文本添加阴影

white-space：规定如何处理元素中的空白

text-emphasis：向元素的文本应用重点标记以及重点标记的前景色

text-outline：规定文本的轮廓

text-overflow：规定当文本溢出包含元素时发生的事情

text-wrap：规定文本的换行规则