1、HTML2.2 特殊按键和快捷键键盘上除了有字母、数字之外，还有一些特殊的按键：ctrl、shift、alt、tab ctrl键是英语control“控制”的意思，这个按键，单独按没有任何作用，都要和其他的按键一起按才有用。比如ctrl+c，表示同时按住ctrl键和c键，一会儿将知道这个功能是复制。 shift键是英语shift“换挡”的意思，按下这个按键同时击打字母，打出的就是大写字母。熟悉shift键来打大写字母，尽量少用大小写锁定键。 alt键是英语alternate“调整”的意思，和ctrl一样，自己按没啥用，都要和其他的按键一起按才有用。比如alt+f4，表示关闭当前的窗口，比如你正
2、在玩儿游戏，老板来了，可以按alt+f4快速关闭窗口。 tab键是用于table“制表符”的意思，经常实现“切换的功能”。比如我们在word软件中同时打开了两个文档，可以用ctrl+tab键，来在两个文档之间切换。 当然，可以用alt+tab键来切换程序。必须熟练掌握下面的快捷键：ctrl+c 复制ctrl+v 粘贴ctrl+x 剪切（就是移动文件，在原来的文件夹ctrl+x一个文件，然后在新文件夹中ctrl+v粘贴）ctrl+tab 切换（具体切换什么，要看是什么软件）alt+F4 关闭程序F2 重命名F5 刷新，比如看网页的时候，想刷新网页，按f5ctrl+z 撤销，就是这一步干错了，就c
3、trl+z撤销windows+E 打开资源管理器windows+D显示桌面ctrl+空格切换中英文，严禁用shift键切换，所有同学现在调整搜狗拼音输入法：认识什么是纯文本文件txttxt文件，只能保存文本内容，是无法记录文本样式的。所以，doc和txt存储同样的内容，doc比txt大纯文本文件就是这样的文件：1） 只有文本，没有样式；2） 用记事本等纯文本编辑器可读，不是乱码HTML是英语HyperText Markup Language的缩写，超文本标记语言。sublime中的常用快捷键：ctrl+滚轮放大缩小文字ctrl+shift+d复制当前行ctrl+shift+k删除当前行ctrl
4、+shift+上移当前行ctrl+shift+下移当前行注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。保存大小： UTF-8（更臃肿、加载更慢） gb2312 （更小巧，加载更快）列出2个使用情形：1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。我们亲测： qq网、网易、搜狐都
5、是使用gb2312。这些公司，都追求显示速度。 新华网藏语频道，使用的是UTF-8，保证字符集的数量。关键字和页面描述meta除了可以设置字符集，还可以设置关键字和页面描述。设置页面描述：1 只要设置的Description页面面熟，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。抽象一下：1 name就是“名字”的意思，content是“内容”的意思。也就是说，我们定义了一个名字是“Description”（描述）的meta。内容是网易是中国领先定义关键词：1 这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提
6、高搜索命中率。让别人能够找到你，搜索到你。Keywords就是“关键词”的意思。所以，一个比较完整的骨架是这样：1 2 3 4 5 6 7 Document8 9 10 11 12 第4行 ： 字符集设置第5行：关键词第6行：描述网页的head标签里面，表示的是页面的配置，有什么配置？字符集、关键词、页面描述、页面标题。今后我们还能看见一些配置：IE适配、视口、iPhone小图标等等空白折叠现象HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。代码：里面有空格、缩进、换行1 我爱234 陈伟显示的时候，折叠了：p标签段落，是英语paragraph“段落”缩写。HTML
7、标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放。h是容器级的标签。理论上里面可以放置p、ul，只是法律上的允许，在语义上，不要这么写。图片5.1 能用的图片类型页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。不能往网页中插入的图片格式是：psd、ai语法HTML页面不是直接插入图片，而是插入图片的引用
8、地址，所以也要把图片上传到服务器上。插入方法：1 img是英语image“图片”的简写src 是英语source“资源”的简写，千万不要写成scr。src是img标签的属性，baby.jpg是这个属性的值。这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。为什么？原因很简单，如果是对儿，里面就要有内容，表示给这个内容增加语义。比如图片的alt属性：1 alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。相对路径HTML中插入图片，所以现在有两个文件，一个html文件，一个是jp
9、g文件。我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。当图片在文件夹里面的时候：1 如果情况变得复杂，我们的图片在浅一层的文件夹中：1 如果是上两级：1 还可以更为复杂：1 上两级的文件夹中的images文件夹中的jiehunzhao的文件夹中的baby.jpg相对路径不会出现这种情况：1 aaa/./bbb/1.jpg./要么不写，要么就写在开头。标准答案：1 解释：现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。
10、所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。六、超级链接6.1 基本写法一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。语法：1 结婚照效果图： a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”a标签的另外两个属性title 悬停文本1 结婚照target 是否在新窗口中打
11、开target实际上是“目标”的意思。1 结婚照blank就是“空白”的意思，就表示新建一个空白窗口。为毛有一个_ ，就是规定，没啥好解释的。也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。完整的超级链接：1 链接的内容分清楚img和a标签的各自的属性：1 2 页面内的锚点页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。1 我的作品2 或者：3 我的作品那么网址：1 1.html#w
12、dzp就能够让这个锚点在页面最顶端显示，此时页面有卷动。这样子，用户体验会好一点，用户可以直接看到页面的内容。如果有一个超级链接，指向页面中的锚点，那么就是：1 点击我就查看我的作品a是一个文本级的标签比如一个段落中的所有文字都能够被点击，那么应该：p包裹a：1 2 段落段落段落段落段落段落3 a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。能够制作能被点击的图片 关键词、页面描述，这两个meta不难，尽量背诵一下：1 2 a标签常用的就是三个属性：1 超级链接文字页面内的锚点，用name属性或者id属性1 2 如果想跳转到某个锚点：1 无序列表下面的也是错误的，因
13、为ul里面只能有li标签，而不能有别的：也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。1 2 中国主要城市3 北京4 上海5 广州6 铁岭7 ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：1 2 习近平谈治国理政3 49.004 习近平谈治国理政谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以习近平同志为总书记的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当5 有序列表ordered list 有序列表，用ol表示1 2 小苹果3 月亮之上4 最炫民族风5 定
14、义列表定义列表也是一个组标签，不过比较复杂，出现了三个标签：dl表示definition list 定义列表dt表示definition title定义标题dd表示definition description 定义表述词儿dt、dd只能在dl里面；dl里面只能有dt、dd2 3 北京4 国家首都，政治文化中心5 上海6 魔都，有外滩、东方明珠塔、黄浦江7 广州8 中国南大门，有珠江、小蛮腰9 表达的语义是两层：1) 是一个列表，列出了北京、上海、广州三个项目2）每一个词儿都有自己的描述项。dd是描述dt的。 表单表单就是收集用户信息的，就是让用户填写的、选择的。5 6 欢迎注册本网站7 8 所
15、有的表单内容，都要写在form标签里面9 10 文本框1 input表示“输入”，指的是这是一个“输入小部件”，type表示“类型”，text表示“文本”，指的是类型是一个文本框的输入小部件。这是一个自封闭标签，自此，我们学习的自封闭标签有：1 2 3 value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：1 密码框1 也就是说，input标签很神奇，又是文本框，又是密码框。到底是啥？看type属性的值是什么，来决定。如果type=”text” 文本框如果type=”password” 密码框单选按钮只能选一个，术语叫做“互斥”。1 男2 女radio是“收音机”的意思，
16、input的type的值，如果是radio就是单选按钮。单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。1 男2 女默认被选择，就应该书写checked=”checked”2 复选框也是input标签，type是checkbox。 1 2 请选择你的爱好：3 睡觉4 吃饭5 足球6 篮球7 乒乓球8 打豆豆9 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）1 文本框2 密码框1 单选按钮 复选框下拉列表select就是“选择”，option“选项”。select标签和ul、ol、dl一样，都是组标签。2 3 北京4 河北
17、5 河南6 山东7 山西8 湖北9 安徽10 多行文本框（文本域）text就是“文本”，area就是“区域”。2 这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。cols属性表示columns“列”，rows属性表示rows“行”。值就是一个数，表示多少行，多少列。三种按钮按钮也是input标签，一共有三种按钮：普通按钮：1 button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。提交按钮：2 submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击，表单真的能提交。这个表单就会被提交到，form
18、标签的action属性中的那个页面中去。前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。（Node.js我们猴年要学，Node.js就是后台语言，到时候我们就知道怎么把表单存储到数据库中了。实际上Ajax课会给大家讲半天的PHP，涉及MySQL，Ajax课你就知道表单怎么真的被提交了。）重置按钮：2 reset就是“复位”的意思。现在的阶段，input的类型：2 text3 password4 radio5 checkbox6 button7 submit8 resetlabel标签本质上讲，“男”、“女”这两个汉字，和input元素没有关系
19、。2 男3 女label就是解决这个问题的。2 男3 女input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。复选框也有label：2 3 10天内免登陆 什么表单元素都有label。HTML注释Sublime中按ctrl+/ 就是注释字符实体< 就是的字符实体。© 就是 版权符号。 就是空格。HTML废弃标签介绍HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。这些样式的标签，都已经被废弃。2004年之前的东西了：1 哈哈些标签都是css钩子，而不是原意：1 加
20、粗2 下划线3 倾斜4 删除线5 强调6 强调这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。水平线：1 换行：1 不另起一个段落，进行换行。1 2 哈哈哈3 水平线：2 换行：2 不另起一个段落，进行换行。4 5 哈哈哈6 网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，不要用br是英语break打断的意思。标准的div+css页面，用的标签种类很少：1 div p h1 span a img ul ol dl input知道每个标签的特殊用法、属性。比如a标签，img的属性。HTML结构、字符集。CSScss是cascading sty
21、le sheet 层叠式样式表的简写。“层叠式”的意思我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面1 2 type表示“类型” ， text就是“纯文本”。css也是纯文本的。sublime这里如果想自动生成，那么要输入：st 然后按tab键。css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。语法：1 选择器2 k:v;3 k:v;4 k:v;5 k:v;6 7 选择器8 k:v;9 k:v;10 k:v;11 k:v;12 字符颜色：1 color
22、:red;color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制，不要着急，后几天讲。sublime中的快捷键是c，然后tab字号大小：1 font-size:40px;font就是“字体”，size就是“尺寸”。px是“像素”。单位必须加，不加不行。sublime中的快捷键是fos，然后tab1 background-color: blue;background就是“背景”。sublime中的快捷键是bgc，然后tab加粗：1 font-weight: bold;font是“字体” weight是“重量”的意思，bold粗。sublime中的快捷
23、键是fwb，然后tab不加粗：1 font-weight: normal;normal就是正常的意思sublime中的快捷键是fwn，然后tab斜体：1 font-style: italic;italic就是“斜体”sublime中的快捷键是fsi，然后tab不斜体：1 font-style: normal;sublime中的快捷键是fsn，然后tab下划线：1 text-decoration: underline;decoration就是“装饰”的意思。sublime中的快捷键是tdu，然后tab没有下划线：1 text-decoration:none;sublime中的快捷键是tdn，然后
24、tabcss没啥难的，就是要把属性给记忆准确。基础选择器标签选择器 1 前端与移动开发1期班基础班css:1 2 span3 color:red;4 5 注意的是：1） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input1 ul2 background-color: yellow;3 2） 无论这个标签藏的多深，一定能够被选择上：1 2 3 4 5 6 7 8 9 我是很深的p10 11 12 13 14 15 16 17 css：1 p2 color:blue;3 能够让很深的p变蓝。3） 选择的所有，而不是一个。标签选择器，选择的是页面上所有这种类型的标签，所以
25、经常描述“共性”，无法描述某一个元素的“个性”的7.2 id选择器1 我是段落12 我是段落23 我是段落3css：1 2 #para23 color:red;4 5 id选择器的选择符是“#”。任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：1） 只能有字母、数字、下划线2） 必须以字母开头3） 不能和标签同名。比如id不能叫做body、img、a类选择器.就是类的符号。类的英语叫做class。所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。class属性可以重复，比如，页面上可能有很多标签都有teshu
26、这个类：同一个标签，可能同时属于多个类，用空格隔开：6 我是一个h3啊这样，这个h3就同时属于teshu类，也同时属于zhongyao类。“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：6 7 .lv8 color:green;9 10 .da11 font-size: 60px;12 13 .xian14 text-decoration: underline;15 16 每个标签，就去选取自己想要的类：2 段落13 段落24 段落3也就是说：1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签
27、的样式。2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。到底用id还是用class？答案：尽可能的用class，除非极特殊的情况可以用id。原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。 css高级选择器3.1 后代选择器10 11 .div1 p12 color:red;13 14 空格就表示后代，.div1 p 就是.div1的后代所有的p。强调一下，选择的是后代，不一定是儿子。空格可以多次出现。1 .div1 .li2 p2 color:red;3 就是.
28、div1里面的后代.li2里面的p。后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。后代选择器，描述的是祖先结构。交集选择器选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。1 h3.special2 color:red;3 交集选择器没有空格。1 div.red和1 div .red不是一个意思。交集选择器可以连续交（一般不要这么写）11 h3.special.zhongyao12 color:red;13 并集选择器（分组选择器）2 h3,li3 color:red;4 用逗号就表示并集。儿子选择器IE7
29、开始兼容，IE6不兼容。2 divp3 color:red;4 div的儿子p。和div的后代p的截然不同。序选择器选择第1个li：3 4 ul li:first-child5 color:red;6 7 选择最后一个1i：3 ul li:last-child4 color:blue;5 由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：10 11 项目12 项目13 项目14 项目15 项目16 项目17 项目18 项目19 项目20 项目21 用类选择器来选择第一个或者最后一个：2 ul li.first3 color:red;4 56 ul li.las
30、t7 color:blue;8 IE7开始兼容，IE6不兼容。+表示选择下一个兄弟11 12 h3+p13 color:red;14 15 选择上的是h3元素后面紧挨着的第一个兄弟。3 我是一个标题4 我是一个段落5 我是一个段落6 我是一个段落7 我是一个标题8 我是一个段落9 我是一个段落10 我是一个段落11 我是一个标题12 我是一个段落13 我是一个段落14 我是一个段落15 我是一个标题继承性有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。哪些属性能继承？color、 text-开头的、line-开头的、font-开头的。这些关于文字样式的，都能够继承； 所有
31、关于盒子的、定位的、布局的属性都不能继承。所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：2 body3 color:gray;4 font-size:14px;5 继承性是从自己开始，直到最小的元素。层叠性层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！CSS像艺术家一样优雅，像工程师一样严谨。当选择器，选择上了某个元素的时候，那么要这么统计权重：id的数量，类的数量，标签的数量不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！如果权重一样，那么以后出现的为准：如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。权重问题大总结：1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。下列都是IE6兼容的选择器：p#box.s
