HTML/CSS 第一章

[h1]前端开发人员的准备工作[/h1]

打字速度
- 练习英文打字 100字/min （正确指法）
- 安装金山打字通
- 安装有道词典
文件后缀名的设置（查看 -> 文件扩展名）
将常用的工具锁定到任务栏

[h1]WIN中的一些快捷键[/h1]

ctrl+c 复制
ctrl+v 粘贴
ctrl+x 剪切
ctrl+s 保存
ctrl+a 全选
ctrl+z 撤销上一个操作
ctrl+y 还原上一个操作
alt+f4 关闭当前程序
win+E 打开资源管理器
alt+tab 切换程序（注意整个过程中 alt是长按不放的）
win+D 切换到桌面（鼠标点击右下角）
win+R 快速运行，打开软件，cmd命令行等

calc 运行计算器mspaint 运行画图cmd 运行命令行notepad 运行记事本

复制代码

win+L 锁屏
win+方向键最大化、还原/最小化窗口
ctrl+alt+del 会显示以下选项：锁定该计算机、切换用户、注销、更改密码、启动任务管理器
f2 可以重新命名文件

[h1]今天学习目标[/h1]

认知网页和浏览器，理解web标准
熟悉编辑器（sublimeText）
其他html标签介绍
img标签（插入图片）
a标签（超链接及插入锚点）
列表

[h1]认知网页[/h1]问：前端人员的工作跟什么打交道答：网页网页的构成：由文字，图片，超链接，多媒体(音频，视频，Flash)等组成！
思考：网页是如何形成的呢？
[h1]浏览器的分类和内核[/h1]五大常见浏览器介绍：（内核做个了解）

IE （edge）（Trident）
火狐（firefox）（Gecko）
谷歌（chrome）（blink）
苹果（safari）（webkit）
欧朋（Opera）（blink 早期：presto ）浏览器的内核相当于汽车的发动机，是最核心的在,它负责将代码转换成用户眼中的界面

查看统计网站： http://tongji.baidu.com/data/browser

问：浏览器的不同，那么自然它的工作原理和解析方法也会不同，显示自然会有差别，怎么解决？

[h1]web标准[/h1]

网页的结构（后缀名字为.html的文件）
网页的样式（后缀名字为.css的文件）
网页的行为（后缀名字为.js的文件） ### 各司其职：
网页的结构：负责网页的内容整理和分类
网页的样式：负责设置网页的板式，颜色，文字大小
网页的行为：负责网页的动态交互

[h1]认知HTML[/h1]概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
说白了HTML就是用尖括号包裹起来的英文单词，浏览器对这个尖括号包裹起来的英文单词有特殊的解释

如：加粗大标题等等

复制代码

[h2]HTML骨架[/h2]HTML有固定的基本格式，就跟我们书信有基本的格式是一样的

页面的标题这里写内容

复制代码

[h2]HTML的其他介绍[/h2][h3]标签的关系[/h3]

嵌套关系

[/code][quote]并列关系
[/quote][code]

复制代码

[h3]HTML的标签分类[/h3]

双标签：如标签的内容语法：标签内容单标签：单标签都是功能性的标签，例如换行等功能里面不需要添加内容语法：

复制代码

[h1]开发工具[/h1]开发工具仅仅是一个工具，不过过度去依赖，后期到了就业班老师会更换不同的开发工具。
[h2]sublime的使用[/h2]

创建临时文件：ctrl+n 保存的时候一定记得添加文件的后缀名.html
写完标签之后按 tab键
自动生成完整版骨架的快捷方式：! => tab键或者 html:5 => tab键
显示侧边栏：查看 - 侧边栏 - 显示隐藏侧边栏将源代码文件夹拖拽进来即可
预览页面
- 右键复制文件路径打开浏览器在地址栏里面复制进去敲回车即可
- 右键直接在浏览器中打开骨架扩展：
：文档DTD 作用是告诉浏览器我们当前用的是什么html的版本
：设定字符集（后面精讲）

[h1]认知标签[/h1]

1. 标题标签标题内容设置一个标题 n的取值范围是1-6 1的权重最高，6最小2. 段落标签段落内容3. 水平线标签单标签作用是呈现一个水平线4. 换行标签单标签作用是换行字体格式化标签5. 加粗字体字体加粗字体加粗6. 倾斜字体字体倾斜字体倾斜7. 字体贯穿线字体贯穿字体贯穿8. 字体下划线字体下划线字体下划线

复制代码

[h1]标签语义化[/h1]一个需求可以用不同的标签来完成，那么这之间有什么区别呢？一个是标签语义强，起强调作用。一个是没有语义，没有强调作用语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前
SEO优化 ===> 在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。
如何优化（了解）：

1、花钱买关键字见效快，花钱多2、让页面更加规范，语义更加明确（在合适的地方使用合适的标签）3、制作静态页面4、发外链

复制代码

[h1]标签属性[/h1]在使用标签的时候，一个独立的标签比较单一不能完成一些需求这个时候就可以借助于标签的属性来完成

语法：如：

复制代码

在这里我们只需要了解语法即可后面还会学习不同的标签不同的属性
[h1]图片标签[/h1]

复制代码

图片属性

src="图片地址"
alt="图片的替换文本"
title="图片标题"
width="400" height="400"（样式属性后期可以通过css去完成）

[h1]路径（地址）难点和重点[/h1][h2]地址分类[/h2]

绝对地址：从盘符或者http://出发去找目标文件的过程就是绝对路径

[/code][quote]相对地址：从当前文件出发去找目标文件的过程就称之为相对路径
[/quote][list][*]如果当前文件和目标文件在同一个文件夹的话，路径直接写目标文件的名称即可
[*]如果当前文件和目标文件不在同一个文件夹，那么需要先找到目标文件对应的文件夹
[/list][code]上一级目录 ../下一级目录文件夹名/

复制代码

[h1]链接标签[/h1]

只要被a标签包裹就可以跳转

复制代码

[h2]跳转的分类[/h2]

1. 站外跳转：http://www.baidu.com2. 站内跳转：写本地文件路径3. 锚点跳转（页面内部跳转）：在需要跳转的标签上添加 id="自定义id名" 如：让a标签的href属性等于之前自己自定义的id名如：

复制代码

[h2]target的取值[/h2]

_self 默认值覆盖当前页面打开
_blank 新窗口打开

[h1]列表[/h1][h2]列表的分类[/h2]

无序列表

列表一列表一列表一列表一特点：列表之间没有顺序在实际工作中用的较多

复制代码

有序列表

列表一列表一列表一列表一特点：列表之间有顺序在实际工作中用的较少

复制代码

自定义列表

列表标题列表标题的解释说明列表标题的解释说明列表标题的解释说明列表标题的解释说明特点：可以针对一个列表标题充分解释特定情况下使用

复制代码

列表的注意

1. 或者中只能嵌套，直接在标签中输入其他标签或者文字的做法是不被允许的。 2. 与之间相当于一个容器，可以容纳所有元素。 3. 中只能嵌套和，直接在标签中输入其他标签或者文字的做法是不被允许的。 4. 之间相当于一个容器，可以容纳所有元素。一样

复制代码

[h1]细节补充[/h1][h2]注释标签[/h2]浏览器不解析的标签作用是用来提示开发人员或者便于开发人员理解和阅读 sublime快捷生成注释的方式选中需要注释的文本 ctrl+/ 注释的重要性：
[h2]特殊字符（字符实体）[/h2]在一些情况下，我们需要在页面上显示一些特殊的标识的时候我们就需要用到字符实体