第一篇博客关于html/css

最新推荐文章于 2022-08-12 12:42:43 发布
最新推荐文章于 2022-08-12 12:42:43 发布
阅读量210 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42781789/article/details/105399665
版权

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、JS 和 API 制作一个很棒的天气 Web 应用程序
努力是为了站在万人之中，成为别人的光
07-25 4万+
今天我将使用 Wea​​ther 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序 ⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源 第 2 步 - 从 index.html 开始 第 3 步 - 设置索引文件的样式 第 4 步 - 获取 Weather API 和 Unsplash API 密钥 第 5 步 - 从 JavaScript 编码开始 第 6 步 - 免费托管您的网站！
【前端】面试题 html/css/js基础知识篇
Shinersmile的博客
02-06 5293
前端有关css、html,、javascript的面试知识总结。
个人博客html+css+JavaScript完整代码
05-23
个人博客，基于html+css+JavaScript的完整代码，内容全面可以直接使用。
常用HTML标签美化博文
网站开发初中级代码参考-转载
03-08 177
行百里者半九十，写博客亦是如此。 绞尽脑汁写完一篇博文未经排版就直接发到博客中，无论文章是多么的好，由于排版的问题总会让部分人敬而远之，因为排版的问题给人以距离感岂不是可惜了好文章！好文章是思想的结晶，既然花费了时间、精力让思想落实成文字，那么为什么不做好最后一步----排版？顺手把文章排排版让读者赏心悦目，岂不是锦上添花？ 使用在线的编辑器可以高效率的编辑博文，但是相对比使用HT...
博客(纯html静态)div+css
Tank03的专栏
04-14 655
      昨天老师发神经~要做个博客系统.我叻个天.要3天搞定.哎~~~无语.终于在和"蚊子"通宵的情况下,做完.哎~~~实在是很无语.       这是纯html的,没有把逻辑块打上来,在页面你看不到一点css的踪影,呵呵~~全部被我封装在css里了.div+css.       至于要jsp的,可以留言,我发上来,我没有建数据库,直接用d4+xml弄的.      第一个是jsp的.没...
html加css制作个人博客,初学HTML+CSS练习搭建个人博客笔记
weixin_33871105的博客
06-29 1221
前言工作需求初学html+css的使用，在网上看视频学着写了一个个人博客[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zRlIxPs-1589808685220)(https://img-blog.csdn.net/20171013175254065?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVhbmczNTEz...
html编写个人博客_第 06 篇：博客从“裸奔”到“有皮肤”
weixin_39746229的博客
11-30 211
作者：HelloGitHub-追梦人物文中涉及的示例代码，已同步更新到HelloGitHub-Team 仓库点击本文最下方的“阅读原文”即可获取在此之前我们已经编写了博客的首页视图，并且配置了 URL 和模板，让 django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应。不过我们仅仅在首页返回了一句话：“欢迎访问我的博客“，这是个 Hello World 级别的视图函数...
《HTML5+CSS从入门到精通》（李东博）第三章末尾博客HTML代码
12-01
《HTML5+CSS从入门到精通》（李东博）是一本旨在帮助初学者掌握这两门语言的教材，特别是对于想要构建个人博客的读者来说，第三章末尾的博客HTML代码部分尤为重要。 HTML5是超文本标记语言的最新版本，它引入了许多...
灰色极简风格html5模板下载_灰色 html5 简单 简洁 html 博客 css3.zip
02-17
这篇文档将深入探讨HTML5、CSS3以及它们在创建灰色极简风格网页模板中的应用。HTML5是现代网页设计的标准，而CSS3则为样式和布局提供了强大的工具，两者结合可以构建出美观且功能丰富的博客模板。 HTML5是HyperText...
HTML5+CSS3笔记（Xmind格式）：第一天
最新发布
08-02
它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。 - section：定义文档中的节（section、区段） - footer：定义文档或节的页脚 - datalist：标签定义选项列表。...
个人博客网站html+css源码
08-22
这是一个完整的个人博客的html源代码,稍微修改就能让自己的博客充满个性化，纯前端代码，入门级的，仅供于学习，欢迎交流
HTML+CSS
许小乖……是总攻
08-07 2593
最近接触的新词真是越来越多啦，像什么HTML、XTML、CSS、div 还有牛腩竟然是个人不是吃的，而且还是个大牛，像设计模式里的大鸟一样让人崇拜……         说说最近的学习吧，看了牛腩视频才知道SQLhelper的由来，才真正体会到它的精华，还有更简单好用的写法。牛腩视频的前17集都是在讲以前学到过的一些三层的基本知识和数据库的相关知识，同时也更多的接触了存储过程和触发器。感觉真是
《web课程设计》用HTML CSS做一个简洁、漂亮的个人博客网站
Q_365392777的博客
08-12 1045
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
【前端】HTML+CSS 纯干货 基础知识 + 面试题分享！
一个努力学习的程序猿
10-12 1341
HTML+CSS 基础知识分享 + 常见面试题
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 58万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
html+css+javascript搭建个人博客
暴力扬
01-22 3284
html+css+javascript搭建属于自己的个人博客
初学HTML+CSS练习搭建个人博客笔记
向着太阳迎着光
10-13 2万+
前言 工作需求初学html+css的使用，在网上看视频学着写了一个个人博客 在这边只是做一下自己的学习笔记记录，如果对你有帮助，你就稍微看看，如果没有请忽略！下面上html代码： Document ......
html+css实战之仿博客网页
ava_1234的博客
01-18 8112
这几天学习了一些html+css的知识，于是就动手仿博客页面做了一个静态的页面。  下面为实现的代码： blog.html: myBlog 博客 学院 下载 GitChat 论坛 问答 商城 头条 活动 码云 ITeye 写博客 发Chat 我的博客 修改个人资料 管理博客 只看
HTML+CSS静态博客
Twilight's Blog
02-02 5978
最近学习了HTML和CSS的一些简答的语法，今天写了一个简单的项目，其实也算不上什么项目，只是一个静态博客，效果图如下： 这个页面使用了所谓的HTML+CSS+div来完成，看起来比之前写的hao123要好看的多，但是其实也写起来也不是很麻烦。视频中的老师说他录这节视频只用了一个多小时的时间，而我写这个网页却写了将近一天的时间。这这是最简单的网页，很多效果都还没有用到，只是在编写这个网页的同时
用HTML+css做一份个人博客
06-08
这是我的第一篇博客，我想分享一些有关编程的经验。</p> </div> <h2><a href="#">我的第二篇博客</a></h2> 发表于 2021年5月5日</p> 这是我的第二篇博客，我想分享一些有关旅行的故事。</p> </...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值