欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

第一篇博客关于html/css

程序员文章站 2022-05-19 21:09:22
...

html/css

  1. Html基础

    1. 环境搭建

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

    2. hello world
      编写代码 -> 运行测试 -> 交付（部署）【网站】
      1） 部署在tomcat中( 动态服务器- 慢)
      tomcat/webapps/
      hello.html
      2) 部署在静态服务器（apache/nginx）
      阿里云（ubuntu16.04）134.175.154.93
      jdk
      mysql
      apache
      /var/www/html
      tomcat

      编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
      目录管理
      d:/briup
      javaee
      eclipse
      tomcat
      maven
      workspace
      …
      webui
      html
      css
      js

    3. html结构
      超文本标记语言
      超级文本（文本,超级链接,图片，视频，音频…）
      doctype声明
      HTML5:

      HTML4:

      html主体结构



       	</head>
 	<body>
 		<!--可以显示在网页中的内容-->
 	</body>
 </html>

      xml
      标签是可以自定义的
      html
      所有的标签都是内置的

      一级标题

      语法
      html由各种元素组成，一个元素通常包含开始标签，结束标签，内容
      在开始标签中可以添加属性

       <div class="content" id="one">
 	<span>hello world</span>
 </div>

 属性
 1) 核心属性：id、title、style、class
 	绝大多数元素都具备的属性
 2) 特有属性
 	某些元素中特有的属性
 		a 		
 			href 
 			target
 		img 	
 			src 
 			width 
 			height

    4. html那些事
      Java
      编译型语言
      .java -> .class -> jvm

       隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的

 语法升级 	拉姆达
 jvm升级（解释java代码）
 效果升级 
 springboot写完代码之后如何部署
 	1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
 	2) 打包成为jar,直接运行jar(内置了tomcat)

      html
      解释型语言
      .html -> 浏览器

       网页编程标准，w3c
 h4 -> h5

 语法升级 	
 	废弃掉 strong frameset ...
 	新增		header article section...
 解释器
 	火狐，谷歌，欧朋...
 	容错性非常棒
 效果升级

    5. 标签
      学什么？
      标签含义
      如何使用标签(语义)
      默认样式重置 h1

       丰田霸道 45w左右 卤素 led ; 硬塑料 真皮; 轮毂

      1. 块级别标签
        作用：搭建网页的结构
        特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义





        div 【容器】无意义的块元素（无招胜有招）
        h1~h6 标题
        p 段落
        ul>li 【容器】列表
        ol>li 【容器】列表
        dl>dd,dt 【容器】列表

      2. 行级别标签
        作用：填充网页
        特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本

        span 无意义的行内元素
        a 超链接
        href
        target
        img 图片
        src
        alt 当图片找不到的时候的文本替代
        strong b em i sub sup d …

        hello
        百度一下

    6. 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;
      }

    7. css选择器 (jQuery选择器)

      1. 核心选择器
        用法：选择较大范围
        1. 标签（元素）选择器
          div {}
          h1 {}
        2. id选择器
          #one {}
          one
          two
        3. class选择器
          .first {}
          one
          two
          one
          two

          p

        词穷！！！
        1. 并且选择器
          div.first {}
          p#five {}
        2. 或者选择器
          div,.first {}
        3. 普遍选择器
      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 {

          }

          ::before

          one

          two

          ::after

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

    9. css布局

软件
厂子上班？软件开发、软件培训
高级技工（）- 制造（创造）
软件
使用软件 群众（使用苹果手机）
编写软件 富士康（苹果手机组装）=
编写软件编程语言 iphone公司搞苹果系统研发的人 s-c

智慧校园选课排课系统 （界面）

前端
1. 底层【打扫卫生，手动打扫卫生】
html css Javascript
模态框、提示框、表格、列表…
dom操作（使用js控制css/html）
让模态框显示
var dom = document.getElementById(“one”);
dom.style.visible = true;
2. 中层【手扶着吸尘器打扫卫生】
jsp (html js jquery)
基于dom操作，dom驱动框架
jquery、easyui(组件)
$("#one").css(“visible”,true);
3. 高层【保姆】1500平 大别墅（森林公园）3亿
移动互联（前后台分离开发）
java 写服务端语言
|
android/ios 写界面语言
H5 写界面的语言（web,混合式）（webview）
vue/angular/react 【脱离dom操作】
1. 获取数据 ajax，交互
2. 将数据绑定到页面中（vue-dom操作）
3. 当数据改变后页面更新（vue）
5. Html基础
1. 环境搭建
1) 编辑器环境
轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境（测试）
firefox
google chrome
opera
safari
ie8+ 兼容性
2. hello world
编写代码 -> 运行测试 -> 交付（部署）【网站】
1） 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/
hello.html
2) 部署在静态服务器（apache/nginx）
阿里云（ubuntu16.04）134.175.154.93
jdk
mysql
apache
/var/www/html
tomcat

	编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
	目录管理
		d:/briup
			javaee
				eclipse
				tomcat
				maven
				workspace
				...
			webui
				html
				css
				js
3. html结构
	超文本标记语言
		超级文本（文本,超级链接,图片，视频，音频...）
	doctype声明 	
		HTML5:
			<!DOCTYPE html> 
		HTML4:
			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
	html主体结构
		<html>
			<head>
				<!--源信息 -->
				<meta charset="UTF-8">

			</head>
			<body>
				<!--可以显示在网页中的内容-->
			</body>
		</html>

	xml
		标签是可以自定义的
	html
		所有的标签都是内置的
		<h1>一级标题</h1>

	语法
		html由各种元素组成，一个元素通常包含开始标签，结束标签，内容
		在开始标签中可以添加属性

		<div class="content" id="one">
			<span>hello world</span>
		</div>

		属性
		1) 核心属性：id、title、style、class
			绝大多数元素都具备的属性
		2) 特有属性
			某些元素中特有的属性
				a 		
					href 
					target
				img 	
					src 
					width 
					height
4. html那些事
	Java 
		编译型语言
		.java -> .class -> jvm

		隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的

		语法升级 	拉姆达
		jvm升级（解释java代码）
		效果升级 
		springboot写完代码之后如何部署
			1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
			2) 打包成为jar,直接运行jar(内置了tomcat)

	html
		解释型语言
		.html -> 浏览器

		网页编程标准，w3c
		h4 -> h5

		语法升级 	
			废弃掉 strong frameset ...
			新增		header article section...
		解释器
			火狐，谷歌，欧朋...
			容错性非常棒
		效果升级

5. 标签
	学什么？
		标签含义
		如何使用标签(语义)
		默认样式重置 h1

		丰田霸道 45w左右 卤素 led ; 硬塑料 真皮; 轮毂

	1) 块级别标签
		作用：搭建网页的结构
		特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
			<div>
				<ul>
					<li></li>
				</ul>
			</div>

		div 			【容器】无意义的块元素（无招胜有招）
		h1~h6 		标题
		p 				段落
		ul>li 		【容器】列表
		ol>li 		【容器】列表
		dl>dd,dt 	【容器】列表


		<div class="content">
			<div class="wrap">
				<h1 class="header"></h1>
				<div class="products">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>

	2) 行级别标签
		作用：填充网页
		特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本

		span 			无意义的行内元素
		a 				超链接
			href 
			target
		img 			图片
			src
			alt 	当图片找不到的时候的文本替代
		strong b em i sub sup d ...

		<span>hello</span>
		<a href="">百度一下</a>

6. 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;
		}
		

7. 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>
8. 规则
	字体
	网络字体（字体图标可）
	文本
	列表
	盒子
	背景
9. css布局

软件
厂子上班？软件开发、软件培训
高级技工（）- 制造（创造）
软件
使用软件 群众（使用苹果手机）
编写软件 富士康（苹果手机组装）=
编写软件编程语言 iphone公司搞苹果系统研发的人 s-c

智慧校园选课排课系统 （界面）

前端
1. 底层【打扫卫生，手动打扫卫生】
html css Javascript
模态框、提示框、表格、列表…
dom操作（使用js控制css/html）
让模态框显示
var dom = document.getElementById(“one”);
dom.style.visible = true;
2. 中层【手扶着吸尘器打扫卫生】
jsp (html js jquery)
基于dom操作，dom驱动框架
jquery、easyui(组件)
$("#one").css(“visible”,true);
3. 高层【保姆】1500平 大别墅（森林公园）3亿
移动互联（前后台分离开发）
java 写服务端语言
|
android/ios 写界面语言
H5 写界面的语言（web,混合式）（webview）
vue/angular/react 【脱离dom操作】
1. 获取数据 ajax，交互
2. 将数据绑定到页面中（vue-dom操作）
3. 当数据改变后页面更新（vue）
5. Html基础
1. 环境搭建
1) 编辑器环境
轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境（测试）
firefox
google chrome
opera
safari
ie8+ 兼容性
2. hello world
编写代码 -> 运行测试 -> 交付（部署）【网站】
1） 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/
hello.html
2) 部署在静态服务器（apache/nginx）
阿里云（ubuntu16.04）134.175.154.93
jdk
mysql
apache
/var/www/html
tomcat

	编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
	目录管理
		d:/briup
			javaee
				eclipse
				tomcat
				maven
				workspace
				...
			webui
				html
				css
				js
3. html结构
	超文本标记语言
		超级文本（文本,超级链接,图片，视频，音频...）
	doctype声明 	
		HTML5:
			<!DOCTYPE html> 
		HTML4:
			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
	html主体结构
		<html>
			<head>
				<!--源信息 -->
				<meta charset="UTF-8">

			</head>
			<body>
				<!--可以显示在网页中的内容-->
			</body>
		</html>

	xml
		标签是可以自定义的
	html
		所有的标签都是内置的
		<h1>一级标题</h1>

	语法
		html由各种元素组成，一个元素通常包含开始标签，结束标签，内容
		在开始标签中可以添加属性

		<div class="content" id="one">
			<span>hello world</span>
		</div>

		属性
		1) 核心属性：id、title、style、class
			绝大多数元素都具备的属性
		2) 特有属性
			某些元素中特有的属性
				a 		
					href 
					target
				img 	
					src 
					width 
					height
4. html那些事
	Java 
		编译型语言
		.java -> .class -> jvm

		隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的

		语法升级 	拉姆达
		jvm升级（解释java代码）
		效果升级 
		springboot写完代码之后如何部署
			1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
			2) 打包成为jar,直接运行jar(内置了tomcat)

	html
		解释型语言
		.html -> 浏览器

		网页编程标准，w3c
		h4 -> h5

		语法升级 	
			废弃掉 strong frameset ...
			新增		header article section...
		解释器
			火狐，谷歌，欧朋...
			容错性非常棒
		效果升级

5. 标签
	学什么？
		标签含义
		如何使用标签(语义)
		默认样式重置 h1

		丰田霸道 45w左右 卤素 led ; 硬塑料 真皮; 轮毂

	1) 块级别标签
		作用：搭建网页的结构
		特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
			<div>
				<ul>
					<li></li>
				</ul>
			</div>

		div 			【容器】无意义的块元素（无招胜有招）
		h1~h6 		标题
		p 				段落
		ul>li 		【容器】列表
		ol>li 		【容器】列表
		dl>dd,dt 	【容器】列表


		<div class="content">
			<div class="wrap">
				<h1 class="header"></h1>
				<div class="products">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>

	2) 行级别标签
		作用：填充网页
		特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本

		span 			无意义的行内元素
		a 				超链接
			href 
			target
		img 			图片
			src
			alt 	当图片找不到的时候的文本替代
		strong b em i sub sup d ...

		<span>hello</span>
		<a href="">百度一下</a>

6. 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;
		}
		

7. 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>
8. 规则
	字体
	网络字体（字体图标可）
	文本
	列表
	盒子
	背景
9. css布局

软件
厂子上班？软件开发、软件培训
高级技工（）- 制造（创造）
软件
使用软件 群众（使用苹果手机）
编写软件 富士康（苹果手机组装）=
编写软件编程语言 iphone公司搞苹果系统研发的人 s-c

智慧校园选课排课系统 （界面）

前端
1. 底层【打扫卫生，手动打扫卫生】
html css Javascript
模态框、提示框、表格、列表…
dom操作（使用js控制css/html）
让模态框显示
var dom = document.getElementById(“one”);
dom.style.visible = true;
2. 中层【手扶着吸尘器打扫卫生】
jsp (html js jquery)
基于dom操作，dom驱动框架
jquery、easyui(组件)
$("#one").css(“visible”,true);
3. 高层【保姆】1500平 大别墅（森林公园）3亿
移动互联（前后台分离开发）
java 写服务端语言
|
android/ios 写界面语言
H5 写界面的语言（web,混合式）（webview）
vue/angular/react 【脱离dom操作】
1. 获取数据 ajax，交互
2. 将数据绑定到页面中（vue-dom操作）
3. 当数据改变后页面更新（vue）
5. Html基础
1. 环境搭建
1) 编辑器环境
轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境（测试）
firefox
google chrome
opera
safari
ie8+ 兼容性
2. hello world
编写代码 -> 运行测试 -> 交付（部署）【网站】
1） 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/
hello.html
2) 部署在静态服务器（apache/nginx）
阿里云（ubuntu16.04）134.175.154.93
jdk
mysql
apache
/var/www/html
tomcat

	编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
	目录管理
		d:/briup
			javaee
				eclipse
				tomcat
				maven
				workspace
				...
			webui
				html
				css
				js
3. html结构
	超文本标记语言
		超级文本（文本,超级链接,图片，视频，音频...）
	doctype声明 	
		HTML5:
			<!DOCTYPE html> 
		HTML4:
			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
	html主体结构
		<html>
			<head>
				<!--源信息 -->
				<meta charset="UTF-8">

			</head>
			<body>
				<!--可以显示在网页中的内容-->
			</body>
		</html>

	xml
		标签是可以自定义的
	html
		所有的标签都是内置的
		<h1>一级标题</h1>

	语法
		html由各种元素组成，一个元素通常包含开始标签，结束标签，内容
		在开始标签中可以添加属性

		<div class="content" id="one">
			<span>hello world</span>
		</div>

		属性
		1) 核心属性：id、title、style、class
			绝大多数元素都具备的属性
		2) 特有属性
			某些元素中特有的属性
				a 		
					href 
					target
				img 	
					src 
					width 
					height
4. html那些事
	Java 
		编译型语言
		.java -> .class -> jvm

		隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的

		语法升级 	拉姆达
		jvm升级（解释java代码）
		效果升级 
		springboot写完代码之后如何部署
			1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
			2) 打包成为jar,直接运行jar(内置了tomcat)

	html
		解释型语言
		.html -> 浏览器

		网页编程标准，w3c
		h4 -> h5

		语法升级 	
			废弃掉 strong frameset ...
			新增		header article section...
		解释器
			火狐，谷歌，欧朋...
			容错性非常棒
		效果升级

5. 标签
	学什么？
		标签含义
		如何使用标签(语义)
		默认样式重置 h1

		丰田霸道 45w左右 卤素 led ; 硬塑料 真皮; 轮毂

	1) 块级别标签
		作用：搭建网页的结构
		特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
			<div>
				<ul>
					<li></li>
				</ul>
			</div>

		div 			【容器】无意义的块元素（无招胜有招）
		h1~h6 		标题
		p 				段落
		ul>li 		【容器】列表
		ol>li 		【容器】列表
		dl>dd,dt 	【容器】列表


		<div class="content">
			<div class="wrap">
				<h1 class="header"></h1>
				<div class="products">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>

	2) 行级别标签
		作用：填充网页
		特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本

		span 			无意义的行内元素
		a 				超链接
			href 
			target
		img 			图片
			src
			alt 	当图片找不到的时候的文本替代
		strong b em i sub sup d ...

		<span>hello</span>
		<a href="">百度一下</a>

6. 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;
		}
		

7. 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>
8. 规则
	字体
	网络字体（字体图标可）
	文本
	列表
	盒子
	背景
9. css布局

软件
厂子上班？软件开发、软件培训
高级技工（）- 制造（创造）
软件
使用软件 群众（使用苹果手机）
编写软件 富士康（苹果手机组装）=
编写软件编程语言 iphone公司搞苹果系统研发的人 s-c

智慧校园选课排课系统 （界面）

前端
1. 底层【打扫卫生，手动打扫卫生】
html css Javascript
模态框、提示框、表格、列表…
dom操作（使用js控制css/html）
让模态框显示
var dom = document.getElementById(“one”);
dom.style.visible = true;
2. 中层【手扶着吸尘器打扫卫生】
jsp (html js jquery)
基于dom操作，dom驱动框架
jquery、easyui(组件)
$("#one").css(“visible”,true);
3. 高层【保姆】1500平 大别墅（森林公园）3亿
移动互联（前后台分离开发）
java 写服务端语言
|
android/ios 写界面语言
H5 写界面的语言（web,混合式）（webview）
vue/angular/react 【脱离dom操作】
1. 获取数据 ajax，交互
2. 将数据绑定到页面中（vue-dom操作）
3. 当数据改变后页面更新（vue）

相关标签： html css

上一篇： 转：对比【二叉查找树、平衡二叉树、红黑树、B-/B+树】

下一篇： C++产生一定范围内不重复的随机数

推荐阅读