本文概述了前端开发的基础知识点，包括HTML的结构、CSS的样式控制、JavaScript的作用，以及Web工作原理中客户端与服务器的交互过程。重点介绍了HTML元素分类、CSS注释方法、颜色和图像标签，以及MDN社区的学习资源。
前端基础学习笔记
社区地址
看书笔记
Web特点
易导航和图形化的界面
与平台无关性
分布式结构
动态性
交互性
Web工作原理
- 客户端或浏览器发送请求
- 域名服务器解析IP地址
- 客户端的浏览器向指定的IP地址上的Web服务器发送一个HTTP请求
- 一般返回HTML文本、图片…等其他一切文件
- 如果在应用服务器 有需求，则Web服务器会将控制权转移过去，应用服务器完成操作后再将数据查询响应发送给Web服务器 最后由它返回结果到客户端的浏览器
HTML&CSS语言
超文本标记语言&标记语言
CSS语言属于浏览器解释型语言，可以直接由浏览器解释执行
JavaScript
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。一个完整的JavaScript实现是由三个不同部分组成的：核心、文档对象模型、浏览器对象模型
HTML DOM
HTML DOM是HTML文档对象模型的缩写，DOM是一种与浏览器、平台语言无关的接口，使用户可以访问页面上的其他标准组件。DOM与JavaScript结合起来实现了网页行为和结构的分离
添加注释
方法一：<!---->
方法二：<comment> </comment>
关于主网页文件命名
一般命名为index.html或者default.html
关于颜色
关于图像标签
<area>标签
该标签定义图像映射内部的区域，注意该标签元素始终嵌套在<map>标签内部
社区（MDN）学习笔记
行内元素
描述
在一般情况下，行内元素只能包含数据和其他行内元素。
格式
默认情况下，不会以新行开始。
代表元素
块级元素
描述
块级元素可以包含行内元素和其他块级元素
格式
默认情况下，块级元素会新起一行
代表元素
<address> <article> <blockquote> <dd> <dl> <form> <hn> <header> <hr> <ol> <p>
<pre> <table> <ul>
------------------------------------------------------------分割线------------------------------------------------------------
作业z3-1
<body>本身就是一个大盒子，它有外边距margin，设置值为零，就是让内容和边框占满浏览器
Div框架
认识Div
Div元素是一个块级元素
标签特性
1，没有内容，但是可以被内容撑开，还可以用css设置；
2，不设置宽度，默认铺满父级
关于网页文件cs
列表
列表是块级元素 自带宽度 宽度取决于父元素（UL）
项目符号默认disc 实心圆
列表项
<li>是一个块级元素 默认情况外边距为零 如果有三个列表项 而且不设置float:left 会造成每个列表项之间有空隙 空隙是浏览器自带的
属性inline-block
使其元素具有高度和宽度属性 又具有同行属性
作业z4-3
z-index
当元素之间重叠，z-index较大的元素会覆盖较小的元素在上层进行显示
Animation
animation: move 1s linear infinite alternate;
infinite：循环;
alternate 往返操作 比如眼珠转下来 又从下方转回去
如果没有此属性值（有infinite）则会转到下方 又从原来的地方为起点 周而复始
作业z4-4
不设置display: none 就会默认显示在two下面 因为我们要实现鼠标指向two才显示下级菜单 所以要设置display: none 然后设置一个鼠标指向two要发生的事件
|
未设置display:none |
作业z5-1
在设置动画时，每次移动的定位，top是指盒子上边的边框与父元素<div id=show>的距离
所以只有设置下底的top：180px 那个表情才不会移出去。
作业z5-2
img: hover {
opacity:0.4;
filter: alpha(opacity=40);
opacity取值0—1 1代表完全不透明
filter: alpha(opacity=0---100) 100为不透明
为什么此处写两个设置透明度的？
在于浏览器兼容性的问题
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
