对于html的全新认识
对于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
jshtml结构
超文本标记语言
超级文本(文本,超级链接,图片,视频,音频…)
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 targetimg 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 -> 浏览器网页编程标准,w3ch4 -> 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 targetimg 图片srcalt 当图片找不到的时候的文本替代strong b em i sub sup d ...<span>hello</span><a href="">百度一下</a>
css入门
三要素:1) html (网页骨架) 块 ,行 (table/form)2) css(页面装饰,布局,动画过渡效果)原则:对于动画效果能用css实现的绝对不用js3) 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属性的值为vselector[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-childselector:not(selector)...selector:hoverselector:activeselector:visitedselector:focus3. 伪元素过滤器可以产生出来一个虚拟元素(行内元素)以::开头的div::before {}div::after {}<div>::before<p>one</p><p>two</p>::after</div>
对于html的全新认识相关推荐
- 街篮最新服务器,《街篮》全新两组服务器开启 与你一起迎新年!
2016还剩下几个小时,2017即将到来.为了庆祝新的一年到来,<街篮>两组全新的服务器"闻鸡起舞"与"金鸡独立"正式与大家见面! 本次新服务器将在 ...
- 技嘉主板bios设置键盘不能用_BIOS不再硬梆梆、全新技嘉主板BIOS设置就算不是玩家也能轻松搞定...
最近因应AMD推出全新的X570系列主板,小杨也测试了多款各家的主板,可说是把大家都搞得手忙脚乱啊!由于每家厂商的主板都各有特色,为了让玩家们能够了解每款主板的特色和其性能表现,无不卯足全力拼文!不过 ...
- chrome登录_比Chrome还要好用?(全新edge浏览器体验)
如果要问你每天在电脑上使用最多的应用是什么? 浏览器肯定是其中的一个. 在桌面浏览器排行中chrome一骑绝尘远超对手, 不可否认chrome的强大, 因为我也一直在使用它, 它拥有丰富的扩展插件.流 ...
- steamvr unity 连接眼镜_150度FOV,自研显示方案,Kura公布全新AR眼镜Gallium
去年11月,一家名为Kura的美国AR初创公司就曝光了一款视场角135度.亮度2000nit的AR光波导原型,其视场角和亮度数据远超现有AR方案,当时获了业内广泛关注. 近期,Kura创始人兼CEO ...
- 五轴高性能服务器,GF加工方案全新的五轴高性能加工中心MILL P 500 U
GF加工方案全新的五轴高性能加工中心MILL P 500 U 是航空航天.机器设备.国防工业和机械制造企业生产高精度零件以及汽车和家用电器企业生产高精度模具的理想选择! Mikron MILL P 5 ...
- 本田da屏怎么进wince系统_弥补小型车短板,东风本田全新LIFE“来福酱”上市
"骨子里流淌着本田的纯正血统." 来源:东风本田官方 12月15日晚,东风本田全新LIFE(中文名:来福酱)正式上市.新车推出SPORT"灵动拍档"和CROSS ...
- 又拍云SSL证书全新上线,提供一站式HTTPS安全解决方案
互联网快速发展,云服务早已融入每一个人的日常生活,而互联网安全与互联网的发展息息相关,这其中涉及到信息的保密性.完整性.可用性.真实性和可控性.又拍云上线了与多家国际顶级 CA 机构合作的数款OV & ...
- bing浏览器_微软推出全新 Edge 浏览器,这 3 大特色亮点 Chrome 都没有
微软基于 Chromium 架构打造的全新一代 Edge浏览器正式版,今(1/16)于官网正式上线,适用系统平台,包括:Windows 10.Windows 7.Windows 8.1 与 macOS ...
- eBay宣布发布全新的购买和销售APIs
eBay最近宣布发布两款全新的购买和销售APIs.这些APIs旨在促进eBay产品在第三方应用程序中的更好集成.eBay于10月19日在他们的博客上发表了几篇文章,不仅详细介绍了这些全新的购买和销售A ...
- WijmoJS 2019V1正式发布:全新的在线 Demo 系统,助您快速上手,开发无忧
2019独角兽企业重金招聘Python工程师标准>>> 下载WijmoJS 2019 v1 WijmoJS是为企业应用程序开发而推出的一系列包含HTML5和JavaScript的开发 ...
最新文章
- MAC和windows开发操作系统环境,解决Maven工程中报 Missing artifact jdk.tools:jdk.tools
- 伊利诺伊大学厄巴纳-香槟分校
- 将pdf转为html,使用pdfdom将pdf转为html
- Image-to-Image Translation with conditional Adversarial Networks ---- Pix-2-Pix
- 什么是GraphQL? 普通神话被揭穿。
- rsync的介绍及参数详解,配置步骤,工作模式介绍
- heap c语言数组实现,垃圾回收算法实现之 - 分代回收(完整可运行C语言代码)...
- 学计算机和摄影哪个好,【干货】如何学习好摄影后期
- imageNamed和dataWithContentsOfFile的区别(1)
- vue可填写表格_vue表格中添加一条数据且可编辑
- sql怎么select中位数_怎么能避免写出慢SQL?
- VC2015搭建OpenCV环境(超详细教程)
- thunder链接转换普通地址下载
- 苹果关掉200m限制_苹果下载超过200兆怎么设置
- 听老罗讲这一代人的学习方法有感
- CMOS 图像传感器简介(1):像素结构
- JAVA Exception Handing
- criteo marketing api 相关
- 开启加盟模式,喜茶能否借此越过山丘?
- 一维测量助手(尺寸检测、精确定位)
热门文章
- java getenv()_Java System getenv()方法
- TensorFlow-深度学习笔记
- reac-01-下 事件类型
- 小程序源码:UI好看的王者荣耀战力查询助手-多玩法安装简单
- 【无标题】Unknown column ‘userId‘ in ‘where clause‘ 解决方法
- 四千多个厂商默认帐号、默认密码
- 冷库食品自动化穿梭式货架 电产物流高智能密集存储仓储高效货架
- lamp架构(一台主机)
- 多媒体短消息业务及其实现(转)
- Unity camera.rect 用法