对于html的全新认识
-
Html基础
-
环境搭建
- 编辑器环境
轻量级的编辑
sublime(emmet插件)
vscode * - 浏览器环境（测试）
firefox
google chrome
opera
safari
ie8+ 兼容性
- 编辑器环境
-
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 -
html结构
超文本标记语言
超级文本（文本,超级链接,图片，视频，音频…）
doctype声明
HTML5:
HTML4:
html主体结构
</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
-
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... 解释器 火狐，谷歌，欧朋... 容错性非常棒 效果升级 -
标签
学什么？ 标签含义 如何使用标签(语义) 默认样式重置 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> -
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>
3065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
