文章目录

表格
form表单
p标签和style
div
css文件
- 不同设备加载不同样式
行级标签和块级标签
- block
- float
position

表格

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body><table border="2"><tr><td colspan="2" align="center" height="30" valign="bottom" bgcolor="#6495ED"><a href="detail.html">人口排行</a></td></tr><tr><td>国家</td><td>人口</td></tr><tr><td>中国</td><td>1,395,380,000</td></tr><tr><td>印度</td><td>1,354,051,854</td></tr></table><br/><table border="2"><tr><td rowspan="3"><a href="rk:call/13333333333">人口排行</a></td><td>国家</td><td>人口</td></tr><tr><td>中国</td><td>1,395,380,000</td></tr><tr><td>印度</td><td>1,354,051,854</td></tr></table></body>
</html>

现在实现，点击第一个链接，跳转一个页面。点击第二个链接拨打电话
增加权限

 <uses-permission android:name="android.permission.CALL_PHONE"/>

MainActivity

public class MainActivity extends AppCompatActivity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);webView = findViewById(R.id.webView);webView.loadUrl("file:///android_asset/index.html");//清除缓存webView.clearCache(true);//b/s:打电话的功能在手机自带浏览器上是实现不了的//混合开发模式//指定一处客户端，不加单击超链接会用系统默认浏览器打开webView.setWebViewClient(new WebViewClient() {//每次单击超链接就会执行这个方法@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {//打印单击的超链接Log.d("webview", url);//rk:call/13333333333String tag = "rk:call/";if (url.contains(tag)) {String mobile = url.substring(tag.length());Intent intent = new Intent();intent.setAction(Intent.ACTION_DIAL);intent.setData(Uri.parse("tel://"+mobile));startActivity(intent);//超链接被我们java代码处理了，webview不用处理了return true;}return super.shouldOverrideUrlLoading(view, url);}});}
}

form表单

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title>
</head>
<body>
<form action="login.jsp" method="GET">用户名<input name="username"><br/>密码<input name="password"><br/>城市<input type="radio" name="bj" value="bj">北京<input type="radio" name="sh" value="sh">上海<br/>想买的书<input type="checkbox" name="book" value="fh">繁花<input type="checkbox" name="book" value="qw">棋王<br/><select name="city"><option value="bj">北京</option><option value="sh">上海</option></select><br/><textarea name="test" rows="10" cols="10"></textarea><input type="submit" value="登录"><input type="reset" value="重置">
</form>
</body>
</html>

p标签和style

<!doctype html>
<html lang="en">
<head>......<title>Document</title><style type="text/css">p{color:red;font-size:44px;}</style>
</head>
<body><p>欢度国庆70周年</p>
</body>
</html>

div

<!doctype html>
<html lang="en">
<head>......<style type="text/css">div{background-color:#FFB6C1;padding:10px 20px;/*上下、左右*/margin:20px 30px 40px 50px;/*上右下左*/border:solid 2px rgb(186,85,211);}.div2{background-image:url(yyqx.jpg);}</style>
</head>
<body>
<!--div是个容器-->
<div>第一个div</div>
<div class="div2">第二个div</div>
</body>
</html>

css文件

现在改造一下上边的栗子，在assets文件夹下新建main.css，文件内容就是style标签内的内容

在html中可以去掉style标签了，改为引用css文件

<link rel="stylesheet" type="text/css" href="main.css">

不同设备加载不同样式

<link rel="stylesheet" type="text/css" href="css/pc.css"/>
<link media=" screen and (min-width:480px) and (max-width:960px)" rel="stylesheet" type="text/css" href="css/pad.css"/>
<link media=" screen and (min-width:0px) and (max-width:480px)" rel="stylesheet" type="text/css" href="css/mobile.css"/>

行级标签和块级标签

<!doctype html>
<html lang="en">
<head>......<style type="text/css">div{width:100px;height:100px;background-color:#E6E6FA;}span{width:100px;height:100px;background-color:green;}</style>
</head>
<body>
<!--div p是块级标签，会自动换行-->
<div>111</div>
<div>222</div>
<!--span b i是行级标签，不会自动换行，不能设置width\height-->
<span>333</span>
<span>444</span>
中<b>中</b><i>中</i>
</body>
</html>

block

现在把span的样式中增加

span{....../**把行级标签变成块级标签**/display:block;}

<!doctype html>
<html lang="en">
<head>......<style type="text/css">.......hide{display:none;}</style>
</head>
<body>
......
<span>333</span>
<span class="hide">444</span>
中<b>中</b><i>中</i>
</body>
</html>

display:none;可以隐藏

float

<html lang="en">
<head>......<style type="text/css">/**对所有标记有效**/*{font-size:48px;}div{width:100px;height:100px;background-color:#E6E6FA;}</style>
</head>
<body>
<div>111</div>
<div>222</div>
</body>
</html>

正常情况下的div

增加float样式

<html lang="en">
<head>......<style type="text/css">/**对所有标记有效**/*{font-size:48px;}div{width:100px;height:100px;background-color:#E6E6FA;}.right{float:right;}</style>
</head>
<body>
<div class="right">111</div>
<div>222</div>
</body>
</html>

也可以通过样式达到帧布局的效果，其他代码相同，只修改div2

<div class="right">111</div>
<div style="width:100%;height:200px;background-color:#9370DB">222</div>

position

<html lang="en"><head>......<title>Document</title><style>body{margin:0;}/**只对id为chatDiv的div有效**/#chatDiv{position:absolute;font-size:48px;width:100%;height:100%;background-color:#F0F8FF;}#inputDiv{position:absolute;bottom:0px;width:100%;height:60px;background-color:#87CEFA;}#titleDiv{position:absolute;top:0px;width:100%;height:60px;background-color:#87CEFA;}#contentDiv{position:absolute;top:60px;bottom:60px;background-color:#4682B4;width:100%;overflow:auto;}</style></head><body><div id="chatDiv"><div id="titleDiv">与xx聊天</div><div id="contentDiv">聊天内容<br>11111<br>22222<br>33333<br>44444<br>55555<br>66666<br>77777<br>88888<br>99999<br>00000<br>aaaaa<br>bbbbb<br>ccccc<br>ddddd<br>eeeee<br>结束了<br></div><div id="inputDiv"><input></div></div></body>
</html>

【达内课程】H5前端开发相关推荐

前端游戏开发和h5前端开发_人们不告诉您有关前端开发的10件事
前端游戏开发和h5前端开发介绍 (Intro) Front-end development involves the building of webpages and user interfaces ...
java 菲律宾招聘_[菲律宾 -没有语言要求，汉语流利就行] 招聘： H5 前端开发工程师/ Java 开发工程师/ Python 工程师，提供住宿...
H5 前端开发工程师职位描述: 1. 参与前端架构体系的规划.设计.建设: 2. 参与前端项目架构体系的搭建: 3. 参与网站性能优化.产品体验优化.以及产品功能迭代: 4. 参与 HTML5 等前 ...
尚硅谷h5前端开发视频
尚硅谷h5前端开发视频尚硅谷h5前端开发视频尚硅谷h5前端开发视频下载地址:百度网盘
学h5前端开发前必知的三大流行趋势
随着互联网时代的飞速发展,各种互联网的Web应用程序层出不穷,很多人对于HTML5前端开发的过程充满了好奇,但是却没有了解到前端开发的未来发展趋势.下面,云慧学院专业的html5前端开发培训学校的小编 ...
写给后端开发工程师的H5前端开发知识
一.引言 web发展到目前为止已经有将近30年的历史,在web兴起的早期,并没有前端这个概念.最初所有的开发工作都是由后端开发工程师完成,随着业务越来越复杂,工作量逐渐的增加,项目中的可视化部分和一部 ...
h5前端开发常用的校验正则表达式
正则表达式非原创,引用地址:来自 www.okajax.com/a/201605/re- 前端开发中经常使用到的20个正则表达式. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用 ...
H5前端开发以及小程序开发之路
好久没写博客了,今天心血来潮.总结下.近一年的前端开发之路. 首先,用了ionic+cordova技术框架开发纯粹的混合APP(得有angular的基础知识),一个商城项目,也用了vue,编写单页面, ...
H5前端开发入门学习（基于vs+vue开发）
文章仅供初学入门,只讲学习套路,如何去学习,具体知识点不具体叙述. h5开发即无线端的web开发学习h5开发,整体了解一下各种技术与工具: 常用开发框架排名前三框架:react.js .vue.j ...
H5初体验~一个新手H5前端开发的笔记
在平凡的事物中,探寻人间的美好. 一.H5开发简介 h5是HTML5 是升级版的HTML标准 1.优势 (1)跨平台性!兼容性好,用H5搭建的站点与应用可以兼容PC端与移动端.Windows与Linu ...

【达内课程】H5前端开发