- web前端技术指的不是某一项技术，而是一系列技术集合，主要包括：
- html--结构标准：负责网页结构的搭建
- css--样式标准/表现标准：负责网页的美化工作
- js--行为标准：负责网页的行为动作
行业词条
- Internet-->互联网
- www-->万维网（资料空间）world wide web 万维网，简称www或3w
- URL-->统一资源定位器（网路地址）
- HTTP-->超文本传输协议
- w3c-->万维网联盟（他是一个组织不是某一个公司）
- 网站-->多个页面的集合（首页，内容页，列表页）
- 网页-->网页文件就是后缀名以html或者.html结尾的文件，文字，图片，超链接；
- 浏览器：观看网页最终效果的平台
浏览器（五大浏览器厂商）
- IE
- 谷歌（谷歌和苹果的内核是一样的）
- 火狐
- 苹果
- 欧朋 注：其他浏览器就是用的是别人的浏览器的技术。
Html
- 定义：超文本标记语言
- html分为四个阶段
- html2.0-->1995年由RFC组织发布
- html3.0-->w3c（官方的组织）制定一系列规范
- html4.0.1-->XHTML1.0(目前常用版本)-->XHTML相当于html的严谨版
- html5.0-->发展趋势2008年起稿，2012年推广
- html语法规范
- 标签、标记符号--<>又称尖括号
- html语言必须写在标签符号里面
- html中的标签大多数都是成对出现
- 关闭符号---/又称反斜杠
- （HBuilder）
html页面
描述当前文件的版本信息，如果没有详细说明4.0还是X1.0那就是5版本
"en">html文件
网页的头部
"UTF-8"> ---嵌套 （UTF-8国际编码的意思）如果不写，或者写成其它都会有问题
Title --网页的标题
所有自己写的html代码都放在body中
复制代码- 注意：html文档不能正常识别回车和换行，只能使用特定代码实现；标签、标记、节点、元素都是尖括号
- 代码工具推荐：dw、sublime、HBuilder、WebStorm、notepad++、editplus、
"en">
"UTF-8">
Title
我是h1标签
>
我是h2标签
>
我是h3标签
>
我是h4标签
>
我是h5标签
>
我是h6标签
我是p代表这里是文章段落
复制代码- 浏览器只认识标签，想表达的东西自能用相应的标签来表示
- 标签语义化的好处：语义化做的好，可以让搜索引擎把你的网站排名靠前
- h和p标签
- h有六个标签，从1-6依次变小
- p发文章内容
bui标签
"en">
"UTF-8">
bui标签
我是b代表加粗
-----代表换行，br按tab键
我也是加粗 可以代表强调语义化
-----代表换行，br按tab键
我是u代表下划线
-----代表换行，br按tab键
我是i代表倾斜
我是em 也是倾斜多了强调的语义
我是s 代表删除线 这种写法被渐渐淘汰
我是del 也代表删除线 这种写法是主流
复制代码img图片标签
"en">
"UTF-8">
Title
正常的图
"1.jpg" />
设置了宽高的图
"1.jpg" width="200" height="200"/>
等比例缩放：宽或高设置其中一个 另外一个就等比例缩放了
"1.jpg" width="200" />
有提示文本的---鼠标悬停的提示文字
"1.jpg" title="我是鼠标悬停才能看到的文字" />
图片没有加载出来的时候才出现的文字2.可以让网页让阅读器把alt中的文字念出来 为了视用户名的体验这是一个人
"11.jpg" alt="我是提醒文字（描述这张图片的内容 这是一张野外的小鸟站立图）" />
复制代码"图片名字" width="宽度" height="高度" alt="1、图片未加载的提示文字2、网页阅读器可以读取这里的文字" title="鼠标悬停时候的提示文字" />
注意：属性名="属性值" 属性名="属性值"；
空格不能丢，符号都要使用英文状态下，属性设置不分先后；
宽高设置其中一个，另外一个就等比例缩放；
复制代码- 相对路径
- 绝对路劲
"en">
"UTF-8">
Title
"../../1.jpg" />
"1.jpg" />
"file:///C:/Users/11839/Desktop/%E9%97%AE%E9%A2%98%E7%82%B9%E5%8F%8A%E6%80%BB%E7%BB%93/js-css-html/1.jpg />
复制代码- 链接
"en">
"UTF-8">
Title
"http://www.baidu.com">跳转到百度官网
"Img标签.html">我想跳转到Img标签
"html文章标签.html" target="_blank" >我想在新窗口打开
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
我是文字
"hahaha">1112233
"###">我不知道点击之后跳转到哪里
"javascript:">我还不知道点击之后跳转到哪里javascript
"javascript:void(0);">我不知道点击之后跳转到哪里javascript void
"#hahaha">我是想跳转到某位置
asadds
asadds
asadds
asadds
asadds
asadds
asadds
asadds
asadds
asadds
asadds
asadds
asadds
复制代码- 注意：如果要跳转到线上地址，必须加http://.本地文件直接写路劲；
- 空链接写法：1、### 2、javascript; 3、javascript:void(0);这三种都可以
- 错点链接：点击之后可以跳转到页面的对应位置，给像跳转到的位置写一个id属性，a标签中的href属性写#id的值
- 表单
- action：代表要提交给哪一个后台程序
- method： 代表传输过程中使用那种形式post(加密) get(不加密)
type="" /> input 代表输入框标签（单标签），type类型决定这个输入框的类型
Name属性代表 这个输入框的名字；
id打包输入框的id编号
Value代表默认输入框（不符合用户体验、应用换成placeholder）
注意：placeholder属性ie低版本不兼容，但是我们实际工作中还要使用，因为渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（在高版本浏览器显示效果好的前提下，保证了低版本浏览器不错乱）
1.type="text" 代表普通输入框
2.type="password" 代表密码输入框
复制代码
"en">
"UTF-8">
Title
昵称：type="text" name="hha" id="hhee" placeholder="哈哈哈呵呵" />
密码：type="password" />
复制代码- 单选按钮
- Type="radio"
- 注意：如果想让文字点击能切换，那要加label标签，并且设置for属性和对应的单选按钮的id属性值一致，必须给这一组单选按钮添加name值，才可以实现单选效果；设置默认选中状态，要给单选按钮添加checked="checked"
性别：type="radio" name="xb" id="nan" />type="radio" name="xb" id="nv"/>type="radio" name="xb" id="mi"/>
复制代码下拉菜单
- select和option的组合
- 注意：如果想设置多组下拉菜单，需要添加一个optgroup标签，并设置label属性做为提示文字；如果想设置默认选中状态，需要给对应的option添加selected属性
复制代码文本域
- Textarea标签来设置多行文本（文本域）
- 注意：不能使用cols、rows来设置宽高，要用width、height来设置，它也可以使用placeholder来设置默认提示文字
多选框（复选框）
- Type=“checkbox”
- 它的使用方法和细节与单选框一致
按钮
- 提交按钮type=“submit”注意：必须设置vulue属性，否则浏览器之间有兼容性问题
- 重置按钮type=“reset”注意：必须设置vulue属性，否则浏览器之间有兼容性问题；恢复刷新后的默认状态
- 按钮type=‘“button”或都可以
- 用户体验细节：刷新后想让第一个输入框默认选中状态，给输入框设置autofous="autofous"
你的爱好是：type="checkbox" checked="checked" id="pb" />type="checkbox" id="tg"/>type="checkbox" id="ms"/>
type="submit" value="提交" />
type="reset" >
type="button" value="按钮">
复制代码css
- 样式表、层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（文字、大小、对齐方式等）、图片的外形（宽高、边框样式、边框等）以及版本的布局等外观显示样式。
- css以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式
css基础语法
- css代码放在style标签里面，放在head标签中；大括号中写键值对语法，例子：属性名1；属性名1；属性名2；属性名2；
- color 文字颜色
- font-famliy字体
- Font-size字号
- Text-indent 首行缩进 单位是em 代表一个文字的间距
- Text-align 文本对齐方式，默认是left,还可以设置center剧中
"en">
"UTF-8">
Title
哈哈哈哈
哈哈哈
复制代码- background 背景色属性
"en">
"UTF-8">
Title
复制代码标签选择器
- 直接在css语法中写标签的名字就可以选中对应的标签
- div 代表大盒子（容器 存放内容的）
- span 代表小盒子（容器 存放内容的）
"en">
"UTF-8">
Title
我是p
我是div标签 代表大盒子（容器 存放内容的）
span 代表小盒子（容器 存放内容的）
我是p
复制代码- id选择器
"en">
"UTF-8">
Title
"p1">我是ppppPPppPPPPP
"p2">我爱hipPpPPPPPPPpPPppp
复制代码- 类选择器class
"en">
"UTF-8">
Title
"p1 shxs">11111
"p2">222222
"p1">333333
复制代码- id选择器语法：#名字 特点：不能重复，也不能一个人拥有多个
- class类选择器语法：名字 特点：可以重复使用，一个人可以有多个类名（好像是人的称号一样）
- 总结：今后class选择器使用频率高于id选择器
ps吸取颜色
- 按prtsc这个按钮，截屏幕当前状态
- 打开ps新建，ctrl+v把刚刚截取放入ps中
- 找到 点击，鼠标变为吸管，吸取想要的颜色值，复制 放在css代码中，在前面加#
"en">
"UTF-8">
Title
"logo_blue">G
"logo_juhong">o
"logo_orange">o
"logo_blue">g
"logo_green">l
"logo_juhong">e
复制代码css引入方式
- 内嵌式：
- style标签放在head中
- 优点：方便课上案例的书写：电商网站的页面必须使用这种方式，因为电商首页要求加载速度必须快，内嵌式比外链式快一些
- 缺点：html和css代码没有实现分离，不方便修改
- 外链式：
- 通过link放在head标签中，把外部的css文件引入到html文件中
- 优点：实现了代码分离，方便修改和管理；
- 缺点:运行速度比内嵌稍慢
- 行内式：
- 这种形式一定不要用，它会上代码量变得非常庞大，不方便修改
"en">
"UTF-8">
Title
我是外链式
复制代码
"en">
"UTF-8">
Title
"stylesheet" href="new.file.css">
我是外链式
p{color: red;}
复制代码
"en">
"UTF-8">
Title
"color: red;">我是行内css
复制代码- 基础选择器权重
- id>class>标签
"en">
"UTF-8">
Title
"big_div" id="big">大盒子
复制代码后代选择器
- Div span 用空格来链接，代表的意思是找到后代元素
- 注意：后代可以是儿子、儿子的儿子
并集、并列选择器
- Div，span,h1,span1,#span2
- 用逗号链接选择器，代表这些元素同时被选中
"en">
"UTF-8">
Title
我是老p家的span
我是老div家的span
复制代码
"en">
"UTF-8">
Title
我是p
我是div
我是h2
我是h3
我是h4
"span1">我是class 的span1
"span2">我是span2 有id
复制代码标签指定式、指定标签式
- div.类名
- 注意：标签和类名之间没有空格
"en">
"UTF-8">
Title
"div1">我是div1
我是div2
我是p1
"p2">我是p2
复制代码高级权重对比
- 引入方式对比
- 外链和内嵌权重相同，先写的会被后写的覆盖
- 内嵌权重最大，如果想要覆盖它，就只能给样式中添加！important来把权重提高
- 复合选择器
- id我们认为是100斤 class类名认为10斤 标签认为1斤
- 综合起来大的权重就高，如果权重一样，先写的被后写得覆盖
"en">
"UTF-8">
Title
"div1">
"span1">呵呵呵呵
复制代码高级权重对比
- 引入方式对比
- 外链式和内嵌权重相同，先写的会被后写的覆盖
- 内嵌权重最大，如果想覆盖它，就只能给样式中添加!important来把权重提高
"en">
"UTF-8">
Title
"stylesheet" href="my.css">
"color: green;">呵呵呵和合伙人
复制代码css常用属性
- font-weight 设置字体粗细的
- normal 代表不加粗
- bold 代表加粗
- font-style 设置字体倾斜
- italic 代表倾斜
- normal 代表不倾斜
- text-decoration 设置线
- none 没有线
- underline 下划线
- overline 上划线
- line-through 贯穿线（删除线）
- word-break:break-all 强制换行
- :hover 伪类写法 代表鼠标悬停状态的样式
"en">
"UTF-8">
Title
我是h1标签
我是p 我也想加粗
我是倾斜
我是h3 我也想倾斜
"###">我是默认的a
yuighjmkhhsjasjklkl;lllkmsdfghtyui;fghjkfghj
复制代码行高属性
- 一行文字的结束到上一行文字结束的间距：line-height
"en">
"UTF-8">
Title
号都是绝对误差参加哦吴佩慈完成从破产美联储麽了vcp是VS吗v怕速率浪漫旅联盟v浪费vvvkf;lvmdvmwlcmvlkvmpvl看vvv恐怕v催眠术催眠速率vkvp;vlmsc;盲从模范人物破软件给人家外婆飞机场触控屏手机方面我v率每次离开充满了
复制代码边框属性
- border:1px solid red
-
粗线 实线 颜色 复制代码 - 虚线：dashed 这样设置是四个方向相同；如果想单独设置某个方向只需要：border-left(right、top、button)
- 注意：边框属性只有实线和虚线是没有兼容性问题的，其它方式的线都会有不同程度的兼容问题，如果程序员使用了，一定要报错！
div{width:200px;height: 200px;background: pink;border: 3px solid red;
"en">
"UTF-8">
Title
复制代码div{width:200px;height: 200px;background: pink;/*border: 3px solid red;*/border-bottom: 3px solid green;border-top:5px solid blue;
border-left: 10px dotted orange;border-right:15px double olivedrab;}
复制代码css盒子模型的组成
- 宽高+边框+内边框（内容和边框的距离padding）+外边距（盒子和盒子之间的距离margin）+盒子模型的组成
div{width: 200px;height:200px;background: pink;border: 2px solid green}
div{width: 200px;height:200px;background: pink;border: 2px solid green;padding: 20px}
div{width: 200px;height:200px;background: pink;border: 2px solid green;/*padding: 20px;margin: 20px;*/padding: 10px 20px 30px 40px;}
复制代码html5中独有的标签
- header 头部
- nav 导航
- aside 侧导航
- article 文章块
- footer 底部
- 注意：这些html5新标签只能使用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在pc(电脑)端网站，因为ie低版本不识别这些新标签
psd文件
- 图片放大缩小 alt+鼠标滚轮
- 按住空格不放，拖拽鼠标可以改变图片的位置
- 英文状态下按字母t,再点击想要查看的文字，就可以在菜单栏上看到所有属性（取消选中按esc键）
- 点击查看间距，w代表宽，h代表高度
- 注意：间距可以有3像素左右的误差
- 选择第一个工具，点击自动按钮，再点击图片中的某个区域就可以在右侧的菜单中设置眼睛的开头
- 注意：要把此处设置为像素才可以
- text-align:center 居中