table、from、html特性

table表格

• 组成：

  、、

• 注意：

  1.table 用于定义一个表格
  2.tr 是定义表格中的一行，必须嵌套在table标签内，table中包含几对tr就有几行表格
  3.td 就是单元格，必须嵌套在tr标签内，tr有几个td就表示有几个单元格(就是几列)

• 表格属性

  • border	边框 默认值为0	像素值(px)
    cellspacing	设置单元格和单元格之间的间距	像素
    cellpadding	设置单元格内容和单元格的间距	像素
    width	表格的宽度	像素值
    height	表格的高度	像素
    align	设置表格的水平对齐方式	left，center，right

  • 表格结构：：用于定义表格的头部。

    ​ :用于定义表格的主体，位于

    标签中，一般包含网页中除头部和底部之外的其他内容。

  • 表格标题： caption：定义表格标题

    <table>
    <caption>我是表格标题</caption>
    </table>
    

• 合并单元格

  • 跨行合并：rowspan

  • 跨列合并：colspan

    合并单元格思想：

    ​ 将多个内容合并 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

    ​ 公式：删除的个数 = 合并的个数 - 1

• 总结表格

  ​ 1.html提供的表格是数据的方法

  2.表格由行中的单元格组成

  3.表格没有列元素，列的个数由单元格个数决定

  4.表格不要纠结外观，css来管

表单标签

• input控件

  单标签 br,hr, input

  属性	属性值	描述
  type	text	单行文本输入框
  	password	密码输入框
  	radio	单选按钮
  	checkbox	多选按钮
  	button	普通按钮
  	submit	提交按钮
  	reset	重置按钮
  	image	图像形式的提交按钮
  	file	文件域
  name	由用户自定义	控件的名称
  value	由用户自定义	input控件中的默认值
  size	正整数	控件在页面中显示的宽度
  checked	checked	定义选择控件中默认被选中的项
  maxlength	正整数	控件允许输入的最大字符数

• label 标签为 input 元素定义标注（标签）。

  作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

  如何绑定元素呢？

  for 属性规定 label 与哪个表单元素绑定。

• textarea控件(文本域)

  如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

  <textarea cols="每行的字符数" rows="显示的行数">
  			
  </textarea>
  

• 下拉菜单

  使用select控件定义下拉菜单的基本语法格式如下

  注意：

  1. <select></select>中至少应包含一对<option></option>。
  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

• 表单域

  在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

  action:  url地址
  method:  提交方式
  name :  表单的名称，区分同一界面的多个表单
  

  每个表单都要由自己表单域

  HTML5新标签与特性

• 发展历程

  1993标记语言第一版

  1995 2.0

  1996 3.2 w3c推荐标准

  1999 4.0

  2000 XHTML1.0 相比与html，更严格，扩展了html

  2001 xhtml1.1

  2008 HTML5

• 文档类型设定

  • document

    • HTML: sublime 输入 html:4s
    • XHTML: sublime 输入 html:xt
    • HTML5 sublime 输入 html:5

  • 字符设定

    • ：HTML与XHTML中建议这样去写
    • ：HTML5的标签中建议这样去写

    常用新标签

    w3c 手册中文官网 : http://w3school.com.cn/

    • header：定义文档的页眉 头部

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

    • footer：定义文档或节的页脚 底部

    • article：定义文章。

    • section：定义文档中的节（section、区段）

    • aside：定义其所处内容之外的内容 侧边

    • datalist 标签定义选项列表。请与 input 元素配合使用该元素

    • fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

• 新增的input type属性值：

  类型****	使用示例****	含义****
  email****		输入邮箱格式
  tel****		输入手机号码格式
  url****		输入url格式
  number****		输入数字格式
  search****		搜索框（体现语义化）
  range****		自由拖动滑块
  time****		小时分钟
  date****		年月日
  datetime****		时间
  month****		月年
  week****		星期 年

• 常用新属性

  属性****	用法****	含义****
  placeholder****		占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
  autofocus****		规定当页面加载时 input 元素应该自动获得焦点
  multiple****		多文件上传
  autocomplete****		规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
  required****		必填项 内容不能为空
  accesskey****		规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

  多媒体标签

  • audio：播放音频
  • video：播放视频

总结

• 掌握table标签用法
• 掌握from标签用法
• 认识html5新特性

css发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

​ 随着html的成长，为了满足前端工程的需求，html增加了很多显示功能，html变得混乱，html页面显得用臃肿，于是css诞生了

• css网页的美容师

​ CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。

​ CSS的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。

​ 如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师

​ \没有不漂亮的女人，只有不会打扮的女人。

​ \没有不好看的网页，只有不会CSS的前端。

​ 网页添加 CSS和不添加CSS 的对比

CSS初识

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或**层叠？**样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

h1{                 color: red;  font-size: 25px}
选择器(标签选择器)     属性：属性值 用分号连接  
属性="属性值" 用空格链接

需要注意的是
	1.排版结构   用段落对齐的排版书写css

CSS字体样式属性

font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

相对长度单位	说明
em	相对与页面的尺寸
px	像素，最常用，推荐你使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:“微软雅黑”;}

1.一般网页都是14px以上的字体
2.偶数字体字号，ie6等老式浏览器支持奇数会有bug
3.各种字体之间用英文状态下的逗号隔开
4.当字体是英文是，且有空格$#的时候，用双引号括起来
5.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

Unicode,同一码，万国码，单一码，业界标准，它为每种语言的每个字符都设置一个唯一的二进制编码，以满足我们跨语言，跨平台进行文本转换，处理的要求

1.用英文表示

2.用unicode

3.一般用中文

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight的属性值

​	normal,bold,lighter,100-900（100的整数倍）
700和boldr一样，400相当与normal

font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

重要重要重要

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

开发者工具（chrome）

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

“按F12”或者是 “shift+ctrl+i” 打开 开发者工具。

菜单： 右击网页空白出—查看

小技巧
  1.ctrl加滚轮键可以放大代码
  2.可以同时查看html，css代码
  3.css样式可以实时更改  

选择器（重点）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名  {属性名1:属性值1；属性名2:属性值2；}

最大优点是快速为页面用类型的标签同一样式，也是他的缺点，不能设计差异化样式

类选择器

类选择器用"."(英文点号)进行表示，后面紧跟类名

.类名{属性名1:属性值1；属性名2:属性值2；}

类选择器最大优点就是可以为元素定义单独或相同的样式

1.长名称或词组可以使用中横线-为选择器命名
2.不建议使用下划线命名css选择器
	1.少按一个shift键
	2.区分js变量变量
	3.浏览器兼容问题，在IE6中 _tip无法生效的
3.不要用纯数字，中文命名，尽量用英文字母表示

课堂案例：Google

多类名选择器

可以为标签增加多个类名，从而达到更多选择目的

1.样式显示效果和html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
2.各个类名用空格连接

多类名选择器在后面项目常用到

id选择器

id选择器用"#"(英文点号)进行表示，后面紧跟id名

#id名{属性名1:属性值1；属性名2:属性值2；}

id是唯一的，只能对用文档中某一个具体的元素，id是html的id属性值，用法和类选择器类似

id选择器和类选择器区别

id相当身份证号(不得重复，只是用一次)，类选择器相当名字（多次重复使用）

最大的不同就是使用次数

通配符选择器

*{属性名1:属性值1；属性名2:属性值2}

所有选择器作用最广的，匹配所有元素

伪类选择器

伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素

类选择器用 . 伪类用 :

链接伪类选择器

​ : link 未访问的连接

​ :visited 、以访问的连接

​ :hover 鼠标悬停

​ :active 选定的连接

注意写的时候，顺序不要颠倒，lvha, love hate

结构(位置)伪类选择器（CSS3)

目标伪类选择器(CSS3)

CSS注释

CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

例如：

p {
  font-size: 14px;                 /* 所有的字体是14像素大小*/
}

CSS外观属性

color:文本颜色

color属性用于定义文本的颜色，其取值方式有3种：

line-height:行间距

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子