前端学习笔记

最新推荐文章于 2021-11-09 18:55:10 发布

阿轲Jackson

最新推荐文章于 2021-11-09 18:55:10 发布

阅读量164

点赞数 1

文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/m0_46881781/article/details/105400211

版权

1.Html基础
环境搭建

	 1)编辑器环境
	   轻量级的编辑
	   sublime(emmet插件)
	   vscode *
	 2)浏览器环境(测试)
	   firefox 
	   google chrome
	   opera
	   safari
	   ie8+ 兼容性

2.hello world

  编写代码 -> 运行测试 -> 交付
  编写代码 -> 编译代码 -> 测试 -> 打包 (jar/war)


 目录管理
 d:/briup
   java
     eclipse
     tomcat
     maven
     workspace
     ...
   webui
     html
     css
     js

3.html结构

 doctype声明
  HTML5
   <!DOCTYPE html>

 html主体结构

4.html那些事

 Java 
   编译型语言
 html
   解释性语言

   解释器
    火狐,谷歌,欧朋 
     容错性高

5.字符编码

拓展
  1.html中声明的charset表示什么意思？
   告诉浏览器应该使用charset指定的字符编码进行解码
  2.在html中声明的viewport表示什么意思？
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   在移动设备中调整

css入门

 三要素：
 	1) html (网页骨架) 	块 ，行 （table/form）
 	2) css（页面装饰，布局，动画过渡效果）
 		原则：对于动画效果能用css实现的绝对不用js
 	3) Javascript（树莓派）
 		动态DOM, 类似于jstl
 		数据交互
 如何在html中使用css(3种方式)
 	1) 嵌入在标签内部
 			将css代码写在了html中，较为混乱
 			复用性较低

 		好处：优先级高，简单直接（修改别人代码的时候，weex rn）
 2) 集中嵌入在style标签中
 		
 3) 将css独立写在外部的css文件中，并且通过link导入进来
 	适用于企业级开发
 css语法
 	选择器 {
 		/*规则*/
 		color:#ffffff;
 		background-color:pink;
 	}

css选择器 (jQuery选择器)

 1) 核心选择器
 	用法：选择较大范围
 	1. 标签（元素）选择器
 		div {}
 		h1 {}
 	2. id选择器
 		#one {}
 		<div id="one">one</div>
 		<div id="two">two</div>
 	3. class选择器
 		.first {}
 		<div id="one" class="first">one</div>
 		<div id="two" class="first">two</div>
 		<div id="three" class="first">one</div>
 		<div id="four" class="second">two</div>
 		<p id="five" class="first">p</div>
 	词穷！！！
 	4. 并且选择器
 		div.first {}
 		p#five {}
 	5. 或者选择器
 		div,.first {}
 	6. 普遍选择器
 		* 	

 2) 层次选择器【一般不超过5层】
 	1. 子代选择器
 		.top_nav > ul > li
 		选中class为top_nav的元素的直接后代ul元素的直接后代li元素
 	2. 后代选择器
 		.top_nav li				
 	3. 下一个兄弟选择器
 		.top_nav li + *
 	4. 之后所有兄弟选择器
 		.top_nav li ~ *
 3) 过滤器
 	对已经选择到的元素进行过滤
 	1. 属性过滤器
 		selector[name]	已选择到的元素具有name属性
 		selector[name=v]	已选择到的元素具有name属性，并且name属性的值为v
 		selector[name^=v]	已选择到的元素具有name属性，并且name属性的值以'v'开头
 		selector[name$=v]	已选择到的元素具有name属性，并且name属性的值以'v'结尾
 		selector[name*=v]	已选择到的元素具有name属性，并且name属性的值中包含了'v'
 	2. 伪类过滤器
 		以:开头的
 		selector:first-child 	过滤出已选择元素中的是第一个孩子的元素
 		selector:last-child 	
 		selector:nth-child(2)
 		selector:nth-child(even)
 		selector:nth-child(odd)
 		selector:nth-child(3n+1)
 		selector:only-child
 		selector:not(selector)
 		...

 		selector:hover
 		selector:active
 		selector:visited
 		selector:focus
 	3. 伪元素过滤器
 		可以产生出来一个虚拟元素（行内元素）
 		以::开头的
 		div::before {

 		}
 		div::after {

 		}
 		<div>
 			::before
 			<p>one</p>
 			<p>two</p>
 			::after
 		</div>

规则

 	字体
 	网络字体（字体图标可）
 	文本
 	列表
 	盒子
 	背景

css布局